UI: add dialog vs drawer design guidance - #80783
Conversation
|
Size Change: 0 B Total Size: 7.75 MB |
jasmussen
left a comment
There was a problem hiding this comment.
This seems a good starting point that I largelly agree with.
Any guidance necessary on being mindful of possible data loss when clicking outside?
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Felt like an implicit feature of these modals that devs need to account for more than designers, but feel free to push a commit if you have a specific idea. :-) I was first drafting an entire section about save-functionality guidelines here, but it feels like that could be its own document entirely under "Patterns", including confirms, etc. |
|
Props @j111q for the initial proposal? 😄 |
|
Aye! I'll make sure to add appropiate co-authoted tags and added to PR desc as well. :-) |
|
Merged, we can iterate in follow-up 🚀 |
|
omg @simison you're so fast 😂 |
Props @j111q and @jasmussen for the original guide, which I've adopted here.
What?
Adds design guidance for choosing between Dialog and Drawer components.
Why?
Help designers and developers to create cohesive UIs by using components consistently; educate on differences between the two similar "modal" / "overlay" components.
How?
Adds Storybook Dialog "Usage guidelines" doc, and links it from Drawer.
An alternative doc location could be in the "Patterns" folder:
Testing Instructions
Run
npm run storybook:devOpen http://localhost:50240/?path=/docs/design-system-components-dialog-usage-guidelines--docs
Testing Instructions for Keyboard
Screenshots
Sections:
Examples:
Use of AI Tools
yes