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] Update Status indicator pattern guidance #4309

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/components/StatusIndicatorTable/StatusIndicatorRow.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const StatusIconGroup = ({ theme = 'light', children, attention }) => {
const StatusIndicatorRow = ({
attention,
fileNames,
name,
severitylevel,
token,
description,
usage,
Expand Down Expand Up @@ -77,7 +77,7 @@ const StatusIndicatorRow = ({
</StatusIconGroup>
</StatusIconWrapper>
</StructuredListCell>
<StructuredListCell className={cell}>{name}</StructuredListCell>
<StructuredListCell className={cell}>{severitylevel}</StructuredListCell>
<StructuredListCell className={cell}>{token}</StructuredListCell>
<StructuredListCell className={cx(cell, descriptionCell)}>
{description}
Expand Down
6 changes: 3 additions & 3 deletions src/components/StatusIndicatorTable/StatusIndicatorTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,14 @@ const StatusIndicatorTable = ({ attention }) => (
<StructuredListHead className="cds--grid">
<StructuredListRow className="cds--row" head>
<StructuredListCell
className={`cds--col-lg-4 cds--col-md-1 ${headerCell}`}
className={`cds--col-lg-1 cds--col-md-1 ${headerCell}`}
head>
Icon
</StructuredListCell>
<StructuredListCell
className={`cds--col-lg-2 cds--col-md-2 ${headerCell}`}
className={`cds--col-lg-1 cds--col-md-1 ${headerCell}`}
head>
Name
Severity level
</StructuredListCell>
<StructuredListCell
className={`cds--col-lg-2 cds--col-md-2 ${headerCell}`}
Expand Down
208 changes: 109 additions & 99 deletions src/data/status-indicators/status-indicators.yaml
Original file line number Diff line number Diff line change
@@ -1,88 +1,121 @@
high:
- name: Failure
token: $support-error
- severitylevel: Failed
token: $status-red, $status-accessibility-background
description: Indicates a process failure that needs immediate attention
usage: failed processes, emergencies, urgent alerts
fileNames:
- critical-filled
- critical-outline
- name: Warning
fileNames:
- warning-filled
- warning-outline
token: $support-error
description:
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-error
description: Carries the same meaning as ‘Warning’
- name: Misuse
fileNames:
- misuse-filled
- misuse-outline
token: $support-error
description:
Indicates unavailability, an incorrect use case (especially in usage
guidance), or a run that has been cancelled
usage: incorrect usage, unavailability, cancellation
- name: Caution major
- severitylevel: Caution major
fileNames:
- caution-major-filled
- caution-major-outline
token: Orange 40/Orange 60 outline, Orange 40
token: $status-orange, $status-accessibility-background
description:
Indicates a threshold has been breached; alerts a user before a critical
event is triggered (only used in conjunction with ‘Caution’)
usage: major caution, serious situations, critical instability
- name: Caution minor
- severitylevel: Caution minor
fileNames:
- caution-filled
- caution-outline
token: $support-warning/Yellow 60 outline, $support-warning
- caution-minor-filled
token: $status-yellow, $status-accessibility-background
description:
Indicates the existence of a non-service affecting fault condition
requiring corrective action to prevent a more serious fault
usage: minor caution, prevention, instability
- severitylevel: Undefined
fileNames:
- undefined-filled
token: $status-purple, $status-accessibility-background
description:
Indicates a value that is outside of an acceptable range or formatted
incorrectly
usage: experimental work, outliers
- severitylevel: Succeeded
fileNames:
- checkmark-circle-green-filled
token: $status-green, $status-accessibility-background
description:
Indicates success at the end of a process (usually used as an interactive
state within Carbon components, hence the color change)
usage: success, completion, stability
- severitylevel: Normal
fileNames:
- checkmark-circle-blue-outline
token: $status-blue
description:
Indicates stability or the clearing of one or more reported alarms;
implies no issues are present
usage: stability, active states
- severitylevel: In progress
fileNames:
- inprogress
token: $status-blue
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
changes)
usage: unfinished, running processes
- severitylevel: Incomplete
fileNames:
- incomplete
token: $status-blue
description:
Indicates a stepped process has begun but is not yet finished (icon
appears in Carbon’s Progress Indicator component)
usage: incomplete tasks
- severitylevel: Not started
fileNames:
- not-started
token: $status-gray
description:
Indicates that a job or step (in Carbon’s Progress Indicator) has not yet
been started
usage: upstarted tasks or disabled processes
- severitylevel: Pending
fileNames:
- pending-filled
token: $status-gray, $status-accessibility-background
description:
Indicates a job has started but can not be scheduled due to insufficient
resources
usage: indefinite holds
- severitylevel: Unknown
token: $status-gray, $status-accessibility-background
description: Indicates that the status of an object is unknown
usage: unknown, undefined status
fileNames:
- unknown-filled
- severitylevel: Informative
token: $status-blue, $status-accessibility-background
description: Indicates additional (non-essential) information is available
usage: additional information, exceptions
fileNames:
- information-square-filled
medium:
- name: Undefined
- severitylevel: Undefined
fileNames:
- undefined-filled
- undefined-outline
token: Purple 60, Purple 50
description:
Indicates a value that is outside of an acceptable range or formatted
incorrectly
usage: experimental work, outliers
- name: Normal
- severitylevel: Normal
fileNames:
- checkmark-circle-green-filled
- checkmark-circle-green-outline
token: $support-success
description:
Indicates stability or the clearing of one or more reported alarms;
implies no issues are present
usage: success, completion, stability, active states
- name: Normal alt
fileNames:
- checkmark
token: $support-success
description:
Carries the same meaning as ‘Normal’ but is more often used in data tables
and confined spaces
- name: Success
- severitylevel: Success
fileNames:
- checkmark-circle-blue-filled
- checkmark-circle-blue-outline
token: $support-info
description:
Indicates success at the end of a process (usually used as an interactive
state within Carbon components, hence the color change)
usage: success, completion
- name: In progress
- severitylevel: In progress
fileNames:
- inprogress
token: $support-info
Expand All @@ -91,148 +124,125 @@ medium:
replaced by ‘checkmark’ or ‘warning’ icon when the status of the job
changes)
usage: unfinished, running processes
- name: Incomplete
- severitylevel: Incomplete
fileNames:
- incomplete
token: $support-info
description:
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
- severitylevel: Not started
fileNames:
- circle-dash
token: $support-info
description:
Indicates that a job or step (in Carbon’s Progress Indicator) has not yet
been started
usage: upstarted tasks or disabled processes
- name: Pending
- severitylevel: Pending
fileNames:
- pending-filled
- pending-outline
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
- severitylevel: 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: 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-info
description: Indicates additional (non-essential) information is available
usage: additional information, exceptions
fileNames:
- information-circle-filled
- information-circle-outline
- name: Information alt
- severitylevel: Information alt
token: $support-info
description: Carries the same meaning as ‘Information’
fileNames:
- information-square-filled
- information-square-outline
glyph:
- name: Failure
token: $support-error
- severitylevel: Failed
token: $status-red
description:
Indicates a severe process failure or error that needs immediate attention
usage:
critical failures, emergencies urgent alerts, deprecation and cancellation
fileNames:
- failure
- name: Critical severity
token: $support-error
- severitylevel: Critical
token: $status-red
description:
Indicates critical severity threat, critical severity object (like an IP),
or critical risk of a data breach; based on a 1–10 scale
or critical risk of a data breach; based on a 1–10 scale
usage: critical (10) threat, critical risk, critical severity warnings
fileNames:
- critical-severity
- name: High severity
token: $support-error
- severitylevel: High
token: $status-red
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
- severitylevel: Medium
token: $status-orange/$status-orange-outline
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-warning/Yellow 60 stroke, $support-warning
- severitylevel: Low
token: $status-yellow/$status-yellow-outline
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-warning/Yellow 60 stroke, $support-warning
- severitylevel: Cautious
token: $status-yellow/$status-yellow-outline
description:
When not using the Security risk/severity scale, this can be used to
indicate the existence of a non-service affecting fault condition
indicate the existence of a non-service affecting fault condition
usage: minor caution, prevention, instability
fileNames:
- caution
- name: Undefined
token: Purple 60, Purple 50
- severitylevel: Undefined
token: $status-purple
description:
Indicates a value that is outside of an acceptable range or formatted
incorrectly
usage: experimental work, outliers
fileNames:
- undefined
- name: Stable
token: $support-success
- severitylevel: Stable
token: $status-green
description:
Indicates stability or the clearing of one or more reported alarms;
implies no issues are present
usage: success, completion, stability, active states
fileNames:
- circle-fill
- name: New
token: $support-info
description: Indicates a new components, features or pieces of content
usage: new items, additional information
fileNames:
- new
- name: Information
token: $support-info
- severitylevel: Informative
token: $status-blue
description:
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-info
- severitylevel: Incomplete
token: $status-blue
description:
Indicates a process has started but not finished running or a user task is
unfinished
usage: unfinished, running processes
fileNames:
- incomplete
- name: Draft
token: Gray 60, Gray 50
- severitylevel: Draft
token: $status-gray
description:
Indicates that a job has not been started, draft status of a job or a
disabled process
Expand Down
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.
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.
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.
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.
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.
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.
Binary file not shown.
Binary file not shown.
Loading
Loading