From 4db3cc652034af2feb0f0a0f9dc01307f60b7bd7 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 24 Apr 2018 18:58:38 -0700 Subject: [PATCH 1/3] Making the Fabric component backwards compatible. Fixing the missing export. --- .../src/components/Fabric/Fabric.styles.ts | 2 + .../src/components/Fabric/Fabric.test.tsx | 15 +++++++ .../src/components/Fabric/Fabric.tsx | 43 +++++++++++++++++-- .../src/components/Fabric/Fabric.types.ts | 1 + .../Fabric/__snapshots__/Fabric.test.tsx.snap | 30 +++++++++++++ .../src/components/Fabric/index.ts | 1 + packages/utilities/src/index.ts | 3 +- .../utilities/src/initializeFocusRects.ts | 19 ++------ packages/utilities/src/keyboard.test.ts | 9 ++++ packages/utilities/src/keyboard.ts | 20 +++++++++ 10 files changed, 123 insertions(+), 20 deletions(-) create mode 100644 packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx create mode 100644 packages/office-ui-fabric-react/src/components/Fabric/__snapshots__/Fabric.test.tsx.snap create mode 100644 packages/utilities/src/keyboard.test.ts create mode 100644 packages/utilities/src/keyboard.ts diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts index 746a7facdcbc9d..d6e533f41771fb 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.styles.ts @@ -15,11 +15,13 @@ export const getStyles = (props: IFabricStyleProps): IFabricStyles => { const { theme, className, + isFocusVisible } = props; return { root: [ 'ms-Fabric', + isFocusVisible && 'is-focusVisible', theme.fonts.medium, { color: theme.palette.neutralPrimary, diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx new file mode 100644 index 00000000000000..1b05394c6a80ac --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import * as ReactDOM from 'react-dom'; +import * as renderer from 'react-test-renderer'; +import { Fabric } from './Fabric'; + +describe('Fabric', () => { + it('renders correctly', () => { + const component = renderer.create( + test + ); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); + +}); diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx index 1998193d3c869d..70e493f17bff7d 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; import { BaseComponent, + createRef, customizable, getNativeProps, divProperties, - classNamesFunction + classNamesFunction, + getWindow, + isDirectionalKeyCode } from '../../Utilities'; import { getStyles } from './Fabric.styles'; import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types'; @@ -12,16 +15,50 @@ import { IFabricProps, IFabricStyleProps, IFabricStyles } from './Fabric.types'; const getClassNames = classNamesFunction(); @customizable('Fabric', ['theme']) -export class Fabric extends BaseComponent { +export class Fabric extends BaseComponent { + private _rootElement = createRef(); + + constructor(props: IFabricProps) { + super(props); + this.state = { isFocusVisible: false }; + } + public render() { - const classNames = getClassNames(getStyles, this.props as IFabricStyleProps); + + const classNames = getClassNames(getStyles, + { + ...this.props as IFabricStyleProps, + ...this.state + }); const divProps = getNativeProps(this.props, divProperties); return (
); } + + public componentDidMount(): void { + const win = getWindow(this._rootElement.value); + + if (win) { + this._events.on(win, 'mousedown', this._onMouseDown, true); + this._events.on(win, 'keydown', this._onKeyDown, true); + } + } + + private _onMouseDown = (ev: MouseEvent): void => { + this.setState({ isFocusVisible: false }); + } + + private _onKeyDown = (ev: KeyboardEvent): void => { + if (isDirectionalKeyCode(ev.which)) { + this.setState({ isFocusVisible: true }); + } + } } diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts index 7a521e18e5bad3..9949f90bb89a15 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.types.ts @@ -7,6 +7,7 @@ export interface IFabricProps extends React.HTMLAttributes { export interface IFabricStyleProps extends IFabricProps { theme: ITheme; + isFocusVisible: boolean; } export interface IFabricStyles { diff --git a/packages/office-ui-fabric-react/src/components/Fabric/__snapshots__/Fabric.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Fabric/__snapshots__/Fabric.test.tsx.snap new file mode 100644 index 00000000000000..12987076b58890 --- /dev/null +++ b/packages/office-ui-fabric-react/src/components/Fabric/__snapshots__/Fabric.test.tsx.snap @@ -0,0 +1,30 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Fabric renders correctly 1`] = ` +
+ test +
+`; diff --git a/packages/office-ui-fabric-react/src/components/Fabric/index.ts b/packages/office-ui-fabric-react/src/components/Fabric/index.ts index 3852b24a3fb89d..5ada46526bbabc 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/index.ts +++ b/packages/office-ui-fabric-react/src/components/Fabric/index.ts @@ -1 +1,2 @@ export * from './Fabric'; +export * from './Fabric.types'; diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts index 7a5be668bb5029..962253d3a2a665 100644 --- a/packages/utilities/src/index.ts +++ b/packages/utilities/src/index.ts @@ -31,6 +31,7 @@ export * from './hoist'; export * from './hoistStatics'; export * from './initializeFocusRects'; export * from './initials'; +export * from './keyboard'; export * from './language'; export * from './math'; export * from './memoize'; @@ -42,4 +43,4 @@ export * from './rtl'; export * from './scroll'; export * from './string'; export * from './styled'; -export * from './warn'; \ No newline at end of file +export * from './warn'; diff --git a/packages/utilities/src/initializeFocusRects.ts b/packages/utilities/src/initializeFocusRects.ts index 444a87ae8bc7d9..9a60e2df47693d 100644 --- a/packages/utilities/src/initializeFocusRects.ts +++ b/packages/utilities/src/initializeFocusRects.ts @@ -1,19 +1,7 @@ import { getWindow } from './dom'; -import { KeyCodes } from './KeyCodes'; -import { KeyboardEvent } from '../../../common/temp/node_modules/@types/react'; +import { isDirectionalKeyCode } from './keyboard'; export const IsFocusVisibleClassName = 'ms-Fabric--isFocusVisible'; -const DirectionalKeyCodes = [ - KeyCodes.up, - KeyCodes.down, - KeyCodes.left, - KeyCodes.right, - KeyCodes.home, - KeyCodes.end, - KeyCodes.tab, - KeyCodes.pageUp, - KeyCodes.pageDown -]; /** * Initializes the logic which: @@ -51,14 +39,13 @@ function _onMouseDown(ev: MouseEvent): void { } } -function _onKeyDown(ev: KeyboardEvent): void { +function _onKeyDown(ev: KeyboardEvent): void { const win = getWindow(ev.target as Element); if (win) { const { classList } = win.document.body; - const isDirectionalKeyCode = DirectionalKeyCodes.indexOf(ev.which) > -1; - if (isDirectionalKeyCode && !classList.contains(IsFocusVisibleClassName)) { + if (isDirectionalKeyCode(ev.which) && !classList.contains(IsFocusVisibleClassName)) { classList.add(IsFocusVisibleClassName); } } diff --git a/packages/utilities/src/keyboard.test.ts b/packages/utilities/src/keyboard.test.ts new file mode 100644 index 00000000000000..f0e44b1a4065c7 --- /dev/null +++ b/packages/utilities/src/keyboard.test.ts @@ -0,0 +1,9 @@ +import { isDirectionalKeyCode } from './keyboard'; +import { KeyCodes } from './KeyCodes'; + +describe('isDirectionalKeyCode', () => { + it('can return the expected value', () => { + isDirectionalKeyCode(KeyCodes.up); + isDirectionalKeyCode(KeyCodes.enter); + }); +}); \ No newline at end of file diff --git a/packages/utilities/src/keyboard.ts b/packages/utilities/src/keyboard.ts new file mode 100644 index 00000000000000..22e7552c52facc --- /dev/null +++ b/packages/utilities/src/keyboard.ts @@ -0,0 +1,20 @@ +import { KeyCodes } from './KeyCodes'; + +const DirectionalKeyCodes: { [key: number]: number } = { + [KeyCodes.up]: 1, + [KeyCodes.down]: 1, + [KeyCodes.left]: 1, + [KeyCodes.right]: 1, + [KeyCodes.home]: 1, + [KeyCodes.end]: 1, + [KeyCodes.tab]: 1, + [KeyCodes.pageUp]: 1, + [KeyCodes.pageDown]: 1 +}; + +/** + * Returns true if the keycode is a directional keyboard key. + */ +export function isDirectionalKeyCode(which: number): boolean { + return !!DirectionalKeyCodes[which]; +} From 45486b43c75d29fe1c62141b5eb9881d08fd2974 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 24 Apr 2018 19:06:16 -0700 Subject: [PATCH 2/3] Adding change files and cleanup. --- .../fix-fabric-isfocusvisible_2018-04-25-01-59.json | 11 +++++++++++ .../fix-fabric-isfocusvisible_2018-04-25-01-59.json | 11 +++++++++++ .../src/components/Fabric/Fabric.test.tsx | 1 - 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 common/changes/@uifabric/utilities/fix-fabric-isfocusvisible_2018-04-25-01-59.json create mode 100644 common/changes/office-ui-fabric-react/fix-fabric-isfocusvisible_2018-04-25-01-59.json diff --git a/common/changes/@uifabric/utilities/fix-fabric-isfocusvisible_2018-04-25-01-59.json b/common/changes/@uifabric/utilities/fix-fabric-isfocusvisible_2018-04-25-01-59.json new file mode 100644 index 00000000000000..a9d39fa272cf46 --- /dev/null +++ b/common/changes/@uifabric/utilities/fix-fabric-isfocusvisible_2018-04-25-01-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/utilities", + "comment": "Adding `isDirectionalKeyCode` helper.", + "type": "minor" + } + ], + "packageName": "@uifabric/utilities", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/fix-fabric-isfocusvisible_2018-04-25-01-59.json b/common/changes/office-ui-fabric-react/fix-fabric-isfocusvisible_2018-04-25-01-59.json new file mode 100644 index 00000000000000..485a397792895a --- /dev/null +++ b/common/changes/office-ui-fabric-react/fix-fabric-isfocusvisible_2018-04-25-01-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Fabric: the isFocusVisible class is no added to the Fabric component again, to preserve backwards compatibility. Also fixing index file to export the types.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx index 1b05394c6a80ac..5aaebd7e9c05c3 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; import * as renderer from 'react-test-renderer'; import { Fabric } from './Fabric'; From 977281fb50ab6db44d4a7eb3bfd158c171f610e8 Mon Sep 17 00:00:00 2001 From: David Zearing Date: Tue, 24 Apr 2018 19:16:38 -0700 Subject: [PATCH 3/3] Removing whitespace. --- packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx index 70e493f17bff7d..9f4a1de1b5d667 100644 --- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx +++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx @@ -26,7 +26,6 @@ export class Fabric extends BaseComponent