fix: Remove password from Text Input types (#1300)

packages/react/src/TextInput/TextInput.test.tsx

@@ -2,7 +2,6 @@ import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { createRef, useState } from 'react'
 import { TextInput, textInputTypes } from './TextInput'
-import { Label } from '../Label'
 import '@testing-library/jest-dom'
 
 describe('Text input', () => {
@@ -119,30 +118,14 @@ describe('Text input', () => {
   })
 
   describe('Type', () => {
-    textInputTypes
-      .filter((type) => type !== 'password')
-      .map((type) =>
-        it(`sets the ‘${type}’ type`, () => {
-          render(<TextInput type={type} />)
-
-          const component = screen.getByRole('textbox')
-
-          expect(component).toHaveAttribute('type', type)
-        }),
-      )
-
-    // https://github.com/testing-library/dom-testing-library/issues/567
-    it('sets the ‘password’ type', () => {
-      render(
-        <>
-          <Label htmlFor="password-field">Password</Label>
-          <TextInput id="password-field" type="password" />
-        </>,
-      )
-
-      const component = screen.getByLabelText(/password/i)
-
-      expect(component).toHaveAttribute('type', 'password')
-    })
+    textInputTypes.map((type) =>
+      it(`sets the ‘${type}’ type`, () => {
+        render(<TextInput type={type} />)
+
+        const component = screen.getByRole('textbox')
+
+        expect(component).toHaveAttribute('type', type)
+      }),
+    )
   })
 })

packages/react/src/TextInput/TextInput.tsx

@@ -7,7 +7,7 @@ import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, InputHTMLAttributes } from 'react'
 
-export const textInputTypes = ['email', 'password', 'tel', 'text', 'url'] as const
+export const textInputTypes = ['email', 'tel', 'text', 'url'] as const
 
 type TextInputType = (typeof textInputTypes)[number]
 

storybook/src/components/TextInput/TextInput.docs.mdx

@@ -14,32 +14,6 @@ import README from "../../../../packages/css/src/components/text-input/README.md
 
 ## Examples
 
-### Type: Password
-
-Creates an input where the user can enter a password.
-The characters entered are hidden, usually represented by dots or asterisks, so that the actual text is not visible.
-
-Use the password type when the input requires sensitive information, like passwords or PINs.
-It ensures that the input is not readable by others who might be looking at the screen.
-
-Consider setting the following attributes:
-
-1. Allow the user’s password manager to automatically fill the password through `autocomplete="current-password"`.
-   When asking for a new password, use `autocomplete="new-password"` instead.
-2. Add a `minlength` attribute to ensure passwords meet a minimum length requirement.
-   Do not add a `maxlength` attribute.
-3. Use the `pattern` attribute to enforce password policies, like including numbers and special characters.
-   Describe these policies in the [Field](?path=/docs/components-forms-field--docs)’s description as well.
-4. If the password is a numeric PIN, add `inputmode="numeric"`.
-   Devices with virtual keyboards then switch to a numeric keypad layout which makes entering the password easier.
-5. Set `autocapitalize="none"`, `autocorrect="off"` and `spellcheck="false"` to stop browsers automatically changing user input.
-   Passwords shouldn’t be checked for spelling or grammar.
-   This may also prevent posting the password to third-party plugins.
-
-Follow the [guidelines for asking for passwords](https://design-system.service.gov.uk/patterns/passwords/) of the GOV.UK Design System.
-
-<Canvas of={TextInputStories.Password} />
-
 ### Type: Email address
 
 This field helps the user enter an email address.

storybook/src/components/TextInput/TextInput.stories.tsx

@@ -32,14 +32,6 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {}
 
-export const Password: Story = {
-  args: {
-    minLength: 8,
-    type: 'password',
-    value: 'password',
-  },
-}
-
 export const EmailAddress: Story = {
   args: {
     type: 'email',