Core Concepts
1. Theming & Design2. Design Tokens3. Media Queries4. Animation5. CSS in JS6. ConfigurationComponents
Content
CardPackages
Toggle theme
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 |
Examples🔗
Demo implementations can be found in the Storybook