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 new file mode 100644 index 0000000000000..9455c7f3fbf23 --- /dev/null +++ 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": "elcraig@microsoft.com" +} \ No newline at end of file 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 index 7245e48541c7b..f38ec14542b0d 100644 --- 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: }, { - title: 'Simple Box with focus on custom focusable element', - code: FocusTrapZoneBoxExampleWithFocusableItemCode, - view: + title: 'Simple box with focus on custom focusable element', + code: FocusTrapZoneBoxCustomElementExampleCode, + codepenJS: FocusTrapZoneBoxCustomElementExampleCodepen, + view: }, { - title: 'Simple Box with Clicking outside Trap Zone enabled', + title: 'Simple box with clicking outside trap zone enabled', code: FocusTrapZoneBoxClickExampleCode, + codepenJS: FocusTrapZoneBoxClickExampleCodepen, view: }, { - title: 'Multiple Nest FocusTrapZones', + title: 'Multiple nested FocusTrapZones', code: FocusTrapZoneNestedExampleCode, + codepenJS: FocusTrapZoneNestedExampleCodepen, view: }, { title: 'FocusTrapZone with FocusZones', - code: FocusTrapZoneFocusZoneeExampleCode, + code: FocusTrapZoneFocusZoneExampleCode, + codepenJS: FocusTrapZoneFocusZoneExampleCodepen, view: }, { - title: 'FocusTrapZone with No Tabbable Elements', + title: 'FocusTrapZone with no tabbable elements', code: FocusTrapZoneNoTabbableExampleCode, + codepenJS: FocusTrapZoneNoTabbableExampleCodepen, view: }, { - title: 'A Dialog Nested in a Panel', + title: 'A Dialog nested in a Panel', code: FocusTrapZoneDialogInPanelExampleCode, + codepenJS: FocusTrapZoneDialogInPanelExampleCodepen, view: } ], diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx index 0b8f658a448bd..660d3c9215e2b 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx +++ b/packages/office-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, IBoxNoClickExampleExampleState> { - private _toggle: IToggle; - - constructor(props: React.HTMLAttributes) { - 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 - - - Hyperlink inside FocusTrapZone - +
+ + Hyperlink inside FocusTrapZone

, IBoxExampleExampleState> { - private _toggle: IToggle; - - constructor(props: React.HTMLAttributes) { - 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 +
- - Hyperlink inside FocusTrapZone - + Hyperlink inside FocusTrapZone

, IBoxExampleExampleState> { +export class FocusTrapZoneBoxCustomElementExample extends React.Component<{}, IFocusTrapZoneBoxCustomElementExampleState> { + public state: IFocusTrapZoneBoxCustomElementExampleState = { + isChecked: false + }; + private _toggle: IToggle; private focusClassName = 'shouldFocusInput'; - constructor(props: React.HTMLAttributes) { - super(props); - - this.state = { - isChecked: false - }; - } - public render() { const { isChecked } = this.state; diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx index b2868d08c33c4..b2b3e4080fd1b 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.DialogInPanel.Example.tsx +++ b/packages/office-ui-fabric-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/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx index 8c9ffcf5c6261..99968ba972d83 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.FocusZone.Example.tsx +++ b/packages/office-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, IBoxExampleExampleState> { +export class FocusTrapZoneFocusZoneExample extends React.Component<{}, IFocusTrapZoneFocusZoneExampleState> { private _toggle: IToggle; constructor(props: React.HTMLAttributes) { @@ -46,7 +50,7 @@ export default class BoxExample extends React.Component +
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx index ba96506234b7d..02dc661c40e09 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx @@ -1,11 +1,14 @@ 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; @@ -13,12 +16,14 @@ interface IFocusTrapComponentProps { setIsActive: (name: string, isActive: boolean) => void; } -interface IFocusTrapComponentState {} +interface IFocusTrapComponentState { + stateMap: { [key: string]: boolean }; +} class FocusTrapComponent extends React.Component { public render() { const contents = ( -
+
{ - 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 (
- - - - + + + + - + Randomize
); } - private _setIsActive = (name: string, isActive: boolean): void => { + private _setIsActive = (name: Name, isActive: boolean): void => { this.state.stateMap[name] = isActive; this.forceUpdate(); }; diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx index 809c0f6f58436..e136ebb56c1eb 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.NoTabbable.Example.tsx @@ -4,22 +4,20 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone'; 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 IFocusTrapZoneNoTabbableExampleState { isChecked: boolean; } -export default class BoxExample extends React.Component, IBoxExampleExampleState> { - private _toggle: IToggle; - - constructor(props: React.HTMLAttributes) { - super(props); +export class FocusTrapZoneNoTabbableExample extends React.Component<{}, IFocusTrapZoneNoTabbableExampleState> { + public state: IFocusTrapZoneNoTabbableExampleState = { isChecked: false }; - this.state = { - isChecked: false - }; - } + private _toggle: IToggle; public render() { const { isChecked } = this.state; @@ -46,10 +44,10 @@ export default class BoxExample extends React.Component - - - +
+ + + }, { title: 'Nesting FocusZones in list rows', code: FocusZoneListExampleCode, + codepenJS: FocusZoneListExampleCodepen, view: }, { title: 'Disabled FocusZone', code: FocusZoneDisabledExampleCode, + codepenJS: FocusZoneDisabledExampleCodepen, view: }, { title: 'Tabbable FocusZone', code: FocusZoneTabbableCode, + codepenJS: FocusZoneTabbableCodepen, view: } ], diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.scss b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.scss deleted file mode 100644 index 6becb7b58d132..0000000000000 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.scss +++ /dev/null @@ -1,11 +0,0 @@ -:global { - .ms-FocusZoneDisabledExample .ms-Row { - display: block; - margin: 5px; - } - - .ms-FocusZoneDisabledExample-textField { - display: inline-block; - width: 300px; - } -} diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx index d42336afa27b9..06dc91f8df1b7 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx @@ -3,31 +3,27 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import './FocusZone.Disabled.Example.scss'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; -export const FocusZoneDisabledExample = () => ( -
-
- +export const FocusZoneDisabledExample: React.StatelessComponent = () => ( + + + Enabled FocusZone: Button 1 Button 2 - + Button 3 - -
-
- Tabbable Element 1 -
-
- + + + Tabbable Element 1 + + Disabled FocusZone: Button 1 Button 2 - -
-
- -
-
+ + + + ); diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.scss b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.scss deleted file mode 100644 index d8e4831f222a0..0000000000000 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.scss +++ /dev/null @@ -1,5 +0,0 @@ -:global { - .ms-FocusZoneListExample .ms-DetailsRow { - display: block; - } -} diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx index 8271391058893..4a4f0dba58dfd 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx @@ -4,7 +4,6 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { Link } from 'office-ui-fabric-react/lib/Link'; import { FocusZone, FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone'; import { DetailsRow, IColumn, Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList'; -import './FocusZone.List.Example.scss'; const ITEMS = createArray(10, index => ({ key: index.toString(), @@ -35,7 +34,7 @@ const COLUMNS: IColumn[] = [ } ]; -export class FocusZoneListExample extends React.Component { +export class FocusZoneListExample extends React.PureComponent { private _selection: Selection; constructor(props: {}) { @@ -47,27 +46,23 @@ export class FocusZoneListExample extends React.Component { public render(): JSX.Element { return ( - + {ITEMS.map((item, index) => ( ))} ); } - private _isInnerZoneKeystroke(ev: React.KeyboardEvent): boolean { + private _isInnerZoneKeystroke = (ev: React.KeyboardEvent): boolean => { return ev.which === getRTLSafeKeyCode(KeyCodes.right); - } + }; } diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.scss b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.scss deleted file mode 100644 index dcd9ced87a791..0000000000000 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.scss +++ /dev/null @@ -1,33 +0,0 @@ -@import '../../../common/common'; - -:global { - .ms-FocusZoneExamples-photoList { - display: inline-block; - border: 1px solid $ms-color-neutralTertiary; - padding: 10px; - line-height: 0; - overflow: hidden; - } - - .ms-FocusZoneExamples-photoCell { - position: relative; - display: inline-block; - padding: 2px; - box-sizing: border-box; - - &:focus { - outline: none; - - &:after { - content: ''; - position: absolute; - right: 4px; - left: 4px; - top: 4px; - bottom: 4px; - border: 1px solid white; - outline: 2px solid $ms-color-themePrimary; - } - } - } -} diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx index fc61de1f8180b..d1461f5fd89ca 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx @@ -1,37 +1,69 @@ import * as React from 'react'; import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone'; import { Image } from 'office-ui-fabric-react/lib/Image'; -import './FocusZone.Photos.Example.scss'; +import { getId } from 'office-ui-fabric-react/lib/Utilities'; +import { mergeStyleSets, getTheme } from 'office-ui-fabric-react/lib/Styling'; + +const theme = getTheme(); +const classNames = mergeStyleSets({ + photoList: { + display: 'inline-block', + border: '1px solid ' + theme.palette.neutralTertiary, + padding: 10, + lineHeight: 0, + overflow: 'hidden' + }, + photoCell: { + position: 'relative', + display: 'inline-block', + padding: 2, + boxSizing: 'border-box', + selectors: { + '&:focus': { + outline: 'none', + selectors: { + '&:after': { + content: '', + position: 'absolute', + right: 4, + left: 4, + top: 4, + bottom: 4, + border: '1px solid ' + theme.palette.white, + outline: '2px solid ' + theme.palette.themePrimary + } + } + } + } + } +}); const MAX_COUNT = 20; -let _counter = 0; -export interface IPhoto { - id: number; +interface IPhoto { + id: string; url: string; width: number; height: number; } -export class FocusZonePhotosExample extends React.Component<{}, { items: IPhoto[] }> { +export class FocusZonePhotosExample extends React.PureComponent<{}> { + private _items: IPhoto[]; + constructor(props: {}) { super(props); - this.state = { - items: this._getInitialItems() - }; + this._items = this._getItems(); } public render() { - const { items } = this.state; - return ( - - {items.map((item: IPhoto, index) => ( + + {this._items.map((item: IPhoto, index) => (
  • @@ -42,25 +74,20 @@ export class FocusZonePhotosExample extends React.Component<{}, { items: IPhoto[ ); } - private _getInitialItems(): IPhoto[] { + private _getItems(): IPhoto[] { const items: IPhoto[] = []; for (let i = 0; i < MAX_COUNT; i++) { - items.push(this._createItem()); + const randomWidth = 50 + Math.floor(Math.random() * 150); + + items.push({ + id: getId('photo'), + url: `http://placehold.it/${randomWidth}x100`, + width: randomWidth, + height: 100 + }); } return items; } - - private _createItem(): IPhoto { - const randomWidth = 50 + Math.floor(Math.random() * 150); - const id = _counter++; - - return { - id, - url: `http://placehold.it/${randomWidth}x100`, - width: randomWidth, - height: 100 - }; - } } diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss deleted file mode 100644 index 5dd6ad148d8a0..0000000000000 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss +++ /dev/null @@ -1,11 +0,0 @@ -:global { - .ms-FocusZoneTabbableExample .ms-Row { - display: block; - margin: 5px; - } - - .ms-FocusZoneTabbableExample-textField { - display: inline-block; - width: 300px; - } -} diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx index b42e37dbbedae..30ec0e6c100c8 100644 --- a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx @@ -2,26 +2,26 @@ import * as React from 'react'; import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from 'office-ui-fabric-react/lib/FocusZone'; import { TextField } from 'office-ui-fabric-react/lib/TextField'; -import './FocusZone.Tabbable.Example.scss'; +import { Stack } from 'office-ui-fabric-react/lib/Stack'; const alertClicked = (): void => { alert('Clicked'); }; -export const FocusZoneTabbableExample = () => ( -
    -
    - +export const FocusZoneTabbableExample: React.StatelessComponent = () => ( + + + Circular Tabbable FocusZone: Button 1 Button 2 - + Button 3 ( ] }} /> - -
    -
    - + + + + Input Only FocusZone: Button 1 Button 2 - + Button 3 - -
    -
    + + + ); diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot index 9789a5e095892..6b06e99b85a77 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Box.Click.Example.tsx.shot @@ -120,7 +120,11 @@ exports[`Component Examples renders FocusTrapZone.Box.Click.Example.tsx correctl
    -
    +
    +
    * { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-left: 20px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } > Disabled FocusZone: @@ -848,128 +899,124 @@ exports[`Component Examples renders FocusZone.Disabled.Example.tsx correctly 1`]
    -
    - -
    + &::placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #666666; + font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + opacity: 1; + } + &:-ms-input-placeholder { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + color: #666666; + font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif; + font-size: 14px; + font-weight: 400; + opacity: 1; + } + id="TextField22" + onBlur={[Function]} + onChange={[Function]} + onFocus={[Function]} + onInput={[Function]} + type="text" + value="Tabbable Element 2" + />
    diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot index d0f2d8fc43905..c86d87722471f 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.List.Example.tsx.shot @@ -2,7 +2,7 @@ exports[`Component Examples renders FocusZone.List.Example.tsx correctly 1`] = `
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; + align-items: stretch; + display: flex; } - data-selection-toggle={true} - role="gridcell" + data-automationid="DetailsRowFields" + role="presentation" >
    -
    - -  - - -  - -
    -
    -
    -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    + right: 1px; + top: 1px; + z-index: 1; + } + ms-List-cell:first-child &:before { + display: none; + } + &:hover { + background: #f4f4f4; + } + &:hover $check { + opacity: 1; + } + data-automationid="DetailsRow" + data-focuszone-id="FocusZone25" + data-is-draggable={false} + data-is-focusable={true} + data-item-index={6} + data-selection-index={6} + draggable={false} + onFocus={[Function]} + onKeyDown={[Function]} + onMouseDownCapture={[Function]} + role="row" + style={ + Object { + "minWidth": 0, + } + } + >
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    -
    button { - max-width: 100%; - } - & [data-is-focusable='true'] { - outline: transparent; - position: relative; - } - & [data-is-focusable='true']::-moz-focus-inner { - border: 0; - } - &$shimmer { - border-bottom: 17.5px solid #ffffff; - border-left: 12px solid #ffffff; - border-right: 32px solid #ffffff; - border-top: 17.5px solid #ffffff; - padding-bottom: 0px; - padding-left: 0px; - padding-right: 0px; - padding-top: 0px; - } - &$shimmerIconPlaceholder { - border-bottom: 13px solid #ffffff; - border-right: 8px solid #ffffff; - border-top: 13px solid #ffffff; - } - data-selection-toggle={true} - role="gridcell" - > -
    -
    - -  - - -  - -
    -
    -
    * { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-top: 20px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } >
    * { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-left: 20px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } > Circular Tabbable FocusZone: @@ -249,7 +286,6 @@ exports[`Component Examples renders FocusZone.Tabbable.Example.tsx correctly 1`]
    * { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-left: 20px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } > Input Only FocusZone: @@ -995,7 +1050,6 @@ exports[`Component Examples renders FocusZone.Tabbable.Example.tsx correctly 1`]