diff --git a/.changeset/old-coats-sniff.md b/.changeset/old-coats-sniff.md new file mode 100644 index 00000000000..a5ab61e987d --- /dev/null +++ b/.changeset/old-coats-sniff.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Removes 'warning' option from form components' `validationStatus` props diff --git a/docs/content/TextInput.mdx b/docs/content/TextInput.mdx index 61b59d0f7e6..e567b05e37e 100644 --- a/docs/content/TextInput.mdx +++ b/docs/content/TextInput.mdx @@ -152,26 +152,16 @@ render() ``` -### With error and warning states +### With error state ```jsx live -<> - - - - + ``` ### Block text input diff --git a/e2e/components/CheckboxGroup.test.ts b/e2e/components/CheckboxGroup.test.ts index 716e4fd2684..45697bbeba5 100644 --- a/e2e/components/CheckboxGroup.test.ts +++ b/e2e/components/CheckboxGroup.test.ts @@ -174,38 +174,4 @@ test.describe('CheckboxGroup', () => { }) } }) - - test.describe('Warning', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-checkboxgroup-features--warning', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`CheckboxGroup.Warning.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-checkboxgroup-features--warning', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: false, - }, - }, - }) - }) - }) - } - }) }) diff --git a/e2e/components/RadioGroup.test.ts b/e2e/components/RadioGroup.test.ts index 8c71ae5407a..59512a41e98 100644 --- a/e2e/components/RadioGroup.test.ts +++ b/e2e/components/RadioGroup.test.ts @@ -143,34 +143,6 @@ test.describe('RadioGroup', () => { } }) - test.describe('Warning', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-radiogroup-features--warning', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`RadioGroup.Warning.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-radiogroup-features--warning', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - test.describe('With External Label', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/e2e/components/Select.test.ts b/e2e/components/Select.test.ts index 89dd8eeb53e..0fa7576e1d7 100644 --- a/e2e/components/Select.test.ts +++ b/e2e/components/Select.test.ts @@ -279,41 +279,6 @@ test.describe('Select', () => { } }) - test.describe('Warning', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-select-features--warning', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Select.Warning.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-select-features--warning', - globals: { - colorScheme: theme, - }, - }) - await expect(page.getByText('Warning')).toBeVisible() - await expect(page).toHaveNoViolations({ - rules: { - 'color-contrast': { - enabled: theme !== 'dark_dimmed', - }, - }, - }) - }) - }) - } - }) - test.describe('With Caption', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/e2e/components/TextInput.test.ts b/e2e/components/TextInput.test.ts index f2da46101da..dc1af6c6551 100644 --- a/e2e/components/TextInput.test.ts +++ b/e2e/components/TextInput.test.ts @@ -227,34 +227,6 @@ test.describe('TextInput', () => { } }) - test.describe('Warning', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textinput-features--warning', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TextInput.Warning.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textinput-features--warning', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - test.describe('With Caption', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/e2e/components/Textarea.test.ts b/e2e/components/Textarea.test.ts index c2d34565a35..6df9ca2792e 100644 --- a/e2e/components/Textarea.test.ts +++ b/e2e/components/Textarea.test.ts @@ -171,34 +171,6 @@ test.describe('Textarea', () => { } }) - test.describe('Warning', () => { - for (const theme of themes) { - test.describe(theme, () => { - test('default @vrt', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--warning', - globals: { - colorScheme: theme, - }, - }) - - // Default state - expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`Textarea.Warning.${theme}.png`) - }) - - test('axe @aat', async ({page}) => { - await visit(page, { - id: 'components-textarea-features--warning', - globals: { - colorScheme: theme, - }, - }) - await expect(page).toHaveNoViolations() - }) - }) - } - }) - test.describe('With Caption', () => { for (const theme of themes) { test.describe(theme, () => { diff --git a/generated/components.json b/generated/components.json index 9746c16fc1f..7e559bb58ac 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1041,7 +1041,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Only used to inform ARIA attributes.
Individual checkboxes do not have validation styles." }, @@ -1163,7 +1163,7 @@ }, { "name": "variant", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "required": true, "description": "Changes the visual style to match the validation status" @@ -1770,7 +1770,7 @@ }, { "name": "variant", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "required": true, "description": "Changes the visual style to match the validation status" @@ -3220,7 +3220,7 @@ }, { "name": "variant", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "required": true, "description": "Changes the visual style to match the validation status" @@ -3526,7 +3526,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Style the input to match the status" } @@ -4050,7 +4050,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Style the input to match the status" }, @@ -4206,7 +4206,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Style the input to match the status" }, diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index dc4d2cd852b..06cef9b0247 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -326,10 +326,6 @@ const components = new Map([ id: 'components-checkboxgroup-features--visually-hidden-label', name: 'Visually Hidden Label', }, - { - id: 'components-checkboxgroup-features--warning', - name: 'Warning', - }, ], }, ], @@ -954,10 +950,6 @@ const components = new Map([ id: 'components-radiogroup-features--visually-hidden-label', name: 'Visually Hidden Label', }, - { - id: 'components-radiogroup-features--warning', - name: 'Warning', - }, { id: 'components-radiogroup-features--with-external-label', name: 'With External Label', @@ -1001,10 +993,6 @@ const components = new Map([ id: 'components-select-features--visually-hidden-label', name: 'Visually Hidden Label', }, - { - id: 'components-select-features--warning', - name: 'Warning', - }, { id: 'components-select-features--with-caption', name: 'With Caption', @@ -1137,10 +1125,6 @@ const components = new Map([ id: 'components-textarea-features--visually-hidden-label', name: 'Visually Hidden Label', }, - { - id: 'components-textarea-features--warning', - name: 'Warning', - }, { id: 'components-textarea-features--with-caption', name: 'With Caption', @@ -1184,10 +1168,6 @@ const components = new Map([ id: 'components-textinput-features--visually-hidden-label', name: 'Visually Hidden Label', }, - { - id: 'components-textinput-features--warning', - name: 'Warning', - }, { id: 'components-textinput-features--with-caption', name: 'With Caption', diff --git a/src/Checkbox/Checkbox.docs.json b/src/Checkbox/Checkbox.docs.json index f4e24489bce..b852b82c3f5 100644 --- a/src/Checkbox/Checkbox.docs.json +++ b/src/Checkbox/Checkbox.docs.json @@ -37,7 +37,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Only used to inform ARIA attributes.
Individual checkboxes do not have validation styles." }, diff --git a/src/CheckboxGroup/CheckboxGroup.docs.json b/src/CheckboxGroup/CheckboxGroup.docs.json index 787251969df..53549104285 100644 --- a/src/CheckboxGroup/CheckboxGroup.docs.json +++ b/src/CheckboxGroup/CheckboxGroup.docs.json @@ -89,7 +89,7 @@ }, { "name": "variant", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "required": true, "description": "Changes the visual style to match the validation status" diff --git a/src/CheckboxGroup/CheckboxGroup.features.stories.tsx b/src/CheckboxGroup/CheckboxGroup.features.stories.tsx index ce6fedb56b0..49cf05020de 100644 --- a/src/CheckboxGroup/CheckboxGroup.features.stories.tsx +++ b/src/CheckboxGroup/CheckboxGroup.features.stories.tsx @@ -72,25 +72,6 @@ export const Error = () => ( ) -export const Warning = () => ( - - Choices - - - Choice one - - - - Choice two - - - - Choice three - - Warning message - -) - export const Success = () => ( Choices diff --git a/src/CheckboxGroup/CheckboxGroup.stories.tsx b/src/CheckboxGroup/CheckboxGroup.stories.tsx index a8418e801a2..723d381fec1 100644 --- a/src/CheckboxGroup/CheckboxGroup.stories.tsx +++ b/src/CheckboxGroup/CheckboxGroup.stories.tsx @@ -90,7 +90,7 @@ Playground.argTypes = { control: { type: 'radio', }, - options: ['error', 'success', 'warning'], + options: ['error', 'success'], table: { category: 'CheckboxGroup.Validation', }, diff --git a/src/FormControl/FormControl.docs.json b/src/FormControl/FormControl.docs.json index 8f5aac8fa21..396929c14e9 100644 --- a/src/FormControl/FormControl.docs.json +++ b/src/FormControl/FormControl.docs.json @@ -87,7 +87,7 @@ }, { "name": "variant", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "required": true, "description": "Changes the visual style to match the validation status" diff --git a/src/RadioGroup/RadioGroup.docs.json b/src/RadioGroup/RadioGroup.docs.json index 7f4f41ca98e..e5d9872c564 100644 --- a/src/RadioGroup/RadioGroup.docs.json +++ b/src/RadioGroup/RadioGroup.docs.json @@ -96,7 +96,7 @@ }, { "name": "variant", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "required": true, "description": "Changes the visual style to match the validation status" diff --git a/src/RadioGroup/RadioGroup.features.stories.tsx b/src/RadioGroup/RadioGroup.features.stories.tsx index f32a88a7823..760ed249fae 100644 --- a/src/RadioGroup/RadioGroup.features.stories.tsx +++ b/src/RadioGroup/RadioGroup.features.stories.tsx @@ -72,25 +72,6 @@ export const Error = () => ( ) -export const Warning = () => ( - - Choices - - - Choice one - - - - Choice two - - - - Choice three - - Warning message - -) - export const Success = () => ( Choices diff --git a/src/RadioGroup/RadioGroup.stories.tsx b/src/RadioGroup/RadioGroup.stories.tsx index bbe1f01b96c..4be024933b6 100644 --- a/src/RadioGroup/RadioGroup.stories.tsx +++ b/src/RadioGroup/RadioGroup.stories.tsx @@ -90,7 +90,7 @@ Playground.argTypes = { control: { type: 'radio', }, - options: ['error', 'success', 'warning'], + options: ['error', 'success'], table: { category: 'CheckboxGroup.Validation', }, diff --git a/src/Select/Select.docs.json b/src/Select/Select.docs.json index d67843d257d..c4e4e269037 100644 --- a/src/Select/Select.docs.json +++ b/src/Select/Select.docs.json @@ -31,7 +31,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Style the input to match the status" } diff --git a/src/Select/Select.features.stories.tsx b/src/Select/Select.features.stories.tsx index 985c1606a8f..b85beb06af1 100644 --- a/src/Select/Select.features.stories.tsx +++ b/src/Select/Select.features.stories.tsx @@ -91,23 +91,6 @@ export const Error = () => ( ) -export const Warning = () => ( - - - Default label - - Warning - - -) - export const Success = () => ( diff --git a/src/TextInput/TextInput.docs.json b/src/TextInput/TextInput.docs.json index 6e1b4c8e7d2..d83d646bf62 100644 --- a/src/TextInput/TextInput.docs.json +++ b/src/TextInput/TextInput.docs.json @@ -67,7 +67,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Style the input to match the status" }, diff --git a/src/TextInput/TextInput.features.stories.tsx b/src/TextInput/TextInput.features.stories.tsx index 12eff8b85fe..51c9c7ef584 100644 --- a/src/TextInput/TextInput.features.stories.tsx +++ b/src/TextInput/TextInput.features.stories.tsx @@ -46,16 +46,6 @@ export const Error = () => ( ) -export const Warning = () => ( - - - Default label - - Something went wrong - - -) - export const Success = () => ( diff --git a/src/TextInputWithTokens/TextInputWithTokens.docs.json b/src/TextInputWithTokens/TextInputWithTokens.docs.json index d7dfcd2ec16..3e3d7bf77c1 100644 --- a/src/TextInputWithTokens/TextInputWithTokens.docs.json +++ b/src/TextInputWithTokens/TextInputWithTokens.docs.json @@ -51,7 +51,7 @@ }, { "name": "validationStatus", - "type": "'error' | 'success' | 'warning'", + "type": "'error' | 'success'", "defaultValue": "", "description": "Style the input to match the status" }, diff --git a/src/Textarea/Textarea.features.stories.tsx b/src/Textarea/Textarea.features.stories.tsx index 080ad992a83..16de690d7b8 100644 --- a/src/Textarea/Textarea.features.stories.tsx +++ b/src/Textarea/Textarea.features.stories.tsx @@ -44,16 +44,6 @@ export const Error = () => ( ) -export const Warning = () => ( - - - Default label -