Dialog

Interface of Dialog
🏗 Coming Soon

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 requires that the developer manages state by assigning true or false to the isOpen prop.

Dialog is a container for content that sits above the application's content. They are temporary overlays that offer contextual information or require user input/confirmation while blocking interactions with the application until being explicitly dismissed.

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. It can be customized via the backdrop property. These must be a CSSProperty compatible key / value paired object.

Surface

Surface provides the container that contains the content. It can be customized via the surfaceStyles property. These must be a CSSProperty compatible key / value paired object.

Stuff and text

DialogManager

DialogManager gives an easy way to compose a Dialog without the need to manage open/close state.

Props: width and maxWidth

All variants of Dialog allow you to override width and max-width styles to suit your content. By default, width is unassigned 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.

maxWidth defaults to one of three sizes depending on the responsive breakpoint of the page (['90vw', '90vw', '600px']).

With those constraints in mind, if you want a variable-width Dialog that renders complex content you should use maxWidth. If your Dialog content must be a specific predefined width, assign values to both props (or else maxWidth will take priority).

The props accept responsive width arrays an well as static strings.

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 functionality without requiring the developer to explicitly manage the Dialog's state. The context provides access to the following methods:

  • close
  • enableFocusTrap and disableFocusTrap
  • enableScrollLock and disableScrollLock

As well as the following values:

  • scrollLockEnabled
  • focusTrapEnabled

The close method simply allows you to close the Dialog or Popover.

The other methods and values above are for rare use when the dialog behaviors of focus trap and scroll lock are interfering with the desired behavior. For example a popover from another library nested inside of a @looker/components Popover or Dialog.