From 6ba2f297382478c5ac931fe50c10fbe7c1724452 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 1 May 2018 00:21:28 +0200 Subject: [PATCH] [ButtonBase] Complete the focusVisible rename (#11188) --- .../flow-typed/npm/material-ui_v1.x.x.js | 8 +++--- .../src/ButtonBase/ButtonBase.d.ts | 2 +- .../material-ui/src/ButtonBase/ButtonBase.js | 28 +++++++++---------- .../src/ButtonBase/ButtonBase.test.js | 22 +++++++-------- .../ExpansionPanel/ExpansionPanelSummary.js | 2 +- .../{keyboardFocus.d.ts => focusVisible.d.ts} | 8 +++--- .../{keyboardFocus.js => focusVisible.js} | 16 +++++------ pages/api/button-base.md | 2 +- 8 files changed, 44 insertions(+), 44 deletions(-) rename packages/material-ui/src/utils/{keyboardFocus.d.ts => focusVisible.d.ts} (58%) rename packages/material-ui/src/utils/{keyboardFocus.js => focusVisible.js} (71%) diff --git a/examples/create-react-app-with-flow/flow-typed/npm/material-ui_v1.x.x.js b/examples/create-react-app-with-flow/flow-typed/npm/material-ui_v1.x.x.js index 1bdbb9f041bf5d..3a9c459d798ef5 100644 --- a/examples/create-react-app-with-flow/flow-typed/npm/material-ui_v1.x.x.js +++ b/examples/create-react-app-with-flow/flow-typed/npm/material-ui_v1.x.x.js @@ -121,7 +121,7 @@ declare module "material-ui/ButtonBase/ButtonBase" { disableRipple?: boolean, disabled?: boolean, focusRipple?: boolean, - keyboardFocusedClassName?: string, + focusVisibleedClassName?: string, onBlur?: Function, onClick?: Function, onFocus?: Function, @@ -2281,7 +2281,7 @@ declare module "material-ui/utils/helpers" { }; } -declare module "material-ui/utils/keyboardFocus" { +declare module "material-ui/utils/focusVisible" { declare module.exports: { focusKeyPressed: Function, detectKeyboardFocus: Function, @@ -2962,8 +2962,8 @@ declare module "material-ui/utils/exactProp.js" { declare module "material-ui/utils/helpers.js" { declare module.exports: $Exports<"material-ui/utils/helpers">; } -declare module "material-ui/utils/keyboardFocus.js" { - declare module.exports: $Exports<"material-ui/utils/keyboardFocus">; +declare module "material-ui/utils/focusVisible.js" { + declare module.exports: $Exports<"material-ui/utils/focusVisible">; } declare module "material-ui/utils/manageAriaHidden.js" { declare module.exports: $Exports<"material-ui/utils/manageAriaHidden">; diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.d.ts b/packages/material-ui/src/ButtonBase/ButtonBase.d.ts index 5d3af4a6995352..884d1a1fb753a9 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.d.ts +++ b/packages/material-ui/src/ButtonBase/ButtonBase.d.ts @@ -13,7 +13,7 @@ export interface ButtonBaseProps disableRipple?: boolean; focusRipple?: boolean; focusVisibleClassName?: string; - onKeyboardFocus?: React.FocusEventHandler; + onFocusVisible?: React.FocusEventHandler; TouchRippleProps?: Partial; } diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js index e8d127d1ddc906..b66af25945c852 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.js @@ -6,7 +6,7 @@ import keycode from 'keycode'; import { polyfill } from 'react-lifecycles-compat'; import ownerWindow from '../utils/ownerWindow'; import withStyles from '../styles/withStyles'; -import { listenForFocusKeys, detectKeyboardFocus } from '../utils/keyboardFocus'; +import { listenForFocusKeys, detectFocusVisible } from '../utils/focusVisible'; import TouchRipple from './TouchRipple'; import createRippleHandler from './createRippleHandler'; @@ -92,15 +92,15 @@ class ButtonBase extends React.Component { componentWillUnmount() { this.button = null; - clearTimeout(this.keyboardFocusTimeout); + clearTimeout(this.focusVisibleTimeout); } - onKeyboardFocusHandler = event => { + onFocusVisibleHandler = event => { this.keyDown = false; this.setState({ focusVisible: true }); - if (this.props.onKeyboardFocus) { - this.props.onKeyboardFocus(event); + if (this.props.onFocusVisible) { + this.props.onFocusVisible(event); } }; @@ -111,9 +111,9 @@ class ButtonBase extends React.Component { ripple = null; keyDown = false; // Used to help track keyboard activation keyDown button = null; - keyboardFocusTimeout = null; - keyboardFocusCheckTime = 50; - keyboardFocusMaxCheckTimes = 5; + focusVisibleTimeout = null; + focusVisibleCheckTime = 50; + focusVisibleMaxCheckTimes = 5; handleKeyDown = event => { const { component, focusRipple, onKeyDown, onClick } = this.props; @@ -163,7 +163,7 @@ class ButtonBase extends React.Component { }; handleMouseDown = createRippleHandler(this, 'MouseDown', 'start', () => { - clearTimeout(this.keyboardFocusTimeout); + clearTimeout(this.focusVisibleTimeout); if (this.state.focusVisible) { this.setState({ focusVisible: false }); } @@ -184,7 +184,7 @@ class ButtonBase extends React.Component { handleTouchMove = createRippleHandler(this, 'TouchMove', 'stop'); handleBlur = createRippleHandler(this, 'Blur', 'stop', () => { - clearTimeout(this.keyboardFocusTimeout); + clearTimeout(this.focusVisibleTimeout); if (this.state.focusVisible) { this.setState({ focusVisible: false }); } @@ -201,8 +201,8 @@ class ButtonBase extends React.Component { } event.persist(); - detectKeyboardFocus(this, this.button, () => { - this.onKeyboardFocusHandler(event); + detectFocusVisible(this, this.button, () => { + this.onFocusVisibleHandler(event); }); if (this.props.onFocus) { @@ -224,7 +224,7 @@ class ButtonBase extends React.Component { focusVisibleClassName, onBlur, onFocus, - onKeyboardFocus, + onFocusVisible, onKeyDown, onKeyUp, onMouseDown, @@ -359,7 +359,7 @@ ButtonBase.propTypes = { * Callback fired when the component is focused with a keyboard. * We trigger a `onFocus` callback too. */ - onKeyboardFocus: PropTypes.func, + onFocusVisible: PropTypes.func, /** * @ignore */ diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.test.js b/packages/material-ui/src/ButtonBase/ButtonBase.test.js index b7ee7010de5203..ca6ae75ad1f0ca 100644 --- a/packages/material-ui/src/ButtonBase/ButtonBase.test.js +++ b/packages/material-ui/src/ButtonBase/ButtonBase.test.js @@ -354,7 +354,7 @@ describe('', () => { false, 'should not set keyboard focus before time has passed', ); - clock.tick(instance.keyboardFocusCheckTime * instance.keyboardFocusMaxCheckTimes); + clock.tick(instance.focusVisibleCheckTime * instance.focusVisibleMaxCheckTimes); assert.strictEqual( wrapper.state().focusVisible, true, @@ -363,12 +363,12 @@ describe('', () => { }); it('should ignore the keyboard after 1s', () => { - clock.tick(instance.keyboardFocusCheckTime * instance.keyboardFocusMaxCheckTimes); + clock.tick(instance.focusVisibleCheckTime * instance.focusVisibleMaxCheckTimes); assert.strictEqual(wrapper.state().focusVisible, true, 'should think it is keyboard based'); button.blur(); assert.strictEqual(wrapper.state().focusVisible, false, 'should has lost the focus'); button.focus(); - clock.tick(instance.keyboardFocusCheckTime * instance.keyboardFocusMaxCheckTimes); + clock.tick(instance.focusVisibleCheckTime * instance.focusVisibleMaxCheckTimes); assert.strictEqual( wrapper.state().focusVisible, true, @@ -378,7 +378,7 @@ describe('', () => { button.blur(); assert.strictEqual(wrapper.state().focusVisible, false, 'should has lost the focus'); button.focus(); - clock.tick(instance.keyboardFocusCheckTime * instance.keyboardFocusMaxCheckTimes); + clock.tick(instance.focusVisibleCheckTime * instance.focusVisibleMaxCheckTimes); assert.strictEqual( wrapper.state().focusVisible, false, @@ -455,23 +455,23 @@ describe('', () => { assert.strictEqual(eventMock.persist.callCount, 0); }); - it('onKeyboardFocusHandler() should propogate call to onKeyboardFocus prop', () => { + it('onFocusVisibleHandler() should propogate call to onFocusVisible prop', () => { const eventMock = 'woofButtonBase'; - const onKeyboardFocusSpy = spy(); + const onFocusVisibleSpy = spy(); const wrapper = mount( Hello , ); const instance = wrapper.instance(); - instance.onKeyboardFocusHandler(eventMock); - assert.strictEqual(onKeyboardFocusSpy.callCount, 1); - assert.strictEqual(onKeyboardFocusSpy.calledWith(eventMock), true); + instance.onFocusVisibleHandler(eventMock); + assert.strictEqual(onFocusVisibleSpy.callCount, 1); + assert.strictEqual(onFocusVisibleSpy.calledWith(eventMock), true); }); it('should work with a functionnal component', () => { @@ -487,7 +487,7 @@ describe('', () => { ); const instance = wrapper.instance(); wrapper.simulate('focus'); - clock.tick(instance.keyboardFocusCheckTime); + clock.tick(instance.focusVisibleCheckTime); }); }); diff --git a/packages/material-ui/src/ExpansionPanel/ExpansionPanelSummary.js b/packages/material-ui/src/ExpansionPanel/ExpansionPanelSummary.js index 42d4b6fb9c0c05..0dd69d24c61df1 100644 --- a/packages/material-ui/src/ExpansionPanel/ExpansionPanelSummary.js +++ b/packages/material-ui/src/ExpansionPanel/ExpansionPanelSummary.js @@ -121,7 +121,7 @@ class ExpansionPanelSummary extends React.Component { className, )} {...other} - onKeyboardFocus={this.handleFocus} + onFocusVisible={this.handleFocus} onBlur={this.handleBlur} onClick={this.handleChange} > diff --git a/packages/material-ui/src/utils/keyboardFocus.d.ts b/packages/material-ui/src/utils/focusVisible.d.ts similarity index 58% rename from packages/material-ui/src/utils/keyboardFocus.d.ts rename to packages/material-ui/src/utils/focusVisible.d.ts index 3af9befad0ae76..e973f9fdf8f772 100644 --- a/packages/material-ui/src/utils/keyboardFocus.d.ts +++ b/packages/material-ui/src/utils/focusVisible.d.ts @@ -1,9 +1,9 @@ export function focusKeyPressed(pressed: boolean): boolean; -export function detectKeyboardFocus( +export function detectFocusVisible( instance: { - keyboardFocusTimeout: any; - keyboardFocusCheckTime: number; - keyboardFocusMaxCheckTimes: number; + focusVisibleTimeout: any; + focusVisibleCheckTime: number; + focusVisibleMaxCheckTimes: number; }, element: Element, cb: () => void, diff --git a/packages/material-ui/src/utils/keyboardFocus.js b/packages/material-ui/src/utils/focusVisible.js similarity index 71% rename from packages/material-ui/src/utils/keyboardFocus.js rename to packages/material-ui/src/utils/focusVisible.js index 5e855ea55af3fe..c7516777ebea5e 100644 --- a/packages/material-ui/src/utils/keyboardFocus.js +++ b/packages/material-ui/src/utils/focusVisible.js @@ -10,14 +10,14 @@ const internal = { keyUpEventTimeout: -1, }; -export function detectKeyboardFocus(instance, element, callback, attempt = 1) { - warning(instance.keyboardFocusCheckTime, 'Material-UI: missing instance.keyboardFocusCheckTime'); +export function detectFocusVisible(instance, element, callback, attempt = 1) { + warning(instance.focusVisibleCheckTime, 'Material-UI: missing instance.focusVisibleCheckTime'); warning( - instance.keyboardFocusMaxCheckTimes, - 'Material-UI: missing instance.keyboardFocusMaxCheckTimes', + instance.focusVisibleMaxCheckTimes, + 'Material-UI: missing instance.focusVisibleMaxCheckTimes', ); - instance.keyboardFocusTimeout = setTimeout(() => { + instance.focusVisibleTimeout = setTimeout(() => { const doc = ownerDocument(element); if ( @@ -25,10 +25,10 @@ export function detectKeyboardFocus(instance, element, callback, attempt = 1) { (doc.activeElement === element || contains(element, doc.activeElement)) ) { callback(); - } else if (attempt < instance.keyboardFocusMaxCheckTimes) { - detectKeyboardFocus(instance, element, callback, attempt + 1); + } else if (attempt < instance.focusVisibleMaxCheckTimes) { + detectFocusVisible(instance, element, callback, attempt + 1); } - }, instance.keyboardFocusCheckTime); + }, instance.focusVisibleCheckTime); } const FOCUS_KEYS = ['tab', 'enter', 'space', 'esc', 'up', 'down', 'left', 'right']; diff --git a/pages/api/button-base.md b/pages/api/button-base.md index 8c61a93621aec9..d6bf87738244e2 100644 --- a/pages/api/button-base.md +++ b/pages/api/button-base.md @@ -23,7 +23,7 @@ It contains a load of style reset and some focus/ripple logic. | disableRipple | bool | false | If `true`, the ripple effect will be disabled. | | focusRipple | bool | false | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. | | focusVisibleClassName | string | | This property can help a person know which element has the keyboard focus. The class name will be applied when the element gain the focus throught a keyboard interaction. It's a polyfill for the [CSS :focus-visible feature](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo). The rational for using this feature [is explain here](https://github.com/WICG/focus-visible/blob/master/explainer.md). | -| onKeyboardFocus | func | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | +| onFocusVisible | func | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | | TouchRippleProps | object | | Properties applied to the `TouchRipple` element. | Any other properties supplied will be [spread to the root element](/guides/api#spread).