diff --git a/.changeset/deprecate-input-contrast.md b/.changeset/deprecate-input-contrast.md new file mode 100644 index 00000000000..47c8db30e0d --- /dev/null +++ b/.changeset/deprecate-input-contrast.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +TextInput and Textarea: Deprecate the `contrast` prop. Omit it to use the default background. diff --git a/packages/react/src/TextInput/TextInput.docs.json b/packages/react/src/TextInput/TextInput.docs.json index ff68d969c31..af10bba0d6e 100644 --- a/packages/react/src/TextInput/TextInput.docs.json +++ b/packages/react/src/TextInput/TextInput.docs.json @@ -82,7 +82,8 @@ "name": "contrast", "type": "boolean", "defaultValue": "false", - "description": "Changes background color to a higher contrast color" + "deprecated": true, + "description": "Deprecated. Omit this prop to use the default background." }, { "name": "size", diff --git a/packages/react/src/TextInput/TextInput.test.tsx b/packages/react/src/TextInput/TextInput.test.tsx index 41b7054e43d..0cbe72bfec3 100644 --- a/packages/react/src/TextInput/TextInput.test.tsx +++ b/packages/react/src/TextInput/TextInput.test.tsx @@ -52,6 +52,24 @@ describe('TextInput', () => { expect(render().container).toMatchSnapshot() }) + it.each([ + {label: 'true', props: {contrast: true}}, + {label: 'false', props: {contrast: false}}, + {label: 'omitted', props: {}}, + ])('preserves deprecated contrast behavior when $label', ({props}) => { + const {container} = render() + const input = screen.getByRole('textbox') + + if (props.contrast) { + expect(container.firstElementChild).toHaveAttribute('data-contrast', 'true') + } else { + expect(container.firstElementChild).not.toHaveAttribute('data-contrast') + } + + expect(input).not.toHaveAttribute('contrast') + expect(input).toBeEnabled() + }) + it('renders monospace', () => { expect(render().container).toMatchSnapshot() }) diff --git a/packages/react/src/Textarea/Textarea.docs.json b/packages/react/src/Textarea/Textarea.docs.json index 11afa62f593..3ef30d34ab2 100644 --- a/packages/react/src/Textarea/Textarea.docs.json +++ b/packages/react/src/Textarea/Textarea.docs.json @@ -82,7 +82,8 @@ "name": "contrast", "type": "boolean", "defaultValue": "false", - "description": "Changes background color to a higher contrast color" + "deprecated": true, + "description": "Deprecated. Omit this prop to use the default background." }, { "name": "validationStatus", diff --git a/packages/react/src/Textarea/Textarea.test.tsx b/packages/react/src/Textarea/Textarea.test.tsx index b39980df561..c626bc9ec2b 100644 --- a/packages/react/src/Textarea/Textarea.test.tsx +++ b/packages/react/src/Textarea/Textarea.test.tsx @@ -37,6 +37,24 @@ describe('Textarea', () => { expect(screen.getByRole('textbox')).toBeInTheDocument() }) + it.each([ + {label: 'true', props: {contrast: true}}, + {label: 'false', props: {contrast: false}}, + {label: 'omitted', props: {}}, + ])('preserves deprecated contrast behavior when $label', ({props}) => { + const {container} = render(