Documentation
Feedback
Guides
Storefront Development

Storefront Development
Filter

The Filter component is used to filter products inside the Product Listing Page (PLP) and Search Page.

The Filter component is used to filter products inside the Product Listing Page (PLP) and Search Page. The Filter component is a compound of the following:
  • Filter: wraps an Accordion along with the component title.
  • FilterSlider: SlideOver that wraps the Filter for small screen dimensions.
  • FilterFacets: wraps an AccordionItem with its AccordionButton and an AccordionPanel for every Facet.
  • FilterFacetBoolean: wraps the list of the FilterFacetBooleanItem.
  • FilterFacetBooleanItem: wraps a Checkbox with its Label and the Badge that represents the child of the FilterFacetBoolean.
  • FilterFacetRange: wraps a PriceRange for a given Facet with the Range type.

Overview

Example
Code

Filters


Import

Import the component from @faststore/ui

_10
import {
_10
Filter,
_10
FilterFacets,
_10
FilterFacetBoolean,
_10
FilterFacetBooleanItem,
_10
FilterFacetRange,
_10
} from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/organisms/Filter/styles.scss'


Usage

Example
Code

Filters


Props

Filter

NameTypeDescriptionDefault
testId*stringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).
titlestringTitle for the `Filter` component.
indicesExpanded*Set<number>The expanded items from the `Accordion`.
onAccordionChange*(index: number) => voidThis function is called when `Accordion` is expanded or collapsed.

Filter Facets

NameTypeDescriptionDefault
testId*stringID to find this component in testing tools (e.g.: cypress, testing library, and jest).
index*numberCurrent Facet's position in a list of facets.
type*stringCurrent Facet's type, usually `StoreFacetBoolean` or `StoreFacetRange`.
label*stringThe text displayed to identify the Facet.

Filter Facet Boolean Item

NameTypeDescriptionDefault
testId*stringID to find this component in testing tools (e.g.: cypress, testing library, and jest).
label*stringThe text displayed to identify the Boolean Facet Item.
value*stringValue to be emitted when Checkbox is clicked.
selected*false | trueBoolean that represents the Checkbox checked state.
quantity*numberCounter badge shown besides the Facet Item.
id*stringID to identify the Checkbox and corresponding label.
facetKey*stringString that identifies the current Facet key.
onFacetChange*OnFacetChangeThis function is called when `Checkbox` from the facet changes.

Filter Facet Range

NameTypeDescriptionDefault
min*{ selected: number; absolute: number; }The minimum value of the Slider Range Facet
max*{ selected: number; absolute: number; }The maximum value of the Slider Range Facet
facetKey*stringString that identifies the current Facet key.
formatter*(price: number) => stringFormatter function that transforms the raw price value and render the result.
onFacetChange*OnFacetChangeThis function is called when `Checkbox` from the facet changes.

Design Tokens

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-filter-title-heightvar(--fs-spacing-6)
--fs-filter-title-margin-bottomvar(--fs-spacing-0)
--fs-filter-title-text-sizevar(--fs-text-size-2)
--fs-filter-title-line-height1.25

Accordion

Local tokenDefault value/Global token linked
--fs-filter-accordion-border-width-notebookvar(--fs-border-width)
--fs-filter-accordion-border-color-notebook
var(--fs-border-color-light)
--fs-filter-accordion-border-radius-notebookvar(--fs-border-radius)

Accordion Item Button

Local tokenDefault value/Global token linked
--fs-filter-accordion-button-text-sizevar(--fs-text-size-lead)
--fs-filter-accordion-button-text-weightvar(--fs-text-weight-regular)
--fs-filter-accordion-button-line-height1.5
--fs-filter-accordion-button-text-size-notebookvar(--fs-text-size-2)
--fs-filter-accordion-button-line-height-notebook1.25
--fs-filter-accordion-button-padding-right-notebookvar(--fs-spacing-4)
--fs-filter-accordion-button-padding-left-notebookvar(--fs-filter-accordion-button-padding-right-notebook)

Accordion Item Panel

Local tokenDefault value/Global token linked
--fs-filter-accordion-item-panel-padding-right-notebookvar(--fs-spacing-4)
--fs-filter-accordion-item-panel-padding-left-notebookvar(--fs-filter-accordion-item-panel-padding-right-notebook)

Accordion Item List

Local tokenDefault value/Global token linked
--fs-filter-list-padding-bottomvar(--fs-spacing-3)

List Item

Local tokenDefault value/Global token linked
--fs-filter-list-item-not-last-margin-bottomvar(--fs-spacing-3)

List Item Checkbox

Local tokenDefault value/Global token linked
--fs-filter-list-item-checkbox-width1.25rem
--fs-filter-list-item-checkbox-heightvar(--fs-filter-list-item-checkbox-width)

List Item Label

Local tokenDefault value/Global token linked
--fs-filter-list-item-label-width100%
--fs-filter-list-item-label-margin-leftvar(--fs-spacing-1)
--fs-filter-list-item-label-text-sizevar(--fs-text-size-2)
--fs-filter-list-item-label-line-height1.25

List Item Badge

Local tokenDefault value/Global token linked
--fs-filter-list-item-badge-margin-leftvar(--fs-spacing-1)

Customization

data-fs-filter
data-fs-filter-title
data-fs-filter-accordion
data-fs-filter-accordion-item
data-fs-filter-list
data-fs-filter-list-item
data-fs-filter-list-item-checkbox
data-fs-filter-list-item-label
data-fs-filter-list-item-badge
data-fs-filter-facet-range
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page