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