@volvo-cars/react-overlay

React Overlay

Questions? Ask in Slack #vcc-ui

@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.

<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