From 4a133f79a05630bd37589ceb42b860c1cb479460 Mon Sep 17 00:00:00 2001 From: Aubrey O'Neal <47198241+aubrey-oneal@users.noreply.github.com> Date: Wed, 3 Apr 2024 12:45:30 -0500 Subject: [PATCH] copy updates (#3996) --- .../images/progress-indicator-style-1.png | Bin 8414 -> 18083 bytes .../components/progress-indicator/style.mdx | 75 +++++++++++------- .../components/progress-indicator/usage.mdx | 8 +- 3 files changed, 52 insertions(+), 31 deletions(-) diff --git a/src/pages/components/progress-indicator/images/progress-indicator-style-1.png b/src/pages/components/progress-indicator/images/progress-indicator-style-1.png index d66f35ba23f8351098e333e6452b6210100c12ae..b2ed5bb12d4394e22cc796d07cce1afc047abcd8 100644 GIT binary patch literal 18083 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 W)N7rY{v7?gT@ynKgVLL>k^ciU1O_(% diff --git a/src/pages/components/progress-indicator/style.mdx b/src/pages/components/progress-indicator/style.mdx index 1590a0f1ee7..b3abacbb974 100755 --- a/src/pages/components/progress-indicator/style.mdx +++ b/src/pages/components/progress-indicator/style.mdx @@ -7,22 +7,36 @@ description: tabs: ['Usage', 'Style', 'Code', 'Accessibility'] --- + + +The following page documents visual specifications such as color, typography, +structure, and size. + + + + + +Color Typography +Structure +Feedback + + + ## Color -All steps that have been completed are indicated by an outlined circle with a -checkmark. The current step the user is on is indicated by a filled circle. -Steps the user has not encountered yet, or future steps, are indicated by an -outlined circle. - -| Element | Property | Color token | -| -------------------- | ---------------- | --------------------- | -| Current icon | fill | `$interactive` | -| Complete icon | fill | `$interactive` | -| Incomplete icon | fill | `$icon-primary` | -| Current step line | background-color | `$border-interactive` | -| Incomplete step line | background-color | `$border-subtle` \* | -| Label | text color | `$text-primary` | -| Optional label | text color | `$text-secondary` | +A progress indicator step may be complete, current, or not started. The +following table describes the color tokens used for each of these +[states](/components/progress-indicator/usage#states). + +| Element | Property | Color token | +| ------------------ | ---------------- | --------------------- | +| Complete icon | fill | `$interactive` | +| Current icon | fill | `$interactive` | +| Not started icon | fill | `$icon-primary` | +| Active step line | background-color | `$border-interactive` | +| Inactive step line | background-color | `$border-subtle` \* | +| Label | text color | `$text-primary` | +| Helper text | text color | `$text-secondary` | * Denotes a contextual color token that will change values based on the layer @@ -38,23 +52,22 @@ outlined circle. - Examples of completed, current, and incomplete steps for progress indicator + Examples of completed, current, and future steps for progress indicator ### Interactive states -| Element | Property | Color token | -| ------------- | ---------------- | --------------------- | -| Step:focus | border | `$focus` | -| Label:hover | text color | `$link-primary-hover` | -| Icon:error | fill | `$support-error` | -| Icon:disabled | fill | `$icon-disabled` | -| Line:disabled | background-color | `$border-disabled` | +| Element | Property | Color token | +| -------------- | ---------- | --------------------- | +| Step: focus | border | `$focus` | +| Label: hover | text color | `$link-primary-hover` | +| Icon: error | fill | `$support-error` | +| Icon: disabled | fill | `$icon-disabled` | -![Examples of current, completed, and future steps for progress indicator](images/progress-indicator-style-2.png) +![Examples of focus, hover, error, and disabled states for progress indicator](images/progress-indicator-style-2.png) @@ -68,10 +81,10 @@ outlined circle. Labels should be one to two words only, with a limit of 16 characters total per label. All labels should be set in sentence case. -| Element | Font-size (px/rem) | Font-weight | Type token | -| -------------- | ------------------ | ------------- | ------------------ | -| Label | 14 / 0.875 | Regular / 400 | `$body-compact-01` | -| Optional label | 12 / 0.75 | Regular / 400 | `$label-01` | +| Element | Font-size (px/rem) | Font-weight | Type token | +| ----------- | ------------------ | ------------- | ------------------ | +| Label | 14 / 0.875 | Regular / 400 | `$body-compact-01` | +| Helper text | 12 / 0.75 | Regular / 400 | `$label-01` | ## Structure @@ -93,3 +106,11 @@ All icons can be found in the [icons](/guidelines/icons/library) library. Structure and spacing measurements for progress indicator | px / rem + +## Feedback + + + +Help us improve this component by providing feedback, asking questions, and +leaving any other comments on +[GitHub](https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md). diff --git a/src/pages/components/progress-indicator/usage.mdx b/src/pages/components/progress-indicator/usage.mdx index 37e36776cc1..b8af5be62dc 100755 --- a/src/pages/components/progress-indicator/usage.mdx +++ b/src/pages/components/progress-indicator/usage.mdx @@ -90,15 +90,15 @@ number of steps, and overall progress in completing a task. -1. **Status indicator:** Communicates if a step is completed, incomplete, not - started, or has an error. See the +1. **Status indicator:** Communicates if a step is completed, current, not + started, disabled or has an error. See the [status indicator pattern](/patterns/status-indicator-pattern/) for guidance. 2. **Active step line:** Indicates completed steps and the step the user is currently on. 3. **Label:** Communicates what the user will accomplish in each step. Numbering each step also makes the progression more obvious. -4. **Inactive step line:** Indicates incomplete steps as well as steps that are - in an error, disabled, or skeleton state. +4. **Inactive step line:** Indicates steps that are not started as well as steps + that are in an error, disabled, or skeleton state. 5. **Helper text:** Labels a step as optional or in an error state. ### Alignment