TWE Design System Components: Dialogs (Modals/Pop-ups)

[RobinElayn]

Overview

We need to create components for the TWE design system for the future website development & handoff.

Action Items

• [ ] Create mood board
• [ ] Present to the team
• [ ] Get feedback
• [ ] Incorporate feedback
• [ ] Hi-Fi version
• [ ] Create variations
• [ ] Create organized component
• [ ] Get sign off from product lead
• [ ] When this issue is complete, please go #397 and check off the dependency. If all other dependencies are checked off, move the issue from the icebox to the new issue approval column.

Resources/Instructions

• Google Doc
• HfLA Figma File
• Internships Figma File
• EPIC https://github.com/hackforla/internship/issues/397

[meetminji]

[sunannie27]

Please provide update

1. Progress: "What is the current status of your project? What have you completed and what is left to do?"
2. Blockers: "Difficulties or errors encountered."
3. Availability: "How much time will you have this week to work on this issue?"
4. ETA: "When do you expect this issue to be completed?"
5. Pictures or links* (if necessary): "Add any pictures or links that will help illustrate what you are working on."

• remember to add links to the top of the issue if they are going to be needed again.

[ExperimentsInHonesty]

http://civictechindex.org/home see their cookies modal (doesn't require response)

[mklmrgn]

Material 3 Update

A dialog is a modal window that appears in front of the app content to provide critical information or ask for decision to be made. They remain on screen until confirmed, dismissed, or required action is taken.

Specs

[mklmrgn]

COMPONENTS

Generic and Specific Components (ie confirmation alerts, etc)

Generic

Master Component

[mklmrgn]

Added a "with Image" variant to Generic Dialogs

Added 3 Specific Dialogs: Destructive Action, Positive Action, and Checkbox Confirmation