diff --git a/.changeset/lemon-dancers-marry.md b/.changeset/lemon-dancers-marry.md new file mode 100644 index 00000000000..5b1d1d8f81f --- /dev/null +++ b/.changeset/lemon-dancers-marry.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Deprecates FilterList and FilteredSearch components diff --git a/docs/content/FilterList.mdx b/docs/content/FilterList.mdx index 687243fcb4c..57dbaa46bd0 100644 --- 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 index ba20ba88690..caa2736e530 100644 --- 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 `
` and ``) 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/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 34a4ed99699..70d6f95fef9 100644 --- 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/generated/components.json b/generated/components.json index fff363308ce..9746c16fc1f 100644 --- a/generated/components.json +++ b/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 \n setSelectedIndex(0)}\n count={32}\n >\n First Filter\n \n setSelectedIndex(1)}\n count={16}\n >\n Second Filter\n \n setSelectedIndex(2)}\n >\n Third Filter\n \n \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 \n \n Filter\n \n \n Item 1\n Item 2\n Item 3\n \n \n \n \n \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 \n setSelectedIndex(0)}\n count={32}\n >\n First Filter\n \n setSelectedIndex(1)}\n count={16}\n >\n Second Filter\n \n setSelectedIndex(2)}\n >\n Third Filter\n \n \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 \n \n Filter\n \n \n Item 1\n Item 2\n Item 3\n \n \n \n \n \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", diff --git a/src/TextInput/TextInput.tsx b/src/TextInput/TextInput.tsx index 931bd1af6c7..79f0d9cdce1 100644 --- a/src/TextInput/TextInput.tsx +++ b/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' diff --git a/src/TextInputWithTokens/TextInputWithTokens.tsx b/src/TextInputWithTokens/TextInputWithTokens.tsx index cbc7688af4e..3768c6a6067 100644 --- a/src/TextInputWithTokens/TextInputWithTokens.tsx +++ b/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> diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap index bae5cfd5a56..bab1f2623a1 100644 --- a/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/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", diff --git a/src/__tests__/FilterList.test.tsx b/src/__tests__/deprecated/FilterList.test.tsx similarity index 78% rename from src/__tests__/FilterList.test.tsx rename to src/__tests__/deprecated/FilterList.test.tsx index ceef639d4d1..01945c31663 100644 --- a/src/__tests__/FilterList.test.tsx +++ b/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, }) diff --git a/src/__tests__/FilterList.types.test.tsx b/src/__tests__/deprecated/FilterList.types.test.tsx similarity index 88% rename from src/__tests__/FilterList.types.test.tsx rename to src/__tests__/deprecated/FilterList.types.test.tsx index 778d518b843..d9df7a46e31 100644 --- a/src/__tests__/FilterList.types.test.tsx +++ b/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 diff --git a/src/__tests__/FilterListItem.test.tsx b/src/__tests__/deprecated/FilterListItem.test.tsx similarity index 88% rename from src/__tests__/FilterListItem.test.tsx rename to src/__tests__/deprecated/FilterListItem.test.tsx index b6af2faf7d4..db2341f06ef 100644 --- a/src/__tests__/FilterListItem.test.tsx +++ b/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' diff --git a/src/__tests__/FilteredSearch.test.tsx b/src/__tests__/deprecated/FilteredSearch.test.tsx similarity index 77% rename from src/__tests__/FilteredSearch.test.tsx rename to src/__tests__/deprecated/FilteredSearch.test.tsx index db5fb8f8f4c..0d13f0a8251 100644 --- a/src/__tests__/FilteredSearch.test.tsx +++ b/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, }) diff --git a/src/__tests__/FilteredSearch.types.test.tsx b/src/__tests__/deprecated/FilteredSearch.types.test.tsx similarity index 81% rename from src/__tests__/FilteredSearch.types.test.tsx rename to src/__tests__/deprecated/FilteredSearch.types.test.tsx index 43057cab3af..9a7c8fc1951 100644 --- a/src/__tests__/FilteredSearch.types.test.tsx +++ b/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 diff --git a/src/__tests__/__snapshots__/FilterList.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/FilterList.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FilterList.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/FilterList.test.tsx.snap diff --git a/src/__tests__/__snapshots__/FilterListItem.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/FilterListItem.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FilterListItem.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/FilterListItem.test.tsx.snap diff --git a/src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/FilteredSearch.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/FilteredSearch.test.tsx.snap rename to src/__tests__/deprecated/__snapshots__/FilteredSearch.test.tsx.snap diff --git a/src/FilterList/FilterList.docs.json b/src/deprecated/FilterList/FilterList.docs.json similarity index 97% rename from src/FilterList/FilterList.docs.json rename to src/deprecated/FilterList/FilterList.docs.json index 01ffcd71d4d..16044c2e874 100644 --- a/src/FilterList/FilterList.docs.json +++ b/src/deprecated/FilterList/FilterList.docs.json @@ -1,7 +1,7 @@ { "id": "filter_list", "name": "FilterList", - "status": "alpha", + "status": "deprecated", "a11yReviewed": false, "stories": [], "props": [ diff --git a/src/FilterList/FilterList.stories.tsx b/src/deprecated/FilterList/FilterList.stories.tsx similarity index 100% rename from src/FilterList/FilterList.stories.tsx rename to src/deprecated/FilterList/FilterList.stories.tsx diff --git a/src/FilterList/FilterList.tsx b/src/deprecated/FilterList/FilterList.tsx similarity index 91% rename from src/FilterList/FilterList.tsx rename to src/deprecated/FilterList/FilterList.tsx index 8fee74ce2a1..520c34da1ac 100644 --- a/src/FilterList/FilterList.tsx +++ b/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` list-style-type: none; @@ -13,6 +13,9 @@ const FilterListBase = styled.ul` export type FilterListProps = ComponentProps +/** + * @deprecated Use the ActionList component instead. + */ const FilterList = ({children, ...rest}: React.PropsWithChildren) => { const items = React.Children.map(children, child => { return
  • {child}
    • diff --git a/src/FilterList/index.ts b/src/deprecated/FilterList/index.ts similarity index 100% rename from src/FilterList/index.ts rename to src/deprecated/FilterList/index.ts diff --git a/src/FilteredSearch/FilteredSearch.docs.json b/src/deprecated/FilteredSearch/FilteredSearch.docs.json similarity index 93% rename from src/FilteredSearch/FilteredSearch.docs.json rename to src/deprecated/FilteredSearch/FilteredSearch.docs.json index b88267353c2..ce4a49cffd8 100644 --- a/src/FilteredSearch/FilteredSearch.docs.json +++ b/src/deprecated/FilteredSearch/FilteredSearch.docs.json @@ -1,7 +1,7 @@ { "id": "filtered_search", "name": "FilteredSearch", - "status": "alpha", + "status": "deprecated", "a11yReviewed": false, "stories": [], "props": [ diff --git a/src/FilteredSearch/FilteredSearch.stories.tsx b/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx similarity index 91% rename from src/FilteredSearch/FilteredSearch.stories.tsx rename to src/deprecated/FilteredSearch/FilteredSearch.stories.tsx index 6bd4f045e7e..5e013942b70 100644 --- a/src/FilteredSearch/FilteredSearch.stories.tsx +++ b/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 { diff --git a/src/FilteredSearch/FilteredSearch.tsx b/src/deprecated/FilteredSearch/FilteredSearch.tsx similarity index 65% rename from src/FilteredSearch/FilteredSearch.tsx rename to src/deprecated/FilteredSearch/FilteredSearch.tsx index ba0172cdc78..bc024f8662c 100644 --- a/src/FilteredSearch/FilteredSearch.tsx +++ b/src/deprecated/FilteredSearch/FilteredSearch.tsx @@ -1,8 +1,12 @@ 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' +/** + * @deprecated A new filter component is in progress. + * Until the new filter component is ready, you can use Button + TextInput + ActionList to reproduce this pattern. + */ const FilteredSearch = styled.div` display: flex; align-items: stretch; diff --git a/src/FilteredSearch/index.ts b/src/deprecated/FilteredSearch/index.ts similarity index 100% rename from src/FilteredSearch/index.ts rename to src/deprecated/FilteredSearch/index.ts diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index 9ced82cf98d..fa8f176c4ec 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -72,3 +72,11 @@ export type { ButtonCloseProps, } from './Button' // end of v35.0.0 + +// Deprecated in v36.0.0 in June 2023 +// TODO: We can remove these 6 months after release: December 2023 +export {default as FilterList} from './FilterList' +export type {FilterListProps, FilterListItemProps} from './FilterList' +export {default as FilteredSearch} from './FilteredSearch' +export type {FilteredSearchProps} from './FilteredSearch' +// end of v36.0.0 diff --git a/src/index.ts b/src/index.ts index 344fa49e60e..f01fafeec7a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -90,10 +90,6 @@ export {default as Dialog} from './Dialog' export type {DialogProps, DialogHeaderProps} from './Dialog' export type {ConfirmationDialogProps} from './Dialog/ConfirmationDialog' export {ConfirmationDialog} from './Dialog/ConfirmationDialog' -export {default as FilteredSearch} from './FilteredSearch' -export type {FilteredSearchProps} from './FilteredSearch' -export {default as FilterList} from './FilterList' -export type {FilterListProps, FilterListItemProps} from './FilterList' export {default as Flash} from './Flash' export type {FlashProps} from './Flash' export {default as FormControl} from './FormControl' diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/internal/components/TextInputInnerVisualSlot.tsx similarity index 92% rename from src/_TextInputInnerVisualSlot.tsx rename to src/internal/components/TextInputInnerVisualSlot.tsx index 90c6635ac11..60f584144f0 100644 --- a/src/_TextInputInnerVisualSlot.tsx +++ b/src/internal/components/TextInputInnerVisualSlot.tsx @@ -1,7 +1,7 @@ import React from 'react' -import Box from './Box' -import Spinner from './Spinner' -import {TextInputNonPassthroughProps} from './TextInput' +import Box from '../../Box' +import Spinner from '../../Spinner' +import {TextInputNonPassthroughProps} from '../../TextInput' const TextInputInnerVisualSlot: React.FC< React.PropsWithChildren<{