Skip to content

Commit

Permalink
FocusZone and FocusTrapZone example updates
Browse files Browse the repository at this point in the history
  • Loading branch information
ecraig12345 committed Mar 27, 2019
1 parent f1d7bb3 commit 4364964
Show file tree
Hide file tree
Showing 28 changed files with 1,216 additions and 2,776 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"changes": [
{
"packageName": "office-ui-fabric-react",
"comment": "FocusZone and FocusTrapZone example improvements",
"type": "patch"
}
],
"packageName": "office-ui-fabric-react",
"email": "[email protected]"
}
Original file line number Diff line number Diff line change
@@ -1,26 +1,34 @@
import * as React from 'react';
import FocusTrapZoneBoxExample from './examples/FocusTrapZone.Box.Example';

import { IDocPageProps } from '../../common/DocPage.types';

import { FocusTrapZoneBoxExample } from './examples/FocusTrapZone.Box.Example';
const FocusTrapZoneBoxExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx') as string;
const FocusTrapZoneBoxExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx') as string;

import FocusTrapZoneBoxExampleWithFocusableItem from './examples/FocusTrapZone.Box.FocusOnCustomElement.Example';
const FocusTrapZoneBoxExampleWithFocusableItemCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx') as string;
import { FocusTrapZoneBoxCustomElementExample } from './examples/FocusTrapZone.Box.FocusOnCustomElement.Example';
const FocusTrapZoneBoxCustomElementExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx') as string;
const FocusTrapZoneBoxCustomElementExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx') as string;

import FocusTrapZoneBoxClickExample from './examples/FocusTrapZone.Box.Click.Example';
import { FocusTrapZoneBoxClickExample } from './examples/FocusTrapZone.Box.Click.Example';
const FocusTrapZoneBoxClickExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx') as string;
const FocusTrapZoneBoxClickExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx') as string;

import FocusTrapZoneNestedExample from './examples/FocusTrapZone.Nested.Example';
import { FocusTrapZoneNestedExample } from './examples/FocusTrapZone.Nested.Example';
const FocusTrapZoneNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx') as string;
const FocusTrapZoneNestedExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx') as string;

import FocusTrapZoneNoTabbableExample from './examples/FocusTrapZone.NoTabbable.Example';
import { FocusTrapZoneNoTabbableExample } from './examples/FocusTrapZone.NoTabbable.Example';
const FocusTrapZoneNoTabbableExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx') as string;
const FocusTrapZoneNoTabbableExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx') as string;

import FocusTrapZoneFocusZoneExample from './examples/FocusTrapZone.FocusZone.Example';
const FocusTrapZoneFocusZoneeExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx') as string;
import { FocusTrapZoneFocusZoneExample } from './examples/FocusTrapZone.FocusZone.Example';
const FocusTrapZoneFocusZoneExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx') as string;
const FocusTrapZoneFocusZoneExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx') as string;

import FocusTrapZoneDialogInPanelExample from './examples/FocusTrapZone.DialogInPanel.Example';
import { FocusTrapZoneDialogInPanelExample } from './examples/FocusTrapZone.DialogInPanel.Example';
const FocusTrapZoneDialogInPanelExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx') as string;
const FocusTrapZoneDialogInPanelExampleCodepen = require('!@uifabric/codepen-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx') as string;

export const FocusTrapZonePageProps: IDocPageProps = {
title: 'FocusTrapZone',
Expand All @@ -29,38 +37,45 @@ export const FocusTrapZonePageProps: IDocPageProps = {
'https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/office-ui-fabric-react/src/components/FocusTrapZone',
examples: [
{
title: 'Simple Box',
title: 'Simple box',
code: FocusTrapZoneBoxExampleCode,
codepenJS: FocusTrapZoneBoxExampleCodepen,
view: <FocusTrapZoneBoxExample />
},
{
title: 'Simple Box with focus on custom focusable element',
code: FocusTrapZoneBoxExampleWithFocusableItemCode,
view: <FocusTrapZoneBoxExampleWithFocusableItem />
title: 'Simple box with focus on custom focusable element',
code: FocusTrapZoneBoxCustomElementExampleCode,
codepenJS: FocusTrapZoneBoxCustomElementExampleCodepen,
view: <FocusTrapZoneBoxCustomElementExample />
},
{
title: 'Simple Box with Clicking outside Trap Zone enabled',
title: 'Simple box with clicking outside trap zone enabled',
code: FocusTrapZoneBoxClickExampleCode,
codepenJS: FocusTrapZoneBoxClickExampleCodepen,
view: <FocusTrapZoneBoxClickExample />
},
{
title: 'Multiple Nest FocusTrapZones',
title: 'Multiple nested FocusTrapZones',
code: FocusTrapZoneNestedExampleCode,
codepenJS: FocusTrapZoneNestedExampleCodepen,
view: <FocusTrapZoneNestedExample />
},
{
title: 'FocusTrapZone with FocusZones',
code: FocusTrapZoneFocusZoneeExampleCode,
code: FocusTrapZoneFocusZoneExampleCode,
codepenJS: FocusTrapZoneFocusZoneExampleCodepen,
view: <FocusTrapZoneFocusZoneExample />
},
{
title: 'FocusTrapZone with No Tabbable Elements',
title: 'FocusTrapZone with no tabbable elements',
code: FocusTrapZoneNoTabbableExampleCode,
codepenJS: FocusTrapZoneNoTabbableExampleCodepen,
view: <FocusTrapZoneNoTabbableExample />
},
{
title: 'A Dialog Nested in a Panel',
title: 'A Dialog nested in a Panel',
code: FocusTrapZoneDialogInPanelExampleCode,
codepenJS: FocusTrapZoneDialogInPanelExampleCodepen,
view: <FocusTrapZoneDialogInPanelExample />
}
],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@ import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
import './FocusTrapZone.Box.Example.scss';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

export interface IBoxNoClickExampleExampleState {
const contentClass = mergeStyles({
border: '1px dashed #ababab'
});

export interface IFocusTrapZoneBoxClickExampleState {
isToggled: boolean;
}

export default class BoxNoClickExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxNoClickExampleExampleState> {
private _toggle: IToggle;

constructor(props: React.HTMLAttributes<HTMLDivElement>) {
super(props);
export class FocusTrapZoneBoxClickExample extends React.Component<{}, IFocusTrapZoneBoxClickExampleState> {
public state: IFocusTrapZoneBoxClickExampleState = {
isToggled: false
};

this.state = {
isToggled: false
};
}
private _toggle: IToggle;

public render() {
const { isToggled } = this.state;
Expand Down Expand Up @@ -48,11 +48,9 @@ export default class BoxNoClickExample extends React.Component<React.HTMLAttribu
const { isToggled } = this.state;

return (
<div className="ms-FocusTrapZoneBoxExample">
<TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" className="" />
<Link href="" className="">
Hyperlink inside FocusTrapZone
</Link>
<div className={contentClass}>
<TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" />
<Link href="">Hyperlink inside FocusTrapZone</Link>
<br />
<br />
<Toggle
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@ import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
import { Link } from 'office-ui-fabric-react/lib/Link';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
import './FocusTrapZone.Box.Example.scss';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

export interface IBoxExampleExampleState {
const contentClass = mergeStyles({
border: '1px dashed #ababab'
});

export interface IFocusTrapZoneBoxExampleState {
isChecked: boolean;
}

export default class BoxExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxExampleExampleState> {
private _toggle: IToggle;

constructor(props: React.HTMLAttributes<HTMLDivElement>) {
super(props);
export class FocusTrapZoneBoxExample extends React.Component<{}, IFocusTrapZoneBoxExampleState> {
public state: IFocusTrapZoneBoxExampleState = {
isChecked: false
};

this.state = {
isChecked: false
};
}
private _toggle: IToggle;

public render() {
const { isChecked } = this.state;
Expand All @@ -44,11 +44,9 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
const { isChecked } = this.state;

return (
<div className="ms-FocusTrapZoneBoxExample">
<div className={contentClass}>
<TextField label="Default TextField" placeholder="Input inside Focus Trap Zone" className="" />
<Link href="" className="">
Hyperlink inside FocusTrapZone
</Link>
<Link href="">Hyperlink inside FocusTrapZone</Link>
<br />
<br />
<Toggle
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,18 @@ import { Link } from 'office-ui-fabric-react/lib/Link';
import { TextField } from 'office-ui-fabric-react/lib/TextField';
import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';

export interface IBoxExampleExampleState {
export interface IFocusTrapZoneBoxCustomElementExampleState {
isChecked: boolean;
}

export default class BoxExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxExampleExampleState> {
export class FocusTrapZoneBoxCustomElementExample extends React.Component<{}, IFocusTrapZoneBoxCustomElementExampleState> {
public state: IFocusTrapZoneBoxCustomElementExampleState = {
isChecked: false
};

private _toggle: IToggle;
private focusClassName = 'shouldFocusInput';

constructor(props: React.HTMLAttributes<HTMLDivElement>) {
super(props);

this.state = {
isChecked: false
};
}

public render() {
const { isChecked } = this.state;

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import * as React from 'react';

/* tslint:disable:no-string-literal */

import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { Dialog, DialogType, DialogFooter } from 'office-ui-fabric-react/lib/Dialog';
import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
Expand All @@ -12,7 +10,7 @@ export interface IFocusTrapZoneDialogInPanelExampleState {
showPanel: boolean;
}

export default class FocusTrapDialogInPanelExample extends React.Component<{}, IFocusTrapZoneDialogInPanelExampleState> {
export class FocusTrapZoneDialogInPanelExample extends React.Component<{}, IFocusTrapZoneDialogInPanelExampleState> {
constructor(props: {}) {
super(props);

Expand Down Expand Up @@ -47,7 +45,7 @@ export default class FocusTrapDialogInPanelExample extends React.Component<{}, I
titleAriaId: 'myLabelId',
subtitleAriaId: 'mySubTextId',
isBlocking: false,
containerClassName: 'ms-dialogMainOverride'
styles: { main: { maxWidth: 450 } }
}}
>
{null /** You can also include null values as the result of conditionals */}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
import { Toggle, IToggle } from 'office-ui-fabric-react/lib/Toggle';
import './FocusTrapZone.Box.Example.scss';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

export interface IBoxExampleExampleState {
const contentClass = mergeStyles({
border: '1px dashed #ababab'
});

export interface IFocusTrapZoneFocusZoneExampleState {
isChecked: boolean;
}

export default class BoxExample extends React.Component<React.HTMLAttributes<HTMLDivElement>, IBoxExampleExampleState> {
export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTrapZoneFocusZoneExampleState> {
private _toggle: IToggle;

constructor(props: React.HTMLAttributes<HTMLDivElement>) {
Expand Down Expand Up @@ -46,7 +50,7 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
const { isChecked } = this.state;

return (
<div className="ms-FocusTrapZoneBoxExample">
<div className={contentClass}>
<FocusZone direction={FocusZoneDirection.horizontal} data-is-visible={true}>
<DefaultButton text="FZ1" />
<DefaultButton text="FZ1" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,24 +1,29 @@
import * as React from 'react';

/* tslint:disable:no-string-literal */

import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
import './FocusTrapZone.Box.Example.scss';
import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';

const contentClass = mergeStyles({
border: '2px solid black',
padding: 5
});

interface IFocusTrapComponentProps {
name: string;
isActive: boolean;
setIsActive: (name: string, isActive: boolean) => void;
}

interface IFocusTrapComponentState {}
interface IFocusTrapComponentState {
stateMap: { [key: string]: boolean };
}

class FocusTrapComponent extends React.Component<IFocusTrapComponentProps, IFocusTrapComponentState> {
public render() {
const contents = (
<div className="ms-FocusTrapComponent">
<div className={contentClass}>
<DefaultButton onClick={this._onStringButtonClicked} text={this.props.name} />
<Toggle
defaultChecked={this.props.isActive}
Expand Down Expand Up @@ -47,40 +52,33 @@ class FocusTrapComponent extends React.Component<IFocusTrapComponentProps, IFocu
}

export interface IFocusTrapZoneNestedExampleState {
stateMap: {
[key: string]: boolean;
};
stateMap: { One?: boolean; Two?: boolean; Three?: boolean; Four?: boolean; Five?: boolean };
}

const NAMES: string[] = ['One', 'Two', 'Three', 'Four', 'Five'];

export default class FocusTrapZoneNestedExample extends React.Component<{}, IFocusTrapZoneNestedExampleState> {
constructor(props: {}) {
super(props);
type Name = keyof IFocusTrapZoneNestedExampleState['stateMap'];
const NAMES: Name[] = ['One', 'Two', 'Three', 'Four', 'Five'];

this.state = {
stateMap: {}
};
}
export class FocusTrapZoneNestedExample extends React.Component<{}, IFocusTrapZoneNestedExampleState> {
public state: IFocusTrapZoneNestedExampleState = { stateMap: {} };

public render() {
const { stateMap } = this.state;

return (
<div>
<FocusTrapComponent name={'One'} isActive={!!stateMap['One']} setIsActive={this._setIsActive}>
<FocusTrapComponent name={'Two'} isActive={!!stateMap['Two']} setIsActive={this._setIsActive}>
<FocusTrapComponent name={'Three'} isActive={!!stateMap['Three']} setIsActive={this._setIsActive} />
<FocusTrapComponent name={'Four'} isActive={!!stateMap['Four']} setIsActive={this._setIsActive} />
<FocusTrapComponent name="One" isActive={!!stateMap.One} setIsActive={this._setIsActive}>
<FocusTrapComponent name="Two" isActive={!!stateMap.Two} setIsActive={this._setIsActive}>
<FocusTrapComponent name="Three" isActive={!!stateMap.Three} setIsActive={this._setIsActive} />
<FocusTrapComponent name="Four" isActive={!!stateMap.Four} setIsActive={this._setIsActive} />
</FocusTrapComponent>
<FocusTrapComponent name={'Five'} isActive={!!stateMap['Five']} setIsActive={this._setIsActive} />
<FocusTrapComponent name="Five" isActive={!!stateMap.Five} setIsActive={this._setIsActive} />
</FocusTrapComponent>
<DefaultButton onClick={this._randomize}>Randomize</DefaultButton>
</div>
);
}

private _setIsActive = (name: string, isActive: boolean): void => {
private _setIsActive = (name: Name, isActive: boolean): void => {
this.state.stateMap[name] = isActive;
this.forceUpdate();
};
Expand Down
Loading

0 comments on commit 4364964

Please sign in to comment.