[ButtonBase] Complete the focusVisible rename (#11188)

mui · Apr 30, 2018 · 6ba2f29 · 6ba2f29
1 parent ccb794e
commit 6ba2f29
Show file tree

Hide file tree

Showing 8 changed files with 44 additions and 44 deletions.
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
@@ -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
@@ -13,7 +13,7 @@ export interface ButtonBaseProps
   disableRipple?: boolean;
   focusRipple?: boolean;
   focusVisibleClassName?: string;
-  onKeyboardFocus?: React.FocusEventHandler<any>;
+  onFocusVisible?: React.FocusEventHandler<any>;
   TouchRippleProps?: Partial<TouchRippleProps>;
 }
 

diff --git 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
@@ -354,7 +354,7 @@ describe('<ButtonBase />', () => {
         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('<ButtonBase />', () => {
     });
 
     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('<ButtonBase />', () => {
       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('<ButtonBase />', () => {
       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(
         <ButtonBaseNaked
           theme={{}}
           classes={{}}
           component="span"
-          onKeyboardFocus={onKeyboardFocusSpy}
+          onFocusVisible={onFocusVisibleSpy}
         >
           Hello
         </ButtonBaseNaked>,
       );
       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('<ButtonBase />', () => {
       );
       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
@@ -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/.../material-ui/src/utils/keyboardFocus.d.ts → ...s/material-ui/src/utils/focusVisible.d.ts b/.../material-ui/src/utils/keyboardFocus.d.ts → ...s/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/...es/material-ui/src/utils/keyboardFocus.js → ...ges/material-ui/src/utils/focusVisible.js b/...es/material-ui/src/utils/keyboardFocus.js → ...ges/material-ui/src/utils/focusVisible.js
@@ -10,25 +10,25 @@ 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 (
       internal.focusKeyPressed &&
       (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
@@ -23,7 +23,7 @@ It contains a load of style reset and some focus/ripple logic.
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the ripple effect will be disabled. |
 | <span class="prop-name">focusRipple</span> | <span class="prop-type">bool | <span class="prop-default">false</span> | If `true`, the base button will have a keyboard focus ripple. `disableRipple` must also be `false`. |
 | <span class="prop-name">focusVisibleClassName</span> | <span class="prop-type">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). |
-| <span class="prop-name">onKeyboardFocus</span> | <span class="prop-type">func |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
+| <span class="prop-name">onFocusVisible</span> | <span class="prop-type">func |  | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. |
 | <span class="prop-name">TouchRippleProps</span> | <span class="prop-type">object |  | Properties applied to the `TouchRipple` element. |
 
 Any other properties supplied will be [spread to the root element](/guides/api#spread).