🌐 US-Proxy
class="logged-out env-production page-responsive" style="word-wrap: break-word;" >
Skip to content

UI: add dialog vs drawer design guidance - #80783

Merged
simison merged 3 commits into
trunkfrom
add/modal-vs-drawer-design-guidance
Jul 28, 2026
Merged

UI: add dialog vs drawer design guidance#80783
simison merged 3 commits into
trunkfrom
add/modal-vs-drawer-design-guidance

Conversation

@simison

@simison simison commented Jul 28, 2026

Copy link
Copy Markdown
Member

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.

Screenshot 2026-07-28 at 15 34 29

An alternative doc location could be in the "Patterns" folder:

Screenshot 2026-07-28 at 14 42 17

Testing Instructions

Run npm run storybook:dev
Open http://localhost:50240/?path=/docs/design-system-components-dialog-usage-guidelines--docs

Testing Instructions for Keyboard

Screenshots

Sections:

Screenshot 2026-07-28 at 15 35 23 Screenshot 2026-07-28 at 15 35 16

Examples:

Screenshot 2026-07-28 at 15 35 49 Screenshot 2026-07-28 at 15 35 41 Screenshot 2026-07-28 at 15 34 48

Use of AI Tools

yes

@simison
simison requested a review from a team July 28, 2026 12:43
@simison
simison requested a review from a team as a code owner July 28, 2026 12:43
@simison simison added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components [Package] UI /packages/ui labels Jul 28, 2026
@github-actions

Copy link
Copy Markdown

Size Change: 0 B

Total Size: 7.75 MB

compressed-size-action

@jasmussen jasmussen left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems a good starting point that I largelly agree with.

Any guidance necessary on being mindful of possible data loss when clicking outside?

@github-actions

github-actions Bot commented Jul 28, 2026

Copy link
Copy Markdown

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: simison <simison@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@simison

simison commented Jul 28, 2026

Copy link
Copy Markdown
Member Author

Any guidance necessary on being mindful of possible data loss when clicking outside?

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.

@mirka

mirka commented Jul 28, 2026

Copy link
Copy Markdown
Member

Props @j111q for the initial proposal? 😄

@simison

simison commented Jul 28, 2026

Copy link
Copy Markdown
Member Author

Aye! I'll make sure to add appropiate co-authoted tags and added to PR desc as well. :-)

Co-authored-by: Jill Q. <65582817+j111q@users.noreply.github.com>
Co-authored-by: jillq <jillq@git.wordpress.org>

@simison
simison merged commit fe47e1c into trunk Jul 28, 2026
59 checks passed
@simison
simison deleted the add/modal-vs-drawer-design-guidance branch July 28, 2026 13:33
@simison

simison commented Jul 28, 2026

Copy link
Copy Markdown
Member Author

Merged, we can iterate in follow-up 🚀

@github-actions github-actions Bot added this to the Gutenberg 23.7 milestone Jul 28, 2026
@j111q

j111q commented Jul 28, 2026

Copy link
Copy Markdown
Contributor

omg @simison you're so fast 😂

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Package] UI /packages/ui Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants