Merge branch 'next-major' into remove-pagelayout-pane-position-prop

primer · Jun 20, 2023 · f8025d1 · f8025d1
2 parents 1bd8fbc + eab4d15
commit f8025d1
Show file tree

Hide file tree

Showing 57 changed files with 177 additions and 543 deletions.
diff --git a/.changeset/lemon-dancers-marry.md b/.changeset/lemon-dancers-marry.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Deprecates FilterList and FilteredSearch components
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/FilterList.mdx b/docs/content/FilterList.mdx
@@ -1,12 +1,15 @@
 ---
 componentId: filter_list
 title: FilterList
-status: Alpha
+status: Deprecated
+description: The FilterList component is a menu with filter options that filter the main content of the page.
 ---
 
-import data from '../../src/FilterList/FilterList.docs.json'
+import data from '../../src/deprecated/FilterList/FilterList.docs.json'
 
-The FilterList component is a menu with filter options that filter the main content of the page.
+## Deprecation
+
+Use [ActionList](/ActionList) instead.
 
 ## Examples
 

diff --git a/docs/content/FilteredSearch.mdx b/docs/content/FilteredSearch.mdx
@@ -1,15 +1,20 @@
 ---
 componentId: filtered_search
 title: FilteredSearch
-status: Alpha
+status: Deprecated
+description: The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side.
 ---
 
-import data from '../../src/FilteredSearch/FilteredSearch.docs.json'
-
-The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side.
+import data from '../../src/deprecated/FilteredSearch/FilteredSearch.docs.json'
 
 **Note:** You _must_ use a `TextInput` and `ActionMenu` (or native `<details>` and `<summary>`) in order for this component to work properly.
 
+## Deprecation
+
+A new filter component is in progress.
+
+Until the new filter component is ready, you can use Button + TextInput + ActionList to reproduce this pattern.
+
 ## Examples
 
 ```jsx live

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/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -72,10 +72,6 @@
       url: /Details
     - title: Dialog
       url: /Dialog
-    - title: FilteredSearch
-      url: /FilteredSearch
-    - title: FilterList
-      url: /FilterList
     - title: Flash
       url: /Flash
     - title: FormControl
@@ -190,6 +186,10 @@
       url: /deprecated/Dropdown
     - title: DropdownMenu
       url: /deprecated/DropdownMenu
+    - title: FilteredSearch
+      url: /deprecated/FilteredSearch
+    - title: FilterList
+      url: /deprecated/FilterList
     - title: Flex
       url: /deprecated/Flex
     - title: FormGroup

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, () => {