atomic-refine-modal

This is for:

Developer

In this article

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-open is added to the body, allowing further customization.

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type	Default
`modalStatus` (required)	`modal-status`		`"beingClosed" \| "closed" \| "opened"`

modalStatus (required)

modal-status

"beingClosed" | "closed" | "opened"

Part Description

Part	Description
`close-button`	The button in the header that closes the modal.
`container`	The container of the modal’s content.
`filter-clear-all`	The button that resets all actively selected facet values.
`footer-button`	The button in the footer that closes the modal.
`header`	The header of the modal, containing the title.
`section-title`	The title for each section.
`select`	The `<select>` element of the dropdown list.

close-button

The button in the header that closes the modal.

container

The container of the modal’s content.

filter-clear-all

The button that resets all actively selected facet values.

footer-button

The button in the footer that closes the modal.

header

The header of the modal, containing the title.

section-title

The title for each section.

select

The <select> element of the dropdown list.

Name Description

Name	Description
`--atomic-refine-modal-facet-margin`	The spacing between the modal’s facets.

--atomic-refine-modal-facet-margin

The spacing between the modal’s facets.