Add new dialog guidelines to create consistency #17379
Replies: 4 comments 3 replies
-
In the screenshot, many dialogs can have the same width. Setting a maximum width keeps the smaller ones inconsistent, while they could use the extra space. How can we make them 560px without defining a hard rule? |
Beta Was this translation helpful? Give feedback.
-
Given the material specs, we tend to combine the dialog specs with the card specs... Some of them deserve a page on it's own in my opinion, for example those with the hidden expand feature. |
Beta Was this translation helpful? Give feedback.
-
Do we have preferred guidance for how to handle dialogs as the window shrinks? Seems like we have some inconsistency here as well:
What I did in #12856 is to force shrink the dialog to 95vw when the initial desired min-width doesn't fit, until cutting over to fullscreen at 450px. But I don't know if I should keep replicating that pattern in other places. |
Beta Was this translation helpful? Give feedback.
-
In Material 3, windowed dialogs have X-icon on the top right. With that said, we had top left X-icon for windowed dialogs for a long time, so it makes sense all of them will be standardized on the top left.
Agreed.
Let's indicate and categorize which of the existing dialogs are basic dialogs and which are alerts or confirmation dialogs. Also, from your list of current dialog examples, the large dialogs and split screen dialogs are all used for editing the dashboard, so let's figure that out later.
Yes.
When a user attempts to do that, we can show either "Are you sure to cancel this?" dialog, or highlight the fields that the user still needs to fill out. |
Beta Was this translation helpful? Give feedback.
-
Context
Our design language is based on the latest version of Material Design. These are the guidelines specific to dialogues. We described our interpretation of this on our design website.
Highlighted guidelines
Current situation
This desktop screenshot show that a lot of our dialogs are inconsistent, with all kind of historic reasons. Some things I've noticed:
Proposal
Add the following guidelines to our design website, even if it deviates from Material Design:
Consequences
Beta Was this translation helpful? Give feedback.
All reactions