atomic-refine-modal

This is for:

Developer

The atomic-refine-modal is automatically created as a child of the atomic-search-interface when the atomic-refine-toggle is initialized.

When the modal is opened, the class atomic-modal-opened is added to the interface element and the body, allowing further customization.

Properties

Property Attribute Description Type Default

collapseFacetsAfter

collapse-facets-after

The number of expanded facets inside the refine modal. Remaining facets are automatically collapsed.

Using the value 0 collapses all facets.

number

0

isOpen

is-open

boolean

false

openButton

HTMLElement | undefined

Shadow Parts

Part Description

body

The body of the modal, between the header and the footer.

body-wrapper

The wrapper around the body.

close-button

The button in the header that closes the modal.

close-icon

The icon of the close button.

container

The modal’s outermost container.

content

The wrapper around the content inside the body of the modal.

filter-clear-all

The button that resets all actively selected facet values.

filter-section

The section containing facets and the "filters" title.

footer

The footer of the modal.

footer-button

The button in the footer that closes the modal.

footer-button-count

The count inside the button in the footer that closes the modal.

footer-button-text

The text inside the button in the footer that closes the modal.

footer-content

The wrapper around the content inside the footer of the modal, containing the button to view results.

footer-wrapper

The wrapper with a shadow or background color around the footer.

header

The header of the modal, containing the title.

header-ruler

The horizontal ruler underneath the header.

header-wrapper

The wrapper around the header.

section-filters-title

The title for the filters section.

section-sort-title

The title for the sort section.

section-title

The title for each section.

select

The <select> element of the dropdown list.

select-icon

The select dropdown’s sort icon.

select-icon-wrapper

The wrapper around the sort icon that’s used to align it.

select-wrapper

The wrapper around the select element, used to position the icon.

title

The title of the modal.

CSS Custom Content

Name Description

--atomic-refine-modal-facet-margin

The spacing between the modal’s facets.