Docs draft
FilterBar
Component storyFigma (FilterTrigger set + FilterBar) ↗React component ↗DSDS entity ↗
Anatomy
controls slot — Right-aligned triggers and Selects; defaults Sort + Filter. More and Season selects drop in.
trigger — FilterTrigger: glyph + type.label in text.secondary, brightening on hover. Collapses to icon-only on mobile (compact), keeping the aria-label.
applied row — Reset filters: in accent.text + the Chips slot composing removable Badges. Appears only with active filters.
Guidelines
mustApplied filters render as removable Badge chips; removing the last chip removes the row. — The old bar's orange filter-name text was not individually removable — chips fix that.
must-notNo titles inside FilterBar — pair it with PageHeader or SectionHeader. — The old List Controls fused title and controls; the split is the point.
Design specifications
| trigger | type.label / color.text.secondary, hover text.primary + bg.secondary wash, 20px glyph |
| reset | type.label / color.accent.text |
| chips | onigiri.badge (Label with Close) |
| gaps | space.8 |
Accessibility
Tab — Triggers, reset, then each chip's segments.
Compact triggers keep their label as aria-label. Sticky positioning (the old Sticky Sort & Filter) is page-level CSS, not component chrome.