Modal
Modals are dialog windows that sit on top of an application's main view.
Modals are dialog windows that sit on top of an application's main view.
The
Modal
component is a compound of the following:Modal
: Dialog windows with card style base.ModalHeader
: Wraps the Modal header. It may contain a title, description and a close button. (Optional)ModalBody
: Wraps the Modal body content. (Optional)
Import
Import the component from @faststore/ui
_10import { Modal, ModalHeader, ModalBody } 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:
_10@import '@faststore/ui/src/components/molecules/Modal/styles.scss';
Follow the instructions in the Importing FastStore UI component styles tutorial.
Usage
Example
Code
Props
All modal-related components support all attributes also supported by the
<div>
tag.Besides those attributes, the following props are also supported:
Modal
Name | Type | Description | Default |
---|---|---|---|
testId | string | ID to find this component in testing tools (e.g.: cypress, testing library, and jest). | fs-modal |
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 | |
isOpen | false | true | A boolean value that represents the state of the Modal | true |
onDismiss | () => void | Event emitted when the modal is closed | |
overlayProps | Props | Props forwarded to the `Overlay` component | |
children* | string | number | false | true | {} | ModalChildrenFunction | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children or function as a children |
Modal Header
Name | Type | Description | Default |
---|---|---|---|
title* | string | Title for header modal. | |
description | string | Description for header modal. | |
closeBtnProps | Partial<Omit<IconButtonProps, "onClick">> | Props for the Close Button component. | {} |
onClose | () => void | Function called when dismiss button is clicked. |
Modal Body
Name | Type | Description | Default |
---|---|---|---|
children* | string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Children or function as a children |
Design Tokens
Local token | Default value/Global token linked |
---|---|
--fs-modal-position-top | 30vh |
--fs-modal-position-right | var(--fs-spacing-4) |
--fs-modal-position-left | var(--fs-spacing-4) |
--fs-modal-max-width | calc(var(--fs-grid-breakpoint-desktop) / 3) |
--fs-modal-min-height | var(--fs-spacing-5) |
--fs-modal-margin | auto |
--fs-modal-background-color | var(--fs-color-body-bkg) |
--fs-modal-border-radius | var(--fs-border-radius) |
--fs-modal-width-tablet | calc(100vw / 3) |
--fs-modal-min-width-tablet | calc(var(--fs-grid-breakpoint-desktop) / 3) |
--fs-modal-transition-timing | var(--fs-transition-timing) |
--fs-modal-transition-property | transform |
--fs-modal-transition-in-function | ease-in |
--fs-modal-transition-out-function | ease-in |
Nested Elements
Header
Local token | Default value/Global token linked |
---|---|
--fs-modal-header-padding | var(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4) |
--fs-modal-header-title-margin-bottom | .625rem |
--fs-modal-header-title-size | var(--fs-text-size-lead) |
--fs-modal-header-title-weight | var(--fs-text-weight-bold) |
--fs-modal-header-title-line-height | 1.2 |
--fs-modal-header-description-size | var(--fs-text-size-body) |
--fs-modal-header-description-line-height | 1.5 |
--fs-modal-header-description-color | var(--fs-color-text-light) |
--fs-modal-header-close-button-position-top | 0 |
--fs-modal-header-close-button-position-right | 0 |
Body
Local token | Default value/Global token linked |
---|---|
--fs-modal-body-padding | var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5) |
Customization
data-fs-modal
data-fs-modal-state="in | out"
data-fs-modal-header
data-fs-modal-header-close-button
data-fs-modal-header-title
data-fs-modal-header-description
data-fs-modal-body