diff --git a/UNRELEASED.md b/UNRELEASED.md index 634a3e9e021..4edb42a8d4c 100644 --- a/UNRELEASED.md +++ b/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 diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index 0bb015dc550..924d93840c6 100644 --- a/src/components/Button/Button.tsx +++ b/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): void; + /** Callback when a keyup event is registered on the button */ + onKeyUp?(event: React.KeyboardEvent): void; + /** Callback when a keydown event is registered on the button */ + onKeyDown?(event: React.KeyboardEvent): 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} diff --git a/src/components/Button/tests/Button.test.tsx b/src/components/Button/tests/Button.test.tsx index 17384f2f7fd..6ba204d0207 100644 --- a/src/components/Button/tests/Button.test.tsx +++ b/src/components/Button/tests/Button.test.tsx @@ -248,4 +248,43 @@ describe(').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().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().simulate( + 'keydown', + fakeEventData, + ); + expect(spy).toHaveBeenCalled(); + expect(spy).toHaveBeenCalledWith(fakeEventData); + }); + }); });