From 8315dea295d0902c8c4216d1796b16506faa2129 Mon Sep 17 00:00:00 2001 From: thyhmdo Date: Tue, 8 Oct 2024 14:31:16 -0500 Subject: [PATCH] status-update --- .../images/status-shape-sizes.png | Bin 13371 -> 12097 bytes .../status-indicator-pattern/index.mdx | 89 +++++++++--------- .../status-icons/high/light/circle-dash.svg | 19 ---- .../status-icons/high/light/not-started.svg | 21 +++++ 4 files changed, 68 insertions(+), 61 deletions(-) delete mode 100644 static/status-icons/high/light/circle-dash.svg create mode 100644 static/status-icons/high/light/not-started.svg diff --git a/src/pages/patterns/status-indicator-pattern/images/status-shape-sizes.png b/src/pages/patterns/status-indicator-pattern/images/status-shape-sizes.png index a47f6b28396f6a319c3f75db4fdf68f6873a862b..3663f63d2658ec3336b9c7e82486c5780d37ef8c 100644 GIT binary patch literal 12097 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 diff --git a/src/pages/patterns/status-indicator-pattern/index.mdx b/src/pages/patterns/status-indicator-pattern/index.mdx index 031a90834ed..8c98148b7d3 100644 --- a/src/pages/patterns/status-indicator-pattern/index.mdx +++ b/src/pages/patterns/status-indicator-pattern/index.mdx @@ -54,13 +54,13 @@ In this pattern we explore: ### Variants -| Variant | Usage | Use cases | -| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | -| [Icon indicator](#icon-indicators) | 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 indicators](#shape-indicators) | 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 indicators (with number)](#badge-indicators) | 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 indicators (without number)](#badge-indicators) | Useful when new or updated items are available and the number of notifications is unknown or irrelevant to the user. The dot badge is also more compact and discrete. | Most often used in notification panes in the header, and used in conjunction with avatars or icons. | -| [Differential indicators](#differential-indicators) | Useful when users are monitoring differentials in large lists of statistics and when anything other than type would be too obtrusive. | Most often used in financial dashboards for highlighting deltas or other types of data visualizations. | +| 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 | +| [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 (without number)](#badge-indicator) | Useful when new or updated items are available and the number of notifications is unknown or irrelevant to the user. The dot badge is also more compact and discrete. | Most often used in notification panes in the header and icon buttons in toolbars | +| [Differential indicator](#differential-indicator) | Useful when users are monitoring differentials in large lists of statistics and when anything other than type would be too obtrusive. | Most often used in financial dashboards for highlighting deltas or other types of data visualizations | #### Icon indicators versus shape indicators @@ -115,7 +115,7 @@ A. Text label
B. Symbol (optional color)\*
- *Differential indicators must have either a ‘+’ or ‘-’ sign, a caret, or an + *Differential indicators must have either a “+” or “-” sign, a caret, or an arrow icon to indicate positive or negative values. @@ -123,6 +123,9 @@ A. Text label
B. Symbol (optional color)\*
### Choosing for context +Choosing the right indicator for the context is important to ensure users can +quickly understand the information and respond appropriately. + #### Consolidated statuses When multiple statuses are consolidated, use the highest-attention color to @@ -140,9 +143,12 @@ difficult to focus. ### Standardization All status icons must be approved and published in the -[icon library](https://carbondesignsystem.com/elements/icons/library/). This -guidance only provides the most common status indicators used across products. -If your product requires an icon not currently included, please reach out to +[icon library](https://carbondesignsystem.com/elements/icons/library/) to ensure +consistency across products. This guidance includes only the most common status +indicators, helping maintain a unified user experience and preventing +unnecessary variations in the design system. + +If your product needs an icon that’s not currently included, please reach out to suggest its addition. ### Severity levels @@ -181,7 +187,7 @@ status types. - Colors - Type -#### Status icons +#### Status symbols Icons are visual symbols that represent ideas, objects, or actions. They help communicate messages quickly, encourage interactivity, and highlight important @@ -241,13 +247,24 @@ haven’t been started, and purple indicates outliers or undefined statuses. #### Extended status palettes This palette is only for added contrast accessibility when using yellows and -oranges. It’s not a part of the IBM brand palette and it’s also not included in -the v2 color release because it’s for very selective use in data visualizations -and certain status indicators. Do not use this palette in any other manner in -your layouts. +oranges. +#### Status type + +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 +set of indicators alongside the icon indicator set. + +| Variant | Icon size | Type size | +| --------------- | --------- | --------- | +| Icon indicator | 20px | 16pt | +| | 16px | 14pt | +| Shape indicator | 16px | 14pt | +| | 16px | 12pt | + ## Icon indicator Icon indicators consist of an icon, a shape, a meaningful color, and a @@ -268,6 +285,8 @@ widgets. +### Icon indicator severity levels + These severity levels are not intended to dictate the final status names in your product. They are suggested based on common use cases across products to help you define status names according to your system’s needs. @@ -276,7 +295,7 @@ you define status names according to your system’s needs. #### Labeling and type pairing -Icon indicators, also known as ‘contextual’ status indicators, are linked to +Icon indicators, also known as "contextual" status indicators, are linked to specific UI elements or content and should be placed near these elements for clarity. When the label is not descriptive or paired only with numbers, it's best practice to provide a heading or additional content to clarify the status @@ -339,6 +358,8 @@ clear even at small sizes. +### Shape indicator severity levels + These severity levels are not intended to dictate the final status names in your product. They are suggested based on common use cases across products to help you define status names according to your system’s needs. @@ -347,7 +368,7 @@ you define status names according to your system’s needs. #### Labeling and type pairing -Shape indicators are also ‘contextual’ status indicators. Like the status icons +Shape indicators are also "contextual" status indicators. Like the status icons above, assets have been created for the shape indicators that take into account optical alignment. @@ -495,8 +516,8 @@ most often paired with arrows or caret icons in our system for better clarity. #### 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 +"-"in front of it, a chevron icon, or an arrow icon. Unless the data involves temperature, positive values are represented by the green spectrum and negative values are represented by the red spectrum. @@ -516,12 +537,12 @@ values are represented by the red spectrum. #### Relying only on color is insufficient -Relying solely on color to convey status is insufficient, covered by -[Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html), -especially for users with color vision deficiencies. While color can be useful, -it must be paired with text or other visual cues. To meet accessibility -standards, or to pass -[Non-text Contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast), +Relying solely on color to convey status is insufficient, especially for users +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 +[non-text contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast), ensure that there’s at least a 3:1 contrast between colors used for status indicators, as well as between the indicator and the page background. If the contrast is sufficient, even in grayscale, users should still be able to @@ -572,22 +593,6 @@ such as orange and yellow in Carbon light themes. -### Notifications - -#### Avoid dismissive notifications with a timer for critical messages - -Avoid using toast notifications for critical alerts or long messages, as they -disappear automatically and may be hard for users with disabilities to fully -read. Learn more about -[No Timing](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-no-exceptions.html). - -#### Allow users to manage non-critical notifications - -Alerts that vanish too quickly can cause important information to be missed. -Provide an option to turn off nonessential alerts to improve usability for those -with visual and cognitive disabilities. Learn more about -[Interruptions](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-postponed.html). - ## Related diff --git a/static/status-icons/high/light/circle-dash.svg b/static/status-icons/high/light/circle-dash.svg deleted file mode 100644 index 8c26cccac24..00000000000 --- a/static/status-icons/high/light/circle-dash.svg +++ /dev/null @@ -1,19 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/static/status-icons/high/light/not-started.svg b/static/status-icons/high/light/not-started.svg new file mode 100644 index 00000000000..b8e13007f2e --- /dev/null +++ b/static/status-icons/high/light/not-started.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + +