Filter dropdown

import { FilterDropdown } from "@/pages/recommendations/index";

FilterDropdown narrows a list to one option, such as one workflow, and shows how many items each option has. The button shows only the chosen option, with no label in front of it, so it fits a narrow header. The list is the product dropdown menu.

UsageCopy Anchor Link

It sits at the right of the Decision queue header on the Recommendations page. The counts are the open recommendations for each workflow, after the channel filter is applied.

<FilterDropdown
  ariaLabel="Filter by workflow"
  size="sm"
  value={scope}
  onChange={pickScope}
  options={chips.map((c) => ({
    value: c.id,
    label: c.id === "all" ? "All workflows" : c.name,
    count: c.count,
  }))}
/>

SizesCopy Anchor Link

size is passed to the Button. sm is the default and the only size the product uses. Both sizes have 12px text, because FilterDropdown overrides the small button's 10px.

<FilterDropdown ariaLabel="Filter by workflow" size="sm" align="left" value={scope} onChange={setScope} options={options} />
<FilterDropdown ariaLabel="Filter by workflow" size="md" align="left" value={scope} onChange={setScope} options={options} />

Long namesCopy Anchor Link

The button is at most 180px wide and cuts a longer name short with an ellipsis. The list is at least 240px wide and shows the whole name, and both carry it as a title, so hovering shows it in the browser's own tooltip. The list scrolls after 320px.

<FilterDropdown ariaLabel="Filter by workflow" value="delivery-leaks" onChange={setScope} options={options} align="left" />

AnatomyCopy Anchor Link

PropsCopy Anchor Link

AccessibilityCopy Anchor Link

• The menu is Base UI's: arrow keys, typing to jump, Enter to pick, and Escape to close and return focus to the button.
• ariaLabel replaces the button's text as its accessible name. A screen reader hears "Filter by workflow" and not the chosen workflow, and someone using voice control cannot say the words they see on the button. Until this changes, include the value: ariaLabel={"Filter by workflow: " + selected.label}.
• The chosen option is shown only by its weight and the tick. It has no aria-checked or aria-current.
• The full name of a cut-short option is only in a title, which does not show on keyboard focus.

When to use itCopy Anchor Link

Use it only where it is used today. For a new filter, use a Composer menu or the filter in Menus and filters: they name what they filter on the button, use the quieter secondaryGhost button, and are reached by keyboard and screen reader in the same way.

Do and don'tCopy Anchor Link

• Do make the first option the unfiltered one, such as "All workflows", and give it the total.
• Do keep counts as the number of items the person still has to act on, so they add up.
• Don't use it for actions or navigation. Every option sets the filter.
• Don't put two FilterDropdowns side by side. Without a label on the button, people cannot tell them apart.

Where it is usedCopy Anchor Link

The function is defined in that file and exported from it for these docs.