Skip to content
Change the site theme
Figma
(information)

Minimizable Dialog

Peer review pending

An accessible, non-modal dialog that can be minimized to the bottom of the page.


Guidelines

Guidelines page anchor

About Minimizable Dialog

About Minimizable Dialog page anchor

The Minimizable Dialog component is a non-modal dialog that can be minimized to the bottom right of the page. It is meant for situations like a chat dialog, where the user may start the chat and then want to minimize it while they complete other tasks on the page.

(warning)

Only use one Minimizable Dialog on a page

We currenly only support having one Minimizable Dialog open on a page. If you have questions, please post a GitHub Discussion(link takes you to an external page).

Minimizable Dialog and non-modal dialogs follow these accessibility guidelines:

  • There must be a focusable element inside the dialog.
  • There should be a close button so screen readers have a specific close action to target.
  • A Minimizable Dialog is a focus trap, and focus is placed inside it when it's shown.
  • A Minimizable Dialog must be triggered by an explicit user action, e.g. clicking a button.

Basic Minimizable Dialog

Basic Minimizable Dialog page anchor

The MinimizableDialogButton renders a Button component and accepts all of its props, which are listed on the Button page.

Minimizable Dialog comes with the option of "hooking" into the internal state by using the state hook originally provided by Reakit(link takes you to an external page).

Rather than the state be internal to the component, you can use the useMinimizableDialogState hook and pass the returned state to MinimizableDialogContainer as the state prop.

This allows you to use certain returned props from the state hook, including functions like hide and show.

It should be noted that when doing so, the state prop takes precedent over the other properties that affect the state or initial state of the Minimizable Dialog. They will be ignored in favour of them being provided as arguments to the useMinimizableDialogState hook.

For full details on how to use the state hook, and what props to provide it, follow the Non-Modal Dialog Primitive documentation.

Installation

Installation page anchor
yarn add @twilio-paste/minimizable-dialog - or - yarn add @twilio-paste/core
import {
MinimizableDialog,
MinimizableDialogButton,
MinimizableDialogHeader,
MinimizableDialogContainer,
MinimizableDialogContent,
} from '@twilio-paste/core/minimizable-dialog';
const MinimizableDialogExample: React.FC = () => {
return (
<MinimizableDialogContainer>
<MinimizableDialogButton variant="primary">Open dialog</MinimizableDialogButton>
<MinimizableDialog aria-label="My Dialog">
<MinimizableDialogHeader>Dialog header</MinimizableDialogHeader>
<MinimizableDialogContent>Dialog content</MinimizableDialogContent>
</MinimizableDialog>
</MinimizableDialogContainer>
);
};
useMinimizableDialogState
useMinimizableDialogState page anchor

Pass these as part of an object to the useMinimizableDialogState hook.

PropTypeDescriptionDefault
baseId?stringSets the ID that will serve as a base for all the items IDs.
visible?booleanWhether the dialog is visible or not.
minimized?booleanWhether the dialog is minimized or not.
animated?`numberboolean`If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called after that number of milliseconds.
useMinimizableDialogState returned props
useMinimizableDialogState returned props page anchor

These props are returned by the state hook. You can spread them into this component ({...state}) or pass them separately. You can also provide these props from your own state logic.

PropTypeDescriptionDefault
baseId?stringSets the ID that will serve as a base for all the items IDs.
visible?booleanWhether the dialog is visible or not.
minimized?booleanWhether the dialog is minimized or not.
modal?booleanSets the modal state.true
animating?booleanWhether it's animating or not.
stopAnimation?() => voidStops animation. It's called automatically if there's a CSS transition
show?() => voidChanges the visible state to true.
hide?() => voidChanges the visible state to false.
minimize?() => voidChanges the minimized state to true.
expand?() => voidChanges the minimized state to false.
animated?`numberboolean`If true, animating will be set to true when visible is updated. It'll wait for stopAnimation to be called or a CSS transition ends. If animated is set to a number, stopAnimation will be called after that number of milliseconds.
MinimizableDialogContainer
MinimizableDialogContainer page anchor
PropTypeDescriptionDefault
baseId?stringSets the ID that will serve as a base for all the items IDs.
visible?booleanWhether the dialog is visible or not.
minimized?booleanWhether the dialog is minimized or not.
children?React.ReactNodeChild components to render into the MinimizableDialogContainer

The MinimizableDialogButton renders a Button component and accepts all of its props, which are listed on the Button page.

PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'MINIMIZABLE_DIALOG_BUTTON'
PropTypeDescriptionDefault
aria-labelstringTitle of the dialog for screen readers.
element?stringOverrides the default element name to apply unique styles with the Customization Provider'MINIMIZABLE_DIALOG'
children?React.ReactNodeChild components to render into the MinimizableDialog
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'MINIMIZABLE_DIALOG_HEADER'
children?React.ReactNodeChild components to render into the MinimizableDialogHeader
i18nDismissLabel?stringThe dismiss button text label'close'
i18nMinimizeLabel?stringThe minimize button text label'minimize'
MinimizableDialogContent
MinimizableDialogContent page anchor
PropTypeDescriptionDefault
element?stringOverrides the default element name to apply unique styles with the Customization Provider'MINIMIZABLE_DIALOG_CONTENT'
children?React.ReactNodeChild components to render into the MinimizableDialogContent

Black lives matter.