Dialog

Simple

For the Rails version of the dialog kit, the clickable element being used to open the dialog must be given a open-dialog data attribute with a value that is the same as the id being given to the dialog itself. See code example below to see this in action.

Additionally, both the cancel button and the confirm button have optional id props which can be used to pass in a custom id to allow developers to target that button with custom javascript if needed (confirm_button_id and cancel_button_id).

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.

For the Rails version, when using the kit as a compound component it is necessary to pass the same value as the id for the dialog, the dialog header and the dialog footer in order for the opening and closing of the dialog to function as expected.

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
          fullHeight
          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 
          rowGap="xs" 
          wrap
      >
        <Button
            id="sm"
            marginRight="md"
            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

The Dialog kit also offers customizable Status Alert options as seen here.

For the rails version of the kit, when using custom confirm and cancel buttons as shown in these examples, the 'cancel' button must be given a close-dialog data attribute with a value that is the same as the id given to the dialog itself.

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 [defaultAlertOpened, toggleDefaultAlert] = useDialog()
  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()
  const [infoAlertOpened, toggleInfoAlert] = useDialog()
  const [successAlertOpened, toggleSuccessAlert] = useDialog()
  const [errorAlertOpened, toggleErrorAlert] = useDialog()

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

  return (
    <div>
      <Flex 
          rowGap="xs" 
          wrap
        >
        <Button
            marginRight="md"
            onClick={toggleDefaultAlert}
        >
          {"Default Status"}
        </Button>
        <Button
            marginRight="md"
            onClick={toggleCautionAlert}
        >
          {"Caution Status"}
        </Button>
        <Button
            marginRight="md"
            onClick={toggleDeleteAlert}
        >
          {"Delete Status"}
        </Button>
        <Button
            marginRight="md"
            onClick={toggleInfoAlert}
        >
          {"Information Status"}
        </Button>
        <Button
            marginRight="md"
            onClick={toggleSuccessAlert}
        >
          {"Success Status"}
        </Button>
        <Button 
            marginRight="md"
            onClick={toggleErrorAlert}
        >
          {"Error Status"}
        </Button>
      </Flex>
      <Flex>
        {dialogs.map((dialog) => (
          <Dialog
              key={dialog.status}
              onClose={dialog.toggle}
              opened={dialog.visible}
              size={dialog.size}
              status={dialog.status}
              text={dialog.text}
              title={dialog.title}
          >
          <Dialog.Footer
              paddingBottom="md"
              paddingX="md"
          >
            <If condition={!dialog.buttonTwoText}>
              <Button
                  fullWidth
                  onClick={dialog.toggle}
              >
              {dialog.buttonOneText}
              </Button>
            </If>
            <If condition={dialog.buttonTwoText}>
              <Button
                  onClick={dialog.toggle}
                  paddingRight="xl"
              >
              {dialog.buttonOneText}
              </Button>
              <Button
                  onClick={dialog.toggle}
                  variant="secondary"
              >
              {dialog.buttonTwoText}
              </Button>
            </If>
          </Dialog.Footer>
          </Dialog>
        ))}
      </Flex>
    </div>
  )
}

export default DialogStatus

Stacked Button Alert

These examples highlight how the buttons within the Dialog can be stacked when using the Status Alert variant. 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} from "../.."

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

const DialogStackedAlert = () => {
  const [defaultAlertOpened, toggleDefaultAlert] = useDialog()
  const [cautionAlertOpened, toggleCautionAlert] = useDialog()
  const [deleteAlertOpened, toggleDeleteAlert] = useDialog()

  const dialogs = [
    {
      size: "sm",
      status: "default",
      text: "Text explaining why there is an alert",
      title: "Are you sure?",
      toggle: toggleDefaultAlert,
      visible: defaultAlertOpened,
      buttonOneText:"Yes, Action",
      buttonTwoText: "No, Cancel"
    },
    {
      size: "sm",
      status: "caution",
      text: "This is the action you will be taking",
      title: "Are you sure?",
      toggle: toggleCautionAlert,
      visible: cautionAlertOpened,
      buttonOneText:"Yes, Action",
      buttonTwoText: "No, Cancel"
    },
    {
      size: "sm",
      status: "delete",
      text: "You are about to delete ...",
      title: "Delete",
      toggle: toggleDeleteAlert,
      visible: deleteAlertOpened,
      buttonOneText:"Yes, Delete",
      buttonTwoText: "No, Cancel"
    }
  ]

  return (
    <div>
    <Flex
        rowGap="xs" 
        wrap
    >
      <Button
          marginRight="md"
          onClick={toggleDefaultAlert}
      >
        {"Default Status"}
      </Button>
      <Button
          marginRight="md"
          onClick={toggleCautionAlert}
      >
        {"Caution Status"}
      </Button>
      <Button
          marginRight="md"
          onClick={toggleDeleteAlert}
      >
        {"Delete Status"}
      </Button>
    </Flex>
    <Flex>
      {dialogs.map((dialog) => (
        <Dialog
            alertStyle={dialog.alertStyle}
            key={dialog.status}
            onClose={dialog.toggle}
            opened={dialog.visible}
            size={dialog.size}
            status={dialog.status}
            text={dialog.text}
            title={dialog.title}
        >
        <Dialog.Footer
            padding="sm"
            paddingBottom = "none"
            paddingX="md"
        >
          <Button
              fullWidth
              onClick={dialog.toggle}
          >
            {dialog.buttonOneText}
          </Button>
        </Dialog.Footer>
        <Dialog.Footer
            padding="sm"
            paddingBottom = "md"
            paddingX="md"
        >
          <Button
              fullWidth
              onClick={dialog.toggle}
              variant="secondary"
          >
            {dialog.buttonTwoText}
          </Button>
        </Dialog.Footer>
        </Dialog>
      ))}
    </Flex>
  </div>
  )
}

export default DialogStackedAlert

Full Height

To render a full height Dialog, use the fullHeight (react) or full_height (rails) prop. A full height Dialog can be size small, medium, or large. By default it will be center aligned.

Code Example

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

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

  return [opened, toggle];
};

const DialogFullHeight = () => {
  const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
    useDialog();
  const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
    useDialog();
  const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();

  const dialogs = [
    {
      size: "sm",
      title: "Small Dialog",
      toggle: toggleHeaderSeparatorDialog,
      visible: headerSeparatorDialogOpened,
    },
    {
      size: "md",
      title: "Medium Dialog",
      toggle: toggleFooterSeparatorDialog,
      visible: footerSeparatorDialogOpened,
    },
    {
      size: "lg",
      title: "Large Dialog",
      toggle: toggleBothSeparatorsDialog,
      visible: bothSeparatorsDialogOpened,
    },
  ];

  return (
    <>
      <Flex wrap>
        <Button id="sm"
            marginRight="md"
            onClick={toggleHeaderSeparatorDialog}>
          {"Small Dialog"}
        </Button>
        <Button marginRight="xl"
            onClick={toggleFooterSeparatorDialog}>
          {"Medium Dialog"}
        </Button>
        <Button marginRight="xl"
            onClick={toggleBothSeparatorsDialog}>
          {"Large Dialog"}
        </Button>
      </Flex>
      <Flex>
        {dialogs.map(({toggle, visible, placement, size, title}, index) => (
          <Dialog
              fullHeight
              key={index}
              onClose={toggle}
              opened={visible}
              placement={placement}
              size={size}
          >
            <Dialog.Header>
              <Body>{title}</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={toggle}>{"Send My Issue"}</Button>
              <Button onClick={toggle}
                  variant="link">
                {"Back"}
              </Button>
            </Dialog.Footer>
          </Dialog>
        ))}
      </Flex>
    </>
  );
};

export default DialogFullHeight;

Full Height Placement

The full height dialog is centered by default, but the placement can be changed via the placement prop with one of the following values: left, center, right.

The large variant however will always be centered, even if the placement prop is used.

All dialogs with the fullHeight prop will be displayed full-width on mobile screens.

Code Example

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

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

  return [opened, toggle];
};

const DialogFullHeightPlacement = () => {
  const [headerSeparatorDialogOpened, toggleHeaderSeparatorDialog] =
    useDialog();
  const [footerSeparatorDialogOpened, toggleFooterSeparatorDialog] =
    useDialog();
  const [bothSeparatorsDialogOpened, toggleBothSeparatorsDialog] = useDialog();

  const dialogs = [
    {
      title: "Left Dialog",
      toggle: toggleHeaderSeparatorDialog,
      visible: headerSeparatorDialogOpened,
      placement: "left",
    },
    {
      title: "Center Dialog",
      toggle: toggleFooterSeparatorDialog,
      visible: footerSeparatorDialogOpened,
    },
    {
      title: "Right Dialog",
      toggle: toggleBothSeparatorsDialog,
      visible: bothSeparatorsDialogOpened,
      placement: "right",
    },
  ];

  return (
    <>
      <Flex wrap>
        <Button id="sm"
            marginRight="md"
            onClick={toggleHeaderSeparatorDialog}>
          {"Left Dialog"}
        </Button>
        <Button marginRight="xl"
            onClick={toggleFooterSeparatorDialog}>
          {"Center Dialog"}
        </Button>
        <Button marginRight="xl"
            onClick={toggleBothSeparatorsDialog}>
          {"Right Dialog"}
        </Button>
      </Flex>
      <Flex>
        {dialogs.map(({toggle, visible, placement, title}, index) => (
          <Dialog
              fullHeight
              key={index}
              onClose={toggle}
              opened={visible}
              placement={placement}
              size={"md"}
          >
            <Dialog.Header>
              <Body>{title}</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={toggle}>{"Send My Issue"}</Button>
              <Button onClick={toggle}
                  variant="link">
                {"Back"}
              </Button>
            </Dialog.Footer>
          </Dialog>
        ))}
      </Flex>
    </>
  );
};

export default DialogFullHeightPlacement;