Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Status indicator follow-up #2436

Merged
merged 13 commits into from
Jul 8, 2021
6 changes: 3 additions & 3 deletions src/data/status-indicators/palettes.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const statusLight = [
},
{ name: 'Purple 60', hex: '8a3ffc', light: true },
{
name: 'Gray 30',
name: 'Gray 60',
hex: '6f6f6f',
light: true,
},
Expand Down Expand Up @@ -52,8 +52,8 @@ export const statusDark = [
},
{ name: 'Purple 50', hex: 'a56eff', light: false },
{
name: 'Gray 70',
hex: 'c6c6c6',
name: 'Gray 50',
hex: '8d8d8d',
light: false,
},
];
Expand Down
139 changes: 77 additions & 62 deletions src/data/status-indicators/status-indicators.yaml
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
high:
- name: Critical
- name: Failure
token: $support-01
description: Indicates a severe event that needs immediate attention;
usage: critical situations, emergencies, urgent alerts
description: Indicates a process failure that needs immediate attention
usage: failed processes, emergencies, urgent alerts
fileNames:
- critical-filled
- critical-outline
Expand All @@ -12,40 +12,40 @@ high:
- warning-outline
token: $support-01
description:
Indicates an error (often inline) that needs immediate attention;
Indicates an error (often inline) that needs immediate attention
usage: warnings, errors, alerts, failure
- name: Warning alt
fileNames:
- warning-hex-filled
- warning-hex-outline
token: $support-01
description: Carries the same meaning as 'Warning'
description: Carries the same meaning as Warning
- name: Misuse
fileNames:
- misuse-filled
- misuse-outline
token: $support-01
description:
Indicates unavailability, an incorrect use case (especially in usage
guidance) or a run that has been cancelled;
guidance), or a run that has been cancelled
usage: incorrect usage, unavailability, cancellation
- name: Caution major
fileNames:
- caution-major-filled
- caution-major-outline
token: $support-caution-major
token: Orange 40/Orange 60 outline, Orange 40
description:
Indicates a threshold has been breached; alerts a user before a critical
event is triggered (only used in conjunction with ‘Caution’);
event is triggered (only used in conjunction with ‘Caution’)
usage: major caution, serious situations, critical instability
- name: Caution minor
fileNames:
- caution-filled
- caution-outline
token: $support-03, Yellow 60 (light-theme outline)
token: $support-03/Yellow 60 outline, $support-03
description:
Indicates the existence of a non-service affecting fault condition
requiring corrective action to prevent a more serious fault;
requiring corrective action to prevent a more serious fault
usage: minor caution, prevention, instability
medium:
- name: Undefined
Expand All @@ -55,85 +55,85 @@ medium:
token: Purple 60, Purple 50
description:
Indicates a value that is outside of an acceptable range or formatted
incorrectly;
incorrectly
usage: experimental work, outliers
- name: Checkmark
- name: Normal
fileNames:
- checkmark-circle-green-filled
- checkmark-circle-green-outline
token: $support-02
description:
Indicates stability or the clearing of one or more reported alarms;
implies no issues are present;
implies no issues are present
usage: success, completion, stability, active states
- name: Checkmark alt
- name: Normal alt
fileNames:
- checkmark
token: $support-02
description:
Carries the same meaning as 'Checkmark' but is more often used in data
Carries the same meaning as ‘Normal’ but is more often used in data
tables and confined spaces
- name: Checkmark
- name: Success
fileNames:
- checkmark-circle-blue-filled
- checkmark-circle-blue-outline
token: $support-04
description:
Indicates success at the end of a process (usually used as an interactive
state within Carbon components, hence the color change);
state within Carbon components, hence the color change)
usage: success, completion
- name: In progress
fileNames:
- inprogress
token: $support-04
description:
Indicates a process has started but has not finished running (icon will be
replaced by ‘checkmark’ or ‘warning’ icon when the status of the job is
changed);
replaced by ‘checkmark’ or ‘warning’ icon when the status of the job
changes)
usage: unfinished, running processes
- name: Incomplete
fileNames:
- incomplete
token: $support-04
description:
Indicates a job has started but is not yet finished (icon appears in
Carbon’s Progress Indicator component);
Indicates a stepped process has begun but is not yet finished (icon appears in
Carbon’s Progress Indicator component)
usage: incomplete tasks
- name: Not started
fileNames:
- circle-dash
token: $support-04
description:
Indicates that a job or step (in Carbon’s progress indicator) has not yet
been started;
Indicates that a job or step (in Carbon’s Progress Indicator) has not yet
been started
usage: upstarted tasks or disabled processes
- name: Pending
fileNames:
- pending-filled
- pending-outline
token: $icon-02
token: Gray 60, Gray 50
description:
Indicates a job has started but can not be scheduled due to insufficient
resources;
resources
usage: indefinite holds
low:
- name: Unknown
token: $icon-02
description: Indicates that the status of an object is unknown;
token: Gray 60, Gray 50
description: Indicates that the status of an object is unknown
usage: unknown, undefined status
fileNames:
- unknown-filled
- unknown-outline
- name: Help
token: $icon-02
description: Indicates additional support or FAQ content is available;
token: Gray 60, Gray 50
description: Indicates additional support or FAQ content is available
usage: help, guidance, exceptions
fileNames:
- help-filled
- help-outline
- name: Information
token: $support-04
description: Indicates additional (non-essential) information is available;
description: Indicates additional (non-essential) information is available
usage: additional information, exceptions
fileNames:
- information-circle-filled
Expand All @@ -145,34 +145,51 @@ low:
- information-square-filled
- information-square-outline
glyph:
- name: Critical
- name: Failure
token: $support-01
description: Indicates a severe event that needs immediate attention;
usage: critical situations, emergencies urgent alerts
description: Indicates a severe process failure or error that needs immediate attention
usage: critical failures, emergencies urgent alerts, deprecation and cancellation
fileNames:
- critical
- name: Warning
- failure
- name: Critical severity
token: $support-01
description: Indicates an error that needs immediate attention;
usage: warnings, errors, failure, deprecation, cancellation
fileNames:
- warning
- name: Caution major
token: Orange 50, Orange 40
description:
Indicates a breach before a critical event is triggered (only use in
conjunction with ‘Caution’);
usage: major caution, serious situations, critical instability
description: Indicates critical severity threat, critical severity object (like an IP), or critical 
risk of a data breach; based on a 1–10 scale
usage: critical (10) threat, critical risk, critical severity warnings
fileNames:
- caution-major
- name: Caution minor
token: $support-03, Yellow 60 (Light-theme stroke)
description:
Indicates a non-service affecting fault condition requiring corrective
action to prevent a more serious fault;
- critical-severity
- name: High severity
token: $support-01
description: Indicates high severity threat, high severity object (like an IP), or high risk of a data breach; based on a 1–10 scale
usage: high threat (7–9), high risk, high severity warnings
fileNames:
- high-severity
- name: Medium severity
token: Orange 40/Orange 60 stroke, Orange 40
description: Indicates medium severity threat, medium severity object (like an IP), or medium risk of a data breach; based on a 1–10 scale
usage: medium threat (4–6), medium risk, medium severity warnings
fileNames:
- medium-severity
- name: Low severity
token: $support-03/Yellow 60 stroke, $support-03
description: Indicates low severity threat, low severity object (like an IP), or low risk of a data breach; based on a 1–10 scale
usage: low threat (0–3), low risk, low severity warnings
fileNames:
- low-severity
- name: Caution
token: $support-03/Yellow 60 stroke, $support-03
description:
When not using the Security risk/severity scale, this can be used to indicate 
the existence of a non-service affecting fault condition
usage: minor caution, prevention, instability
fileNames:
- caution
- name: Undefined
token: Purple 60, Purple 50
description:
Indicates a value that is outside of an acceptable range or formatted
incorrectly
usage: experimental work, outliers
fileNames:
- undefined
- name: Stable
token: $support-02
description:
Expand All @@ -181,35 +198,33 @@ glyph:
usage: success, completion, stability, active states
fileNames:
- circle-fill
- name: Undefined
token: $support-undefined
- name: New
token: $support-04
description:
Indicates a value that is outside of an acceptable range or formatted
incorrectly;
usage: experimental work, outliers
Indicates a new components, features or pieces of content
usage: new items, additional information
fileNames:
- undefined
- new
- name: Information
token: $support-04
description:
Indicates additional information is available (can be used adaptively if a
gap arises);
Indicates additional information is available (can be used adaptively for statuses not taken into account by this table)
usage: additional information, wild card
fileNames:
- square-fill
- name: Incomplete
token: $support-04
description:
Indicates a process has started but not finished running or a user task is
unfinished;
unfinished
usage: unfinished, running processes
fileNames:
- incomplete
- name: Draft
token: $icon-02
token: Gray 60, Gray 50
description:
Indicates that a job has not been started, draft status of a job or a
disabled process;
disabled process
usage: unstarted tasks, drafts, disabled processes
fileNames:
- circle-stroke
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 11 additions & 5 deletions src/pages/patterns/status-indicator-pattern/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -313,12 +313,12 @@ is good practice to clarify the status intention in the text label.
<DoDontRow>
<DoDont caption="Do left align icons and type in lists and data tables, regardless of whether you’re using the responsive grid or spacers." colLg={6}>

![Aligned status indicator icons.](images/status_indicator_5.jpg)
![Aligned status indicator icons.](images/status_indicator_5.png)

</DoDont>
<DoDont type="dont" colLg={6} caption="Do not push icons out of alignment with label length. In this case, where the status indicators are flush right, the two digit labels are pushing the icons out of alignment.">

![Misaligned status indicator icons](images/status_indicator_6.jpg)
![Misaligned status indicator icons](images/status_indicator_6.png)

</DoDont>
</DoDontRow>
Expand Down Expand Up @@ -377,11 +377,17 @@ visualizations, for example network diagrams.

The shapes are only the most basic geometries, derived from the larger icon
containers, so they can be easily discerned at small sizes. Shape indicators are
not available in outline because they are so small. The only situation in which
you would use an outline is to ensure contrast accessibility for yellows.
not available in outline because they are so small. The only situations in which
you would use an outline is to ensure contrast accessibility for yellows or oranges in the Carbon light themes.

The table below is a first pass at establishing a standard lexicon for symbol
indicators within IBM product.
indicators across IBM products.

#### Same shape, different color

The status shapes naturally allow more room for interpretation than the status icons. Certain shapes can take on different colors for different circumstances. However, NEVER use the same shape, in different colors, within the same experience.



<StatusIndicatorTable attention="glyph" />

Expand Down
22 changes: 12 additions & 10 deletions static/status-icons/glyph/dark/circle-stroke.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions static/status-icons/glyph/dark/critical-severity.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading