@wix/design-system
Version:
@wix/design-system
106 lines (103 loc) • 3.94 kB
Markdown
### children
- type: ReactNode
- description: Renders modal content
### dataHook
- type: string
- description: Applied as data-hook HTML attribute that can be used to create driver in testing
### isOpen
- type: boolean
- description: Controls if modal is open or closed
### borderRadius
- type: number
- description: Border radius of modal
- default: 0
### contentLabel
- type: string
- description: a11y: The value of contentLabel is set as an aria-label on the modal element. This helps assistive technology, like screen readers, to add a label to an element that would otherwise be anonymous
### zIndex
- type: number
- description: Controls z-index of the modal overlay
### shouldCloseOnOverlayClick
- type: boolean
- description: Enables to close modal when mouse clicked on overlay area
- default: false
### shouldDisplayCloseButton
- type: boolean
- description: Displays a close button on the top right corner of the overlay
- default: false
### onRequestClose
- type: (event?: KeyboardEvent<Element> | MouseEvent<Element, MouseEvent> | undefined) => void
- description: Callback that will be executed when the modal is requested to be closed, prior to actually closing
### onAfterOpen
- type: () => void
- description: Callback that will be executed after the modal has been opened
### onAfterClose
- type: () => void
- description: Callback that will be executed after the modal has been closed
### horizontalPosition
- type: "center" | "start" | "end"
- description: Horizontal position of the modal
- default: 'center'
### verticalPosition
- type: "center" | "start" | "end"
- description: Vertical position of the modal
- default: 'center'
### closeTimeoutMS
- type: number
- description: Number indicating the milliseconds to wait before closing the modal
- default: 500
### scrollable
- type: boolean
- description: Specifies if modal portal supports scroll
- default: true
### scrollableContent
- type: boolean
- description: Specifies if modal content should become scrollable when modal size will fit the window
- default: false
### maxHeight
- type: string
- description: Sets the maximum height for a scrollable content
- default: 'auto'
### height
- type: string
- description: Sets the height for modal's content container
- default: '100%'
### overlayPosition
- type: "fixed" | "static" | "sticky" | "relative" | "absolute"
- description: css position of the modal overlay
- default: 'fixed'
### parentSelector
- type: () => HTMLElement
- description: A function that returns a DOM element on which the modal should be appended to
### appElement
- type: string
- description: Selector specifying where to apply the aria-hidden attribute
### onOk
- type: () => void
- description: No description
### screen
- type: "full" | "desktop" | "mobile"
- description: Specifies minimum spacing between full viewport and modal content
- default: 'desktop'
### showNavigationPreviousButton
- type: boolean
- description: Enable navigation previous buttons to the side of the content and listen on clicks by using onNavigationClickPrevious
### showNavigationNextButton
- type: boolean
- description: Enable navigation next button to the side of the content and listen on clicks by using onNavigationClickNext
### onNavigationClickPrevious
- type: () => void
- description: Callback that will be executed when the navigation control previous is clicked
### onNavigationClickNext
- type: () => void
- description: Callback that will be executed when the navigation control next is clicked
### navigationPreviousLabel
- type: string
- description: Label used for navigation control previous button tooltip
### navigationNextLabel
- type: string
- description: Label used for navigation control next button tooltip
### transition
- type: "scale" | "moveHorizontal" | "moveVertical"
- description: Transition animation type. Note that moveHorizontal/moveVertical transitions work best with FullScreenModalLayout.
- default: scale