Deprecate old filter components

.changeset/lemon-dancers-marry.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Deprecates FilterList and FilteredSearch components

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
 

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

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

generated/components.json

@@ -1641,80 +1641,6 @@
       ],
       "subcomponents": []
     },
-    "filter_list": {
-      "id": "filter_list",
-      "name": "FilterList",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [
-        {
-          "id": "components-filterlist--default",
-          "code": "() => {\n  const [selectedIndex, setSelectedIndex] = useState(0)\n  return (\n    <FilterList>\n      <FilterList.Item\n        selected={selectedIndex === 0}\n        onClick={() => setSelectedIndex(0)}\n        count={32}\n      >\n        First Filter\n      </FilterList.Item>\n      <FilterList.Item\n        selected={selectedIndex === 1}\n        onClick={() => setSelectedIndex(1)}\n        count={16}\n      >\n        Second Filter\n      </FilterList.Item>\n      <FilterList.Item\n        selected={selectedIndex === 2}\n        onClick={() => setSelectedIndex(2)}\n      >\n        Third Filter\n      </FilterList.Item>\n    </FilterList>\n  )\n}"
-        }
-      ],
-      "props": [
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": [
-        {
-          "name": "FilterList.Item",
-          "props": [
-            {
-              "name": "count",
-              "type": "number",
-              "description": "Number to be displayed in the list item"
-            },
-            {
-              "name": "selected",
-              "type": "boolean",
-              "description": "Whether the list item is selected or not"
-            },
-            {
-              "name": "small",
-              "type": "boolean",
-              "defaultValue": "false",
-              "description": "Whether the list item is small or not"
-            },
-            {
-              "name": "as",
-              "type": "React.ElementType",
-              "defaultValue": "'a'"
-            },
-            {
-              "name": "sx",
-              "type": "SystemStyleObject"
-            }
-          ]
-        }
-      ]
-    },
-    "filtered_search": {
-      "id": "filtered_search",
-      "name": "FilteredSearch",
-      "status": "alpha",
-      "a11yReviewed": false,
-      "stories": [
-        {
-          "id": "components-filteredsearch--default",
-          "code": "() => (\n  <FilteredSearch>\n    <ActionMenu>\n      <ActionMenu.Button as=\"summary\">Filter</ActionMenu.Button>\n      <ActionMenu.Overlay>\n        <ActionList>\n          <ActionList.Item>Item 1</ActionList.Item>\n          <ActionList.Item>Item 2</ActionList.Item>\n          <ActionList.Item>Item 3</ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <TextInput aria-label=\"filtered-search\" leadingVisual={SearchIcon} />\n  </FilteredSearch>\n)"
-        }
-      ],
-      "props": [
-        {
-          "name": "children",
-          "type": "React.ReactNode",
-          "description": "FilteredSearch is expected to contain an `ActionMenu` followed by a `TextInput`."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject"
-        }
-      ],
-      "subcomponents": []
-    },
     "flash": {
       "id": "flash",
       "name": "Flash",
@@ -5040,6 +4966,80 @@
         }
       ]
     },
+    "filter_list": {
+      "id": "filter_list",
+      "name": "FilterList",
+      "status": "deprecated",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-filterlist--default",
+          "code": "() => {\n  const [selectedIndex, setSelectedIndex] = useState(0)\n  return (\n    <FilterList>\n      <FilterList.Item\n        selected={selectedIndex === 0}\n        onClick={() => setSelectedIndex(0)}\n        count={32}\n      >\n        First Filter\n      </FilterList.Item>\n      <FilterList.Item\n        selected={selectedIndex === 1}\n        onClick={() => setSelectedIndex(1)}\n        count={16}\n      >\n        Second Filter\n      </FilterList.Item>\n      <FilterList.Item\n        selected={selectedIndex === 2}\n        onClick={() => setSelectedIndex(2)}\n      >\n        Third Filter\n      </FilterList.Item>\n    </FilterList>\n  )\n}"
+        }
+      ],
+      "props": [
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": [
+        {
+          "name": "FilterList.Item",
+          "props": [
+            {
+              "name": "count",
+              "type": "number",
+              "description": "Number to be displayed in the list item"
+            },
+            {
+              "name": "selected",
+              "type": "boolean",
+              "description": "Whether the list item is selected or not"
+            },
+            {
+              "name": "small",
+              "type": "boolean",
+              "defaultValue": "false",
+              "description": "Whether the list item is small or not"
+            },
+            {
+              "name": "as",
+              "type": "React.ElementType",
+              "defaultValue": "'a'"
+            },
+            {
+              "name": "sx",
+              "type": "SystemStyleObject"
+            }
+          ]
+        }
+      ]
+    },
+    "filtered_search": {
+      "id": "filtered_search",
+      "name": "FilteredSearch",
+      "status": "deprecated",
+      "a11yReviewed": false,
+      "stories": [
+        {
+          "id": "components-filteredsearch--default",
+          "code": "() => (\n  <FilteredSearch>\n    <ActionMenu>\n      <ActionMenu.Button as=\"summary\">Filter</ActionMenu.Button>\n      <ActionMenu.Overlay>\n        <ActionList>\n          <ActionList.Item>Item 1</ActionList.Item>\n          <ActionList.Item>Item 2</ActionList.Item>\n          <ActionList.Item>Item 3</ActionList.Item>\n        </ActionList>\n      </ActionMenu.Overlay>\n    </ActionMenu>\n    <TextInput aria-label=\"filtered-search\" leadingVisual={SearchIcon} />\n  </FilteredSearch>\n)"
+        }
+      ],
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "FilteredSearch is expected to contain an `ActionMenu` followed by a `TextInput`."
+        },
+        {
+          "name": "sx",
+          "type": "SystemStyleObject"
+        }
+      ],
+      "subcomponents": []
+    },
     "drafts_button": {
       "id": "drafts_button",
       "name": "Button2",

src/TextInput/TextInput.tsx

@@ -2,7 +2,7 @@ import React, {MouseEventHandler, useCallback, useState} from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classnames from 'classnames'
 
-import TextInputInnerVisualSlot from '../_TextInputInnerVisualSlot'
+import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 import {useProvidedRefOrCreate} from '../hooks'
 import {Merge} from '../utils/types'
 import TextInputWrapper, {StyledWrapperProps} from '../internal/components/TextInputWrapper'

src/TextInputWithTokens/TextInputWithTokens.tsx

@@ -9,9 +9,10 @@ import Text from '../Text'
 import {TextInputProps} from '../TextInput'
 import Token from '../Token/Token'
 import {TokenSizeKeys} from '../Token/TokenBase'
-import TextInputInnerVisualSlot from '../_TextInputInnerVisualSlot'
+
 import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from '../internal/components/TextInputWrapper'
 import UnstyledTextInput from '../internal/components/UnstyledTextInput'
+import TextInputInnerVisualSlot from '../internal/components/TextInputInnerVisualSlot'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>

src/__tests__/__snapshots__/exports.test.ts.snap

@@ -26,8 +26,6 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
   "CounterLabel",
   "Details",
   "Dialog",
-  "FilterList",
-  "FilteredSearch",
   "Flash",
   "FormControl",
   "Header",
@@ -117,6 +115,8 @@ exports[`@primer/react/decprecated should not update exports without a semver ch
   "Dropdown",
   "DropdownButton",
   "DropdownMenu",
+  "FilterList",
+  "FilteredSearch",
   "Fixed",
   "Flex",
   "FormGroup",

src/__tests__/FilterList.test.tsx → src/__tests__/deprecated/FilterList.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {FilterList} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {FilterList} from '../../deprecated'
+import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
@@ -9,7 +9,7 @@ expect.extend(toHaveNoViolations)
 describe('FilterList', () => {
   behavesAsComponent({Component: FilterList})
 
-  checkExports('FilterList', {
+  checkExports('deprecated/FilterList', {
     default: FilterList,
   })
 

src/__tests__/FilterList.types.test.tsx → src/__tests__/deprecated/FilterList.types.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FilterList from '../FilterList'
+import FilterList from '../../deprecated/FilterList'
 
 export function shouldAcceptCallWithNoProps() {
   return <FilterList />

src/__tests__/FilterListItem.test.tsx → src/__tests__/deprecated/FilterListItem.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {FilterList} from '..'
-import {render, behavesAsComponent} from '../utils/testing'
+import {FilterList} from '../../deprecated'
+import {render, behavesAsComponent} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 

src/__tests__/FilteredSearch.test.tsx → src/__tests__/deprecated/FilteredSearch.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {FilteredSearch} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {FilteredSearch} from '../../deprecated'
+import {render, behavesAsComponent, checkExports} from '../../utils/testing'
 import {render as HTMLRender} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 
@@ -9,7 +9,7 @@ expect.extend(toHaveNoViolations)
 describe('FilteredSearch', () => {
   behavesAsComponent({Component: FilteredSearch})
 
-  checkExports('FilteredSearch', {
+  checkExports('deprecated/FilteredSearch', {
     default: FilteredSearch,
   })
 

src/__tests__/FilteredSearch.types.test.tsx → src/__tests__/deprecated/FilteredSearch.types.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import FilteredSearch from '../FilteredSearch'
+import FilteredSearch from '../../deprecated/FilteredSearch'
 
 export function shouldAcceptCallWithNoProps() {
   return <FilteredSearch />

src/FilterList/FilterList.docs.json → src/deprecated/FilterList/FilterList.docs.json

@@ -1,7 +1,7 @@
 {
   "id": "filter_list",
   "name": "FilterList",
-  "status": "alpha",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [

src/FilterList/FilterList.tsx → src/deprecated/FilterList/FilterList.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
-import {get} from '../constants'
-import sx, {SxProp} from '../sx'
-import {ComponentProps} from '../utils/types'
+import {get} from '../../constants'
+import sx, {SxProp} from '../../sx'
+import {ComponentProps} from '../../utils/types'
 
 const FilterListBase = styled.ul<SxProp>`
   list-style-type: none;
@@ -13,6 +13,9 @@ const FilterListBase = styled.ul<SxProp>`
 
 export type FilterListProps = ComponentProps<typeof FilterListBase>
 
+/**
+ * @deprecated Use the ActionList component instead.
+ */
 const FilterList = ({children, ...rest}: React.PropsWithChildren<FilterListProps>) => {
   const items = React.Children.map(children, child => {
     return <li>{child}</li>

src/FilteredSearch/FilteredSearch.docs.json → src/deprecated/FilteredSearch/FilteredSearch.docs.json

@@ -1,7 +1,7 @@
 {
   "id": "filtered_search",
   "name": "FilteredSearch",
-  "status": "alpha",
+  "status": "deprecated",
   "a11yReviewed": false,
   "stories": [],
   "props": [

src/FilteredSearch/FilteredSearch.stories.tsx → src/deprecated/FilteredSearch/FilteredSearch.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import {Meta, ComponentStory} from '@storybook/react'
 import FilteredSearch from './FilteredSearch'
-import {ActionList} from '../ActionList'
-import {ActionMenu} from '../ActionMenu'
-import TextInput from '../TextInput'
+import {ActionList} from '../../ActionList'
+import {ActionMenu} from '../../ActionMenu'
+import TextInput from '../../TextInput'
 import {SearchIcon} from '@primer/octicons-react'
 
 export default {