From 659a031d16cad68a2f48cd18a60dc468a38822b1 Mon Sep 17 00:00:00 2001 From: Juan Andrade Date: Thu, 19 Sep 2024 13:49:18 -0400 Subject: [PATCH] SearchField: Add onKeyUp prop (#2326) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: The SearchField component now accepts an `onKeyUp` prop that will be called when the user releases a key while the input is focused. This is to bring consistency with the other input components in the library and also to allow for more flexibility when using the SearchField component. Also took the opportunity to clear some of the SB argtype descriptions, as we no longer need to duplicate them as of SB 8.0. NOTE: This will be used as part of the Search page refactor. Issue: FEI-5728 ## Test plan: Verify that the unit tests pass. Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ dependabot Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2326 --- .changeset/curly-bats-cover.md | 5 ++++ .../search-field.argtypes.ts | 30 +++++-------------- .../__tests__/search-field.test.tsx | 23 ++++++++++++++ .../src/components/search-field.tsx | 4 +++ 4 files changed, 40 insertions(+), 22 deletions(-) create mode 100644 .changeset/curly-bats-cover.md diff --git a/.changeset/curly-bats-cover.md b/.changeset/curly-bats-cover.md new file mode 100644 index 000000000..80d8bdcf9 --- /dev/null +++ b/.changeset/curly-bats-cover.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-search-field": minor +--- + +Add onKeyUp prop to the `SearchField` component diff --git a/__docs__/wonder-blocks-search-field/search-field.argtypes.ts b/__docs__/wonder-blocks-search-field/search-field.argtypes.ts index 7e6a79323..c5f7b00e1 100644 --- a/__docs__/wonder-blocks-search-field/search-field.argtypes.ts +++ b/__docs__/wonder-blocks-search-field/search-field.argtypes.ts @@ -1,6 +1,5 @@ export default { clearAriaLabel: { - description: `ARIA label for the clear button. Defaults to "Clear search".`, type: {name: "string", required: false}, table: { type: { @@ -13,8 +12,6 @@ export default { }, }, id: { - description: `The unique identifier for the input. If one is not - provided, a unique id will be generated.`, type: {name: "string", required: false}, table: { type: { @@ -26,7 +23,6 @@ export default { }, }, value: { - description: "The text input value.", type: {name: "string", required: true}, table: { type: { @@ -36,8 +32,6 @@ export default { control: {type: "text"}, }, name: { - description: `The name for the input control. This is submitted along - with the form data.`, type: {name: "string", required: false}, table: { type: { @@ -49,9 +43,6 @@ export default { }, }, placeholder: { - description: `Provide hints or examples of what to enter. - This shows up as a grayed out text in the field before - a value is entered.`, type: {name: "string", required: false}, table: { type: { @@ -63,7 +54,6 @@ export default { }, }, autoFocus: { - description: "Whether this field should autofocus on page load.", type: {name: "boolean", required: false}, table: { type: { @@ -78,8 +68,6 @@ export default { }, }, disabled: { - description: `Makes a read-only input field that cannot be focused. - Defaults to false.`, type: {name: "boolean", required: false}, table: { type: { @@ -94,8 +82,6 @@ export default { }, }, light: { - description: - "Change the default focus ring color to fit a dark background.", type: {name: "boolean", required: false}, table: { type: { @@ -110,7 +96,6 @@ export default { }, }, style: { - description: "Custom styles for the main wrapper.", table: { type: { summary: "Style", @@ -124,7 +109,6 @@ export default { }, }, testId: { - description: "Test ID used for e2e testing.", type: {name: "string", required: false}, table: { type: { @@ -136,7 +120,6 @@ export default { }, }, onChange: { - description: "Called when the value has changed.", table: { type: { summary: "function", @@ -145,8 +128,6 @@ export default { }, }, onClick: { - description: `Handler that is triggered when this component is clicked. - For example, use this to adjust focus in parent component.`, table: { type: { summary: "function", @@ -155,7 +136,14 @@ export default { }, }, onKeyDown: { - description: "Called when a key is pressed.", + table: { + type: { + summary: "function", + }, + category: "Events", + }, + }, + onKeyUp: { table: { type: { summary: "function", @@ -164,7 +152,6 @@ export default { }, }, onFocus: { - description: "Called when the element has been focused.", table: { type: { summary: "function", @@ -173,7 +160,6 @@ export default { }, }, onBlur: { - description: "Called when the element has been blurred.", table: { type: { summary: "function", diff --git a/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx b/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx index a58080a16..de2f2a829 100644 --- a/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx +++ b/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx @@ -418,4 +418,27 @@ describe("SearchField", () => { // Assert expect(searchField).not.toHaveFocus(); }); + + it("onKeyDown is called after keyboard key press", async () => { + // Arrange + const handleOnKeyDown = jest.fn( + (event: React.KeyboardEvent) => { + return event.key; + }, + ); + + render( + {}} + onKeyDown={handleOnKeyDown} + />, + ); + + // Act + await userEvent.type(await screen.findByRole("textbox"), "{enter}"); + + // Assert + expect(handleOnKeyDown).toHaveReturnedWith("Enter"); + }); }); diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx index 7c46f0128..b8416b71a 100644 --- a/packages/wonder-blocks-search-field/src/components/search-field.tsx +++ b/packages/wonder-blocks-search-field/src/components/search-field.tsx @@ -72,6 +72,10 @@ type Props = AriaProps & { * Called when a key is pressed. */ onKeyDown?: (event: React.KeyboardEvent) => unknown; + /** + * Called when a key is released. + */ + onKeyUp?: (event: React.KeyboardEvent) => unknown; /** * Called when the element has been focused. */