diff --git a/.changeset/nine-glasses-serve.md b/.changeset/nine-glasses-serve.md new file mode 100644 index 00000000000..1755972c367 --- /dev/null +++ b/.changeset/nine-glasses-serve.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': minor +--- + +Added an optional `fiterLabel` prop to `ActionList` to allow for a custom placeholder diff --git a/polaris-react/src/components/ActionList/ActionList.stories.tsx b/polaris-react/src/components/ActionList/ActionList.stories.tsx index 78cb9e01627..4fbc53bbae6 100644 --- a/polaris-react/src/components/ActionList/ActionList.stories.tsx +++ b/polaris-react/src/components/ActionList/ActionList.stories.tsx @@ -426,6 +426,7 @@ export const WithFiltering = { items={Array.from({length: 8}).map((_, index) => ({ content: `Item #${index + 1}`, }))} + filterLabel="Search items" /> ); diff --git a/polaris-react/src/components/ActionList/ActionList.tsx b/polaris-react/src/components/ActionList/ActionList.tsx index 091bdde4f42..f7fa27284ed 100644 --- a/polaris-react/src/components/ActionList/ActionList.tsx +++ b/polaris-react/src/components/ActionList/ActionList.tsx @@ -26,6 +26,8 @@ export interface ActionListProps { actionRole?: 'menuitem' | string; /** Allow users to filter items in the list. Will only show if more than 8 items in the list. The item content of every items must be a string for this to work */ allowFiltering?: boolean; + /** Filter label used as a placeholder in the search field */ + filterLabel?: string; /** Callback when any item is clicked or keypressed */ onActionAnyItem?: ActionListItemDescriptor['onAction']; } @@ -40,6 +42,7 @@ export function ActionList({ actionRole, allowFiltering, onActionAnyItem, + filterLabel, }: ActionListProps) { const i18n = useI18n(); const filterActions = useContext(FilterActionsContext); @@ -153,10 +156,16 @@ export function ActionList({ setSearchText(value)}