Dialog

Simple

Code Example

import React, { useState } from 'react'
import { Button, Dialog } from '../../'

const DialogDefault = () => {
  const [isOpen, setIsOpen] = useState(false)
  const close = () => setIsOpen(false)
  const open = () => setIsOpen(true)
  const [isLoading, setIsLoading] = useState(false)

  return (
    <>
      <Button onClick={open}>{'Open Dialog'}</Button>
      <Dialog
          cancelButton="Cancel Button"
          className="wrapper"
          confirmButton="Okay"
          loading={isLoading}
          onCancel={close}
          onClose={close}
          onConfirm={() => setIsLoading(!isLoading)}
          opened={isOpen}
          portalClassName="portal"
          size="sm"
          text="Hello Body Text, Nice to meet ya."
          title="Header Title is the Title Prop"
      />
    </>
  )
}

export default DialogDefault

Complex

The dialog kit also supports customizing your dialog with a compound component structure.
This allows for greater flexibility and more complex dialogs.

Code Example

import React, { useState } from 'react'
import {
  Body,
  Button,
  Caption,
  Dialog,
  RichTextEditor,
  Typeahead,
} from '../../'

const DialogCompound = () => {
  const [isOpen, setIsOpen] = useState(false)
  const close = () => setIsOpen(false)
  const open = () => setIsOpen(true)

  return (
    <>
      <Button onClick={open}>{'Open a Complex Dialog'}</Button>
      <Dialog
          onClose={close}
          opened={isOpen}
          size="lg"
      >
        <Dialog.Header>
          <Body>{'What do you need us to take care of?'}</Body>
        </Dialog.Header>
        <Dialog.Body>
          <Caption marginBottom="xs">{'Description'}</Caption>
          <RichTextEditor />
          <br />
          <Caption>
            {
              'Type in a word or term too help find tickets later. ex. training,'
            }
            {'phone setup, hr'}
          </Caption>
          <Typeahead placeholder="Tags.." />
        </Dialog.Body>
        <Dialog.Footer>
          <Button onClick={close}>{'Send My Issue'}</Button>
          <Button
              onClick={close}
              variant="link"
          >
            {'Back'}
          </Button>
        </Dialog.Footer>
      </Dialog>
    </>
  )
}

export default DialogCompound

Sizes

Code Example

/* @flow */

import React, { useState } from 'react'
import { Button, Dialog, Flex } from '../../'

const useDialog = (visible = false) => {
  const [opened, setOpened] = useState(visible)
  const toggle = () => setOpened(!opened)

  return [opened, toggle]
}

const DialogSizes = () => {
  const [smDialogOpened, toggleSmDialog] = useDialog()
  const [mdDialogOpened, toggleMdDialog] = useDialog()
  const [lgDialogOpened, toggleLgDialog] = useDialog()

  /* eslint-disable react/jsx-handler-names */

  const dialogs = [
    {
      size: 'sm',
      text: 'Body on small dialog',
      title: 'Header on small dialog',
      toggle: toggleSmDialog,
      visible: smDialogOpened,
    },
    {
      size: 'md',
      text: 'Body on medium dialog',
      title: 'Header on medium dialog',
      toggle: toggleMdDialog,
      visible: mdDialogOpened,
    },
    {
      size: 'lg',
      text: 'Body on large dialog',
      title: 'Header on large dialog',
      toggle: toggleLgDialog,
      visible: lgDialogOpened,
    },
  ]

  return (
    <div>
      <Flex>
        <Button
            id="sm"
            marginRight="xl"
            onClick={toggleSmDialog}
        >
          {'Small Dialog'}
        </Button>
        <Button
            marginRight="xl"
            onClick={toggleMdDialog}
        >
          {'Medium Dialog'}
        </Button>
        <Button
            marginRight="xl"
            onClick={toggleLgDialog}
        >
          {'Large Dialog'}
        </Button>
      </Flex>
      <Flex>
        {dialogs.map((dialog) => (
          <Dialog
              key={dialog.size}
              onClose={dialog.toggle}
              opened={dialog.visible}
              size={dialog.size}
          >
            <Dialog.Header>{dialog.title}</Dialog.Header>
            <Dialog.Body>{dialog.text}</Dialog.Body>
            <Dialog.Footer>
              <Button onClick={dialog.toggle}>{'Okay'}</Button>
              <Button
                  onClick={dialog.toggle}
                  variant="link"
              >
                {'Cancel'}
              </Button>
            </Dialog.Footer>
          </Dialog>
        ))}
      </Flex>
    </div>
  )
}

export default DialogSizes

Scrollable

The dialog will create a scroll container automatically when the text exceeds the height of the page.
No prop or configuration is needed.

Code Example

import React, { useState } from 'react'
import { Button, Dialog } from '../../'

const DialogScrollable = () => {
  const [isOpen, setIsOpen] = useState(false)
  const close = () => setIsOpen(false)
  const open = () => setIsOpen(true)

  return (
    <>
      <Button onClick={open}>{'Open Dialog'}</Button>
      <Dialog
          cancelButton="Cancel"
          confirmButton="Okay"
          onCancel={close}
          onClose={close}
          onConfirm={close}
          opened={isOpen}
          size="md"
          text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
          title="Header Title is the Title Prop"
      />
    </>
  )
}

export default DialogScrollable

Overlay Click

When shouldCloseOnOverlayClick is explicitly set to false, click events on the overlay will not close the modal.
By default, shouldCloseOnOverlayClick is set to true.

Code Example

import React, { useState } from 'react'
import { Button, Dialog } from '../../'

const DialogShouldCloseOnOverlay = () => {
  const [isOpen, setIsOpen] = useState(false)
  const close = () => setIsOpen(false)
  const open = () => setIsOpen(true)

  return (
    <>
      <Button onClick={open}>{'Open Dialog'}</Button>
      <Dialog
          cancelButton="Cancel"
          confirmButton="Okay"
          onCancel={close}
          onClose={close}
          onConfirm={close}
          opened={isOpen}
          shouldCloseOnOverlayClick={false}
          size="sm"
          text="Click on the overlay all day. I will stay open."
          title="Neat Header"
      />
    </>
  )
}

export default DialogShouldCloseOnOverlay

Status Alert

This shows the different alert statuses that can be used for dialog boxes. These all have two buttons which is a default

Code Example

/* eslint-disable react/jsx-handler-names */
/* @flow */

import React, { useState } from "react"
import { Button, Dialog, Flex } from "../.."

const useDialog = (visible = false) => {
  const [opened, setOpened] = useState(visible)
  const toggle = () => setOpened(!opened)
  return [opened, toggle]

}

const DialogStatus = () => {
  const [infoAlertOpened, toggleInfoAlert] = useDialog()
  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
  const [successAlertOpened, toggleSuccessAlert] = useDialog()
  const [errorAlertOpened, toggleErrorAlert] = useDialog()
  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()

  const dialogs = [
    {
      status: "info",
      text: "Text explaining why there is an alert",
      title: "Are you Sure?",
      toggle: toggleInfoAlert,
      visible: infoAlertOpened,
      buttonOneText:"No, Cancel",
      buttonTwoText: "Yes, Action"
    },
    {
      status: "caution",
      text: "This is the action you will be taking",
      title: "Are you Sure?",
      toggle: toggleCautionAlert,
      visible: cautionAlertOpened,
      buttonOneText:"No, Cancel",
      buttonTwoText: "Yes, Action"
    },
    {
      status: "delete",
      text: "You are about to delete ...",
      title: "Delete",
      toggle: toggleDeleteAlert,
      visible: deleteAlertOpened,
      buttonOneText:"No, Cancel",
      buttonTwoText: "Yes, Delete"
    },
    {
      status: "error",
      text: "Text explaining the error",
      title: "Error Message",
      toggle: toggleErrorAlert,
      visible: errorAlertOpened,
      buttonOneText:"No, Cancel",
      buttonTwoText: "Ok, Thanks"
    },
    {
      status: "success",
      text: "Text explaining what is successful",
      title: "Success!",
      toggle: toggleSuccessAlert,
      visible: successAlertOpened,
      buttonOneText:"No, Cancel",
      buttonTwoText: "Ok, Thanks"
    },
  ]

  return (
    <div>
      <Flex>
        <Button
            marginX="md"
            onClick={toggleInfoAlert}
        >
          {"Information Status"}
        </Button>
        <Button
            marginX="md"
            onClick={toggleCautionAlert}
        >
          {"Caution Status"}
        </Button>
        <Button
            marginX="md"
            onClick={toggleSuccessAlert}
        >
          {"Success Status"}
        </Button>
        <Button onClick={toggleErrorAlert}>
          {"Error Status"}
        </Button>
        <Button
            marginX="md"
            onClick={toggleDeleteAlert}
        >
          {"Delete Status"}
        </Button>
      </Flex>
      <Flex>
        {dialogs.map((dialog) => (
          <Dialog
              key={dialog.status}
              onClose={dialog.toggle}
              opened={dialog.visible}
              status={dialog.status}
              text={dialog.text}
              title={dialog.title}
          >
          <Dialog.Footer>
            <Button
                onClick={dialog.toggle}
                variant="secondary"
            >
            {dialog.buttonOneText}
            </Button>
            <Button
                onClick={dialog.toggle}
            >
            {dialog.buttonTwoText}
            </Button>
          </Dialog.Footer>
          </Dialog>
        ))}
      </Flex>
    </div>
  )
}

export default DialogStatus

Stacked Button Alert

This is designed to show you how the buttons can stack with different alert styles. It also has a link style for the buttons for the mobile views.

Code Example

/* eslint-disable react/jsx-handler-names */

import React, { useState } from "react"
import { Button, Dialog, Flex, FlexItem, SectionSeparator } from "../.."

const useDialog = (visible = false) => {
  const [opened, setOpened] = useState(visible)
  const toggle = () => setOpened(!opened)
  return [opened, toggle]
}

const DialogStackedAlert = () => {
  const [singleButtonOpen, toggleSingleButtonOpen] = useDialog()
  const [stackedButtonOpen, toggleStackedButtonOpen] = useDialog()
  const [singleLinkButtonOpen, toggleSingleLinkButtonOpen] = useDialog()
  const [twoLinkButtonOpen, toggleTwoLinkButtonOpen] = useDialog()


  const dialogs = [
    {
      status: "info",
      text: "Text explaining why there is an alert",
      title: "Are you sure?",
      toggle: toggleSingleButtonOpen,
      visible: singleButtonOpen,
      confirmedButton:"Ok, Thanks",
    },
    {
      status: "error",
      text: "Text explaining the error",
      title: "Error Message",
      confirmedButton:"Yes, Action",
      cancelledButton: "Ok, Cancel",
      toggle: toggleStackedButtonOpen,
      visible: stackedButtonOpen,
    },
    {
      status: "caution",
      text: "This is the action you will be taking",
      title: "Are you sure?",
      toggle: toggleSingleLinkButtonOpen,
      visible: singleLinkButtonOpen,
      linkConfirmedButton:"Ok, Thanks!"
    },
    {
      status: "success",
      text: "Text explaining what is successful",
      title: "Success",
      toggle: toggleTwoLinkButtonOpen,
      visible: twoLinkButtonOpen,
      linkConfirmedButton:"Ok",
      linkCancelledButton: "Cancel"
    }
  ]

  return (
    <div>
    <Flex>
      <Button
          marginX="md"
          onClick={toggleSingleButtonOpen}
      >
        {"1 Button Information Status"}
      </Button>
      <Button
          marginX="md"
          onClick={toggleStackedButtonOpen}
      >
        {"2 Button Error Status"}
      </Button>
      <Button
          marginX="md"
          onClick={toggleSingleLinkButtonOpen}
      >
        {"1 Link Button Caution"}
      </Button>
      <Button
          marginX="md"
          onClick={toggleTwoLinkButtonOpen}
      >
        {"2 Link Button Success"}
      </Button>
    </Flex>
    <Flex>
      {dialogs.map((dialog) => (
        <Dialog
            alertStyle={dialog.alertStyle}
            key={dialog.status}
            onClose={dialog.toggle}
            opened={dialog.visible}
            size="sm"
            status={dialog.status}
            text={dialog.text}
            title={dialog.title}
        >
        <If condition={dialog.cancelledButton || dialog.confirmedButton}>
          <Dialog.Footer>
            <Button
                fullWidth
                onClick={dialog.toggle}
            >
              {dialog.confirmedButton}
            </Button>
          </Dialog.Footer>
          <If condition={dialog.cancelledButton}>
            <Dialog.Footer paddingTop="none">
              <Button
                  fullWidth
                  onClick={dialog.toggle}
                  variant="secondary"
              >
                {dialog.cancelledButton}
              </Button>
            </Dialog.Footer>
          </If>
          </If>
          <If condition={dialog.linkCancelledButton || dialog.linkConfirmedButton} >
            <SectionSeparator />
            <Flex
                inline="flex-container"
                vertical="stretch"
            >
              <FlexItem flex={1} >
                <Button
                    fullWidth
                    onClick={dialog.toggle}
                    variant="link"
                >
                  {dialog.linkConfirmedButton}
                </Button>
              </FlexItem>
              <If condition={dialog.linkCancelledButton}>
                <SectionSeparator orientation="vertical"/>
                <FlexItem flex={1}>
                  <Button
                      fullWidth
                      onClick={dialog.toggle}
                      variant="link"
                  >
                    {dialog.linkCancelledButton}
                  </Button>
                </FlexItem>
              </If>
            </Flex>
          </If>
        </Dialog>
      ))}
    </Flex>
  </div>
  )
}

export default DialogStackedAlert