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/FocusTrapZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts index aa24a5635ce56..c1178944cc202 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.types.ts @@ -46,7 +46,8 @@ export interface IFocusTrapZoneProps extends React.HTMLAttributes string); 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..2870ca3a9ad1b 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 @@ -1,101 +1,66 @@ import * as React from 'react'; -import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; 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 { Stack } from 'office-ui-fabric-react/lib/Stack'; -export interface IBoxNoClickExampleExampleState { - isToggled: boolean; +export interface IFocusTrapZoneBoxClickExampleState { + useTrapZone: boolean; } -export default class BoxNoClickExample extends React.Component, IBoxNoClickExampleExampleState> { - private _toggle: IToggle; +export class FocusTrapZoneBoxClickExample extends React.Component<{}, IFocusTrapZoneBoxClickExampleState> { + public state: IFocusTrapZoneBoxClickExampleState = { useTrapZone: false }; - constructor(props: React.HTMLAttributes) { - super(props); - - this.state = { - isToggled: false - }; - } + private _toggle = React.createRef(); public render() { - const { isToggled } = this.state; - return (
- - - {(() => { - if (isToggled) { - return ( - - {this._internalContents()} - - ); - } else { - return
{this._internalContents()}
; - } - })()} + {this.state.useTrapZone ? ( + + {this._internalContents()} + + ) : ( + this._internalContents() + )}
); } private _internalContents() { - const { isToggled } = this.state; + const { useTrapZone } = this.state; return ( -
- - - Hyperlink inside FocusTrapZone - -
-
+ - {(() => { - if (isToggled) { - return ( - - ); - } - })()} -
+ + Hyperlink inside trap zone + ); } - private _onButtonClickHandler = (): void => { - this.setState({ - isToggled: true + private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent, checked?: boolean): void => { + this.setState({ useTrapZone: !!checked }, () => { + // Restore focus to toggle after disabling the trap zone + // (the trap zone itself will handle initial focus when it's enabled) + if (!checked) { + this._toggle.current!.focus(); + } }); }; - - private _onExitButtonClickHandler = (): void => { - this.setState({ - isToggled: false - }); - }; - - private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent, isToggled: boolean): void => { - this.setState( - { - isToggled: isToggled - }, - () => this._toggle.focus() - ); - }; - - private _setRef = (toggle: IToggle): void => { - this._toggle = toggle; - }; } diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.scss b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.scss deleted file mode 100644 index a6cb8a8a4fd14..0000000000000 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import '../../../common/common'; -:global { - .ms-FocusTrapZoneBoxExample { - border: dashed 1px #ababab; - } - - .ms-FocusTrapComponent { - border: black 2px solid; - padding: 5px; - } -} diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx index 8778f79f7fb0c..47b62fcecf8e7 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx @@ -1,97 +1,67 @@ import * as React from 'react'; -import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; 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 { Stack } from 'office-ui-fabric-react/lib/Stack'; -export interface IBoxExampleExampleState { - isChecked: boolean; +export interface IFocusTrapZoneBoxExampleState { + useTrapZone: boolean; } -export default class BoxExample extends React.Component, IBoxExampleExampleState> { - private _toggle: IToggle; - - constructor(props: React.HTMLAttributes) { - super(props); +export class FocusTrapZoneBoxExample extends React.Component<{}, IFocusTrapZoneBoxExampleState> { + public state: IFocusTrapZoneBoxExampleState = { + useTrapZone: false + }; - this.state = { - isChecked: false - }; - } + private _toggle = React.createRef(); public render() { - const { isChecked } = this.state; - return (
- - - {(() => { - if (isChecked) { - return {this._internalContents()}; - } else { - return
{this._internalContents()}
; - } - })()} + {this.state.useTrapZone ? ( + {this._internalContents()} + ) : ( + // prettier-ignore + this._internalContents() + )}
); } private _internalContents() { - const { isChecked } = this.state; + const { useTrapZone } = this.state; return ( -
- - - Hyperlink inside FocusTrapZone - -
-
+ - {(() => { - if (isChecked) { - return ( - - ); - } - })()} -
+ + Hyperlink inside trap zone + ); } - private _onButtonClickHandler = (): void => { - this.setState({ - isChecked: true - }); - }; - - private _onExitButtonClickHandler = (): void => { - this.setState({ - isChecked: false + private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent, checked?: boolean): void => { + this.setState({ useTrapZone: !!checked }, () => { + // Restore focus to toggle after disabling the trap zone + // (the trap zone itself will handle initial focus when it's enabled) + if (!checked) { + this._toggle.current!.focus(); + } }); }; - - private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent, isChecked: boolean): void => { - this.setState( - { - isChecked: isChecked - }, - () => this._toggle.focus() - ); - }; - - private _setRef = (toggle: IToggle): void => { - this._toggle = toggle; - }; } diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx index f796fa942dc87..c558eb8731828 100644 --- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx @@ -1,103 +1,70 @@ import * as React from 'react'; -import { DefaultButton } from 'office-ui-fabric-react/lib/Button'; 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 { Stack } from 'office-ui-fabric-react/lib/Stack'; -export interface IBoxExampleExampleState { - isChecked: boolean; +export interface IFocusTrapZoneBoxCustomElementExampleState { + useTrapZone: boolean; } -export default class BoxExample extends React.Component, IBoxExampleExampleState> { - private _toggle: IToggle; - private focusClassName = 'shouldFocusInput'; +const _focusClassName = 'shouldFocusInput'; - constructor(props: React.HTMLAttributes) { - super(props); +export class FocusTrapZoneBoxCustomElementExample extends React.Component<{}, IFocusTrapZoneBoxCustomElementExampleState> { + public state: IFocusTrapZoneBoxCustomElementExampleState = { + useTrapZone: false + }; - this.state = { - isChecked: false - }; - } + private _toggle = React.createRef(); public render() { - const { isChecked } = this.state; - return (
- - {(() => { - if (isChecked) { - return {this._internalContents()}; - } else { - return
{this._internalContents()}
; - } - })()} + {this.state.useTrapZone ? ( + {this._internalContents()} + ) : ( + this._internalContents() + )}
); } private _internalContents() { - const { isChecked } = this.state; + const { useTrapZone } = this.state; return ( -
- - - Hyperlink inside FocusTrapZone + + + + + Hyperlink which will receive initial focus when trap zone is activated -
-
-
- -
- {(() => { - if (isChecked) { - return ( - - ); - } - })()} -
+ ); } - private _onButtonClickHandler = (): void => { - this.setState({ - isChecked: true - }); - }; - - private _onExitButtonClickHandler = (): void => { - this.setState({ - isChecked: false + private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent, checked?: boolean): void => { + this.setState({ useTrapZone: !!checked }, () => { + // Restore focus to toggle after disabling the trap zone + // (the trap zone itself will handle initial focus when it's enabled) + if (!checked) { + this._toggle.current!.focus(); + } }); }; - - private _onFocusTrapZoneToggleChanged = (ev: React.MouseEvent, isChecked: boolean): void => { - this.setState( - { - isChecked: isChecked - }, - () => this._toggle.focus() - ); - }; - - private _setRef = (toggle: IToggle): void => { - this._toggle = toggle; - }; } 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..c267d62079637 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,20 +10,16 @@ export interface IFocusTrapZoneDialogInPanelExampleState { showPanel: boolean; } -export default class FocusTrapDialogInPanelExample extends React.Component<{}, IFocusTrapZoneDialogInPanelExampleState> { - constructor(props: {}) { - super(props); - - this.state = { - hideDialog: true, - showPanel: false - }; - } +export class FocusTrapZoneDialogInPanelExample extends React.Component<{}, IFocusTrapZoneDialogInPanelExampleState> { + public state: IFocusTrapZoneDialogInPanelExampleState = { + hideDialog: true, + showPanel: false + }; public render() { return (
- + - +
+ +
* { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-left: 10px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } >
@@ -821,7 +941,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl margin-right: 4px; margin-top: 0; } - id="id__20" + id="id__18" > FZ2
@@ -935,7 +1055,7 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl margin-right: 4px; margin-top: 0; } - id="id__23" + id="id__21" > FZ2 @@ -943,170 +1063,6 @@ exports[`Component Examples renders FocusTrapZone.FocusZone.Example.tsx correctl -
-
- -
- - -
-
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot index 5e592abdc9b20..ae0d92b0213c8 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.Nested.Example.tsx.shot @@ -2,123 +2,148 @@ exports[`Component Examples renders FocusTrapZone.Nested.Example.tsx correctly 1`] = `
-
* { + left: 0px; + position: relative; + top: 0px; + } + &:hover { + background-color: #eaeaea; + color: #212121; + } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } + &:active { + background-color: #c8c8c8; + color: #212121; + } + data-is-focusable={true} + onClick={[Function]} + onKeyDown={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + type="button" > - +
+ +
* { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-top: 10px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } + >
- Focus Trap Zone + Enable trap zone 1
-
* { + left: 0px; + position: relative; + top: 0px; + } + &:hover { + background-color: #eaeaea; + color: #212121; + } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } + &:active { + background-color: #c8c8c8; + color: #212121; + } + data-is-focusable={true} + onClick={[Function]} + onKeyDown={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + type="button" > - +
+ +
* { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-left: 10px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } + >
-
- +
+ +
* { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-top: 10px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } + >
-
-
+
+
* { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-top: 10px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } + >
-
- -
- + +
+ +
* { + text-overflow: ellipsis; + } + & > *:not(:first-child) { + margin-top: 10px; + } + & > *:not(.ms-StackItem) { + flex-shrink: 1; + } + >
- Focus Trap Zone + Enable trap zone 5
-
- - - + `; diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot index 55d25fa5539e7..21af1f30eeb22 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusTrapZone.NoTabbable.Example.tsx.shot @@ -2,134 +2,57 @@ exports[`Component Examples renders FocusTrapZone.NoTabbable.Example.tsx correctly 1`] = `
- -
-
-
+ Use trap zone + +
-
- -
-
+ /> + +
+
+
-
- -
+ &:-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="TextField1" + onBlur={[Function]} + onChange={[Function]} + onFocus={[Function]} + onInput={[Function]} + placeholder="Not tabbable" + tabIndex={-1} + type="text" + value="" + />
+
+
-
- -
+ id="TextField3" + onBlur={[Function]} + onChange={[Function]} + onFocus={[Function]} + onInput={[Function]} + placeholder="Not tabbable" + tabIndex={-1} + type="text" + value="" + />
+
+
- -
- - + &:active, &:focus, &:hover { + outline: 0px; + } + &::-ms-clear { + display: none; + } + &::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="TextField5" + onBlur={[Function]} + onChange={[Function]} + onFocus={[Function]} + onInput={[Function]} + placeholder="Not tabbable" + tabIndex={-1} + type="text" + value="" + />
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Disabled.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Disabled.Example.tsx.shot index 1ce3891d1e13f..e11994bd6c998 100644 --- a/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Disabled.Example.tsx.shot +++ b/packages/office-ui-fabric-react/src/components/__snapshots__/FocusZone.Disabled.Example.tsx.shot @@ -2,18 +2,55 @@ exports[`Component Examples renders FocusZone.Disabled.Example.tsx correctly 1`] = `
* { + 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; + } > Enabled FocusZone: @@ -249,7 +286,6 @@ exports[`Component Examples renders FocusZone.Disabled.Example.tsx correctly 1`]
-
* { + left: 0px; + position: relative; + top: 0px; + } + &:hover { + background-color: #eaeaea; + color: #212121; + } + @media screen and (-ms-high-contrast: active){&:hover { + border-color: Highlight; + color: Highlight; + } + &:active { + background-color: #c8c8c8; + color: #212121; + } + data-is-focusable={true} + onClick={[Function]} + onKeyDown={[Function]} + onKeyPress={[Function]} + onKeyUp={[Function]} + onMouseDown={[Function]} + onMouseUp={[Function]} + type="button" > - -
+
+
* { + 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`]