Waffles
© 2021 DataCamp, Inc.

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.

Live

Examples

Complex panel

Regular alert

Props

AlertDialog

NameValueDefaultDescription
cancelButtonTextstring'Cancel'The text on the cancel button.
confirmButtonTextstring'Confirm'The text on the confirm button.
dataAttributesobjectAs with all the other waffles components, dataAttributes can be used to set data- html attributes on the element.
descriptionstringRequiredThe 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.
isOpenbooleanRequiredWhen 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.
loadingbooleanfalseWhen 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
onClosefunctionRequiredThis 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.
onConfirmfunctionRequiredThis function is called whenever the user clicks the confirm button.
titlestringRequiredThe main heading for the Dialog.

Dialog

NameValueDefaultDescription
childrenReactReactNodeRequiredThe content of the dialog to render
currentStepnumberOnly 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.
hideCloseButtonbooleanfalseWhen true, the close button in the top right corner will not be shown
isOpenbooleanRequiredWhether to hide or show the Dialog
onClosefunctionRequiredThis 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.
shouldCloseOnEscbooleantrueWhen true (default), the Dialog will close when the Esc key is pressed.
shouldCloseOnOverlayClickbooleantrueWhen true (default), the Dialog will close when the bckground overlay is clicked.
totalStepsnumberThe 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.
widthnumberRequiredThe 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

NameValueDefaultDescription
childrenReactReactNodeRequiredThe content of the dialog to render
closeButtonDisabledbooleanfalseWhen true the closeButton will be disabled
hideCloseButtonbooleanfalseWhen true, the close button in the top right corner will not be shown
isOpenbooleanRequiredWhether to hide or show the Panel
onAfterOpenfunctionfunction that is executed immediately after opening the modal
onClosefunctionRequiredThis 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.
shouldCloseOnEscbooleantrueWhen true (default), the Panel will close when the Esc key is pressed.
shouldCloseOnOverlayClickbooleantrueWhen true (default), the Panel will close when the bckground overlay is clicked.
widthstring'45%'Forces a specific width

Dialog.Header

NameValueDefaultDescription
childrenReactReactNodeRequiredThe title of the Dialog.

Dialog.Body

NameValueDefaultDescription
childrenReactNodeRequiredThe content to render inside the Dialog. Should be used along with `Dialog.Header`.

Dialog.Footer

NameValueDefaultDescription
childrencustom | unionRequiredAccepts 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';