React Overlay
@volvo-cars/react-overlay
Installation
💡 This package includes Typescript definitions
TitledOverlay
Renders an accessible modal box with a titled header, integrated close button and a scrollable content area. Can be displayed fullscreen or constrained to a grid colSpan. When displayed constrained, a dark semi-opaque background covers the background content.
The TitledOverlay will trap focus on mount and release it on unmount.
The ref is forwarded to the root element.
Name | Description | Type | Default Value |
|---|---|---|---|
children | Content to be wrapped | React.ReactNode | undefined |
close | Function to be invoked on click of the close icon in the header | () => void | undefined |
title | Title to be rendered in the modal header | string | undefined |
colSpan | Optional. If empty, modal will render fullscreen | number | undefined |
elementId | Optional. If empty, a unique identifier will be generated for you | string | undefined |
minimisableTitle | Optional. If true, Title will render large and decrease in size on scroll | boolean | false |
navPreviousPane | Optional. If provided, a back arrow will be rendered in the header block | () => void) | undefined |
zIndex | Optional. Custom zIndex for use in cases of conflict with other absolutely positioned elements | number | undefined |
Overlay
Renders an accessible modal box with a integrated close button and a scrollable content area. Can be displayed fullscreen or constrained to a grid colSpan. When displayed constrained, a dark semi-opaque background covers the background content.
The Overlay will trap focus on mount and release it on unmount.
The ref is forwarded to the root element.
Name | Description | Type | Default Value |
|---|---|---|---|
children | Content to be wrapped | React.ReactNode | undefined |
close | Function to be invoked on click of the close icon in the header | () => void | undefined |
colSpan | Optional. If empty, modal will render fullscreen | number | undefined |
zIndex | Optional. Custom zIndex for use in cases of conflict with other absolutely positioned elements | number | undefined |
ContentBlock
The TitledOverlay makes no assumptions about the content you wish to render within the modal box. However, we do export a ContentBlock component to wrap your content which will maintain DLS compliance for responsive content width and paddings and this should almost always be used.
Name | Description | Type | Default Value |
|---|---|---|---|
children | Content to be wrapped | React.ReactNode | undefined |
parentDimensions | Automatically passed when the first child of TitledOverlay. | Dimensions | undefined |
Appear
The Appear will render Overlay server side with a prop isOpen for showing or hiding the wrapped Overlay.
Name | Description | Type | Default Value |
|---|---|---|---|
isOpen | Show or hide the wrapped Overlay | boolean | false |
zIndex | Optional. Custom zIndex for use in cases of conflict with other absolutely positioned elements | number | undefined |
OverlayStacker
The OverlayStacker will automatically put the latest open overlay above all current open overlays.
Examples
Demo implementations can be found in the Storybook