atomic-rating-facet

This is for:

Developer

In this article

Introduction
User Experience and Best Practices
Use Cases and Examples
Properties
Shadow Parts
CSS Custom Content

A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences). An atomic-rating-facet displays a facet of the results for the current query as ratings. It only supports numeric fields.

Go to the interactive example

Introduction

A facet allows users to drill down inside a result set by filtering the result to certain field values. The Rating Facet component displays a facet of the results for the current query as ratings.

User Experience and Best Practices

Use the Rating Facet when social proof is important in guiding the user’s decisions.
Ratings help users understand what others think, or how they have rated the item.
The Rating Facet only works with numeric field values.

Guidelines

Don’t use a range that’s too large, we recommend that you keep it below ten. A five star rating system is ideal; this is a common system that’s familiar to most people.

Use Cases and Examples

On an ecommerce website, a user may want to filter their results to display only the items that have a rating of four stars or above.

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type	Default
`displayValuesAs`	`display-values-as`	Whether to display the facet values as checkboxes (multiple selection) or links (single selection). Possible values are 'checkbox' and 'link'.	`"checkbox" \| "link"`	`'checkbox'`
`facetId`	`facet-id`	Specifies a unique identifier for the facet.	`string \| undefined`
`field` (required)	`field`	The field whose values you want to display in the facet.	`string`
`filterFacetCount`	`filter-facet-count`	Whether to exclude the parents of folded results when estimating the result count for each facet value.	`boolean`	`true`
`icon`	`icon`	The SVG icon to use to display the rating. Use a value that starts with `http://`, `https://`, `./`, or `../`, to fetch and display an icon from a given location. Use a value that starts with `assets://`, to display an icon from the Atomic package. Use a stringified SVG to display it directly. When using a custom icon, at least part of your icon should have the color set to `fill="currentColor"`. This part of the SVG will take on the colors set in the following variables: `--atomic-rating-facet-icon-active-color` `--atomic-rating-facet-icon-inactive-color`	`string`	`Star`
`injectionDepth`	`injection-depth`	The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: `0`	`number`	`1000`
`isCollapsed`	`is-collapsed`	Specifies if the facet is collapsed.	`boolean`	`false`
`label`	`label`	The non-localized label for the facet.	`string`	`'no-label'`
`maxValueInIndex`	`max-value-in-index`	The maximum value in the field’s index and the number of rating icons to display in the facet. If not assigned a value, this property will default to the same value as `numberOfIntervals`.	`number`	`this.numberOfIntervals`
`minValueInIndex`	`min-value-in-index`	The minimum value of the field.	`number`	`1`
`numberOfIntervals`	`number-of-intervals`	The number of options to display in the facet. If `maxValueInIndex` isn’t specified, it will be assumed that this is also the maximum number of rating icons.	`number`	`5`

displayValuesAs

display-values-as

Whether to display the facet values as checkboxes (multiple selection) or links (single selection). Possible values are 'checkbox' and 'link'.

"checkbox" | "link"

'checkbox'

facetId

facet-id

Specifies a unique identifier for the facet.

string | undefined

field (required)

field

The field whose values you want to display in the facet.

string

filterFacetCount

filter-facet-count

Whether to exclude the parents of folded results when estimating the result count for each facet value.

boolean

true

icon

The SVG icon to use to display the rating.

Use a value that starts with http://, https://, ./, or ../, to fetch and display an icon from a given location.
Use a value that starts with assets://, to display an icon from the Atomic package.
Use a stringified SVG to display it directly.

When using a custom icon, at least part of your icon should have the color set to fill="currentColor". This part of the SVG will take on the colors set in the following variables:

--atomic-rating-facet-icon-active-color
--atomic-rating-facet-icon-inactive-color

string

Star

injectionDepth

injection-depth

The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: 0

number

1000

isCollapsed

is-collapsed

Specifies if the facet is collapsed.

boolean

false

label

The non-localized label for the facet.

string

'no-label'

maxValueInIndex

max-value-in-index

The maximum value in the field’s index and the number of rating icons to display in the facet. If not assigned a value, this property will default to the same value as numberOfIntervals.

number

this.numberOfIntervals

minValueInIndex

min-value-in-index

The minimum value of the field.

number

1

numberOfIntervals

number-of-intervals

The number of options to display in the facet. If maxValueInIndex isn’t specified, it will be assumed that this is also the maximum number of rating icons.

number

5

Shadow Parts

Part Description

Part	Description
`clear-button`	The button that resets the actively selected facet values.
`clear-button-icon`	The clear button icon.
`facet`	The wrapper for the entire facet.
`label-button`	The button that displays the label and toggles to expand or collapse the facet.
`label-button-icon`	The label button icon.
`placeholder`	The placeholder shown before the first search is executed.
`ripple`	The ripple effect of the component’s interactive elements.
`value-checkbox`	The facet value checkbox, available when display is 'checkbox'.
`value-checkbox-label`	The facet value checkbox clickable label, available when display is 'checkbox'.
`value-count`	The facet value count, common for all displays.
`value-link`	The facet value when display is 'link'.
`value-rating`	The facet value rating, common for all displays.
`values`	The facet values container.

clear-button

The button that resets the actively selected facet values.

clear-button-icon

The clear button icon.

facet

The wrapper for the entire facet.

label-button

The button that displays the label and toggles to expand or collapse the facet.

label-button-icon

The label button icon.

placeholder

The placeholder shown before the first search is executed.

ripple

The ripple effect of the component’s interactive elements.

value-checkbox

The facet value checkbox, available when display is 'checkbox'.

value-checkbox-label

The facet value checkbox clickable label, available when display is 'checkbox'.

value-count

The facet value count, common for all displays.

value-link

The facet value when display is 'link'.

value-rating

The facet value rating, common for all displays.

values

The facet values container.

CSS Custom Content

Name Description

Name	Description
`--atomic-facet-checkbox-size`	Size of the checkbox.
`--atomic-rating-facet-icon-active-color`	Color of the icon when active.
`--atomic-rating-facet-icon-inactive-color`	Color of the icon when inactive.

--atomic-facet-checkbox-size

Size of the checkbox.

--atomic-rating-facet-icon-active-color

Color of the icon when active.

--atomic-rating-facet-icon-inactive-color

Color of the icon when inactive.