Add ClassName prop to SearchField and TextField + add SearchField arg…

…types

__docs__/wonder-blocks-form/text-field.argtypes.ts

@@ -133,6 +133,18 @@ export default {
         },
     },
 
+    className: {
+        description: "Custom class name for the input.",
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {
+            type: "text",
+        },
+    },
+
     testId: {
         description: "Optional test ID for e2e testing.",
         table: {

__docs__/wonder-blocks-search-field/search-field.argtypes.ts

@@ -0,0 +1,177 @@
+export default {
+    clearAriaLabel: {
+        description: `ARIA label for the clear button. Defaults to "Clear search".`,
+        table: {
+            type: {
+                summary: "string",
+            },
+            category: "Accessibility",
+        },
+        control: {
+            type: "text",
+        },
+    },
+    id: {
+        description: `The unique identifier for the input. If one is not
+            provided, a unique id will be generated.`,
+        type: {name: "string", required: true},
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {
+            type: "text",
+        },
+    },
+    value: {
+        description: "The text input value.",
+        type: {name: "string", required: true},
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {type: "text"},
+    },
+    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.`,
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {
+            type: "text",
+        },
+    },
+    autoFocus: {
+        description: "Whether this field should autofocus on page load.",
+        table: {
+            type: {
+                summary: "boolean",
+            },
+            defaultValue: {
+                summary: "false",
+            },
+        },
+        control: {
+            type: "boolean",
+        },
+    },
+    disabled: {
+        description: `Makes a read-only input field that cannot be focused.
+            Defaults to false.`,
+        table: {
+            type: {
+                summary: "boolean",
+            },
+            defaultValue: {
+                summary: "false",
+            },
+        },
+        control: {
+            type: "boolean",
+        },
+    },
+    light: {
+        description:
+            "Change the default focus ring color to fit a dark background.",
+        table: {
+            type: {
+                summary: "boolean",
+            },
+            defaultValue: {
+                summary: "false",
+            },
+        },
+        control: {
+            type: "boolean",
+        },
+    },
+    style: {
+        description: "Custom styles for the main wrapper.",
+        table: {
+            type: {
+                summary: "Style",
+            },
+            defaultValue: {
+                summary: "StyleType",
+            },
+        },
+        control: {
+            type: "select",
+            options: ["box", "underline"],
+        },
+    },
+    className: {
+        description: "Optional CSS classes for the input field.",
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {
+            type: "text",
+        },
+    },
+    testId: {
+        description: "Test ID used for e2e testing.",
+        table: {
+            type: {
+                summary: "string",
+            },
+        },
+        control: {
+            type: "text",
+        },
+    },
+    onChange: {
+        description: "Called when the value has changed.",
+        table: {
+            type: {
+                summary: "function",
+            },
+            category: "Events",
+        },
+    },
+    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",
+            },
+            category: "Events",
+        },
+    },
+    onKeyDown: {
+        description: "Called when a key is pressed.",
+        table: {
+            type: {
+                summary: "function",
+            },
+            category: "Events",
+        },
+    },
+    onFocus: {
+        description: "Called when the element has been focused.",
+        table: {
+            type: {
+                summary: "function",
+            },
+            category: "Events",
+        },
+    },
+    onBlur: {
+        description: "Called when the element has been blurred.",
+        table: {
+            type: {
+                summary: "function",
+            },
+            category: "Events",
+        },
+    },
+};

__docs__/wonder-blocks-search-field/search-field.stories.tsx

@@ -13,11 +13,11 @@ import SearchField from "@khanacademy/wonder-blocks-search-field";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-search-field/package.json";
+import SearchFieldArgtypes from "./search-field.argtypes";
 
 export default {
     component: SearchField,
     title: "SearchField",
-    args: {disabled: false, placeholder: "Placeholder"},
     parameters: {
         componentSubtitle: (
             <ComponentInfo
@@ -26,6 +26,7 @@ export default {
             />
         ),
     },
+    argTypes: SearchFieldArgtypes,
 } as Meta<typeof SearchField>;
 
 type StoryComponentType = StoryObj<typeof SearchField>;

packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx

@@ -117,6 +117,25 @@ describe("TextField", () => {
         expect(input).toBeInTheDocument();
     });
 
+    it("className prop is passed to the input element", () => {
+        // Arrange
+        const className = "some-class";
+
+        // Act
+        render(
+            <TextField
+                id={"tf-1"}
+                value=""
+                onChange={() => {}}
+                className={className}
+            />,
+        );
+
+        // Assert
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveClass(className);
+    });
+
     it("disabled prop disables the input element", () => {
         // Arrange
         render(

packages/wonder-blocks-form/src/components/text-field.tsx

@@ -95,6 +95,10 @@ type Props = AriaProps & {
      * Custom styles for the input.
      */
     style?: StyleType;
+    /**
+     * Optional CSS classes for the entire dropdown component.
+     */
+    className?: string;
     /**
      * Optional test ID for e2e testing.
      */

packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx

@@ -51,6 +51,24 @@ describe("SearchField", () => {
         expect(input).toHaveAttribute("aria-label", "some-aria-label");
     });
 
+    test("className is passed down", () => {
+        // Arrange
+
+        // Act
+        render(
+            <SearchField
+                value=""
+                onChange={() => {}}
+                testId="search-field-test"
+                className="some-class-name"
+            />,
+        );
+
+        // Assert
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveClass("some-class-name");
+    });
+
     test("receives focus on click", () => {
         // Arrange
         render(

packages/wonder-blocks-search-field/src/components/search-field.tsx

@@ -51,6 +51,10 @@ type Props = AriaProps & {
      * Custom styles for the main wrapper.
      */
     style?: StyleType;
+    /**
+     * Optional CSS classes for the input field.
+     */
+    className?: string;
     /**
      * Test ID used for e2e testing.
      */