diff --git a/.changeset/mighty-doors-beg.md b/.changeset/mighty-doors-beg.md new file mode 100644 index 00000000000..d18f4855ea8 --- /dev/null +++ b/.changeset/mighty-doors-beg.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Select Panel: Add built-in "No matches" item (behind feature flag `primer_react_select_panel_with_modern_action_list`) diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-linux.png new file mode 100644 index 00000000000..18880f3d6ba Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-modern-action-list--true-linux.png new file mode 100644 index 00000000000..fab4fd093f7 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-colorblind-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-linux.png new file mode 100644 index 00000000000..04311f27fb1 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-modern-action-list--true-linux.png new file mode 100644 index 00000000000..865ac022d45 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-dimmed-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-linux.png new file mode 100644 index 00000000000..bd5293f1fb4 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-modern-action-list--true-linux.png new file mode 100644 index 00000000000..14caf14e856 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-high-contrast-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-linux.png new file mode 100644 index 00000000000..18880f3d6ba Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-modern-action-list--true-linux.png new file mode 100644 index 00000000000..fab4fd093f7 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-linux.png new file mode 100644 index 00000000000..18880f3d6ba Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-modern-action-list--true-linux.png new file mode 100644 index 00000000000..fab4fd093f7 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-dark-tritanopia-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-linux.png new file mode 100644 index 00000000000..ac61fa8ec26 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-modern-action-list--true-linux.png new file mode 100644 index 00000000000..0ae224d9a54 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-colorblind-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-linux.png new file mode 100644 index 00000000000..2687ea9d1e3 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-modern-action-list--true-linux.png new file mode 100644 index 00000000000..0b023b3f496 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-high-contrast-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-linux.png new file mode 100644 index 00000000000..ac61fa8ec26 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-modern-action-list--true-linux.png new file mode 100644 index 00000000000..0ae224d9a54 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-modern-action-list--true-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-linux.png new file mode 100644 index 00000000000..ac61fa8ec26 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-modern-action-list--true-linux.png b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-modern-action-list--true-linux.png new file mode 100644 index 00000000000..0ae224d9a54 Binary files /dev/null and b/.playwright/snapshots/components/SelectPanel.test.ts-snapshots/SelectPanel-No-matches-light-tritanopia-modern-action-list--true-linux.png differ diff --git a/e2e/components/SelectPanel.test.ts b/e2e/components/SelectPanel.test.ts index e4f61864b17..45ad02fe90f 100644 --- a/e2e/components/SelectPanel.test.ts +++ b/e2e/components/SelectPanel.test.ts @@ -32,6 +32,10 @@ const scenarios = matrix({ id: 'components-selectpanel-examples--height-initial-with-underflowing-items-after-fetch', name: 'Height Initial with Underflowing Items After Fetch', }, + { + id: 'components-selectpanel-examples--no-matches', + name: 'No matches', + }, ], }) diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx index ae791e63909..a0a31b60466 100644 --- a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx +++ b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx @@ -20,6 +20,7 @@ import type {SxProp} from '../sx' import {isValidElementType} from 'react-is' import type {RenderItemFn} from '../deprecated/ActionList/List' +import {CircleSlashIcon} from '@primer/octicons-react' const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8} @@ -151,7 +152,14 @@ export function FilteredActionList({ ) : ( - + {groupMetadata?.length ? groupMetadata.map((group, index) => { return ( @@ -168,6 +176,15 @@ export function FilteredActionList({ : items.map((item, index) => { return })} + + {items.length === 0 ? ( + + + + + No matches + + ) : undefined} )} diff --git a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx index 248432e0f9a..6570019e3d6 100644 --- a/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx +++ b/packages/react/src/SelectPanel/SelectPanel.examples.stories.tsx @@ -309,3 +309,32 @@ export const CustomItemRenderer = () => { ) } + +export const NoMatches = () => { + const [selected, setSelected] = React.useState([items[0], items[1]]) + const [filter, setFilter] = React.useState('no-matches-for-this') + const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase())) + const [open, setOpen] = useState(false) + + return ( + <> +

No matches

+ ( + + )} + open={open} + onOpenChange={setOpen} + items={filteredItems} + selected={selected} + onSelectedChange={setSelected} + filterValue={filter} + onFilterChange={setFilter} + overlayProps={{width: 'medium'}} + /> + + ) +}