Facet sidebar

The filter column with facets, applied filters and Clear all.

<mm-facet-sidebar>
  <mm-facet name="type" label="Type"
    options='[{"value":"table","label":"Table","count":4812,"icon":"table"},{"value":"topic","label":"Topic","count":382,"icon":"stream"}]'></mm-facet>
  <mm-facet name="provider" label="Provider"
    options='[{"value":"snowflake","label":"Snowflake","count":2904,"provider":"snowflake"}]'></mm-facet>
</mm-facet-sidebar>

Guidance

The Discover filter column: a "Filters" heading with "Clear all", a summary of applied filters as removable pills, then one mm-facet per facet (Type, Provider, Tags, Owner). Facets are separated by hairlines and spacing, never cards. Any change fires one mm-filter-change with every facet's selection, ready to put in the URL or the search request.

The column is a labelled region. Removing an applied pill moves focus to the next pill, or to the heading when none are left, so focus is never lost.

Properties

Property	Attribute	Type	Default	Description
heading	heading	string	''	Heading text. Defaults to "Filters".
hideApplied	hide-applied	boolean	false	Hides the applied-filters summary when another place already shows it, such as mm-search-bar tokens.
facetElements		MmFacet[]		The facets, in order.
facets		Record<string, string[]>		Every facet's selection, keyed by facet name.

Methods

Method	Description
clearAll()	Clears every facet and fires one mm-filter-change.

Events

Event	Detail	Description
mm-filter-change	CustomEvent<MmFilterChangeDetail>	Any facet's selection changed by user action.

Slots

Slot	Description
Default	mm-facet elements.
footer	Anything after the facets, such as a "Save as view" button.

CSS parts

Part	Description
heading	The "Filters" heading.
clear-all	The "Clear all" button.
applied	The applied-filters summary.

Examples

Every state of mm-facet-sidebar in Storybook, with keyboard and screen reader tests.