Looker

Components

Dialog

STABLE

Dialogs break out of the standard application flow and UI to present new information or required actions.

Warning
Dialog provides a general purpose (empty & unstyled) overlay. Confirm will likely be more useful if your intent is to render a standard user confirmation dialog.

Standard Use

Dialog operates in a "uncontrolled" manner.

Controlled

Dialog can be used in a "controlled" manner by specifying the isOpen property. An onClose callback should also be specified so that clicking the dialog's backdrop or calling the DialogContext.closeModal method will work as expected.

Hook: useDialog

Dialog is also offered as a React Hook via useDialog. It returns the open callback and rendered dialog.

Render Props

Dialog supports render-props style use in cases where the simple compositional syntax is unable to automatically spread the dialog props down on the the child element properly.

Terminology

Dialogs are assembled of two pieces: an overlay and a surface. The Backdrop component is the semi-opaque full-screen overlay which signals that the the rest of the application is inaccessible. The Surface component sits on top of the overlay and renders the relevant content.

The most common pattern for a Dialog is the Confirm pattern.

Backdrop

This provides the backdrop behind dialogs.

Surface

Surface provides the container that contains the content.

Width & minHeight

All variants of Dialog allow you to specify width - it can be specified as small, medium, & large.

By default, width defaults to medium so that Dialog Surface will conform to the width of its content. At the same time, maxWidth constrains the Dialog surface's width to be no larger than the specified value.

Specify a minHeight to prevent a Dialog from getting any shorter than the specified value.

Placement

Determines how surface is positioned in the the viewport.

  • center (default) - surface is centered horizontally and vertically above mobile breakpoint.
    • mobile: positioned at top of window and covers entire width.
    • width: defaults to 100% in mobile breakpoint and 37.5rem above that unless otherwise specified
    • height: fits content unless it's explicitly specified with minHeight prop
  • cover - positioned to cover nearly the entire window.
    • mobile & tablet: cover the entire window.
  • top - vertically positioned near the top of edge of the window, horizontally centered.
    • mobile: identical to default placement
    • height: grows to fit content. Total height will keep surface a small amount from top and bottom of viewport
    • width: default medium above mobile breakpoint

DialogContext

import React, { useContext } from 'react'
import { Button, DialogContext } from '@looker/components'
export function DialogContextDemo() {
return (
<DialogContext.Consumer>
{({ close }) => <Button onClick={close}>Close!</Button>}
</DialogContext.Consumer>
)
}
export function DailogUseContextDemo() {
const { close } = useContext(DialogContext)
return <Button onClick={close}>Close!</Button>
}

DialogContext is a React Context that provides access to the closeModal function, which allows you to close the Dialog or Popover.

Scroll Lock

A key part of dialog usability is the scroll lock, which disables scrolling on any part of the page except within the dialog. When the Dialog component renders, it registers its portal element to both the ScrollLockContext and FocusTrapContext in ComponentsProvider, which manage competing scroll locks and focus traps from other components.

In rare cases, such as nesting a popover from another library inside a Dialog, you may need to temporarily disable these behaviors:

import { ScrollLockContext } from '@looker/components-providers'
import { useContext } from 'react'
const { activeTrapRef, disableCurrentTrap, enableCurrentTrap } =
useContext(ScrollLockContext)
function toggleScrollLock() {
if (activeTrapRef && activeTrapRef.current) {
disableCurrentTrap()
} else {
enableCurrentTrap()
}
}