⚠️This version of Waffles Design System is no longer maintained, and was deprecated at the end of 2022. It's main repository is archived. Please migrate your app to the New Waffles.

components

Modals

Modal is an overaly that prevent users from interacting with the rest of the application until a specific action is taken.

Overview

Waffles exposes a few modal components:

AlertDialog – Asks for confirmation before performing an action.
Dialog – Enables custom content to be displayed in a way that blocks interaction with the rest of the page.
Panel – Enables larger amounts of custom content to be displayed in a way that blocks interaction with the rest of the page.

Before using any of these components, setAppElement should be called with the root element of the application. This will normally be the same as the element used for rendering react.

import { AlertDialog, Dialog, Panel, setAppElement } from '@datacamp/waffles-modals';

setAppElement('#root');

Header, Body, and Footer could be used with both Dialog and Panel. For example Dialog.Header or Panel.Footerare both valid.

import Button, { ButtonGroup } from '@datacamp/waffles-button';
import { Dialog } from '@datacamp/waffles-modals';
import { Paragraph } from '@datacamp/waffles-text';
import { Fragment, useState } from 'react';

function Playground(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Fragment>
      <Button onClick={() => setIsOpen(true)}>open dialog</Button>
      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} width={600}>
        <Dialog.Header>This is the Title</Dialog.Header>
        <Dialog.Body>
          <Paragraph>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Pellentesque nec purus ultrices, convallis nisi a, elementum sem.
            Pellentesque varius felis luctus risus interdum, a tristique odio
            molestie. Sed sagittis diam a porttitor porttitor. Sed feugiat quam
            non felis blandit sollicitudin.
          </Paragraph>
        </Dialog.Body>
        <Dialog.Footer>
          <Button onClick={() => setIsOpen(false)}>Cancel</Button>
          <ButtonGroup>
            <Button intent="danger" onClick={() => setIsOpen(false)}>
              Delete
            </Button>
            <Button appearance="primary" onClick={() => setIsOpen(false)}>
              Confirm
            </Button>
          </ButtonGroup>
        </Dialog.Footer>
      </Dialog>
    </Fragment>
  );
}

import Button, { ButtonGroup } from '@datacamp/waffles-button';
import { Dialog } from '@datacamp/waffles-modals';
import { Paragraph } from '@datacamp/waffles-text';
import { Fragment, useState } from 'react';

function Playground(): JSX.Element {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Fragment>
      <Button onClick={() => setIsOpen(true)}>open dialog</Button>
      <Dialog isOpen={isOpen} onClose={() => setIsOpen(false)} width={600}>
        <Dialog.Header>This is the Title</Dialog.Header>
        <Dialog.Body>
          <Paragraph>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Pellentesque nec purus ultrices, convallis nisi a, elementum sem.
            Pellentesque varius felis luctus risus interdum, a tristique odio
            molestie. Sed sagittis diam a porttitor porttitor. Sed feugiat quam
            non felis blandit sollicitudin.
          </Paragraph>
        </Dialog.Body>
        <Dialog.Footer>
          <Button onClick={() => setIsOpen(false)}>Cancel</Button>
          <ButtonGroup>
            <Button intent="danger" onClick={() => setIsOpen(false)}>
              Delete
            </Button>
            <Button appearance="primary" onClick={() => setIsOpen(false)}>
              Confirm
            </Button>
          </ButtonGroup>
        </Dialog.Footer>
      </Dialog>
    </Fragment>
  );
}

Live

Examples

Complex panel

Regular alert

Props

AlertDialog

Name	Value	Default	Description
cancelButtonText	string	'Cancel'	The text on the cancel button.
confirmButtonText	string	'Confirm'	The text on the confirm button.
dataAttributes	object		As with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
description	string	Required	The body text to render in the Dialog.
intent	'neutral' \| 'success' \| 'warning' \| 'danger'	'neutral'	The main intention of the Dialog. This is used to set the button colors and provide a default focus when the Dialog opens.
isOpen	boolean	Required	When this is set to true the Dialog will show. It is preferred to use this to control when to display the dialog rather than simply mounting and unmounting as setting this to false allows the close animation to play fully.
loading	boolean	false	When this is set to true the Modal will show a spinner in the confirmation button.The user will not be able to close the dialog while it's loading
onClose	function	Required	This function is called whenever the user requests to close the Dialog. It is the responsibility of the application to handle this correctly and set isOpen to false. This function will be called with an origin string that specifies how the user requested to close the modal.
onConfirm	function	Required	This function is called whenever the user clicks the confirm button.
title	string	Required	The main heading for the Dialog.

Dialog

Name	Value	Default	Description
children	ReactReactNode	Required	The content of the dialog to render
currentStep	number		Only effective when used in conjunction with totalSteps. Determines how many of the step indicators to highlight. The mechanism for controlling the step and navigating between them, should be provided within your content.
hideCloseButton	boolean	false	When true, the close button in the top right corner will not be shown
isOpen	boolean	Required	Whether to hide or show the Dialog
onClose	function	Required	This function is called whenever the user requests to close the Dialog. It is the responsibility of the application to handle this correctly and set isOpen to false. This function will be called with an origin string that specifies how the user requested to close the modal.
shouldCloseOnEsc	boolean	true	When true (default), the Dialog will close when the Esc key is pressed.
shouldCloseOnOverlayClick	boolean	true	When true (default), the Dialog will close when the bckground overlay is clicked.
totalSteps	number		The total number of step indicators to show beneath the Dialog. When present this can be used along with currentStep to display a multi-step dialog.
width	number	Required	The width of the Dialog in pixels. This will be used when the user's screen is sufficiently large. Otherwise the Dialog will fit to the user's screen.

Panel

Name	Value	Default	Description
children	ReactReactNode	Required	The content of the dialog to render
closeButtonDisabled	boolean	false	When true the closeButton will be disabled
hideCloseButton	boolean	false	When true, the close button in the top right corner will not be shown
isOpen	boolean	Required	Whether to hide or show the Panel
onAfterOpen	function		function that is executed immediately after opening the modal
onClose	function	Required	This function is called whenever the user requests to close the Panel. It is the responsibility of the application to handle this correctly and set isOpen to false. This function will be called with an origin string that specifies how the user requested to close the modal.
position	'left' \| 'right'	'right'	The side of the screen to display the Panel on.
shouldCloseOnEsc	boolean	true	When true (default), the Panel will close when the Esc key is pressed.
shouldCloseOnOverlayClick	boolean	true	When true (default), the Panel will close when the bckground overlay is clicked.
width	string	'45%'	Forces a specific width

Dialog.Header

Name	Value	Default	Description
children	ReactReactNode	Required	The title of the Dialog.

Dialog.Body

Name	Value	Default	Description
children	ReactNode	Required	The content to render inside the Dialog. Should be used along with `Dialog.Header`.

Dialog.Footer

Name	Value	Default	Description
children	custom \| union	Required	Accepts either 1 or 2 children. These can be either Buttons or ButtonGroups.

Imports

You can import following components or utilities from this module:

import {
  AlertDialog,
  Dialog,
  Panel,
  setAppElement,
} from '@datacamp/waffles-modals';