DRAFT DESIGN IN PROGRESS IMPLEMENTATION PENDING

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.

Add a “fullscreen” size to Modal in addition to the current sizes (sm, default, lg, xl).

🛠 Resources

https://openedx.atlassian.net/browse/TNL-7431?atlOrigin=eyJpIjoiZDAxMGYzMWMzZTI4NDkyMjliZjNlYjZmZDEwZTJmNzAiLCJwIjoiaiJ9

🌱 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.

When I find the right forum I would like to be able to be able to configure the settings right away so that I can move on to the next task needed to finish preparing my course for launch.

Discussions user flow
pw: Discussions2021

Basic Structure

The fullscreen modal has 3 basic pieces:

1. Header

   1. Modal title

   2. Icon Button component (Close icon)

2. Body container

   1. Light 200 background color

   2. Centered content area

3. Basic button

   1. 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

Basic modal with a stepper

Basic modal + stepper component

1. Stepper

2. Stepper footer

   1. Replaces the basic button with a sticky footer row

   2. White background with “Elevation level 3 (Centered)” applied to the footer container

   3. Includes “Back” and “Next” to let the user move forward and backward in the stepper process

   4. 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)

Desktop with stepper (with scrolling)

Future states - use case design still in progress

Fullscreen with stepper

1. Content library configuration

2. Bulk enrollment dialog

📐 Specification

⚛ Anatomy

♒ Behaviors

💕 Accessibility