From 6bdf42888a7139c01bd105de4dd5b4e35416fc5c Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 8 Jun 2023 14:24:36 -0400 Subject: [PATCH 1/7] deprecates FilterList and FilteredSearch components --- docs/content/FilterList.mdx | 9 ++++++--- docs/content/FilteredSearch.mdx | 11 ++++++++--- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 8 ++++---- src/{ => deprecated}/FilterList/FilterList.docs.json | 2 +- .../FilterList/FilterList.stories.tsx | 0 src/{ => deprecated}/FilterList/FilterList.tsx | 9 ++++++--- src/{ => deprecated}/FilterList/index.ts | 0 .../FilteredSearch/FilteredSearch.docs.json | 2 +- .../FilteredSearch/FilteredSearch.stories.tsx | 0 .../FilteredSearch/FilteredSearch.tsx | 4 ++++ src/{ => deprecated}/FilteredSearch/index.ts | 0 src/deprecated/index.ts | 6 ++++++ src/index.ts | 2 -- 13 files changed, 36 insertions(+), 17 deletions(-) rename src/{ => deprecated}/FilterList/FilterList.docs.json (97%) rename src/{ => deprecated}/FilterList/FilterList.stories.tsx (100%) rename src/{ => deprecated}/FilterList/FilterList.tsx (91%) rename src/{ => deprecated}/FilterList/index.ts (100%) rename src/{ => deprecated}/FilteredSearch/FilteredSearch.docs.json (93%) rename src/{ => deprecated}/FilteredSearch/FilteredSearch.stories.tsx (100%) rename src/{ => deprecated}/FilteredSearch/FilteredSearch.tsx (79%) rename src/{ => deprecated}/FilteredSearch/index.ts (100%) 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..f1910603853 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. - **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/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 100% rename from src/FilteredSearch/FilteredSearch.stories.tsx rename to src/deprecated/FilteredSearch/FilteredSearch.stories.tsx diff --git a/src/FilteredSearch/FilteredSearch.tsx b/src/deprecated/FilteredSearch/FilteredSearch.tsx similarity index 79% rename from src/FilteredSearch/FilteredSearch.tsx rename to src/deprecated/FilteredSearch/FilteredSearch.tsx index ba0172cdc78..e977ee1ff61 100644 --- a/src/FilteredSearch/FilteredSearch.tsx +++ b/src/deprecated/FilteredSearch/FilteredSearch.tsx @@ -3,6 +3,10 @@ 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..65c1fdb0313 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -72,3 +72,9 @@ 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' +// end of v36.0.0 diff --git a/src/index.ts b/src/index.ts index 344fa49e60e..1f75093b1a0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -92,8 +92,6 @@ 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' From 58b118f2f9475b1afb32cf537ee874786cd23e55 Mon Sep 17 00:00:00 2001 From: Amanda Brown Date: Thu, 8 Jun 2023 15:31:41 -0400 Subject: [PATCH 2/7] 3230 Refactor internal components - TextInputInnerVisualSlot (#3373) * refactor(TextInputInnerVisualSlot): moved to internal * fix import --- src/TextInput/TextInput.tsx | 2 +- src/TextInputWithTokens/TextInputWithTokens.tsx | 3 ++- .../components/TextInputInnerVisualSlot.tsx} | 6 +++--- 3 files changed, 6 insertions(+), 5 deletions(-) rename src/{_TextInputInnerVisualSlot.tsx => internal/components/TextInputInnerVisualSlot.tsx} (92%) 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 43fd0c01f9e..2c82ee2f407 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/_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<{ From bc5601af6a5202b7c81d2c7c1c1ed7fffa77f4ab Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 9 Jun 2023 11:00:12 -0400 Subject: [PATCH 3/7] deprecates FilterList and FilteredSearch --- .changeset/lemon-dancers-marry.md | 5 +++++ src/__tests__/__snapshots__/exports.test.ts.snap | 4 ++-- src/__tests__/{ => deprecated}/FilterList.test.tsx | 6 +++--- src/__tests__/{ => deprecated}/FilterList.types.test.tsx | 2 +- src/__tests__/{ => deprecated}/FilterListItem.test.tsx | 4 ++-- src/__tests__/{ => deprecated}/FilteredSearch.test.tsx | 6 +++--- .../{ => deprecated}/FilteredSearch.types.test.tsx | 2 +- .../{ => deprecated}/__snapshots__/FilterList.test.tsx.snap | 0 .../__snapshots__/FilterListItem.test.tsx.snap | 0 .../__snapshots__/FilteredSearch.test.tsx.snap | 0 src/deprecated/FilteredSearch/FilteredSearch.tsx | 6 +++--- src/deprecated/index.ts | 2 ++ src/index.ts | 2 -- 13 files changed, 22 insertions(+), 17 deletions(-) create mode 100644 .changeset/lemon-dancers-marry.md rename src/__tests__/{ => deprecated}/FilterList.test.tsx (78%) rename src/__tests__/{ => deprecated}/FilterList.types.test.tsx (89%) rename src/__tests__/{ => deprecated}/FilterListItem.test.tsx (88%) rename src/__tests__/{ => deprecated}/FilteredSearch.test.tsx (77%) rename src/__tests__/{ => deprecated}/FilteredSearch.types.test.tsx (82%) rename src/__tests__/{ => deprecated}/__snapshots__/FilterList.test.tsx.snap (100%) rename src/__tests__/{ => deprecated}/__snapshots__/FilterListItem.test.tsx.snap (100%) rename src/__tests__/{ => deprecated}/__snapshots__/FilteredSearch.test.tsx.snap (100%) 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/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 89% rename from src/__tests__/FilterList.types.test.tsx rename to src/__tests__/deprecated/FilterList.types.test.tsx index 778d518b843..4302c1385f9 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 82% rename from src/__tests__/FilteredSearch.types.test.tsx rename to src/__tests__/deprecated/FilteredSearch.types.test.tsx index 43057cab3af..cddb909a260 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/deprecated/FilteredSearch/FilteredSearch.tsx b/src/deprecated/FilteredSearch/FilteredSearch.tsx index e977ee1ff61..bc024f8662c 100644 --- a/src/deprecated/FilteredSearch/FilteredSearch.tsx +++ b/src/deprecated/FilteredSearch/FilteredSearch.tsx @@ -1,7 +1,7 @@ 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. diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts index 65c1fdb0313..fa8f176c4ec 100644 --- a/src/deprecated/index.ts +++ b/src/deprecated/index.ts @@ -77,4 +77,6 @@ export type { // 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 1f75093b1a0..f01fafeec7a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -90,8 +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 Flash} from './Flash' export type {FlashProps} from './Flash' export {default as FormControl} from './FormControl' From 90863ee3b9bd9aea39fc318b4ec19dfca7ec0783 Mon Sep 17 00:00:00 2001 From: mperrotti Date: Fri, 9 Jun 2023 15:02:43 +0000 Subject: [PATCH 4/7] Update generated/components.json --- generated/components.json | 148 +++++++++++++++++++------------------- 1 file changed, 74 insertions(+), 74 deletions(-) diff --git a/generated/components.json b/generated/components.json index 293c88d1410..13264212203 100644 --- a/generated/components.json +++ b/generated/components.json @@ -1652,80 +1652,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", @@ -5051,6 +4977,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", From 403dd5f1fd7656ae7d2d411c77a2d0cd40a32fc3 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 9 Jun 2023 11:20:37 -0400 Subject: [PATCH 5/7] fixes broken import --- src/deprecated/FilteredSearch/FilteredSearch.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx b/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx index 6bd4f045e7e..d519da0aed0 100644 --- a/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx +++ b/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx @@ -3,7 +3,7 @@ import {Meta, ComponentStory} from '@storybook/react' import FilteredSearch from './FilteredSearch' import {ActionList} from '../ActionList' import {ActionMenu} from '../ActionMenu' -import TextInput from '../TextInput' +import TextInput from '../../TextInput' import {SearchIcon} from '@primer/octicons-react' export default { From 9b08c8277281c0f8fb03565e95ea47a1b18a098e Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Fri, 9 Jun 2023 12:49:01 -0400 Subject: [PATCH 6/7] fixes type errors --- src/__tests__/deprecated/FilterList.types.test.tsx | 2 +- src/__tests__/deprecated/FilteredSearch.types.test.tsx | 2 +- src/deprecated/FilteredSearch/FilteredSearch.stories.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/__tests__/deprecated/FilterList.types.test.tsx b/src/__tests__/deprecated/FilterList.types.test.tsx index 4302c1385f9..d9df7a46e31 100644 --- a/src/__tests__/deprecated/FilterList.types.test.tsx +++ b/src/__tests__/deprecated/FilterList.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import FilterList from '../deprecated/FilterList' +import FilterList from '../../deprecated/FilterList' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/deprecated/FilteredSearch.types.test.tsx b/src/__tests__/deprecated/FilteredSearch.types.test.tsx index cddb909a260..9a7c8fc1951 100644 --- a/src/__tests__/deprecated/FilteredSearch.types.test.tsx +++ b/src/__tests__/deprecated/FilteredSearch.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import FilteredSearch from '../deprecated/FilteredSearch' +import FilteredSearch from '../../deprecated/FilteredSearch' export function shouldAcceptCallWithNoProps() { return diff --git a/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx b/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx index d519da0aed0..5e013942b70 100644 --- a/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx +++ b/src/deprecated/FilteredSearch/FilteredSearch.stories.tsx @@ -1,8 +1,8 @@ import React from 'react' import {Meta, ComponentStory} from '@storybook/react' import FilteredSearch from './FilteredSearch' -import {ActionList} from '../ActionList' -import {ActionMenu} from '../ActionMenu' +import {ActionList} from '../../ActionList' +import {ActionMenu} from '../../ActionMenu' import TextInput from '../../TextInput' import {SearchIcon} from '@primer/octicons-react' From 9de8956dd094717e156f54d2368962c3d22073c4 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Thu, 15 Jun 2023 11:59:50 -0400 Subject: [PATCH 7/7] fixes FilteredSearch docs data import path --- docs/content/FilteredSearch.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/FilteredSearch.mdx b/docs/content/FilteredSearch.mdx index f1910603853..caa2736e530 100644 --- a/docs/content/FilteredSearch.mdx +++ b/docs/content/FilteredSearch.mdx @@ -5,7 +5,7 @@ status: Deprecated description: The FilteredSearch component helps style an ActionMenu and a TextInput side-by-side. --- -import data from '../../src/FilteredSearch/FilteredSearch.docs.json' +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.