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()
+ 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()
expect(screen.getByRole('textbox')).toHaveAttribute('data-component', 'Textarea')
diff --git a/packages/react/src/Textarea/Textarea.tsx b/packages/react/src/Textarea/Textarea.tsx
index 3c09347a7a5..b35b1890b37 100644
--- a/packages/react/src/Textarea/Textarea.tsx
+++ b/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
/**
diff --git a/packages/react/src/internal/components/TextInputWrapper.tsx b/packages/react/src/internal/components/TextInputWrapper.tsx
index 4b3a7250c35..90bbea9fa9e 100644
--- a/packages/react/src/internal/components/TextInputWrapper.tsx
+++ b/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