Deprecate contrast for TextInput and Textarea

.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.

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",

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

@@ -52,6 +52,24 @@ describe('TextInput', () => {
     expect(render(<TextInput name="zipcode" contrast value="" />).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(<TextInput name="zipcode" {...props} />)
+    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(<TextInput name="zipcode" monospace value="" />).container).toMatchSnapshot()
   })

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",

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(<Textarea {...props} />)
+    const textarea = screen.getByRole('textbox')
+
+    if (props.contrast) {
+      expect(container.firstElementChild).toHaveAttribute('data-contrast', 'true')
+    } else {
+      expect(container.firstElementChild).not.toHaveAttribute('data-contrast')
+    }
+
+    expect(textarea).not.toHaveAttribute('contrast')
+    expect(textarea).toBeEnabled()
+  })
+
   it('renders data-component attribute', () => {
     render(<Textarea />)
     expect(screen.getByRole('textbox')).toHaveAttribute('data-component', 'Textarea')

packages/react/src/Textarea/Textarea.tsx

@@ -38,7 +38,7 @@ export type TextareaProps = {
    */
   autoSize?: boolean
   /**
-   * apply a high contrast color to background
+   * @deprecated Omit this prop to use the default background.
    */
   contrast?: boolean
   /**

packages/react/src/internal/components/TextInputWrapper.tsx

@@ -8,6 +8,9 @@ export type TextInputSizes = 'small' | 'medium' | 'large'
 
 type StyledTextInputBaseWrapperProps = {
   block?: boolean
+  /**
+   * @deprecated Omit this prop to use the default background.
+   */
   contrast?: boolean
   disabled?: boolean
   hasTrailingAction?: boolean