Remove 'warning' status from form validation (#3414)

* 3230 Refactor internal components - TextInputInnerVisualSlot (#3373) * refactor(TextInputInnerVisualSlot): moved to internal * fix import * removes 'warning' status from form validation * Update generated/components.json * adds changeset * Update old-coats-sniff.md --------- Co-authored-by: Amanda Brown <amanda.brown@testdouble.com> Co-authored-by: mperrotti <mperrotti@users.noreply.github.com>
primer · Jun 20, 2023 · eab4d15 · eab4d15
1 parent 318f9d6
commit eab4d15
Show file tree

Hide file tree

Showing 31 changed files with 35 additions and 426 deletions.
diff --git a/.changeset/old-coats-sniff.md 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
@@ -152,26 +152,16 @@ render(<WithIconAndLoadingIndicator />)
 </FormControl>
 ```
 
-### With error and warning states
+### With error state
 
 ```jsx live
-<>
-  <TextInput
-    validationStatus="error"
-    aria-label="Zipcode"
-    name="zipcode"
-    placeholder="Error"
-    autoComplete="postal-code"
-  />
-
-  <TextInput
-    validationStatus="warning"
-    aria-label="Zipcode"
-    name="zipcode"
-    placeholder="Warning"
-    autoComplete="postal-code"
-  />
-</>
+<TextInput
+  validationStatus="error"
+  aria-label="Zipcode"
+  name="zipcode"
+  placeholder="Error"
+  autoComplete="postal-code"
+/>
 ```
 
 ### Block text input

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1041,7 +1041,7 @@
         },
         {
           "name": "validationStatus",
-          "type": "'error' | 'success' | 'warning'",
+          "type": "'error' | 'success'",
           "defaultValue": "",
           "description": "Only used to inform ARIA attributes.<br /> 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
@@ -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
@@ -37,7 +37,7 @@
     },
     {
       "name": "validationStatus",
-      "type": "'error' | 'success' | 'warning'",
+      "type": "'error' | 'success'",
       "defaultValue": "",
       "description": "Only used to inform ARIA attributes.<br /> Individual checkboxes do not have validation styles."
     },

diff --git 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
@@ -72,25 +72,6 @@ export const Error = () => (
   </CheckboxGroup>
 )
 
-export const Warning = () => (
-  <CheckboxGroup>
-    <CheckboxGroup.Label>Choices</CheckboxGroup.Label>
-    <FormControl>
-      <Checkbox value="one" defaultChecked />
-      <FormControl.Label>Choice one</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Checkbox value="two" defaultChecked />
-      <FormControl.Label>Choice two</FormControl.Label>
-    </FormControl>
-    <FormControl>
-      <Checkbox value="three" />
-      <FormControl.Label>Choice three</FormControl.Label>
-    </FormControl>
-    <CheckboxGroup.Validation variant="warning">Warning message</CheckboxGroup.Validation>
-  </CheckboxGroup>
-)
-
 export const Success = () => (
   <CheckboxGroup>
     <CheckboxGroup.Label>Choices</CheckboxGroup.Label>

diff --git 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',
     },