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

chore(project): update to carbon v11.0.0 #2839

Merged
merged 203 commits into from
Mar 31, 2022
Merged
Changes from 1 commit
Commits
Show all changes
203 commits
Select commit Hold shift + click to select a range
04321dc
status indicator pattern
jeanservaas May 7, 2021
665b8cf
Update index.mdx
janchild May 14, 2021
9754045
copy edits, finalizing names for indicators
janchild May 14, 2021
d19f353
Merge branch 'main' into docs-status-indicator
janchild May 17, 2021
9aeef78
Merge branch 'main' into docs-status-indicator
vpicone May 18, 2021
c33b3e2
chore: temporarily remove status indicator from sidenav
vpicone May 18, 2021
941e177
Merge branch 'main' into docs-status-indicator
vpicone May 19, 2021
10fab3b
docs(support-02): update support-02 value (#2288)
tw15egan May 20, 2021
9af1e52
add button variants to live modal preivew (#2299)
dakahn May 21, 2021
6ac8de7
chore(gatsby): remove v3.0 FAST_REFRESH flag (#2336)
emyarod May 21, 2021
6cdce6a
comms: All about Carbon additions, edits, deletions (#2338)
janchild May 21, 2021
a203b58
copy edits to who uses carbon (#2347)
janchild May 24, 2021
4d733cc
fix: update Carbon for IBM.com community index links (#2343)
emyarod May 24, 2021
1f9b599
Removed space between paragraphs (#2351)
mjabbink May 25, 2021
e506334
Copy edit: Added “be” to “they can be used” (#2349)
mjabbink May 25, 2021
3335286
fix: minor updates to vue tutorial (#2352)
lee-chase May 25, 2021
e7325c8
Update index.mdx (#2361)
chrisconnors-ibm Jun 1, 2021
2f5cdaf
Merge branch 'main' into docs-status-indicator
vpicone Jun 1, 2021
242be17
Merge pull request #2294 from jeanservaas/docs-status-indicator
vpicone Jun 1, 2021
3b36d8b
Audit avt1 component demo label text area (#2335)
andreancardona Jun 1, 2021
9611d20
chore(release): update to v10.36.0 (#2365)
jnm2377 Jun 1, 2021
8e16286
chore: remove references to #carbon-elements channel (#2371)
joshblack Jun 1, 2021
04d6623
Update link for github tutorials (#2362)
mariuszmickiewicz Jun 1, 2021
42a9e3e
Compressed Images (#2392)
github-actions[bot] Jun 8, 2021
51d5946
update to steering committee (#2400)
janchild Jun 8, 2021
6fe3095
chore: format (#2398)
emyarod Jun 8, 2021
ec610b2
chore(release): v10.37.0 (#2405)
jnm2377 Jun 14, 2021
ccc3fc1
chore: remove sw
vpicone Jun 17, 2021
61b453d
Update package.json
vpicone Jun 17, 2021
4a39130
Merge pull request #2411 from vpicone/disable-sw
vpicone Jun 17, 2021
24a0fec
Update deploy.yml
vpicone Jun 17, 2021
4792b70
Merge pull request #2412 from carbon-design-system/update-deploy-job
vpicone Jun 17, 2021
c271d6e
update carbon-charts version/add new demos (#2300)
natashadecoste Jun 21, 2021
9a4c522
Fixes hover-primary-text hex for blue 70 (#2409)
grahamharper Jun 21, 2021
9c29675
chore(release): v10.37.1 (#2415)
jnm2377 Jun 21, 2021
b4fdfb7
feat: add StatusIndicator table component (#2377)
vpicone Jun 23, 2021
4450af4
fix(code-snippet): fix accessbility duplicate header (#2334)
andreancardona Jun 23, 2021
99e8d27
Compressed Images (#2427)
github-actions[bot] Jun 28, 2021
7cc2d59
Release/v10.38.0 (#2425)
andreancardona Jun 29, 2021
62a55be
fix(Typography): fix issues with inline copy button (#2433)
tw15egan Jul 1, 2021
92de559
docs: add feducation video to v11 page (#2431)
mattrosno Jul 1, 2021
bb3d4fa
add carbon charts slack channel link (#2429)
theiliad Jul 1, 2021
ef50618
docs: add Image production guidelines Sketch kit (#2437)
laurenmrice Jul 6, 2021
44e5a7f
docs: add steering committee members (#2434)
mattrosno Jul 7, 2021
94be694
Update accessibility.mdx
tw15egan Jul 7, 2021
0264f4c
Update code.mdx
tw15egan Jul 7, 2021
6c05a27
Status indicator follow-up (#2436)
vpicone Jul 8, 2021
7860983
fix(CodeSnippet): use token for copy button (#2441)
tw15egan Jul 8, 2021
1d962af
chore(release): v10.39.0 (#2442)
andreancardona Jul 9, 2021
f0714d2
Compressed Images (#2446)
github-actions[bot] Jul 12, 2021
48b3a30
Add design to codeowners (#2445)
alisonjoseph Jul 14, 2021
68e7e0d
Release/v10.40.0 rc.0 (#2453)
andreancardona Jul 21, 2021
3b33c72
v10.40.0 (#2458)
andreancardona Jul 22, 2021
16a77a4
dark color-scheme value for 2 demo components (#2466)
theiliad Jul 29, 2021
a5134d8
fix(IconLibrary): fix issue with glyph only icons (#2457)
tw15egan Jul 29, 2021
488c4d2
demo link list only scrollable if there's overflow (#2462)
theiliad Jul 29, 2021
5137e83
update carbon charts to v0.41.92 (#2461)
theiliad Jul 29, 2021
b1d9a87
v10.40.1 (#2469)
andreancardona Jul 29, 2021
d5627f1
fix broken dataviz links (#2468)
theiliad Jul 29, 2021
11a4b45
fix(color): fix v10 color page bugs (#2471)
andreancardona Aug 2, 2021
ecbbb70
chore: update lockfile (#2479)
joshblack Aug 5, 2021
6178c95
chore: fix carbon-components-react resolutions (#2481)
joshblack Aug 5, 2021
04411a6
fix(dataviz): broken links (#2477)
theiliad Aug 6, 2021
6e3f5c8
chore(project): update carbon to v10.41.0 (#2478)
joshblack Aug 6, 2021
db18f23
feat(homepage): add beta blog (#2483)
joshblack Aug 6, 2021
f86155e
Compressed Images (#2485)
github-actions[bot] Aug 9, 2021
b0e9f45
docs: remove Andrew and Jillian from team page 😔 (#2486)
alisonjoseph Aug 9, 2021
8c1aba3
style(Meetups): add space to buttons (#2482)
tw15egan Aug 9, 2021
1cdb0fe
update carbon charts react to 0.41.101 & d3 to 7.0.0 (#2484)
theiliad Aug 13, 2021
89f0d7c
docs: add new medium article to v11 page (#2498)
mattrosno Aug 16, 2021
b091c10
Update code.mdx (#2499)
samrobbins85 Aug 17, 2021
3528031
Content switcher images (#2492)
kingtraceyj Aug 17, 2021
dc53b6c
docs(dataviz): add histogram (#2493)
theiliad Aug 18, 2021
353b9d3
docs(web-components): introduce CDN feature (#2496)
jeffchew Aug 23, 2021
3ed64ec
chore(project): update carbon to v10.42.0 (#2505)
joshblack Aug 23, 2021
441b45b
[Don't merge yet] feat: update to gtc v2 and gatsby v3 (#2416)
vpicone Aug 23, 2021
971c234
fix(Icons): add additional logic to handle glyph-only icons (#2488)
tw15egan Aug 23, 2021
93c16b3
chore: build fresh lock file to resolve build failure (#2509)
vpicone Aug 24, 2021
bb0bf29
chore: migrate to Carbon eslint configuration (#2510)
vpicone Aug 24, 2021
44627ee
fix(overflowmenu): fix tabbing order (#2515)
andreancardona Aug 26, 2021
8e92083
Compressed Images (#2524)
github-actions[bot] Aug 30, 2021
36e7388
docs: add myself to team page 👋 (#2526)
jharvey10 Aug 31, 2021
9e548b4
fix: content guidance links (#2536)
laurenmrice Sep 3, 2021
ce5d377
Term 'light' used instead of 'dark' (#2504)
esmahh Sep 3, 2021
5e74fe2
chore(project): update carbon to v10.43.0 (#2534)
joshblack Sep 3, 2021
eade46c
fix(UIShell): update storybook link (#2525)
tw15egan Sep 7, 2021
15246d9
docs: partners and advisory board updates (#2533)
laurenmrice Sep 7, 2021
0175022
docs(dataviz): add tree diagram demos, update network thumbnail (#2543)
theiliad Sep 13, 2021
a4ca936
docs(dataviz): add network diagram demos & tree diagram card (#2502)
theiliad Sep 15, 2021
7731052
demos(dataviz): add alluvial chart (#2546)
theiliad Sep 16, 2021
3f39300
fix(overview-page): update image import (#2545)
joshblack Sep 16, 2021
5cff605
Compressed Images (#2548)
github-actions[bot] Sep 21, 2021
1248192
fix: update link to the new URL of Gatsby theme (#2552)
rodet Sep 23, 2021
48ae339
chore(project): update carbon to v10.44.0 (#2551)
joshblack Sep 23, 2021
1a16390
fix(ClickableTile): fix padding issue (#2521)
tw15egan Sep 27, 2021
5803951
Updated Optional versus required fields section (#2528)
jjennings7 Sep 27, 2021
115226a
update double slider image (#2556)
kingtraceyj Sep 27, 2021
b9a62ba
Update to include required labeling guidance (#2531)
jjennings7 Sep 28, 2021
138f055
feat(type): added new styles (#2555)
sstrubberg Sep 29, 2021
8257a57
chore(project): update carbon to v10.45.0-rc.0 (#2560)
joshblack Sep 30, 2021
2f5fc78
feat(MediumPosts): automates pulling in posts from our Medium account…
sstrubberg Oct 6, 2021
8dab761
update charts to 0.50.5 (#2567)
theiliad Oct 8, 2021
ed04e48
fix(Carbon-Website): update component accessibility links (#2569)
dakahn Oct 12, 2021
9f8b1cf
Compressed Images (#2541)
github-actions[bot] Oct 12, 2021
5e7b2ad
doc: tile component update (#2519)
thyhmdo Oct 13, 2021
46f5c43
Fix a small typo in documentation (#2586)
VamshiMurari Oct 20, 2021
6e8a4ee
doc-tile-update (#2580)
thyhmdo Oct 21, 2021
4f7d48f
docs(web-components): adding code links for web components (#2588)
jeffchew Oct 21, 2021
fa6a81b
Theme-2.1.3 (#2577)
vpicone Oct 21, 2021
c96baf9
docs(button): add icon only ghost button (#2589)
aagonzales Oct 21, 2021
0a7a3c1
docs[designing]: added freehand resource (#2591)
aagonzales Oct 22, 2021
8058b40
Update usage.mdx (#2597)
joshblack Oct 25, 2021
86ec851
Update svelte.mdx (#2595)
joshblack Oct 25, 2021
a5c95e2
feat(design-resources): added a11y kit (#2601)
sstrubberg Oct 28, 2021
b50324b
Compressed Images (#2605)
github-actions[bot] Nov 1, 2021
2c6991f
Remove Mike Abbink from Carbon team page (#2610)
mjabbink Nov 2, 2021
1cf0a93
chore(Carbon Website): update to v10.47.0 (#2598)
dakahn Nov 3, 2021
5657e45
Form image updates for component usage page and pattern page (#2559)
kingtraceyj Nov 3, 2021
c43b82b
docs: add Francine Lucca to Carbon team page (#2611)
francinelucca Nov 3, 2021
97e7f31
chore: update theme and other dependencies (#2602)
vpicone Nov 4, 2021
6f8aad6
Update index.mdx (#2604)
alisonjoseph Nov 4, 2021
2ffda74
Remove medium post shadowing (#2618)
vpicone Nov 5, 2021
c736bbe
Compressed Images (#2626)
github-actions[bot] Nov 8, 2021
9510b15
Update website deps for v10.47.2 (#2617)
tay1orjones Nov 8, 2021
3a1a468
feat: update csc members (#2627)
mattrosno Nov 8, 2021
9b6bb56
fix: medium card color on news and articles page (#2620)
alisonjoseph Nov 8, 2021
5e8626f
chore(team): added abbey, alphabetized (#2621)
sstrubberg Nov 8, 2021
8389a51
Update to vue.mdx (#2609)
KalyanChakravarthyV Nov 9, 2021
f2569e1
[bug]: notification style images (#2630)
aagonzales Nov 10, 2021
edc03b9
Compressed Images (#2639)
github-actions[bot] Nov 16, 2021
ece9b4f
add(kit): Figma (#2645)
aagonzales Nov 19, 2021
6cbf045
[kit]Figma: Add in resource links (#2647)
aagonzales Nov 19, 2021
e36ac25
Update accessibility.mdx (#2648)
joshblack Nov 19, 2021
15c7a29
fix(homepage): add pointer cursor to button (#2651)
theiliad Nov 29, 2021
370f2fb
feat(team): add Taylor photo (#2654)
tay1orjones Dec 1, 2021
fa72372
docs(typography): fix font family for quotation-02 style (#2657)
janhassel Dec 3, 2021
22d5cd5
kit(figma): updated guidance (#2659)
aagonzales Dec 6, 2021
5b6dd8b
Compressed Images (#2666)
github-actions[bot] Dec 13, 2021
33332bd
chore: bump theme to 2.1.6 (#2661)
alisonjoseph Dec 13, 2021
a81d02a
docs(v11): update to include beta articles (#2668)
joshblack Dec 15, 2021
d0dc23a
Compressed Images (#2674)
github-actions[bot] Jan 4, 2022
5563eed
chore(release): update Carbon to vX.50.0 versions (#2680)
abbeyhrt Jan 4, 2022
5a9b292
docs(dataviz): update charts to 0.54.2, update heatmap specs & demo (…
theiliad Jan 6, 2022
d436958
chore: update gatsby theme (#2684)
alisonjoseph Jan 18, 2022
454065d
fix: align status indicator table to grid (#2681)
alisonjoseph Jan 18, 2022
2b649cc
fix: typo (#2708)
alisonjoseph Jan 21, 2022
b5bf10f
Replace deprecated layout token with spacing token (#2711)
jicjames Jan 25, 2022
62b5bcb
chore(deps): bump markdown-it from 9.1.0 to 12.3.2 (#2690)
dependabot[bot] Jan 25, 2022
7d57e1f
chore(release): update to X.51.0 of carbon dependencies (#2714)
abbeyhrt Jan 25, 2022
84e39fa
Update step-1.mdx (#2564)
NohWayJose Jan 26, 2022
b2486aa
fix: tab order on forms page (#2715)
alisonjoseph Jan 26, 2022
0a9ef89
docs: update partners and team page (#2719)
alisonjoseph Feb 3, 2022
b6d5644
[update] figma kit page with themes (#2722)
laurenmrice Feb 4, 2022
2f3b378
fix: links on 2x grid overview page (#2718)
laurenmrice Feb 8, 2022
1251151
docs: update figma kit page with card icons (#2724)
laurenmrice Feb 9, 2022
8017714
update: image typo (#2725)
laurenmrice Feb 10, 2022
8634619
fix(tutorial): correct broken links (#2735)
tay1orjones Feb 14, 2022
53ef788
docs(typography): fix line-height unit (#2738)
janhassel Feb 16, 2022
820550f
docs: add carbon mid-fi kit to website (#2741)
laurenmrice Feb 17, 2022
d068a5f
[doc update] Structured list (#2717)
thyhmdo Feb 18, 2022
cf1e272
docs: fix broken link in DataTable sizing section (#2728)
denniskigen Feb 18, 2022
e007a26
Compressed Images (#2733)
github-actions[bot] Feb 18, 2022
798882f
Compressed Images (#2743)
github-actions[bot] Feb 22, 2022
c9b26f9
fix: grid alignment on typography page (#2746)
alisonjoseph Feb 22, 2022
3a1caa7
Accessibility changes (#2737)
mbgower Mar 2, 2022
a8954c8
V10.54.0 (#2753)
tw15egan Mar 3, 2022
8e6ae1d
chore(deps): bump simple-get from 3.1.0 to 3.1.1 (#2762)
dependabot[bot] Mar 4, 2022
f07a35f
updated Check Accessibilty Section in Step 4 of Carbon React Tutorial…
sintaibm Mar 4, 2022
f4860ef
Compressed Images (#2767)
github-actions[bot] Mar 7, 2022
5b646fd
fix(data-table): update link to data table in React storybook (#2768)
joshblack Mar 7, 2022
b2b82b4
docs: update image production guidelines kit link (#2765)
laurenmrice Mar 8, 2022
1bf5f52
fix(Typography): fix issue with TypeWeight rendering (#2770)
tw15egan Mar 9, 2022
2ac12a1
Update to data table accessibility tab (#2759)
mbgower Mar 9, 2022
39f27d1
chore(deps-dev): bump prismjs from 1.25.0 to 1.27.0 (#2755)
dependabot[bot] Mar 10, 2022
76cb614
fix(carbon-website): remove ibm--z and ibm--z--partition from pictogr…
abbeyhrt Mar 10, 2022
fe30044
Checkbox accessibility (#2774)
mbgower Mar 15, 2022
277bb9b
docs: update code snippet and data table accessibility tabs (#2786)
laurenmrice Mar 15, 2022
7458a01
Button accessibility (#2775)
mbgower Mar 16, 2022
f763b9b
Progress bar docs (#2688)
jnm2377 Mar 17, 2022
c0c0c2b
Accordion accessibility (#2772)
mbgower Mar 21, 2022
e1f4ccf
Breadcrumb accessibility (#2773)
mbgower Mar 21, 2022
9cd7386
Slider accessibility (#2777)
mbgower Mar 22, 2022
d6be725
Compressed Images (#2798)
github-actions[bot] Mar 24, 2022
faf9c06
update the code for the progress bar (#2794)
thyhmdo Mar 28, 2022
6bc6ae1
Update content links to use v10 branch (#2791)
tay1orjones Mar 28, 2022
2b27682
Update to Carbon v10.56.0 (#2808)
tay1orjones Mar 29, 2022
f2bd6df
chore(deps): bump minimist from 1.2.5 to 1.2.6 (#2824)
dependabot[bot] Mar 29, 2022
f1980a6
Update usage.mdx (#2829)
mbgower Mar 30, 2022
ba83948
Compressed Images (#2812)
github-actions[bot] Mar 30, 2022
8f072c4
chore(project): update to carbon v11.0.0-rc.0
tay1orjones Mar 30, 2022
edc57a4
fix(grid-demo): update module import path
tay1orjones Mar 30, 2022
b58ae63
fix(styles): update caption-01 usage
tay1orjones Mar 30, 2022
4a14865
Merge branch 'v11' into update-carbon-v11-rc-0
tay1orjones Mar 31, 2022
50cc712
fix(component-index): ensure tags have no background
tay1orjones Mar 31, 2022
f3343f2
chore(project): temporarily comment out dropdowns
tay1orjones Mar 31, 2022
96b2a03
Merge branch 'main' of github.com:carbon-design-system/carbon-website…
tay1orjones Mar 31, 2022
169bfe5
fix(type): port type module fix from main to v11
tay1orjones Mar 31, 2022
bfdc3f3
Update accessibility.mdx
aagonzales Mar 31, 2022
73cb762
updated breadcrumb accessibility
aagonzales Mar 31, 2022
4e06ff8
fix(icons): update icons page
tay1orjones Mar 31, 2022
f87ea7d
Merge branch 'update-carbon-v11-rc-0' of github.com:tay1orjones/carbo…
tay1orjones Mar 31, 2022
b5ed725
chore(project): final v11 updates
tay1orjones Mar 31, 2022
bd62073
Merge branch 'v11' into update-carbon-v11-rc-0
tay1orjones Mar 31, 2022
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
Prev Previous commit
Next Next commit
copy edits, finalizing names for indicators
janchild committed May 14, 2021
commit 97540458d1134b421eafd83c61d79f1cdfa7b982
243 changes: 128 additions & 115 deletions src/pages/patterns/status-indicator-pattern/index.mdx
Original file line number Diff line number Diff line change
@@ -2,15 +2,15 @@
title: Status indicators
description:
Status indicators are an important method of communicating severity level
information to users. Different shapes and colors enable
users to quickly assess and identify status and respond accordingly.
information to users. Different shapes and colors enable users to quickly
assess and identify status and respond accordingly.
---

<PageDescription>

Status indicators are an important method of communicating severity level
information to users. Different shapes and colors enable
users to quickly assess and identify status and respond accordingly.
information to users. Different shapes and colors enable users to quickly assess
and identify status and respond accordingly.

</PageDescription>

@@ -30,11 +30,14 @@ users to quickly assess and identify status and respond accordingly.

## Overview

An indicator highlights a page element and informs the user of something that needs the user’s attention. Often,
the indicator will denote that there has been a change to a particular item.
An indicator highlights a page element and informs the user of something that
needs the user’s attention. Often, the indicator will denote that there has been
a change to a particular item.

They are frequently used to signal validation errors or notifications, changes, or updates. They can also be used on their own.
Indicators are visual cues intended to attract the user's attention to a piece of content or UI element that is dynamic in nature.
They are frequently used to signal validation errors or notifications, changes,
or updates. They can also be used on their own. Indicators are visual cues
intended to attract the user's attention to a piece of content or UI element
that is dynamic in nature.

In this pattern we explore:

@@ -47,9 +50,12 @@ In this pattern we explore:
In the UI landscape, examples of status indicators are everywhere. However this
pattern will focus less on the components or patterns in which indicators tend
to appear (notifications, inline errors, dashboards, and so on) and more on the
urgency of the communication.
urgency of the communication.

For ease of use, status indicators can be classified into levels of severity such as high, medium, and low attention. See more information on choosing between alias icons and outlined versus filled icons in the [Status shapes](#status-shapes) section below.
For ease of use, status indicators can be classified into levels of severity
such as high, medium, and low attention. See more information on choosing
between alias icons and outlined versus filled icons in the
[Status shapes](#status-shapes) section below.

#### Consolidated statuses

@@ -62,14 +68,15 @@ green, yellow, and red, the consolidated indicator is red.
Don't use status indicators when no user action is necessary and status
information is not important enough to highlight. Use plain text instead to
avoid the overuse of status indicators. While we won’t go as far a prescribing a
maximum number, more than 5 or 6 indicators begins to tax a user and makes it difficult to focus.
maximum number, more than 5 or 6 indicators begins to tax a user and makes it
difficult to focus.

### High attention

These indicators signal that user action is needed immediately—that is, there is an
irregularity in the system, something malfunctioned, or a user needs to confirm a
potentially destructive action. Some examples include alerts, exceptions,
confirmations, and errors.
These indicators signal that user action is needed immediately—that is, there is
an irregularity in the system, something malfunctioned, or a user needs to
confirm a potentially destructive action. Some examples include alerts,
exceptions, confirmations, and errors.

{INSERT HIGH ATTENTION TABLE HERE}

@@ -85,17 +92,18 @@ indicators.

Use these indicators when something is ready to view, for system feedback, or to
signify that something has changed since the last interaction. Some examples
include tooltip triggers that offer explanatory or added information, and passive
notifications.
include tooltip triggers that offer explanatory or added information, and
passive notifications.

{INSERT LOW ATTENTION TABLE HERE}

## Ingredients

To communicate their message, indicators can take many forms—they're not
confined to iconography. There are four basic elements that comprise Carbon
status indicators. (Note: we won't get into animation and sound in this pattern.) And for
WCAG compliance, at least three of these elements must be present. Let's look at these elements more closely before examining specific
status indicators. (Note: we won't get into animation and sound in this
pattern.) And for WCAG compliance, at least three of these elements must be
present. Let's look at these elements more closely before examining specific
status types.

- Symbols
@@ -107,11 +115,12 @@ status types.

Icons are visual symbols used to represent ideas, objects, or actions. Ideally,
they communicate messages at a glance, afford interactivity, and draw attention
to important information. For example, using exclamation points for warnings, checkmarks
for success, and question marks for help or unknown.
to important information. For example, using exclamation points for warnings,
checkmarks for success, and question marks for help or unknown.

To standardize the icons that are used most widely in IBM product, we’ve included only the most universally recognized icons.
Certain products may have certain modifications or most robust sets.
To standardize the icons that are used most widely in IBM product, we’ve
included only the most universally recognized icons. Certain products may have
certain modifications or most robust sets.

<Row>
<Column colLg={8}>
@@ -125,16 +134,17 @@ Certain products may have certain modifications or most robust sets.

### Status shapes

In this context, shapes refer to geometric figures like squares, circles, rectangles,
and so on, as they are instantly readable even at small sizes. These shapes have strong
visual associations that can be applied to help users succeed in using their product flows.
For instance, shapes with straight lines and 90 degree angles usually convey structure and
order—like the grid. While shapes with curves are friendlier and symbolize
continuity and connection.
In this context, shapes refer to geometric figures like squares, circles,
rectangles, and so on, as they are instantly readable even at small sizes. These
shapes have strong visual associations that can be applied to help users succeed
in using their product flows. For instance, shapes with straight lines and 90
degree angles usually convey structure and order—like the grid. While shapes
with curves are friendlier and symbolize continuity and connection.

There can also be cultural associations connected with shapes. For example in traffic and
wayfinding, hexagons mean stop, and upside triangles means yield. Using shapes incorrectly
can disturb learned recognition patterns and confuse users, possibly hurting their overall experience.
There can also be cultural associations connected with shapes. For example in
traffic and wayfinding, hexagons mean stop, and upside triangles means yield.
Using shapes incorrectly can disturb learned recognition patterns and confuse
users, possibly hurting their overall experience.

<Row>
<Column colLg={8}>
@@ -155,9 +165,9 @@ icons are more delicate and not as readily scannable.

In addition, the more line work an icon has—and the more breaks in those
lines—the more difficult it is to use a filled icon. For this reason, some
product teams may occasionally mix in an outline icon with a filled icon. This is okay
but for the most part, designers should try to be consistent throughout the
product or application. At the very least, designers should avoid mixing
product teams may occasionally mix in an outline icon with a filled icon. This
is okay but for the most part, designers should try to be consistent throughout
the product or application. At the very least, designers should avoid mixing
outlined and filled indicators on the same page.

#### Alias status icons
@@ -166,53 +176,53 @@ In several cases, we offer multiple shape options for one type of status
indicator. For example, ‘warning’ ‘help’ and ‘information’ status icons have
multiple variants to convey similar or exactly the same information. Often
times, users of certain products have grown accustomed to say, a hexagon instead
of a circle to convey a critical warning. Or a team perhaps wants to go the extra
mile and offer yet another differentiator for accessibility. Although
consistency is always the goal, there’s no need to avoid differentiation
to accomodate user preferences. Whichever style you choose however, avoid mixing
of a circle to convey a critical warning. Or a team perhaps wants to go the
extra mile and offer yet another differentiator for accessibility. Although
consistency is always the goal, there’s no need to avoid differentiation to
accomodate user preferences. Whichever style you choose however, avoid mixing
throughout the UI.

If an alias that your product frequently uses has been removed from the set and
you can make a case for the importance of including it here, please let us know.

### Status palette

Status indicator colors are used to reflect status. Typically, red represents
danger or error, orange represents a serious warning, yellow represents a regular
warning, green represents normal or success, and blue represents passive
notifications, usually involving additional information and workflow progress.
We’ve also included 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.
The status palette includes all of the colors that can be used to reflect
status. Typically, red represents danger or error, orange represents a serious
warning, yellow represents a regular warning, green represents normal or
success, and blue represents passive notifications, usually involving additional
information and workflow progress. We’ve also included 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 type="alert" />

#### 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 (that is, it’s not in ASE, Sketch kit palettes,
and so on) 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. It’s not a part of the IBM brand palette and it’s also not included in
the v2 color release (that is, it’s not in ASE, Sketch kit palettes, and so on)
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.

{Insert extended yellow and orange palette component}

## Variants

There are at least four possible ways to implement status indicators:

- Full status indicators
- Icon indicators
- Badge indicators (with and without numbers)
- Shape status indicators
- Differential status indicators
- Shape indicators
- Differential indicators

| Variant | Usage | Context |
| ---------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Full status 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. | Icon indicators are widely used in [Notifications](/components/notification/usage), [Progress indicators](/components/progress-indicator/usage), [Data tables](/components/data-table/usage), task lists and dashboard widgets. |
| Badge status indicators (with number) | 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 status indicators (without number) | 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 conjuntion with avatars or icons. |
| Shape status 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. |
| Differential status 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 | Context |
| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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. | Icon indicators are widely used in [Notifications](/components/notification/usage), [Progress indicators](/components/progress-indicator/usage), [Data tables](/components/data-table/usage), task lists and dashboard widgets. |
| Badge indicators (with number) | 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) | 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 conjuntion with avatars or icons. |
| 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. |
| 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. |

### Anatomy

@@ -234,7 +244,7 @@ are strongly recommended.
<Row>
<Column colSm={2} colMd={4} colLg={4}>

#### 1. Full indicator
#### 1. Icon indicator

A. Text label <br /> B. Symbol <br /> C. Shape <br /> D. Color

@@ -267,13 +277,13 @@ A. Text label <br /> B. Shape <br /> C. Color

## Formatting

### Full status indicators
### Icon indicators

Full status indicators require an icon, a shape, a meaningful color, and a
descriptive label. Easily recognizable icons can make very effective
communication tools and greatly improve scannability, especially with large
amounts of content. Icon indicators are widely used in notifications, progress
indicators, data tables, task lists and dashboard widgets.
Icon indicators require an icon, a shape, a meaningful color, and a descriptive
label. Easily recognizable icons can make very effective communication tools and
greatly improve scannability, especially with large amounts of content. Icon
indicators are widely used in notifications, progress indicators, data tables,
task lists and dashboard widgets.

<Row>
<Column colLg={8}>
@@ -289,16 +299,16 @@ indicators, data tables, task lists and dashboard widgets.

#### Type pairing and alignment

Full status indicators are sometimes referred to as ‘contextual’ status
indicators as well because they are associated with a UI element or with a piece
of content. As such they should be shown in close proximity to that element.
Icon indicators are sometimes referred to as ‘contextual’ status indicators as
well because they are associated with a UI element or with a piece of content.
As such they should be shown in close proximity to that element.

There are also cases, especially in data tables and lists, where the column
heading or row label may provide context that is additive to the inline label.
When very common ‘stop light’ associations are present, as in the following example, it may not
be necessary to explicitly label an icon as ‘warning,’ or ‘stable’ — as these
interpretations are widely understood in product. However it is good practice to
clarify the status intention in the text label.
heading or row label may provide context that is additive to the inline label.
When very common ‘stop light’ associations are present, as in the following
example, it may not be necessary to explicitly label an icon as ‘warning,’ or
‘stable’ — as these interpretations are widely understood in product. However it
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}>
@@ -313,18 +323,18 @@ clarify the status intention in the text label.
</DoDont>
</DoDontRow>

### Badge status indicators
### Badge indicators

Badge status indicators let the user know that something is new or updated. A badge status is
displayed over a ghost icon button, usually in the header, to indicate an active
notification and is cleared after the user acknowledges the notification.
Depending on your use case, the icon button can open a new page or launch a
modal, pane, or flyout.
Badge indicators let the user know that something is new or updated. A badge
status is displayed over a ghost icon button, usually in the header, to indicate
an active notification and is cleared after the user acknowledges the
notification. Depending on your use case, the icon button can open a new page or
launch a modal, pane, or flyout.

<Row>
<Column colLg={8}>

![Example of badge status indicators in a global header](./images/status_indicator_7.png)
![Example of badge indicators in a global header](./images/status_indicator_7.png)

<Caption>
Badge statuses with numbers are usually used for global notifications.
@@ -336,8 +346,8 @@ modal, pane, or flyout.
#### Badge status with number

Numbers are used in conjunction with a badge status when a count of new or
updated items is available and it's important for the user to know the number
of updates.
updated items is available and it's important for the user to know the number of
updates.

#### Badge status without number

@@ -346,17 +356,17 @@ and the number of notifications is either unknown or irrelevant to the user. The
dot badge is less noticeable than the numbered badge, but still draws the user’s
attention to the icon button.

### Shape status indicators
### Shape indicators

Shape indicators combine color shape and text to create a standard and
consistent way to indicate the status of a device, feature, or version. Icons are
not present. These shapes are also seen in certain diagrams and data
visualizations, for example network diagrams.
consistent way to indicate the status of a device, feature, or version. Icons
are not present. These shapes are also seen in certain diagrams and data
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.
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.

The table below is a first pass at establishing a standard lexicon for symbol
indicators within IBM product.
@@ -371,10 +381,10 @@ optical alignment. Do not attempt to create these shapes yourself. Use the
approved shape indicator provided for you in the icon library.

As with the icons, choose the appropriate canvas size depending on the size of
the status label with which it is paired. 16px symbols are optimized to feel balanced when
paired with both 12px and 14px IBM Plex. Since shape indicators are most often
reserved for small usage scenarios in product, we would advise you to use full
status indicators with 16px IBM Plex.
the status label with which it is paired. 16px symbols are optimized to feel
balanced when paired with both 12px and 14px IBM Plex. Since shape indicators
are most often reserved for small usage scenarios in product, we would advise
you to use full status indicators with 16px IBM Plex.

<Row>
<Column colLg={8}>
@@ -410,7 +420,8 @@ designer can provide the user with a legend if a status label isn’t an option.
![Example of a legend paired with a shape indicator](./images/status_indicator_10.png)

<Caption>
Example where the status symbol indicator depends on the legend at the top of the page
Example where the status symbol indicator depends on the legend at the top of
the page
</Caption>

</Column>
@@ -454,14 +465,14 @@ caption="Avoid using only color and status labels to differentiate your content.
</DoDont>
</DoDontRow>

### Differential status indicators
### Differential indicators

Differential status indicators often help users understand the movement or
changes in information. They are especially useful when users are monitoring
differences in large lists of statistics and anything other than type would be
too obtrusive. Examples include the common convention of color-coding stock
symbols in an investment account if their price has changed substantially.
Designers also rely on them to highlight deltas in data visualizations.
Differential indicators often help users understand the movement or changes in
information. They are especially useful when users are monitoring differences in
large lists of statistics and anything other than type would be too obtrusive.
Examples include the common convention of color-coding stock symbols in an
investment account if their price has changed substantially. Designers also rely
on them to highlight deltas in data visualizations.

Although typographic indicators can be used without an icon as long as a minus
or a plus sign is used, they are most often paired with arrow or caret icons in
@@ -477,20 +488,18 @@ 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 temperature, positive values are represented by the green spectrum and
negative values are represented by the red spectrum.
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
temperature, positive values are represented by the green spectrum and negative
values are represented by the red spectrum.

<Row>
<Column colLg={8}>

![Examples of differential status indicators](./images/status_indicator_15.png)
![Examples of differential indicators](./images/status_indicator_15.png)

<Caption>
Differential status indicators are most often seen in dashboards.
</Caption>
<Caption>Differential indicators are most often seen in dashboards.</Caption>

</Column>
</Row>
@@ -501,12 +510,14 @@ Accessible design not only helps users with disabilities, it provides better
user experiences for everyone. The most common form of color blindness is
red/green color blindness. The inability for some users to distinguish between
red and green means that products cannot simply rely on color to show status. As
a result, the status system relies on three key elements; color, shape, and symbol.
a result, the status system relies on three key elements; color, shape, and
symbol.

For example, the critical icon is not just “red”, it is the sum of the following
elements.

Color = Red <br /> Shape = Circle <br /> Symbol = \ <br /> Text = Critical

<br />

<DoDontRow>
@@ -569,7 +580,9 @@ limitations. WCAG 2.1 success criterion 2.2.3 (AAA)
- Miklos Philips,
[A comprehensive guide to notification design](https://uxdesign.cc/a-comprehensive-guide-to-notification-design-2fff67f08b7a),
(UX Planet, 2020)
- Kim Salazar, [Indicators, Validations, and Notifications: Pick the Correct Communication Option](https://www.nngroup.com/articles/indicators-validations-notifications/), (Nielsen Norman Group, 2015)
- Kim Salazar,
[Indicators, Validations, and Notifications: Pick the Correct Communication Option](https://www.nngroup.com/articles/indicators-validations-notifications/),
(Nielsen Norman Group, 2015)

## Feedback