| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
| Status | ||
|---|---|---|
|
The fullscreen modal is a full page takeover to provide more real estate, and allow a streamlined distraction free view to encourage focus on more complex setup and configuration actions. It is compatible with a separate Stepper component that can help users through multistep processes.
- Adam Butterworth (Deactivated) Create a distinct Stepper component proposal.
...
🛠 Resources
🌱 Use case
As an admin configuring a new course run I would like to be able to easily select which discussion forum tool to include in the course. I’d like to be able to easily compare features, and also have the option to view more specifics about support if needed.
...
Discussions user flow
pw: Discussions2021
Basic Structure
The fullscreen modal has 3 basic pieces:
Header
Modal title
Icon Button component (Close icon)
Body container
Light 200 background color
Centered content area
Basic button
User is required to take at least one action within the modal other than the close button
The fullscreen modal also has no margins, completely obscuring the content in the preceding layer
...
...
Scrollable
In the case of more content than can fit within the vertical space of the viewport, the modal becomes scrollable, and cuts off content at the bottom of the viewport.
Buttons are positioned at the bottom of the content within the modal
...
Mobile without stepper
...
Basic modal with a stepper
NOTE: The stepper component is currently in design, and the final positioning and functionality within the fullscreen modal may evolve.
Modal + Stepper includes:
Stepper
Stepper footer
Replaces the basic button with a sticky footer row
White background with “Elevation level 3 (Centered)” applied to the footer container
Includes “Back” and “Next” by default to let the user move forward and backward in the stepper process
Footer row is composable to include other components as needed for specific designs and workflows
Final step includes a “finish” button
...
Basic Desktop Structure
Centered content well, regardless of which container width you choose.
...
...
Container widths
Paragon container component reference
⚠ Caution: Extra Large Container not recommended for full screen modal.
Large |  |
Medium |  |
Small |  |
Extra Small |  |
Desktop with stepper (no scrolling)
...
Container width
Use Paragon’s container component to determine the width of the content inside the full screen modal
...
Desktop with stepper (with scrolling)
...
Future states - use case design still in progress
Fullscreen with stepper
Content library configuration
Bulk enrollment dialog
...
📐 Specification
⚛ Anatomy
Legend
|
|
♒ Behaviors
|
|
|
|
💕 Accessibility
Focus Management Expectations |
|
Semantics |
|
|
|
...