FilterList

The FilterList component is a menu with filter options that filter the content of a page or other UI section in your project.

Pro tip: The FilterList component has been repurposed and wrapped with the @bristlecone/system sauce to extend Primer's original intent for this component, however, their respective component should be considered anytime you are looking to represent GitHub related data with a filter of the sort.

Default example

<FilterList>
  <FilterList.Item selected count='32' href='#foo'>First Filter</FilterList.Item>
  <FilterList.Item count='2' href='#bar'>Second Filter</FilterList.Item>
  <FilterList.Item href='#baz'>Third Filter</FilterList.Item>
</FilterList>

Using small prop example

If you need tighten-up (or down, rather) the padding space of each filter item, use the small prop.

<FilterList small>
  <FilterList.Item selected count='32' href='#foo'>First Filter</FilterList.Item>
  <FilterList.Item count='2' href='#bar'>Second Filter</FilterList.Item>
  <FilterList.Item href='#baz'>Third Filter</FilterList.Item>
</FilterList>

Using other schemes/flavors for a selected Item

You can change the scheme (variant) of a FilterList's selected Item via the scheme prop at the parent or child (Item) level as shown below.

<FilterList scheme='red'>
  <FilterList.Item selected count='32' href='#foo'>First Filter</FilterList.Item>
  <FilterList.Item count='2' href='#bar'>Second Filter</FilterList.Item>
  <FilterList.Item href='#baz'>Third Filter</FilterList.Item>
</FilterList>
<FilterList>
  <FilterList.Item selected scheme='purple' count='32' href='#foo'>First Filter</FilterList.Item>
  <FilterList.Item count='2' href='#bar'>Second Filter</FilterList.Item>
  <FilterList.Item href='#baz'>Third Filter</FilterList.Item>
</FilterList>

System props

FilterList components get COMMON system props along with those available to the Link and CounterLabel components. Read the System Props doc page for a full list of available props.

Component props

FilterList

NameTypeDefaultDescription
smallBooleanfalseUsed to create a smaller version of the standard FilterList
schemeStringbluesets the active (selected) Item to a pre-defined color scheme as defined in the theme's colorStyles dictionary. Can be defined in the parent FilterList component or in a child Item component.

FilterList.Item

NameTypeDefaultDescription
countNumberNumber to be displayed in the list item
isStringasets the HTML tag for the component
schemeStringdefaultsame as above corresponding prop under FilterList
selectedBooleanUsed to set selected style