SearchHistory
Shows the latest terms searched by a user.
Responsible for showing the latest terms searched by a user. This component is part of the Search feature.
Example
Code
Usage
Import the component
_10import { SearchHistory, SearchHistoryTerm } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/molecules/SearchHistory/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Other Icons
Example
Code
History
Design tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-search-history-padding-top | var(--fs-spacing-2) |
--fs-search-history-padding-right | var(--fs-spacing-3) |
--fs-search-history-padding-bottom | var(--fs-search-history-padding-top) |
--fs-search-history-padding-left | var(--fs-search-history-padding-right) |
--fs-search-history-transition-property | var(--fs-transition-property) |
--fs-search-history-transition-function | var(--fs-transition-function) |
--fs-search-history-transition-timing | var(--fs-transition-timing) |
Design tokens: Header
| Local token | Default value/Global token linked |
|---|---|
--fs-search-history-header-padding-top | var(--fs-spacing-1) |
--fs-search-history-header-padding-bottom | var(--fs-search-history-header-padding-top) |
Design tokens: Title
| Local token | Default value/Global token linked |
|---|---|
--fs-search-history-title-size | var(--fs-text-size-lead) |
--fs-search-history-title-line-height | 1.5 |
Design tokens: Item
| Local token | Default value/Global token linked |
|---|---|
--fs-search-history-item-column-gap | var(--fs-spacing-1) |
--fs-search-history-item-text-size | var(--fs-text-size-2) |
--fs-search-history-item-line-height | 1.25 |
--fs-search-history-item-bkg-color-hover | var(--fs-color-tertiary-bkg-hover) |
Design tokens: Icon
| Local token | Default value/Global token linked |
|---|---|
--fs-search-history-item-icon-color | var(--fs-color-neutral-4) |
--fs-search-history-item-icon-size | 1.125rem |
Data attributes
You can target and override
SearchHistory styles using the following data attributes:data-fs-search-historydata-fs-search-history-headerdata-fs-search-history-titledata-fs-search-history-itemdata-fs-search-history-item-linkdata-fs-search-history-item-iconProps
SearchHistory
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-history |
| title | string | Title attribute for the <section> tag rendered by this component. | History |
| clearLabel | string | Defines the text displayed in clear history button. | Clear History |
| onClear | () => void | Event handler for click on clear history button. |
SearchHistoryTerm
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-search-history-term |
| value* | string | Defines the text displayed in history term item. | |
| linkProps | Partial<LinkProps<LinkElementType>> | Props for the link from term component. | |
| icon | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A React component that will be rendered as an icon. | <Icon name="ClockClockwise" width={18} height={18} /> |