Dialog

overview

A dialog is a conversation between the platform and the user. Dialogs often requests information or an action from the user. A dialog appears on top of the main interface typically in the form of a modal. A dialog disables the main content until the user explicitly interacts with the dialog.

• Usage
• React

note

Before using the dialog, verify you aren't looking for the alert dialog. Typically, the alert dialog pattern forces the user to choose one of the provided actions in order to close. The dialog can be closed by clicking outside of the dialog, clicking the 'x', or pressing escape. For more information on these patterns, see the WAI-ARIA guides.

Import

Arc UI exports 4 dialog related components:

• Dialog
• DialogTitle - provides font styling for the heading
• DialogBody - container for non-title, non-footer content
• DialogFooter - flex container for action buttons--there should be at least two buttons

import {
  Dialog,
  DialogTitle,
  DialogBody,
  DialogFooter,
} from '@wpmedia/arc-ui-dialog'

Usage

info

Dialog is heavily based on the Reach UI Dialog, taking the same props as documented on their website as well as those below.

interface DialogProps

Props	Description
size (optional)	"small" | "medium" | "large" = small Specifies one of three dialog sizes

function Example(props) { const [showDialog, setShowDialog] = React.useState(false) const open = () => setShowDialog(true) const close = () => setShowDialog(false) return ( <div> <Button onClick={open}>Open Dialog</Button> {/* z-index is added here to account for the header of the docs site's z-index 😒*/} <Dialog sx={{ zIndex: 500 }} isOpen={showDialog} onDismiss={close}> <DialogTitle>Hello there</DialogTitle> <DialogBody> <Text> There are three fixed sizes of dialogs: small, medium and large. </Text> <Text> <Emoji value="🎇" /> MODAL BODY <Emoji value="🎇" /> </Text> <Text> There should be at least two buttons in the footer{' '} <Emoji value="👀" /> </Text> </DialogBody> <DialogFooter> <Button onClick={close}>Cancel</Button> <Button variant="primary">Primary Action</Button> </DialogFooter> </Dialog> </div> ) }

function Example(props) {
  const [showDialog, setShowDialog] = React.useState(false)
  const open = () => setShowDialog(true)
  const close = () => setShowDialog(false)
  return (
    <div>
      <Button onClick={open}>Open Dialog</Button>
      {/* z-index is added here to account for the header of the docs site's z-index 😒*/}
      <Dialog sx={{ zIndex: 500 }} isOpen={showDialog} onDismiss={close}>
        <DialogTitle>Hello there</DialogTitle>
        <DialogBody>
          <Text>
            There are three fixed sizes of dialogs: small, medium and large.
          </Text>
          <Text>
            <Emoji value="🎇" /> MODAL BODY <Emoji value="🎇" />
          </Text>
          <Text>
            There should be at least two buttons in the footer{' '}
            <Emoji value="👀" />
          </Text>
        </DialogBody>
        <DialogFooter>
          <Button onClick={close}>Cancel</Button>
          <Button variant="primary">Primary Action</Button>
        </DialogFooter>
      </Dialog>
    </div>
  )
}

Copy

DialogBody and DialogTitle

Both compose the Box component and take all the same props as Box