canonical / canonical/vanilla-framework
[New pattern]: Filtering on table pages
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## Visual

## Context
We discussed this in mafia as a way to unify the way in which we design filters on table pages. The proposed behaviour would be:
- Filters appear as base buttons
- Each filter option can be separated into separate buttons, or appear in the same dropdown and organized into tabs. This will depend on the amount of space available and the number of filters.
- Once filters are selected, the number of options selected will be indicated by a badge between the label and chevron
- The combo-box should align with a corner of the trigger button.
- “Filter by” label can be included next to the buttons, but isn’t required
- Once a filter is selected, a reset action link will appear to the right of the filters. It will read “Reset all filters”
Further exploration needed:
- Responsive behaviour
- Depends on the design of the combo box, and would mean combo box should include multiple tabs.
Contributor guide
Research direction
The issue names no files or tests. Start by locating the existing table-page filter and combo-box patterns in Vanilla Framework, then compare their current behavior with the proposed buttons, badges, reset link, alignment, tabs, and responsive requirements. Done should include an agreed pattern covering those behaviors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 32/100