React Overlay
Questions? Ask in Slack #vcc-ui
@volvo-cars/react-overlay
Installation
$ yarn add @volvo-cars/react-overlay
💡 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.
<TitledOverlay title="Demo" close={() => null}>
<>Content</>
</TitledOverlay>
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 |
collapse | Optional. If true, the modal will collapse to content height rather than filling the viewport | boolean | 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.
<Overlay close={() => null}>
<>Content</>
</Overlay>
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 |
collapse | Optional. If true, the modal will fit to content height | boolean | 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.
<TitledOverlay>
<ContentBlock>...Your content</ContentBlock>
</TitledOverlay>
| Name | Description | Type | Default Value |
|---|---|---|---|
children | Content to be wrapped | React.ReactNode | undefined |
Appear
The Appear will render Overlay server side with a prop isOpen for showing or hiding the wrapped Overlay.
<Appear isOpen={false}>
<Overlay>
<>Content</>
</Overlay>
</Appear>
| 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.
<OverlayStacker>
<Overlay>
<>Overlay content 1</>
</Overlay>
<Overlay>
<>Overlay content 2</>
</Overlay>
</OverlayStacker>
Examples
Demo implementations can be found in the Storybook