Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 7 Next »

READY FOR REVIEW

The fleximodal fullscreen sized 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.

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

https://www.figma.com/file/uAtSeYHUSUrjb0F93ohTtR/Low-fi?node-id=973%3A120

https://www.figma.com/proto/dJr5ixCRKlXiuA4BsKxAk3/Design-System-Workspace?node-id=3490%3A18&viewport=1714%2C244%2C0.47089800238609314&scaling=scale-down

Future states - use case design still in progress

Fullscreen with stepper

  1. Content library configuration

  2. Bulk enrollment dialog

https://www.figma.com/file/uAtSeYHUSUrjb0F93ohTtR/Low-fi?node-id=641%3A0https://www.figma.com/file/uAtSeYHUSUrjb0F93ohTtR/Low-fi?node-id=641%3A32

📐 Specification

⚛ Anatomy

Legend

  1. Button

 

♒ Behaviors

 

 

 

 

💕 Accessibility

Focus Management Expectations

Semantics

 

 

 

 


  • No labels