SearchField: Add onKeyUp prop (#2326)

## 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: #2326

.changeset/curly-bats-cover.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-search-field": minor
+---
+
+Add onKeyUp prop to the `SearchField` component

__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",

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<HTMLInputElement>) => {
+                return event.key;
+            },
+        );
+
+        render(
+            <SearchField
+                value="something"
+                onChange={() => {}}
+                onKeyDown={handleOnKeyDown}
+            />,
+        );
+
+        // Act
+        await userEvent.type(await screen.findByRole("textbox"), "{enter}");
+
+        // Assert
+        expect(handleOnKeyDown).toHaveReturnedWith("Enter");
+    });
 });

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<HTMLInputElement>) => unknown;
+    /**
+     * Called when a key is released.
+     */
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => unknown;
     /**
      * Called when the element has been focused.
      */