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
101 changes: 58 additions & 43 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
usage: failed processes, emergencies, urgent alerts
fileNames:
- critical-filled
- critical-outline
Expand All @@ -19,7 +19,7 @@ high:
- 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
Expand All @@ -33,7 +33,7 @@ high:
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’);
Expand All @@ -42,7 +42,7 @@ high:
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;
Expand All @@ -57,7 +57,7 @@ medium:
Indicates a value that is outside of an acceptable range or formatted
incorrectly;
usage: experimental work, outliers
- name: Checkmark
- name: Normal
fileNames:
- checkmark-circle-green-filled
- checkmark-circle-green-outline
Expand All @@ -66,14 +66,14 @@ medium:
Indicates stability or the clearing of one or more reported alarms;
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
Expand Down Expand Up @@ -111,21 +111,21 @@ medium:
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;
usage: indefinite holds
low:
- name: Unknown
token: $icon-02
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
token: Gray 60, Gray 50
description: Indicates additional support or FAQ content is available;
usage: help, guidance, exceptions
fileNames:
Expand All @@ -145,55 +145,70 @@ 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:
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
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
Expand All @@ -206,7 +221,7 @@ glyph:
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;
Expand Down
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.
4 changes: 2 additions & 2 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
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.
12 changes: 12 additions & 0 deletions static/status-icons/glyph/dark/low-severity.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions static/status-icons/glyph/dark/medium-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.
25 changes: 12 additions & 13 deletions static/status-icons/glyph/dark/undefined.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 12 additions & 10 deletions static/status-icons/glyph/light/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/light/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