[Status indicator] Update Status indicator pattern guidance #4309

thyhmdo · 2024-10-03T18:19:14Z

Closes ##4272 and #4050

Figma file review: https://www.figma.com/design/EqKmxlJmBiEB4yPBKpGlrZ/Status-Indicator-(Pattern)?node-id=1-1365

New

Variant table
Icon vs Shape indicator

Changelog

Structure in general
Icon indicator table in its variant
Removed a few icon indicators in the table
Removed one shape indicator in the table
Other general guidance on labeling, type pairing, and accessibility

vercel · 2024-10-03T18:19:20Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
carbondesignsystem	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 25, 2024 8:29pm

alisonjoseph · 2024-10-04T14:15:46Z

The not started light image isn't displaying, I think the file might be missing.

aagonzales

Wow, awesome work Thy! I left a few formatting suggestions here in the PR and also some other general comments and questions over in Figma.

src/pages/patterns/status-indicator-pattern/index.mdx

alisonjoseph · 2024-10-14T18:58:45Z

src/pages/patterns/status-indicator-pattern/index.mdx

-There are at least four possible ways to implement status indicators:
+Status indicators have been paired with specific type sizes that work best in
+products. While shape indicators can be paired with a larger size, it’s
+recommended to use 14pt or 12pt in smaller spaces or when used as a secondary


Should this be px instead of pt?

alisonjoseph

This LGTM other than one comment around using px instead of pt when referring to font sizes.

aagonzales

Just some small things still

aagonzales · 2024-10-14T21:28:26Z

src/pages/patterns/status-indicator-pattern/index.mdx

@@ -509,8 +516,8 @@ our system.
 #### Color

 Differential indicators are either displaying a positive or a negative value.
-Color is optional in these situations as long as the value has either a ‘+’ or
-‘-’ in front of it, a chevron icon, or an arrow icon. Unless the data involves
+Color is optional in these situations as long as the value has either a "+" or


The quotes here are coming in wrong here.

aagonzales · 2024-10-14T21:34:15Z

src/pages/patterns/status-indicator-pattern/index.mdx


-<StatusIndicatorTable attention="high" />
+If your product needs an icon that’s not currently included, please reach out to


Can we say open an issue instead here and link them to the correct repo?

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

aagonzales · 2024-10-14T21:38:18Z

src/pages/patterns/status-indicator-pattern/index.mdx

-started, and purple indicates outliers or undefined statuses.
+information and workflow progress. This status color palette also includes gray
+and purple to add more depth to the system. Gray indicates drafts or jobs that
+haven’t been started, and purple indicates outliers or undefined statuses.

 <ColorPalette twoColumn type="status" />

 #### Extended status palettes

 This palette is only for added contrast accessibility when using yellows and


I think we should still say these colors are not part of the brand palette and should not be used in other contexts.

thyhmdo · 2024-10-17T14:39:27Z

Alina's feedback:

An image will help improve this context

Taylor's feedback

Adding a fill behind some icons would work (like how other Warning and Failed states are being implemented right now)

.#{$prefix}--text-input__invalid-icon--warning {
    fill: $support-warning;
  }

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.
We could scope the selectors to set specific fill on each layer though, in addition to the $background

laurenmrice

This looks really great, @thyhmdo ! Just a couple of minor things. Great work! ⭐️

The square border around the icons/symbols should be Magenta 60 to 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.

I think this column header for this section should say "Shape" instead of "Icon"?

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?

laurenmrice · 2024-10-18T12:28:10Z

src/pages/patterns/status-indicator-pattern/index.mdx

+
+| Variant                                              | Usage                                                                                                                                                                     | Use cases                                                                                             |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [Icon indicator](#icon-indicator)                    | Used any time the layout offers ample space and the content requires maximum attention. They require an icon, a shape, a meaningful color and a descriptive inline label. | Most often used in notifications, progress indicators, data tables, task lists, and dashboard widgets |


Suggested change

| [Icon indicator](#icon-indicator) | Used any time the layout offers ample space and the content requires maximum attention. They require an icon, a shape, a meaningful color and a descriptive inline label. | Most often used in notifications, progress indicators, data tables, task lists, and dashboard widgets |

| [Icon indicator](#icon-indicator) | Used any time the layout offers ample space and the content requires maximum attention. They require an icon, a shape, a meaningful color, and a descriptive inline label. | Most often used in notifications, progress indicators, data tables, task lists, and dashboard widgets |

laurenmrice · 2024-10-18T12:29:37Z

src/pages/patterns/status-indicator-pattern/index.mdx

+| Variant                                              | Usage                                                                                                                                                                     | Use cases                                                                                             |
+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [Icon indicator](#icon-indicator)                    | Used any time the layout offers ample space and the content requires maximum attention. They require an icon, a shape, a meaningful color and a descriptive inline label. | Most often used in notifications, progress indicators, data tables, task lists, and dashboard widgets |
+| [Shape indicator](#shape-indicator)                  | Useful in smaller spaces or when users need to scan large amount of data.                                                                                                 | Most often used in lists, dashboards, data tables, data visualizations, and network diagrams          |


Suggested change

| [Shape indicator](#shape-indicator) | Useful in smaller spaces or when users need to scan large amount of data. | Most often used in lists, dashboards, data tables, data visualizations, and network diagrams |

| [Shape indicator](#shape-indicator) | Useful in smaller spaces or when users need to scan large amounts of data. | Most often used in lists, dashboards, data tables, data visualizations, and network diagrams |

I would just double check the use of periods in the Usage and Use cases columns for all of the descriptions. There should be periods after complete sentences.

laurenmrice · 2024-10-18T12:32:28Z

src/pages/patterns/status-indicator-pattern/index.mdx

+| ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| [Icon indicator](#icon-indicator)                    | Used any time the layout offers ample space and the content requires maximum attention. They require an icon, a shape, a meaningful color and a descriptive inline label. | Most often used in notifications, progress indicators, data tables, task lists, and dashboard widgets |
+| [Shape indicator](#shape-indicator)                  | Useful in smaller spaces or when users need to scan large amount of data.                                                                                                 | Most often used in lists, dashboards, data tables, data visualizations, and network diagrams          |
+| [Badge indicator (with number)](#badge-indicator)    | Useful when a count of new or updated items is available, and it is important for the user to know the number of updates.                                                 | Most often used in notification panes in the header, and used in conjunction with avatars or icons    |


Suggested change

| [Badge indicator (with number)](#badge-indicator) | Useful when a count of new or updated items is available, and it is important for the user to know the number of updates. | Most often used in notification panes in the header, and used in conjunction with avatars or icons |

| [Badge indicator (with number)](#badge-indicator) | Useful when a count of new or updated items is available, and it is important for the user to know the number of updates. | Most often used in notification panes in the header and used in conjunction with avatars or icons |

laurenmrice · 2024-10-18T12:39:17Z

src/pages/patterns/status-indicator-pattern/index.mdx


-<StatusIndicatorTable attention="high" />
+If your product needs an icon that’s not currently included, please reach out to


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

laurenmrice · 2024-10-18T12:41:09Z

src/pages/patterns/status-indicator-pattern/index.mdx

+Icons are visual symbols that represent ideas, objects, or actions. They help
+communicate messages quickly, encourage interactivity, and highlight important
+information—like exclamation points for warnings, checkmarks for success, and
+question marks for help


Suggested change

question marks for help

question marks for help.

laurenmrice · 2024-10-18T13:13:55Z

src/pages/patterns/status-indicator-pattern/index.mdx

+
+![Four icons with badges that included numbers ranging from one to three digits. The last badge has a plus.](./images/status-badge-with-number.png)
+
+<Caption>Badges with numbers range from one to three digits</Caption>


Suggested change

<Caption>Badges with numbers range from one to three digits</Caption>

<Caption>Badges with numbers ranging from one to three digits</Caption>

laurenmrice · 2024-10-18T13:15:17Z

src/pages/patterns/status-indicator-pattern/index.mdx

+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.


Suggested change

The badge without number is commonly seen in toolbars' icon buttons.

The badge without a number is commonly seen in toolbars' icon buttons.

laurenmrice · 2024-10-18T13:18:24Z

src/pages/patterns/status-indicator-pattern/index.mdx

+with color vision deficiencies (refer to
+[Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html)).
+While color can be useful, it must be paired with text or other visual cues. To
+meet accessibility standards, and to pass


Suggested change

meet accessibility standards, and to pass

meet accessibility standards and to pass

laurenmrice · 2024-10-18T13:19:11Z

src/pages/patterns/status-indicator-pattern/index.mdx


-![Example of accessible status indicators](images/status_indicator_17.png)
+Using symbols alone is acceptable, as long as they meet non-text contrast


Suggested change

Using symbols alone is acceptable, as long as they meet non-text contrast

Using symbols alone is acceptable as long as they meet non-text contrast

laurenmrice · 2024-10-18T13:21:16Z

src/pages/patterns/status-indicator-pattern/index.mdx


-#### Users should be able to manage or limit non-critical notifications.
+<Caption>
+  Example shows the icon indicators do not need outlines while icon indicators


Suggested change

Example shows the icon indicators do not need outlines while icon indicators

Example shows the icon indicators do not need outlines, while icon indicators

status-indicators

6ec416c

thyhmdo added the type: docs 📖 label Oct 3, 2024

thyhmdo requested review from alisonjoseph, aagonzales and jeanservaas October 3, 2024 18:19

thyhmdo requested review from a team as code owners October 3, 2024 18:19

thyhmdo requested a review from kennylam October 3, 2024 18:19

vercel bot deployed to Preview October 3, 2024 18:37 View deployment

aagonzales reviewed Oct 4, 2024

View reviewed changes

status-update

8315dea

thyhmdo added the DO NOT MERGE label Oct 8, 2024

vercel bot deployed to Preview October 8, 2024 20:13 View deployment

alisonjoseph reviewed Oct 14, 2024

View reviewed changes

alisonjoseph approved these changes Oct 14, 2024

View reviewed changes

aagonzales reviewed Oct 14, 2024

View reviewed changes

laurenmrice requested changes Oct 18, 2024

View reviewed changes

status-indicator-update

519b4b2

vercel bot deployed to Preview October 25, 2024 20:29 View deployment

thyhmdo self-assigned this Dec 4, 2024

laurenmrice added this to the 2024 Q4 milestone Dec 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Status indicator] Update Status indicator pattern guidance #4309

[Status indicator] Update Status indicator pattern guidance #4309

thyhmdo commented Oct 3, 2024

vercel bot commented Oct 3, 2024 •

edited

Loading

alisonjoseph commented Oct 4, 2024

aagonzales left a comment

alisonjoseph Oct 14, 2024

alisonjoseph left a comment

aagonzales left a comment

aagonzales Oct 14, 2024 •

edited

Loading

aagonzales Oct 14, 2024

laurenmrice Oct 18, 2024

aagonzales Oct 14, 2024

thyhmdo commented Oct 17, 2024

laurenmrice left a comment

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024

laurenmrice Oct 18, 2024


		<StatusIndicatorTable attention="high" />
		If your product needs an icon that’s not currently included, please reach out to

	\| [Icon indicator](#icon-indicator) \| Used any time the layout offers ample space and the content requires maximum attention. They require an icon, a shape, a meaningful color and a descriptive inline label. \| Most often used in notifications, progress indicators, data tables, task lists, and dashboard widgets \|
	\| [Icon indicator](#icon-indicator) \| Used any time the layout offers ample space and the content requires maximum attention. They require an icon, a shape, a meaningful color, and a descriptive inline label. \| Most often used in notifications, progress indicators, data tables, task lists, and dashboard widgets \|

	\| [Shape indicator](#shape-indicator) \| Useful in smaller spaces or when users need to scan large amount of data. \| Most often used in lists, dashboards, data tables, data visualizations, and network diagrams \|
	\| [Shape indicator](#shape-indicator) \| Useful in smaller spaces or when users need to scan large amounts of data. \| Most often used in lists, dashboards, data tables, data visualizations, and network diagrams \|

	\| [Badge indicator (with number)](#badge-indicator) \| Useful when a count of new or updated items is available, and it is important for the user to know the number of updates. \| Most often used in notification panes in the header, and used in conjunction with avatars or icons \|
	\| [Badge indicator (with number)](#badge-indicator) \| Useful when a count of new or updated items is available, and it is important for the user to know the number of updates. \| Most often used in notification panes in the header and used in conjunction with avatars or icons \|


		![Four icons with badges that included numbers ranging from one to three digits. The last badge has a plus.](./images/status-badge-with-number.png)

		<Caption>Badges with numbers range from one to three digits</Caption>

	<Caption>Badges with numbers range from one to three digits</Caption>
	<Caption>Badges with numbers ranging from one to three digits</Caption>

	The badge without number is commonly seen in toolbars' icon buttons.
	The badge without a number is commonly seen in toolbars' icon buttons.

	meet accessibility standards, and to pass
	meet accessibility standards and to pass


		![Example of accessible status indicators](images/status_indicator_17.png)
		Using symbols alone is acceptable, as long as they meet non-text contrast

	Using symbols alone is acceptable, as long as they meet non-text contrast
	Using symbols alone is acceptable as long as they meet non-text contrast

	Example shows the icon indicators do not need outlines while icon indicators
	Example shows the icon indicators do not need outlines, while icon indicators

[Status indicator] Update Status indicator pattern guidance #4309

Are you sure you want to change the base?

[Status indicator] Update Status indicator pattern guidance #4309

Conversation

thyhmdo commented Oct 3, 2024

New

Changelog

vercel bot commented Oct 3, 2024 • edited Loading

alisonjoseph commented Oct 4, 2024

aagonzales left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alisonjoseph left a comment

Choose a reason for hiding this comment

aagonzales left a comment

Choose a reason for hiding this comment

aagonzales Oct 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

thyhmdo commented Oct 17, 2024

laurenmrice left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vercel bot commented Oct 3, 2024 •

edited

Loading

aagonzales Oct 14, 2024 •

edited

Loading