Slide Over
This component represents an aditional session that complements the screen's information.
Import
Import the component from @faststore/ui
import { SlideOver, SlideOverHeader } from '@faststore/ui'Import Styles into your FastStore project
To apply the styles of this component in your FastStore project, import the following into your stylesheet:
@import '@faststore/ui/src/components/organisms/SlideOver/styles.scss';Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Props
Slide Over
| Name | Type | Description | Default |
|---|---|---|---|
| testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-slide-over |
| isOpen* | false | true | A boolean value that represents the state of the SlideOver | |
| direction | "leftSide" | "rightSide" | Represents the side that the SlideOver comes from. | leftSide |
| size | "full" | "partial" | Represents the size of the SlideOver. | full |
| fade | "in" | "out" | Represents the fade effect of the SlideOver. | out |
| children* | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children or function as a children | |
| overlayProps | Props | Props forwarded to the `Overlay` component. | |
| onDismiss | () => void | This function is called whenever the user clicks outside. the modal content | |
| aria-labelledby | string | Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby |
Slide Over Header
| Name | Type | Description | Default |
|---|---|---|---|
| children* | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | A react component to be used as the title in the header. | |
| closeBtnProps | Partial<Omit<IconButtonProps, "onClick">> | Props for the Close Button component. | {} |
| onClose* | () => void | Function called when Close Button is clicked. |
Design Tokens
| Local token | Default value/Global token linked |
|---|---|
--fs-slide-over-bkg-color | var(--fs-color-body-bkg) |
--fs-slide-over-transition-timing | var(--fs-transition-timing) |
Nested Elements
Header
| Local token | Default value/Global token linked |
|---|---|
--fs-slide-over-header-padding | var(--fs-spacing-2) var(--fs-spacing-3) var(--fs-spacing-2) |
--fs-slide-over-header-bkg-color | var(--fs-color-neutral-0) |
Variants
Partial
| Local token | Default value/Global token linked |
|---|---|
--fs-slide-over-partial-gap | calc(2 * var(--fs-grid-padding)) |
--fs-slide-over-partial-width-mobile | calc(100vw - var(--fs-slide-over-partial-gap)) |
--fs-slide-over-partial-width-notebook | calc(100% / 3) |
--fs-slide-over-partial-max-width-notebook | calc(var(--fs-grid-breakpoint-notebook) / 3) |
Customization
data-fs-slide-over
data-fs-slide-over-size="full" | "partial"
data-fs-slide-over-state="in" | "out"
data-fs-slide-over-header
data-fs-slide-over-header-icon