Filter Bar
Narrows a list: a search field, facets (a button opening the choices for one thing: Team, Date posted), quick Toggle Chips, Clear all and the number of results. It is a search form, so without JavaScript it submits; with canon.js each facet's button shows what is chosen, and the app hears every change. For a table with columns, use the Data Table's filters. Specification: docs/components/filter-bar.md
Basics
A <form class="canon-filter-bar" role="search">, named. Each facet is a .canon-filter-bar-facet: a .canon-filter-bar-button (aria-haspopup="dialog") and the Popover it opens, holding Checkboxes, Radios or fields. Choices apply as they're made. Clear all is a Button with command="--canon-clear" naming the bar; it shows while something is chosen. The count is an <output> the app keeps up to date (here, a few lines of page script filter the list).
- Product designer · Design · $95,000 · Remote
- Brand designer · Design · $70,000
- Frontend engineer · Engineering · $140,000 · Remote
- Platform engineer · Engineering · $155,000
- User researcher · Research · $105,000 · Remote
- Research operations · Research · $88,000
- Account executive · Sales · $80,000
- Sales development · Sales · $65,000 · Remote
Facets
A facet's button shows what is chosen in its popover: the first choice and how many more ("Team: Design +1"), two values as a range ("Salary: 80,000 – 120,000"), dates in the reader's format ("Due: Oct 1 – Oct 31"). Screen readers hear them all ("Team: Design, Research"). A radio whose value is empty ("Any time") means nothing is chosen. A facet with a choice is marked as a chosen chip is.
Without JavaScript
The bar is an ordinary form: the popovers still open (they are native), and an Apply button (class="canon-filter-bar-apply", type="submit") sends the choices, for example as the page's query (method="get"). With canon.js the Apply button hides, choices apply as they're made, and Enter in the search field applies at once. Clear all, a Canon command, hides without scripting: link to the unfiltered page instead if it's needed.
Submitting the page
For a page the server renders, data-submit on the bar: canon.js submits the form after each choice (and on Enter in the search field) instead of firing canon-filter. The facets' buttons still show what is chosen.
Size
data-size on the bar or a container sizes the search field, the facets and the chips together.
Edge cases
In less room the bar wraps; the count stays at the end of its row. Drag the frame's corner to try it.
Right to left, the bar runs from the right.