From 7a98815b1bff60fe917e53a5a7b906a147c7b689 Mon Sep 17 00:00:00 2001 From: Bea Esguerra Date: Wed, 2 Oct 2024 16:50:41 -0500 Subject: [PATCH] Adding name prop in LabeledTextField for the TextField component (#2324) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: - Adds `name` prop for `LabeledTextField` so that it can be set on the `TextField` component. This is useful for setting the `name` attribute with the `autocomplete` attribute on input fields. This will help address a [LevelAccess issue](https://khanacademy.hub.essentia11y.com/short-link/C9J-QKFwoBnaiDMD) on the login page for FEI-5839: `Ensure that common input fields allow autocomplete and use standard autocomplete values` Issue: WB-1762 ## Test plan: - Confirm that setting the `name` prop sets the `name` attribute on the input field in LabeledTextField (`?path=/story/packages-form-labeledtextfield--default&args=testId:;name:test-123`) Screenshot 2024-09-18 at 3 34 27 PM Author: beaesguerra Reviewers: jandrade, beaesguerra Required Reviewers: Approved By: jandrade Checks: ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Lint (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ 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), ⏭️ Chromatic - Skip on Release PR (changesets), ⏭️ Publish npm snapshot, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2324 --- .changeset/empty-wasps-beg.md | 5 +++++ .../labeled-text-field.argtypes.ts | 12 ++++++++++++ .../__tests__/labeled-text-field.test.tsx | 19 +++++++++++++++++++ .../src/components/labeled-text-field.tsx | 6 ++++++ 4 files changed, 42 insertions(+) create mode 100644 .changeset/empty-wasps-beg.md 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} /> }