Dialog

Dialog component displays a modal window to communicate important information or prompt users for input, typically requiring user interaction before they can proceed with other tasks.

Example

Basic usage

Any tabbable element in DialogContent and DialogActions will be autofocused when dialog opens. The recommended width is 480px, 600px, 840px and 1200px.

Alert Dialog

Use props type to display alert dialog icons in front of the dialog title.

WAI-ARIA Keyboard Interactions Note

When a dialog closes, focus returns to the element that invoked the dialog unless either:

• The invoking element no longer exists. Then, focus is set on another element that provides logical work flow.

• The work flow design includes the following conditions that can occasionally make focusing a different element a more logical choice:

  • It is very unlikely users need to immediately re-invoke the dialog.
  • The task completed in the dialog is directly related to a subsequent step in the work flow.

  For example, a grid has an associated toolbar with a button for adding rows. the Add Rows button opens a dialog that prompts for the number of rows. After the dialog closes, focus is placed in the first cell of the first new row.

Obtaining this behaviour

It will be too difficult for Coral’s Dialog to predict and implement this behaviour. Instead, you can provide transitionFrom and returnFocusTo to customise the animation and return focus target. By default both values are the last focused element before dialog opens.

Multi-steps Dialog

It is recommended to use multi-steps dialog when you need dialog to open while another dialog is active. Some examples are discard input confirmation or inputs verification.

Uncontrolled

By default, Dialog will be open if isOpen prop not provided.

Immediate

As you can see in Uncontrolled section, Dialog is not animated when going to “Page with Dialog”. This is because Dialog by default will only animate after first render. However, you can override this behaviour with immediate prop.

This is slightly different from transitionFrom = null because this does not even slide animate.

Top and Bottom Shadows

When the content overflows, shadows will appear if DialogContent is scrollable to top or bottom. Internally, it uses IntersectionObserver instead of scroll listener, so that it can also handle content size changes.

Render components with negative tabIndex

By default, react-focus-lock will always focus to components with negative tabIndex. Hence, this behavior is overridden using custom FocusLock component.

References

• WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/
• Reach UI: https://reacttraining.com/reach-ui/dialog
• Material UI: https://material-ui.com/components/dialogs/
• Ant Design: https://ant.design/components/modal/

API

Dialog

DialogActions

DialogBox

DialogClose

DialogContent

DialogOverlay

DialogTitle