Merge pull request Shopify#2451 from Shopify/rename-keys

Refactor Keys enum to follow naming conventions

Author: BPScott

UNRELEASED.md

@@ -54,6 +54,7 @@ The autocomplete component is an input field that provides selectable suggestion
 - Added padding top and bottom on `Card.Section` when set to full width ([#2280](https://github.com/Shopify/polaris-react/pull/2280))
 - Fixed `Portal` rendering by using `componentDidMount` lifecycle hook as opposed to `componentWillMount` ([#2243](https://github.com/Shopify/polaris-react/pull/2243));
 - Fixed an issue where clicking a `Link` without a `url` in a form would implicitly submit the form. `Link` can no longer submit forms. Use `<Button submit>` instead.
+- Renamed the `Keys` enum to align with Shopify naming standards. It is now singular and the properties are in PascalCase. Replace `import {Keys} from '@shopify/polaris'` with `import {Key} from '@shopify/polaris'` and change the casing of the properties, e.g. replace `Keys.DOWN_ARROW` with `Key.DownArrow` ([#2451](https://github.com/Shopify/polaris-react/pull/2451))
 
 ### Documentation
 

src/components/Autocomplete/components/ComboBox/ComboBox.tsx

@@ -9,7 +9,7 @@ import OptionList, {OptionDescriptor} from '../../../OptionList';
 import ActionList from '../../../ActionList';
 import Popover from '../../../Popover';
 import {PreferredPosition} from '../../../PositionedOverlay';
-import {ActionListItemDescriptor, Keys} from '../../../../types';
+import {ActionListItemDescriptor, Key} from '../../../../types';
 import {contextTypes} from '../types';
 import {TextField} from './components';
 import KeypressListener from '../../../KeypressListener';
@@ -244,16 +244,13 @@ export default class ComboBox extends React.PureComponent<Props, State> {
         tabIndex={0}
       >
         <KeypressListener
-          keyCode={Keys.DOWN_ARROW}
+          keyCode={Key.DownArrow}
           handler={this.handleDownArrow}
         />
+        <KeypressListener keyCode={Key.UpArrow} handler={this.handleUpArrow} />
+        <KeypressListener keyCode={Key.Enter} handler={this.handleEnter} />
         <KeypressListener
-          keyCode={Keys.UP_ARROW}
-          handler={this.handleUpArrow}
-        />
-        <KeypressListener keyCode={Keys.ENTER} handler={this.handleEnter} />
-        <KeypressListener
-          keyCode={Keys.ESCAPE}
+          keyCode={Key.Escape}
           handler={this.handlePopoverClose}
         />
         <Popover

src/components/Autocomplete/components/ComboBox/tests/ComboBox.test.tsx

@@ -4,7 +4,7 @@ import ComboBox from '..';
 import {OptionList, ActionList, Popover} from 'components';
 import {mountWithAppProvider} from 'tests/utilities';
 import {TextField} from '../components';
-import {Keys} from '../../../../../types';
+import {Key} from '../../../../../types';
 
 interface HandlerMap {
   [eventName: string]: (event: any) => void;
@@ -433,7 +433,7 @@ describe('<ComboBox/>', () => {
 
       async () => {
         comboBox.find(TextField).simulate('click');
-        listenerMap.keyup({keyCode: Keys.DOWN_ARROW});
+        listenerMap.keyup({keyCode: Key.DownArrow});
         await expect(comboBox.state('selectedIndex')).toBe(0);
       };
     });
@@ -451,11 +451,11 @@ describe('<ComboBox/>', () => {
 
       async () => {
         comboBox.find(TextField).simulate('click');
-        await listenerMap.keyup({keyCode: Keys.DOWN_ARROW});
+        await listenerMap.keyup({keyCode: Key.DownArrow});
       };
 
       async () => {
-        listenerMap.keyup({keyCode: Keys.ENTER});
+        listenerMap.keyup({keyCode: Key.Enter});
         await expect(spy).toHaveBeenCalledTimes(1);
         expect(comboBox.prop('selected')[0]).toBe('cheese_pizza');
       };
@@ -472,7 +472,7 @@ describe('<ComboBox/>', () => {
       );
 
       async () => {
-        listenerMap.keyup({keyCode: Keys.TAB});
+        listenerMap.keyup({keyCode: Key.Tab});
         await expect(comboBox.state('popoverActive')).toBe(true);
       };
     });
@@ -489,12 +489,12 @@ describe('<ComboBox/>', () => {
 
       async () => {
         comboBox.find(TextField).simulate('click');
-        await listenerMap.keyup({keyCode: Keys.DOWN_ARROW});
+        await listenerMap.keyup({keyCode: Key.DownArrow});
         expect(comboBox.state('popoverActive')).toBe(true);
       };
 
       async () => {
-        listenerMap.keyup({keyCode: Keys.ESCAPE});
+        listenerMap.keyup({keyCode: Key.Escape});
         await expect(comboBox.state('popoverActive')).toBe(false);
       };
     });

src/components/Frame/components/Toast/Toast.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {classNames} from '@shopify/react-utilities';
 import {KeypressListener, ToastProps} from '../../../../components';
 import Icon from '../../../Icon';
-import {Keys} from '../../../../types';
+import {Key} from '../../../../types';
 
 import * as styles from './Toast.scss';
 
@@ -36,7 +36,7 @@ export default class Toast extends React.Component<Props, never> {
 
     return (
       <div className={className}>
-        <KeypressListener keyCode={Keys.ESCAPE} handler={onDismiss} />
+        <KeypressListener keyCode={Key.Escape} handler={onDismiss} />
         {content}
         {dismissMarkup}
       </div>

src/components/Frame/components/Toast/tests/Toast.test.tsx

@@ -3,7 +3,7 @@ import {timer} from '@shopify/jest-dom-mocks';
 import {mountWithAppProvider} from 'tests/utilities';
 import {noop} from 'utilities/other';
 import Toast, {Props} from '../Toast';
-import {Keys} from '../../../../../types';
+import {Key} from '../../../../../types';
 
 interface HandlerMap {
   [eventName: string]: (event: any) => void;
@@ -56,7 +56,7 @@ describe('<Toast />', () => {
       const spy = jest.fn();
       mountWithAppProvider(<Toast content="Image uploaded" onDismiss={spy} />);
 
-      listenerMap.keyup({keyCode: Keys.ESCAPE});
+      listenerMap.keyup({keyCode: Key.Escape});
 
       document.removeEventListener = jest.fn((event) => {
         listenerMap[event] = noop;

src/components/KeypressListener/KeypressListener.tsx

@@ -4,10 +4,10 @@ import {
   addEventListener,
   removeEventListener,
 } from '@shopify/javascript-utilities/events';
-import {Keys} from '../../types';
+import {Key} from '../../types';
 
 export interface Props {
-  keyCode: Keys;
+  keyCode: Key;
   handler(event: KeyboardEvent): void;
 }
 

src/components/KeypressListener/tests/KeypressListener.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {noop} from '@shopify/javascript-utilities/other';
 import {mountWithAppProvider} from 'tests/utilities';
-import {Keys} from '../../../types';
+import {Key} from '../../../types';
 import KeypressListener from '../KeypressListener';
 
 interface HandlerMap {
@@ -32,22 +32,22 @@ describe('<KeypressListener />', () => {
     const spy = jest.fn();
 
     mountWithAppProvider(
-      <KeypressListener handler={spy} keyCode={Keys.ESCAPE} />,
+      <KeypressListener handler={spy} keyCode={Key.Escape} />,
     );
 
-    listenerMap.keyup({keyCode: Keys.ESCAPE});
-    listenerMap.keyup({keyCode: Keys.ENTER});
+    listenerMap.keyup({keyCode: Key.Escape});
+    listenerMap.keyup({keyCode: Key.Enter});
     expect(spy).toHaveBeenCalledTimes(1);
   });
 
   it('removes listener for the given key on unmount', () => {
     const spy = jest.fn();
 
     mountWithAppProvider(
-      <KeypressListener handler={spy} keyCode={Keys.ESCAPE} />,
+      <KeypressListener handler={spy} keyCode={Key.Escape} />,
     ).unmount();
 
-    listenerMap.keyup({keyCode: Keys.ESCAPE});
+    listenerMap.keyup({keyCode: Key.Escape});
     expect(spy).not.toBeCalled();
   });
 });

src/components/Modal/components/Dialog/Dialog.tsx

@@ -4,7 +4,7 @@ import {Transition, CSSTransition} from 'react-transition-group';
 import {KeypressListener, TrapFocus} from '../../../../components';
 import memoizedBind from '../../../../utilities/memoized-bind';
 import {Duration} from '../../../shared';
-import {AnimationProps, Keys} from '../../../../types';
+import {AnimationProps, Key} from '../../../../types';
 import * as styles from './Dialog.scss';
 
 export interface DialogProps {
@@ -65,7 +65,7 @@ export default function Dialog({
             tabIndex={-1}
           >
             <KeypressListener
-              keyCode={Keys.ESCAPE}
+              keyCode={Key.Escape}
               handler={handleClose}
               testID="CloseKeypressListener"
             />

src/components/Pagination/Pagination.tsx

@@ -6,16 +6,16 @@ import Icon from '../Icon';
 import UnstyledLink from '../UnstyledLink';
 import Tooltip from '../Tooltip';
 import KeypressListener from '../KeypressListener';
-import {Keys} from '../../types';
+import {Key} from '../../types';
 import {handleMouseUpByBlurring} from '../../utilities/focus';
 
 import * as styles from './Pagination.scss';
 
 export interface PaginationDescriptor {
   /** Keyboard shortcuts for the next button */
-  nextKeys?: Keys[];
+  nextKeys?: Key[];
   /** Keyboard shortcuts for the previous button */
-  previousKeys?: Keys[];
+  previousKeys?: Key[];
   /** Tooltip for the next button */
   nextTooltip?: string;
   /** Tooltip for the previous button */

src/components/Pagination/tests/Pagination.test.tsx

@@ -3,7 +3,7 @@ import {noop} from '@shopify/javascript-utilities/other';
 import {ReactWrapper} from 'enzyme';
 import {mountWithAppProvider, findByTestID} from 'tests/utilities';
 import {Tooltip, TextField} from 'components';
-import {Keys} from '../../../types';
+import {Key} from '../../../types';
 import Pagination from '../Pagination';
 
 interface HandlerMap {
@@ -62,10 +62,10 @@ describe('<Pagination />', () => {
   it('adds a keypress event for nextKeys', () => {
     const spy = jest.fn();
     mountWithAppProvider(
-      <Pagination nextKeys={[Keys.KEY_K]} onNext={spy} nextTooltip="k" />,
+      <Pagination nextKeys={[Key.KeyK]} onNext={spy} nextTooltip="k" />,
     );
 
-    listenerMap.keyup({keyCode: Keys.KEY_K});
+    listenerMap.keyup({keyCode: Key.KeyK});
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
@@ -74,13 +74,13 @@ describe('<Pagination />', () => {
     const spy = jest.fn();
     mountWithAppProvider(
       <Pagination
-        previousKeys={[Keys.KEY_J]}
+        previousKeys={[Key.KeyJ]}
         onPrevious={spy}
         previousTooltip="j"
       />,
     );
 
-    listenerMap.keyup({keyCode: Keys.KEY_J});
+    listenerMap.keyup({keyCode: Key.KeyJ});
 
     expect(spy).toHaveBeenCalledTimes(1);
   });
@@ -93,14 +93,14 @@ describe('<Pagination />', () => {
           <TextField label="test" value="" onChange={noop} />
           <Pagination
             nextTooltip="j"
-            previousKeys={[Keys.KEY_J]}
+            previousKeys={[Key.KeyJ]}
             onPrevious={spy}
             previousTooltip="j"
           />
         </div>,
       );
       focusElement(wrapper, 'input');
-      listenerMap.keyup({keyCode: Keys.KEY_J});
+      listenerMap.keyup({keyCode: Key.KeyJ});
       expect(spy).not.toHaveBeenCalled();
     });
   });
@@ -127,15 +127,15 @@ describe('<Pagination />', () => {
       const spy = jest.fn();
       pagination = mountWithAppProvider(
         <Pagination
-          previousKeys={[Keys.KEY_J]}
+          previousKeys={[Key.KeyJ]}
           previousTooltip="j"
           previousURL="https://www.google.com"
         />,
       );
 
       const anchor = pagination.find('a').getDOMNode() as HTMLAnchorElement;
       anchor.click = spy;
-      listenerMap.keyup({keyCode: Keys.KEY_J});
+      listenerMap.keyup({keyCode: Key.KeyJ});
 
       expect(spy).toHaveBeenCalledTimes(1);
     });

src/components/Popover/components/PopoverOverlay/PopoverOverlay.tsx

@@ -6,7 +6,7 @@ import {classNames} from '@shopify/react-utilities/styles';
 import {isElementOfType, wrapWithComponent} from '@shopify/react-utilities';
 import {Transition} from 'react-transition-group';
 
-import {Keys} from '../../../../types';
+import {Key} from '../../../../types';
 import {overlay, Duration} from '../../../shared';
 import EventListener from '../../../EventListener';
 import KeypressListener from '../../../KeypressListener';
@@ -159,7 +159,7 @@ export default class PopoverOverlay extends React.PureComponent<Props, never> {
       <div className={className} {...overlay.props}>
         <EventListener event="click" handler={this.handleClick} />
         <EventListener event="touchstart" handler={this.handleClick} />
-        <KeypressListener keyCode={Keys.ESCAPE} handler={this.handleEscape} />
+        <KeypressListener keyCode={Key.Escape} handler={this.handleEscape} />
         <div
           className={styles.FocusTracker}
           // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex

src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {noop} from '@shopify/javascript-utilities/other';
 import {mountWithAppProvider} from 'tests/utilities';
 import {TextContainer} from 'components';
-import {Keys} from '../../../../../types';
+import {Key} from '../../../../../types';
 import PositionedOverlay from '../../../../PositionedOverlay';
 import PopoverOverlay from '../PopoverOverlay';
 
@@ -152,7 +152,7 @@ describe('<PopoverOverlay />', () => {
       </PopoverOverlay>,
     );
 
-    listenerMap.keyup({keyCode: Keys.ESCAPE});
+    listenerMap.keyup({keyCode: Key.Escape});
     expect(spy).toHaveBeenCalledTimes(1);
   });
 });

src/components/TextField/TextField.tsx

@@ -7,7 +7,7 @@ import Labelled, {Action, helpTextID, labelID} from '../Labelled';
 import Connected from '../Connected';
 
 import {Resizer, Spinner} from './components';
-import {Error, Keys} from '../../types';
+import {Error, Key} from '../../types';
 import * as styles from './TextField.scss';
 
 export type Type =
@@ -353,7 +353,7 @@ export default class TextField extends React.PureComponent<Props, State> {
     const {type} = this.props;
     const numbersSpec = /[\d.eE+-]$/;
 
-    if (type !== 'number' || which === Keys.ENTER || key.match(numbersSpec)) {
+    if (type !== 'number' || which === Key.Enter || key.match(numbersSpec)) {
       return;
     }