​​​🍄​Full-page Dialogs

​
​Definition

​​Full-page dialogs involve multiple tasks and can contain multiple actions. They take over the full screen so they can also be used in instances where we need the user's focus clear of app distractions, such as acknowledging critical information.

​
​Visual Examples

​
​Usage

  • ​​Appears in front of the app
  • ​​Purposefully interruptive - should be used sparingly
  • ​​At least two actions, a confirming and dismissing action, should be available
  • ​​Can open additional dialogs

​
​Principles

​​Focused: grabs user's attention
​​Direct: dedicated to completing a series of tasks/decisions

​
​Types

​
​Priority

​
​High/Critical

​
​Behavior

  • ​​Interruptive by design
  • ​​Remains on screen until user dismisses or uses actions that will dismiss it

​
​Atomic Model Identification

​​Templates (fully baked UI in Features)

​
​Recommendations

​​Full-screen dialogs are used when there's multiple fields or inputs a user needs to fill out
​​a. Multiple actions: confirming, dismissing, edit, etc.
​​b. Can contain multiple steps
​​c. Contains a "back" to return to previous steps when applicable
​​d. Require confirmation and submission screens when there are multiple steps or tasks involved

​
​Dos and Don'ts

​
​Do
​​Group related content together and break content sections apart.
​
​Don't
​​Overload user with unrelated or unnecessary information that they don't need to complete task(s).

​
​Content

​
​Accessibility Requirements & Resources

  1. ​​Mouse and keyboard interactions can be used to navigate throughout dialog and can either confirm or dismiss it.
  1. ​​When active, the dialog takes keyboard focus and users cannot interact with page content behind it.
  1. ​​Focus returns to the control that initially activated the dialog when dialog is dismissed. It can be dismissed it by:
  1. ​​Clicking a dismissive action (cancel, close)
  1. ​​Clicking the Back button

​
​Mountaineer Design System Link

​
​Related Components

​​