This task defines the minimum viable product (MVP) of the Dialog component.
Scope
The MVP covers the scope introduced by the design spec for "SimpleDialog."
Design spec
Anatomy
The initial component will include:
- A pane that displays on top of the UI. It can contain:
- An optional header that can contain a title and/or a close button
- The dialog body
- An optional footer that can contain up to two action buttons. One button can be primary, otherwise the buttons should be default.
- Dialog markup is placed at the end of the <body> element
- (Should this be part of MVP? We're almost done building it) Elements with absolutely positioned parts, like anything with a Menu, should function normally when placed in a Dialog. See also T307030
Style
The initial component will present the following visual features:
- Size: Dialog frame will have a static max-width for now (once a grid is established we can use that to set different max-widths per breakpoint), and a max-height of 100vh minus a 40px top and bottom padding
- Dialog frame will have a box-shadow to emphasize its placement over other content
- Below the frame, a background blur effect will be created over the rest of the UI with a semi-transparent white background-color
- Action buttons can either be horizontal and aligned to the end of the dialog, or stacked and 100% width
Interaction
The initial component will follow these interaction specifications:
- The dialog can be closed via the close button, a "safe" action, the esc button, or clicking on the background below the frame
- Focus will be placed on the first focusable element in the Dialog when it's opened, then back to the previous location when it's closed
- Users can tab through focusable elements of the Dialog in a loop
- Body content will have overflow-y hidden via scroll when the max-height is exceeded
- Content below the open dialog cannot scroll
- (MVP or future scope?) Transitions should be applied to the Dialog on open and close
Documentation
- Structure: For now, the Dialog will have its own top-level page on the docs site
- Content:
- A configurable demo where the controls live inside the Dialog so that changes can be seen immediately
- A basic example
- An example of a component with a Menu, e.g. Select, placed inside a dialog
- An example with a lot of content to demonstrate overflow behavior
- An example with stacked action buttons
Considerations
- Optionally include any other information important to clarifying MVP scope, what's out of scope, other related tasks that should be created, etc.
Open questions
- Back button: we will implement the back button once we get to the MultistepDialog, and not make it a part of the Dialog component at this time
- Number of action buttons: we should start with 2 action buttons since we don't have a clear use case for more until we get to process/multistep dialogs. Since implementing Multistep seems far in the future and we don't know exactly what we'd include in the design for it, we think it makes sense to stick with 2 buttons max for the MVP Dialog.
- Top and bottom dividers: we can add a prop to add the dividers as props and document that the prop should be turned on when the body content of the dialog is expected to be longer than a couple of sentences.
- Dialog sizes (now captured in design fixes task T319026):
- Small/Normal size: @width-3200 (512px wide) for desktop (current size in normal dialogs in production) and full grid for mobile (leaving 16px on each side)
Big size: 848px wide (we should add a new width token) for desktop (current size in big dialogs) and fullscreen for mobile(will be handled in separate task, T321893: Evaluate fullscreen mobile Dialog in Codex)
- Loading state: we will implement it in the Dialog as a state that can be turned on/off
Acceptance criteria
This task will pass from the designer to the developer once the Figma spec is created.
Design:
- A Figma spec sheet is created for the component that includes the scope defined here. A link to the Figma spec sheet's MVP version has been added to this task's description.
- Add component in the Figma library
Code:
- The initial component is implemented in Codex.
Design Review:
- Improve the demo page:
-
"Open dialog" buttons are not prominent enough in the demo box, specially when the properties are expanded. Could we use a Primary Button instead?Declined, not needed with other changes to demo page - Properties are quite hidden inside the accordion. I would display them by default and I would add the "Open dialog" button before the properties:
-