We need a new marketing style dialog to provide friendly messaging to our users to encourage greater engagement than the simpler confirmation dialogs. They should enable platform understanding, highlight opportunities and support workflow engagement.
Contributors
Adam Butterworth (Deactivated)Brandon Cooley (Deactivated)Ange Romanska (Deactivated)Lael Birch (Deactivated)Joe Cassaro
Related Jira stories
https://openedx.atlassian.net/browse/ENT-3505
🛠 Resources
https://www.figma.com/file/uAtSeYHUSUrjb0F93ohTtR/Low-fi?node-id=171%3A0🌱 Use cases
For use in Enterprise coupon redemption as well as the expired subscription blocked view.
https://miro.com/app/board/o9J_ktKsKHk=/?moveToWidget=3074457350664954002&cot=14
🌳 Variants
Actionable
Completely blocking
With Company logo (Enterprise)
With Spot illustrations (Error state, Warning, Success, Promotion, etc)
🌞 Best Practices
Do use this when you need a user to read or interact with the message.
Do not use for simple confirmation interactions.
♊ Related components
Confirmation dialog
📐 Specification
A full page transparent overlay is shown underneath the dialog to provide visual focus.
On mobile screens (XS) the dialog takes up 80% of the screen width.
On desktop screens (MD, L, XL) the dialog has two standards widths. The narrow version is 400px and the wide one is 600px.
Buttons should be stacked vertically and centered with the primary action always above the secondary
The modal has a maximum of 80% of the vertical height of the screen and minimum of ###px.
⚛ Anatomy
Legend |
♒ Behaviors
💕 Accessibility
Focus Management Expectations |
|
Semantics | |
Meeting Notes
Date | |
|---|---|
|
|