FocusZone and FocusTrapZone example updates

microsoft · Mar 29, 2019 · a889f2a · a889f2a
1 parent df35977
commit a889f2a
Show file tree

Hide file tree

Showing 28 changed files with 1,216 additions and 2,776 deletions.
diff --git a/common/changes/office-ui-fabric-react/focus-examples_2019-03-27-23-27.json b/common/changes/office-ui-fabric-react/focus-examples_2019-03-27-23-27.json
@@ -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]"
+}
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.doc.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.doc.tsx
@@ -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',
@@ -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 />
     }
   ],

diff --git a/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
@@ -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;
@@ -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

diff --git a/...fice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.scss b/...fice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.scss
diff --git a/...ffice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/...ffice-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
@@ -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;
@@ -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

diff --git a/.../src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/.../src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
@@ -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;
 

diff --git a/...abric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx b/...abric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx
@@ -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';
@@ -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);
 
@@ -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 */}

diff --git a/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx b/...ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx
@@ -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>) {
@@ -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" />

diff --git a/...ce-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/...ce-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
@@ -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}
@@ -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();
   };