[Status indicator] Update Status indicator pattern guidance #4309
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
The not started light image isn't displaying, I think the file might be missing. 
|
|
|
||
| <StatusIndicatorTable attention="high" /> | ||
| If your product needs an icon that’s not currently included, please reach out to |
There was a problem hiding this comment.
Can we say open an issue instead here and link them to the correct repo?
There was a problem hiding this comment.
I was going to say the same thing! Just so people know where to go if they need to contact us or to submit an icon
|
Alina's feedback: An image will help improve this context
Taylor's feedback
Slight difference there is for the inputs we always set background-color: $field; whereas with standalone status icons we won't know/control what background they're placed on. |
There was a problem hiding this comment.
This looks really great, @thyhmdo ! Just a couple of minor things. Great work! ⭐️
- The square border around the icons/symbols should be
Magenta 60to match the line that connects to it.
- This image under the Shape indicator section needs to be updated to show the correct colors for the indicators in the data table. Right now they all look orange.
- Note: This has been corrected, the correct image asset is in here, its just not updating in the preview.
- I noticed that in the Shape indicator table you use slashes to separate different tokens per shape, but in the Icon indicator table you use commas. I would just pick one approach for consistency, maybe just use the comma?
|
|
||
| <StatusIndicatorTable attention="high" /> | ||
| If your product needs an icon that’s not currently included, please reach out to |
There was a problem hiding this comment.
I was going to say the same thing! Just so people know where to go if they need to contact us or to submit an icon
| to the user. This dot badge is more subtle than the numbered badge but still | ||
| effectively draws the user’s attention to the icon button. | ||
|
|
||
| The badge without number is commonly seen in toolbars' icon buttons. |
There was a problem hiding this comment.
| The badge without number is commonly seen in toolbars' icon buttons. | |
| The badge without a number is commonly seen in toolbars' icon buttons. |
There was a problem hiding this comment.
@thyhmdo this might just be something weird with the preview because I don't see it like this in the markdown but there's something weird happening with the text this section.
There was a problem hiding this comment.
@thyhmdo I also still see what Anna is saying above.
|
|
||
| #### Users should be able to manage or limit non-critical notifications. | ||
| <Caption> | ||
| Example shows the icon indicators do not need outlines while icon indicators |
There was a problem hiding this comment.
| Example shows the icon indicators do not need outlines while icon indicators | |
| Example shows the icon indicators do not need outlines, while icon indicators |
There was a problem hiding this comment.
@thyhmdo I actually think this caption means to say the following:
"Example shows icon indicators do not need outlines, while shape indicators do due to the lack of symbols."
laurenmrice
requested review from
laurenmrice
and removed request for
jeanservaas
| red and green means that products cannot simply rely on color to show status. As | ||
| a result, the status system relies on three key elements; color, shape, and | ||
| symbol. | ||
| ### Elements |
There was a problem hiding this comment.
As a result, status indicators should rely on at least two elements: color, shape, or symbol.
I think this means to say: "As a result, status indicators should rely on at least two of the following elements: color, shape, or symbol."
| *Differential indicators must have either a ‘+’ or ‘-’ sign, a caret, or an | ||
| arrow icon to indicate positive or negative values. | ||
| </Caption> | ||
| <StatusIndicatorTable attention="high" /> |
There was a problem hiding this comment.
Since we are showing color tokens now instead of color values, I think we should make them inline code snippets like we do on the style tabs. This should also be done in the Shape indicator statuses table.
| attention to the icon button. | ||
|
|
||
| ### Shape indicators | ||
| ### Shape indicator statuses |
There was a problem hiding this comment.
Use a comma in this table instead of a slash when separating multiple color tokens like you do in the Icon indicator statuses table for consistency.
Closes ##4272 and #4050
Figma file review: https://www.figma.com/design/EqKmxlJmBiEB4yPBKpGlrZ/Status-Indicator-(Pattern)?node-id=1-1365
New
Changelog