diff --git a/packages/react/src/TextInput/TextInput.test.tsx b/packages/react/src/TextInput/TextInput.test.tsx index f0b2f38e72..3cc502b941 100644 --- a/packages/react/src/TextInput/TextInput.test.tsx +++ b/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() - - 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( - <> - - - , - ) - - const component = screen.getByLabelText(/password/i) - - expect(component).toHaveAttribute('type', 'password') - }) + textInputTypes.map((type) => + it(`sets the ‘${type}’ type`, () => { + render() + + const component = screen.getByRole('textbox') + + expect(component).toHaveAttribute('type', type) + }), + ) }) }) diff --git a/packages/react/src/TextInput/TextInput.tsx b/packages/react/src/TextInput/TextInput.tsx index f224294336..a86f3592fb 100644 --- a/packages/react/src/TextInput/TextInput.tsx +++ b/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] diff --git a/storybook/src/components/TextInput/TextInput.docs.mdx b/storybook/src/components/TextInput/TextInput.docs.mdx index 8850274411..113953e553 100644 --- a/storybook/src/components/TextInput/TextInput.docs.mdx +++ b/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. - - - ### Type: Email address This field helps the user enter an email address. diff --git a/storybook/src/components/TextInput/TextInput.stories.tsx b/storybook/src/components/TextInput/TextInput.stories.tsx index 80b12798c5..925978d717 100644 --- a/storybook/src/components/TextInput/TextInput.stories.tsx +++ b/storybook/src/components/TextInput/TextInput.stories.tsx @@ -32,14 +32,6 @@ type Story = StoryObj export const Default: Story = {} -export const Password: Story = { - args: { - minLength: 8, - type: 'password', - value: 'password', - }, -} - export const EmailAddress: Story = { args: { type: 'email',