From a093dac162605bdbb0850717fe54c62242adf0e1 Mon Sep 17 00:00:00 2001
From: bigfishdesign13 <marty@brutvan.com>
Date: Thu, 2 Nov 2023 18:56:36 -0400
Subject: [PATCH 1/2] added functionality and docs for autoComplete prop

---
 CHANGELOG.md                                  |  4 ++
 .../__snapshots__/DatePicker.test.tsx.snap    | 17 +++++
 src/components/TextInput/TextInput.mdx        | 42 ++++++++---
 .../TextInput/TextInput.stories.tsx           | 10 ++-
 src/components/TextInput/TextInput.test.tsx   | 55 +++++++++++++++
 src/components/TextInput/TextInput.tsx        | 70 ++++++++++++++++++-
 .../__snapshots__/TextInput.test.tsx.snap     | 32 +++++++++
 .../TextInput/textInputChangelogData.ts       |  9 +++
 8 files changed, 227 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c2576a36d1..2af94a7e1f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,10 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ## Prerelease
 
+### Adds
+
+- Added the `autoComplete` prop to the `textInput` component for setting the "autocomplete" attribute manually.
+
 ## 2.1.1 (October 26, 2023)
 
 ### Adds
diff --git a/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index 63cd43d324..0e59d86ca9 100644
--- a/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -50,6 +50,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="basic-start"
@@ -103,6 +104,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 1`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="basic-end"
@@ -184,6 +186,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="no-label-start"
@@ -237,6 +240,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 2`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="no-label-end"
@@ -318,6 +322,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="custom-format-start"
@@ -371,6 +376,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 3`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="custom-format-end"
@@ -454,6 +460,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                   aria-describedby="invalid-start-helperText"
                   aria-invalid={true}
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="invalid-start"
@@ -525,6 +532,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 4`] = `
                   aria-describedby="invalid-end-helperText"
                   aria-invalid={true}
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={false}
                   id="invalid-end"
@@ -631,6 +639,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
               >
                 <input
                   aria-label="From, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={true}
                   id="disabled-start"
@@ -684,6 +693,7 @@ exports[`DatePicker Date Range renders the UI snapshot correctly 5`] = `
               >
                 <input
                   aria-label="To, Press tab to access the calendar."
+                  autoComplete={null}
                   className="chakra-input css-0"
                   disabled={true}
                   id="disabled-end"
@@ -763,6 +773,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 1`] = `
           >
             <input
               aria-label="Select the full date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="basic-start"
@@ -824,6 +835,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 2`] = `
           >
             <input
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="no-label-start"
@@ -892,6 +904,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 3`] = `
           >
             <input
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="custom-format-start"
@@ -962,6 +975,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 4`] = `
               aria-describedby="invalid-start-helperText"
               aria-invalid={true}
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="invalid-start"
@@ -1047,6 +1061,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 5`] = `
             <input
               aria-describedby="disabled-start-helperText"
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={true}
               id="disabled-start"
@@ -1132,6 +1147,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 6`] = `
             <input
               aria-describedby="chakra-start-helperText"
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="chakra-start"
@@ -1218,6 +1234,7 @@ exports[`DatePicker Single input renders the UI snapshot correctly 7`] = `
             <input
               aria-describedby="props-start-helperText"
               aria-label="Select the date you want to visit NYPL, Press tab to access the calendar."
+              autoComplete={null}
               className="chakra-input css-0"
               disabled={false}
               id="props-start"
diff --git a/src/components/TextInput/TextInput.mdx b/src/components/TextInput/TextInput.mdx
index 0ed4d93df3..90c5824733 100644
--- a/src/components/TextInput/TextInput.mdx
+++ b/src/components/TextInput/TextInput.mdx
@@ -9,16 +9,17 @@ import { changelogData } from "./textInputChangelogData";
 
 # TextInput
 
-| Component Version | DS Version |
-| ----------------- | ---------- |
-| Added             | `0.22.0`   |
-| Latest            | `2.1.0`    |
+| Component Version | DS Version   |
+| ----------------- | ------------ |
+| Added             | `0.22.0`     |
+| Latest            | `Prerelease` |
 
 ## Table of Contents
 
 - {<Link href="#overview" target="_self">Overview</Link>}
 - {<Link href="#component-props" target="_self">Component Props</Link>}
 - {<Link href="#accessibility" target="_self">Accessibility</Link>}
+- {<Link href="#autocomplete" target="_self">Autocomplete</Link>}
 - {<Link href="#labelling-variations" target="_self">Labelling Variations</Link>}
 - {<Link href="#browser-states" target="_self">Browser States</Link>}
 - {<Link href="#isclearable-button" target="_self">isClearable Button</Link>}
@@ -70,18 +71,41 @@ When the `type` prop is set to `"textarea"`, the `<textarea>` element
 is rendered instead of the `<input>` element. This element follows all the same
 accessibility rules described above.
 
-If the `type` prop is set to `"email"`, `"tel"`, or `"url"`, the appropriate
-`autocomplete` attribute will be added. The autocomplete attribute makes inputs
-easier and more efficient to complete for all users.
-
 Resources:
 
 - [MDN input: The Input (Form Input) element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input)
 - [MDN textarea: The Textarea element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea)
-- [MDN HTML attribute: Autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
 - [Chakra UI Input](https://chakra-ui.com/docs/components/form/input)
 - [Chakra UI Textarea](https://chakra-ui.com/docs/components/form/textarea)
 
+## Autocomplete
+
+The `autocomplete` attribute is another tool that can be used to improve
+accessibility. It is a native HTML attribute that improves the browser's ability
+to pre-populate form fields with user-preferred values and makes inputs easier
+and more efficient to complete for all users. For ease of use, the `TextInput`
+component provides a few methods for incorporating the `autocomplete` attribute.
+
+If the `type` prop is set to `"email"`, `"tel"`, or `"url"`, the component will
+automatically add the `autocomplete` attribute with an appropriate value.
+
+Additionally, the `autoComplete` prop can be used to set the `autocomplete`
+attribute manually. When the `autoComplete` prop is set, its value will be used
+to set the `autocomplete` attribute on the input field. Furthermore, if the
+`type` prop is set to `"email"`, `"tel"`, or `"url"`, the value of the
+`autoComplete` prop will override the value automatically added by the
+component.
+
+Using the `autoComplete` prop can be helpful when it is necessary to set
+`autocomplete` attribute values that are not automatically added by the
+component or when privacy is a concern. For example, setting the `autoComplete`
+prop to `"off"` will disable the native browser based autocomplete
+functionality.
+
+Resources:
+
+- [MDN HTML attribute: Autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
+
 ## Labelling Variations
 
 A TextInput can be rendered with or without visible labels. When `showLabel` is
diff --git a/src/components/TextInput/TextInput.stories.tsx b/src/components/TextInput/TextInput.stories.tsx
index e80e1b6bee..cf0c529fa8 100644
--- a/src/components/TextInput/TextInput.stories.tsx
+++ b/src/components/TextInput/TextInput.stories.tsx
@@ -4,13 +4,20 @@ import { useState } from "react";
 import { withDesign } from "storybook-addon-designs";
 
 import Heading from "../Heading/Heading";
-import TextInput, { textInputTypesArray } from "./TextInput";
+import TextInput, {
+  autoCompleteValuesArray,
+  textInputTypesArray,
+} from "./TextInput";
 
 const meta: Meta<typeof TextInput> = {
   title: "Components/Form Elements/TextInput",
   component: TextInput,
   decorators: [withDesign],
   argTypes: {
+    autoComplete: {
+      control: { type: "select" },
+      options: autoCompleteValuesArray,
+    },
     id: { control: false },
     isClearable: { table: { defaultValue: { summary: false } } },
     isDisabled: { table: { defaultValue: { summary: false } } },
@@ -47,6 +54,7 @@ type Story = StoryObj<typeof TextInput>;
 export const WithControls: Story = {
   args: {
     additionalHelperTextIds: undefined,
+    autoComplete: undefined,
     className: undefined,
     defaultValue: undefined,
     helperText: "Choose wisely.",
diff --git a/src/components/TextInput/TextInput.test.tsx b/src/components/TextInput/TextInput.test.tsx
index 1aaf897573..154a9830fb 100644
--- a/src/components/TextInput/TextInput.test.tsx
+++ b/src/components/TextInput/TextInput.test.tsx
@@ -164,6 +164,49 @@ describe("TextInput", () => {
     expect(screen.getByRole("textbox")).toHaveAttribute("autocomplete", "url");
   });
 
+  it("has an 'autocomplete' attribute if the `autoComplete` prop is set", () => {
+    expect(screen.getByRole("textbox")).not.toHaveAttribute("autocomplete");
+
+    utils.rerender(
+      <TextInput
+        autoComplete="name"
+        id="myEmailInput"
+        labelText="Custom Email Input Label"
+        onChange={changeHandler}
+        type="text"
+      />
+    );
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("autocomplete", "name");
+
+    utils.rerender(
+      <TextInput
+        autoComplete="off"
+        id="myTelInput"
+        labelText="Custom Tel Input Label"
+        onChange={changeHandler}
+        type="text"
+      />
+    );
+
+    expect(screen.getByRole("textbox")).toHaveAttribute("autocomplete", "off");
+
+    utils.rerender(
+      <TextInput
+        autoComplete="username"
+        id="myURLInput"
+        labelText="Custom URL Input Label"
+        onChange={changeHandler}
+        type="email"
+      />
+    );
+
+    expect(screen.getByRole("textbox")).toHaveAttribute(
+      "autocomplete",
+      "username"
+    );
+  });
+
   it("does not render '(Required)' along with the label text", () => {
     utils.rerender(
       <TextInput
@@ -690,6 +733,17 @@ describe("UI Snapshots", () => {
         />
       )
       .toJSON();
+    const withCustomAutoComplete = renderer
+      .create(
+        <TextInput
+          autoComplete="name"
+          id="autocomplete"
+          labelText="Custom Input Label"
+          placeholder="Input Placeholder"
+          type="text"
+        />
+      )
+      .toJSON();
 
     expect(basicTextarea).toMatchSnapshot();
     expect(required).toMatchSnapshot();
@@ -702,6 +756,7 @@ describe("UI Snapshots", () => {
     expect(withClearButton).toMatchSnapshot();
     expect(withChakraProps).toMatchSnapshot();
     expect(withOtherProps).toMatchSnapshot();
+    expect(withCustomAutoComplete).toMatchSnapshot();
   });
 
   it("passes a ref to the input element", () => {
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index f007edf09d..fc3f4dc62b 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -16,6 +16,65 @@ import { getAriaAttrs } from "../../utils/utils";
 import Button from "../Button/Button";
 import Icon from "../Icons/Icon";
 
+export const autoCompleteValuesArray = [
+  "on",
+  "off",
+  "additional-name",
+  "address-level1",
+  "address-level2",
+  "address-level3",
+  "address-level4",
+  "address-line1",
+  "address-line2",
+  "address-line3",
+  "bday-day",
+  "bday-month",
+  "bday-year",
+  "bday",
+  "cc-additional-name",
+  "cc-csc",
+  "cc-exp-month",
+  "cc-exp-year",
+  "cc-exp",
+  "cc-family-name",
+  "cc-given-name",
+  "cc-name",
+  "cc-number",
+  "cc-type",
+  "country-name",
+  "country",
+  "current-password",
+  "email",
+  "family-name",
+  "given-name",
+  "honorific-prefix",
+  "honorific-suffix",
+  "impp",
+  "language",
+  "name",
+  "new-password",
+  "nickname",
+  "organization-title",
+  "organization",
+  "photo",
+  "postal-code",
+  "sex",
+  "street-address",
+  "tel-area-code",
+  "tel-country-code",
+  "tel-extension",
+  "tel-local-prefix",
+  "tel-local-suffix",
+  "tel-local",
+  "tel-national",
+  "tel",
+  "transaction-amount",
+  "transaction-currency",
+  "url",
+  "username",
+] as const;
+export type AutoCompleteValues = typeof autoCompleteValuesArray[number];
+
 export const textInputTypesArray = [
   "email",
   "hidden",
@@ -49,6 +108,8 @@ export interface InputProps {
   /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
    * If more than one, separate each with a space */
   additionalHelperTextIds?: string;
+  /** String value used to set the autocomplete attribute. */
+  autoComplete?: AutoCompleteValues;
   /** A class name for the TextInput parent div. */
   className?: string;
   /** The starting value of the input field. */
@@ -133,6 +194,7 @@ export const TextInput = chakra(
       const {
         additionalAriaLabel,
         additionalHelperTextIds,
+        autoComplete,
         className,
         defaultValue,
         helperText,
@@ -174,7 +236,7 @@ export const TextInput = chakra(
       });
       const isTextArea = type === "textarea";
       const isHidden = type === "hidden";
-      let hasAutocomplete = false;
+      let hasAutocomplete = autoComplete ? true : false;
       const finalInvalidText = invalidText
         ? invalidText
         : "There is an error related to this field.";
@@ -247,7 +309,11 @@ export const TextInput = chakra(
           }
         : {
             "aria-required": isRequired,
-            autoComplete: hasAutocomplete ? type : null,
+            autoComplete: hasAutocomplete
+              ? autoComplete
+                ? autoComplete
+                : type
+              : null,
             defaultValue,
             id,
             isDisabled,
diff --git a/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap b/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap
index 0a6157d33b..3f909edec0 100644
--- a/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap
+++ b/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap
@@ -402,3 +402,35 @@ exports[`UI Snapshots renders the text input UI snapshot correctly 11`] = `
   </div>
 </div>
 `;
+
+exports[`UI Snapshots renders the text input UI snapshot correctly 12`] = `
+<div
+  className="css-1u8qly9"
+  id="autocomplete-wrapper"
+>
+  <label
+    className="css-1xdhyk6"
+    htmlFor="autocomplete"
+    id="autocomplete-label"
+  >
+    Custom Input Label
+  </label>
+  <div
+    className="css-79elbk"
+  >
+    <input
+      autoComplete="name"
+      className="chakra-input css-0"
+      disabled={false}
+      id="autocomplete"
+      onBlur={[Function]}
+      onChange={[Function]}
+      onFocus={[Function]}
+      placeholder="Input Placeholder"
+      required={false}
+      step={null}
+      type="text"
+    />
+  </div>
+</div>
+`;
diff --git a/src/components/TextInput/textInputChangelogData.ts b/src/components/TextInput/textInputChangelogData.ts
index 956cabf28e..2507852f0a 100644
--- a/src/components/TextInput/textInputChangelogData.ts
+++ b/src/components/TextInput/textInputChangelogData.ts
@@ -9,6 +9,15 @@
 import { ChangelogData } from "../../utils/ComponentChangelogTable";
 
 export const changelogData: ChangelogData[] = [
+  {
+    date: "Prerelease",
+    version: "Prerelease",
+    type: "Update",
+    affects: ["Accessibility"],
+    notes: [
+      'Added the `autoComplete` prop for setting the "autocomplete" attribute manually.',
+    ],
+  },
   {
     date: "2023-10-18",
     version: "2.1.0",

From efe3f37692c013c72114e54e627004f40fed24de Mon Sep 17 00:00:00 2001
From: bigfishdesign13 <marty@brutvan.com>
Date: Fri, 3 Nov 2023 12:36:40 -0400
Subject: [PATCH 2/2] updates based on feedback

---
 CHANGELOG.md                           |  2 +-
 src/components/TextInput/TextInput.mdx | 11 ++++++-----
 src/components/TextInput/TextInput.tsx |  5 +++++
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2af94a7e1f..4313fff951 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,7 +10,7 @@ Currently, this repo is in Prerelease. When it is released, this project will ad
 
 ### Adds
 
-- Added the `autoComplete` prop to the `textInput` component for setting the "autocomplete" attribute manually.
+- Added the `autoComplete` prop to the `TextInput` component for setting the "autocomplete" attribute manually.
 
 ## 2.1.1 (October 26, 2023)
 
diff --git a/src/components/TextInput/TextInput.mdx b/src/components/TextInput/TextInput.mdx
index 90c5824733..393743aca5 100644
--- a/src/components/TextInput/TextInput.mdx
+++ b/src/components/TextInput/TextInput.mdx
@@ -80,11 +80,12 @@ Resources:
 
 ## Autocomplete
 
-The `autocomplete` attribute is another tool that can be used to improve
-accessibility. It is a native HTML attribute that improves the browser's ability
-to pre-populate form fields with user-preferred values and makes inputs easier
-and more efficient to complete for all users. For ease of use, the `TextInput`
-component provides a few methods for incorporating the `autocomplete` attribute.
+The native HTML `autocomplete` attribute is another tool that can be used to
+improve accessibility. The `autocomplete` attribute improves the browser's
+ability to pre-populate form fields with user-preferred values and makes inputs
+easier and more efficient to complete for all users. For ease of use, the
+`TextInput` component provides a few methods for incorporating the
+`autocomplete` attribute.
 
 If the `type` prop is set to `"email"`, `"tel"`, or `"url"`, the component will
 automatically add the `autocomplete` attribute with an appropriate value.
diff --git a/src/components/TextInput/TextInput.tsx b/src/components/TextInput/TextInput.tsx
index fc3f4dc62b..861fe3c78b 100644
--- a/src/components/TextInput/TextInput.tsx
+++ b/src/components/TextInput/TextInput.tsx
@@ -309,6 +309,11 @@ export const TextInput = chakra(
           }
         : {
             "aria-required": isRequired,
+            /** If the `autoComplete` prop is passed, that value will take
+             * precedence and will be used here. Otherwise, a value will be set
+             * based on the `type` prop. Lastly, if `autoComplete` is not passed
+             * and a default value is not set based on the `type` prop, then
+             * `autoComplete` will not be set for the input. */
             autoComplete: hasAutocomplete
               ? autoComplete
                 ? autoComplete