12.9.1
This kit can be implemented in a variety of ways.
To see examples of how to implement this kit in production visit the /dev_docs/search page in production.
Note
All React examples are wrapped in a {closePopover} method to ensure the popover closes on click of "Apply".
The min_width prop for the popover inside of filter is used in all the examples and is set to 360px. That is the min_width prop we recommend using as it is the same pixel value as our max_width sm global prop.
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const SortingChangeCallback = (sortOptions) => { alert(JSON.stringify(sortOptions[0])) } const FilterDefault = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A galaxy far far away, like really far away...' }, ] return ( <> <Filter double filters={{ 'Full Name': 'John Wick', 'City': 'San Francisco', }} marginBottom="xl" minWidth="375px" onSortChange={SortingChangeCallback} results={1} sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > {({ closePopover }) => ( <form> <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" maxWidth="sm" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> <Filter double minWidth="375px" onSortChange={SortingChangeCallback} results={1} sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > {({ closePopover }) => ( <form> <TextInput label="Example Text Field" placeholder="Enter Text" {...props} /> <Select blankSelection="Select One..." label="Example Collection Select" name="Collection Select" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> </> ) } export default FilterDefault
To remove the background from a filter, add the prop background with a value of false.
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterNoBackground = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A galaxy far far away...' }, ] return ( <> <Filter background={false} filters={{ 'Full Name': 'John Wick', 'City': 'Las Vegas', }} marginBottom="xl" minWidth="360px" results={3} sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > {({ closePopover }) => ( <form> <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> <Filter background={false} double filters={{ 'Full Name': 'John Wick', 'City': 'Las Vegas', }} minWidth="360px" results={3} sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > {({ closePopover }) => ( <form> <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> </> ) } export default FilterNoBackground
import React from 'react' import Filter from '../_filter' import Button from '../../pb_button/_button' import Flex from '../../pb_flex/_flex' import Select from '../../pb_select/_select' import TextInput from '../../pb_text_input/_text_input' const FilterSingle = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A galaxy far far away...' }, ] return ( <Filter filters={{ 'Full Name': 'John Wick', }} minWidth="360px" results={546} sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > {({ closePopover }) => ( <form> <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> ) } export default FilterSingle
To display results, use templates single or default.
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterNoSort = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A galaxy far far away...' }, ] return ( <Filter filters={{ 'Full Name': 'John Wick', }} minWidth="360px" results={546} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > {({ closePopover }) => ( <form> <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> ) } export default FilterNoSort
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../../' const FilterOnly = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A galaxy far far away...' }, ] return ( <Filter filters={{ 'Full Name': 'John Wick' }} minWidth="360px" {...props} > {({ closePopover }) => ( <form> <TextInput label="Full Name" placeholder="Enter name" {...props} /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> ) } export default FilterOnly
import React from 'react' import Filter from '../_filter' const SortOnly = (props) => ( <Filter sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} /> ) export default SortOnly
Filter can leverage the max-width property. Learn more in our visual guidelines.
import React from 'react' import { Button, Filter, Flex, Select } from '../../' const FilterMaxWidth = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' }, ] return ( <Filter {...props} double filters={{ 'Full Name': 'John Wick', 'City': 'San Francisco', }} minWidth="360px" results={1} sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} > {({ closePopover }) => ( <form> <Select blankSelection="Select One..." label="Territory" maxWidth="sm" name="location" options={options} /> <Button text="Apply" /> <Select blankSelection="Select One..." label="Territory" name="location" options={options} /> <Flex spacing="between" > <Button onClick={closePopover} text="Apply" /> <Button text="Clear" variant="secondary" /> </Flex> </form> )} </Filter> ) } export default FilterMaxWidth
Click the filter button above to toggle the popover.
To change the filter's popover position, use the placement prop with one of the positions:
"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"
import React from 'react' import { Button, Filter, Flex, Select, TextInput } from '../..' const SortingChangeCallback = (sortOptions) => { alert(JSON.stringify(sortOptions[0])) } const FilterPlacement = (props) => { const options = [ { value: 'USA' }, { value: 'Canada' }, { value: 'Brazil' }, { value: 'Philippines' }, { value: 'A galaxy far far away...' }, ] return ( <> <Filter double minWidth="360px" onSortChange={SortingChangeCallback} placement={"right"} results={1} sortOptions={{ popularity: 'Popularity', // eslint-disable-next-line manager_title: 'Manager\'s Title', // eslint-disable-next-line manager_name: 'Manager\'s Name', }} sortValue={[{ name: 'popularity', dir: 'desc' }]} {...props} > {({ closePopover }) => ( <form> <TextInput label="Example Text Field" placeholder="Enter Text" {...props} /> <Select blankSelection="Select One..." label="Example Collection Select" name="Collection Select" options={options} {...props} /> <Flex spacing="between" {...props} > <Button onClick={closePopover} text="Apply" {...props} /> <Button text="Clear" variant="secondary" {...props} /> </Flex> </form> )} </Filter> </> ) } export default FilterPlacement