diff --git a/.changeset/empty-wasps-beg.md b/.changeset/empty-wasps-beg.md new file mode 100644 index 000000000..c54b7d44d --- /dev/null +++ b/.changeset/empty-wasps-beg.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-form": minor +--- + +LabeledTextField: Adds `name` prop for the `TextField` component diff --git a/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts b/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts index 62473951f..b74b277e9 100644 --- a/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts +++ b/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts @@ -82,6 +82,18 @@ export default { }, }, + name: { + description: "Provide a name for the TextField.", + table: { + type: { + summary: "string", + }, + }, + control: { + type: "text", + }, + }, + disabled: { description: `Whether the input should be disabled. Defaults to false. If the disabled prop is set to \`true\`, LabeledTextField will have disabled diff --git a/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx index b5351b9cf..8c86af68c 100644 --- a/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx +++ b/packages/wonder-blocks-form/src/components/__tests__/labeled-text-field.test.tsx @@ -381,6 +381,25 @@ describe("LabeledTextField", () => { expect(input).toBeInTheDocument(); }); + it("name prop is passed to input", async () => { + // Arrange + const name = "test-name"; + + // Act + render( + {}} + name={name} + />, + ); + + // Assert + const input = await screen.findByRole("textbox"); + expect(input).toHaveAttribute("name", name); + }); + it("style prop is passed to fieldheading", async () => { // Arrange const styles = StyleSheet.create({ diff --git a/packages/wonder-blocks-form/src/components/labeled-text-field.tsx b/packages/wonder-blocks-form/src/components/labeled-text-field.tsx index e9ac41c00..abda285bc 100644 --- a/packages/wonder-blocks-form/src/components/labeled-text-field.tsx +++ b/packages/wonder-blocks-form/src/components/labeled-text-field.tsx @@ -126,6 +126,10 @@ type CommonProps = { * Specifies if the TextField allows autocomplete. */ autoComplete?: string; + /** + * Provide a name for the TextField. + */ + name?: string; }; type OtherInputProps = CommonProps & { @@ -228,6 +232,7 @@ class LabeledTextField extends React.Component { autoComplete, forwardedRef, ariaDescribedby, + name, // NOTE: We are not using this prop, but we need to remove it from // `otherProps` so it doesn't override the `handleValidate` function // call. We use `otherProps` due to a limitation in TypeScript where @@ -275,6 +280,7 @@ class LabeledTextField extends React.Component { readOnly={readOnly} autoComplete={autoComplete} ref={forwardedRef} + name={name} {...otherProps} /> }