Merge pull request #860 from Shopify/button-keyboard-events

[Button] keypress, keydown, and keyup events

UNRELEASED.md

@@ -10,6 +10,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added `onKeyPress`, `onKeyDown`, and `onKeyUp` to `Button` ([#860](https://github.com/Shopify/polaris-react/pull/860))
+
 ### Design updates
 
 ### Bug fixes

src/components/Button/Button.tsx

@@ -58,6 +58,12 @@ export interface Props {
   onFocus?(): void;
   /** Callback when focus leaves button */
   onBlur?(): void;
+  /** Callback when a keypress event is registered on the button */
+  onKeyPress?(event: React.KeyboardEvent<HTMLButtonElement>): void;
+  /** Callback when a keyup event is registered on the button */
+  onKeyUp?(event: React.KeyboardEvent<HTMLButtonElement>): void;
+  /** Callback when a keydown event is registered on the button */
+  onKeyDown?(event: React.KeyboardEvent<HTMLButtonElement>): void;
 }
 
 export type CombinedProps = Props & WithAppProviderProps;
@@ -76,6 +82,9 @@ function Button({
   onClick,
   onFocus,
   onBlur,
+  onKeyDown,
+  onKeyPress,
+  onKeyUp,
   external,
   icon,
   primary,
@@ -184,6 +193,9 @@ function Button({
       onClick={onClick}
       onFocus={onFocus}
       onBlur={onBlur}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
+      onKeyPress={onKeyPress}
       onMouseUp={handleMouseUpByBlurring}
       className={className}
       disabled={isDisabled}

src/components/Button/tests/Button.test.tsx

@@ -248,4 +248,43 @@ describe('<Button />', () => {
       expect(onBlurSpy).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('onKeyPress()', () => {
+    it('is called when a keypress event is registered on the button', () => {
+      const fakeEventData = {key: 'foo'};
+      const spy = jest.fn();
+      shallowWithAppProvider(<Button onKeyPress={spy}>Test</Button>).simulate(
+        'keypress',
+        fakeEventData,
+      );
+      expect(spy).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalledWith(fakeEventData);
+    });
+  });
+
+  describe('onKeyUp()', () => {
+    it('is called when a keyup event is registered on the button', () => {
+      const fakeEventData = {key: 'foo'};
+      const spy = jest.fn();
+      shallowWithAppProvider(<Button onKeyUp={spy}>Test</Button>).simulate(
+        'keyup',
+        fakeEventData,
+      );
+      expect(spy).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalledWith(fakeEventData);
+    });
+  });
+
+  describe('onKeyDown()', () => {
+    it('is called when a keydown event is registered on the button', () => {
+      const fakeEventData = {key: 'foo'};
+      const spy = jest.fn();
+      shallowWithAppProvider(<Button onKeyDown={spy}>Test</Button>).simulate(
+        'keydown',
+        fakeEventData,
+      );
+      expect(spy).toHaveBeenCalled();
+      expect(spy).toHaveBeenCalledWith(fakeEventData);
+    });
+  });
 });