Skip to content

Commit abee059

Browse files
authored
docs: update progress bar state terminology to status (carbon-design-system#4724)
* update usage.mdx * update style.mdx * update a11y.mdx
1 parent 0e0c7b1 commit abee059

File tree

5 files changed

+25
-25
lines changed

5 files changed

+25
-25
lines changed
8.86 KB
Loading
13.3 KB
Loading
13.3 KB
Loading

src/pages/components/progress-bar/style.mdx

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
1010

1111
| Element | Property | Color token |
1212
| ------------- | ---------- | --------------------- |
13-
| Label | text color | `$text-primary` |
14-
| Helper text | text color | `$text-helper` |
13+
| Label | text-color | `$text-primary` |
14+
| Helper text | text-color | `$text-helper` |
1515
| Track | background | `$border-subtle` |
1616
| Bar: active | background | `$border-interactive` |
1717
| Bar: success | background | `$support-success` |
@@ -22,9 +22,9 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
2222
<Row>
2323
<Column colLg={8}>
2424

25-
![Progress bar status colors](images/progress-bar-style-1.png)
25+
![Progress bar statuses](images/progress-bar-style-1.png)
2626

27-
<Caption>Status colors</Caption>
27+
<Caption>Progress bar statuses</Caption>
2828

2929
</Column>
3030
</Row>
@@ -38,10 +38,10 @@ tabs: ['Usage', 'Style', 'Code', 'Accessibility']
3838

3939
## Structure
4040

41-
Depending on the use case, progress bar can have three ways for text alignment:
42-
default, inline, and indented. The width of a progress bar can be customized
43-
appropriately for its context. The minimum width of a progress bar is 48px and
44-
keep its width to a maximum of six columns when possible.
41+
Depending on the use case, the progress bar can use three text alignment
42+
options: default, inline, or indented. The width of a progress bar can be
43+
customized appropriately for its context. The minimum width of a progress bar is
44+
48px. Keep its width to a maximum of six columns when possible.
4545

4646
| Element | Property | px / rem | Spacing token |
4747
| -------------------- | -------------- | -------- | ------------- |
@@ -71,7 +71,7 @@ keep its width to a maximum of six columns when possible.
7171

7272
## Sizes
7373

74-
There are two sizes for the progress bar height, big and small.
74+
There are two sizes for the progress bar height: big and small.
7575

7676
| Size | Height px / rem |
7777
| ----- | --------------- |

src/pages/components/progress-bar/usage.mdx

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -228,14 +228,14 @@ progress bar.
228228
additional information about the process taking place. For determinate, the
229229
text is usually a percentage, fraction, ratio, or numeric value showing
230230
progression. Such values are not applicable when a progress bar is
231-
indeterminate. A progress bar that reaches an error state must convey the
232-
error in the helper text.
231+
indeterminate. A progress bar that receives an error status must convey the
232+
problem in the error helper text.
233233
3. **Track:** The static area that the bar indicator moves on top of and acts as
234234
a fixed visual reference of what the total length and duration of the process
235235
could be.
236236
4. **Bar indicator:** Indicates how much the process has progressed.
237-
5. **Status icon:** Indicates the state of the progress bar, either in error or
238-
success state.
237+
5. **Status icon:** Indicates the status of the progress bar, either in error or
238+
success status.
239239

240240
### Sizing
241241

@@ -387,11 +387,11 @@ For further content guidance, see Carbon's
387387

388388
## Universal behaviors
389389

390-
### States
390+
### Statuses
391391

392-
There are three states for the progress bar: active, success, and error. These
393-
states also apply on both indeterminate and determinate progress bars. After the
394-
process completes successfully or unsuccessfully, a progress bar can either
392+
There are three statuses for the progress bar: active, success, and error. These
393+
statuses also apply on both indeterminate and determinate progress bars. After
394+
the process completes successfully or unsuccessfully, a progress bar can either
395395
remain persistent as confirmation or validation, or it can be automatically
396396
dismissed depending on what is most suitable for the use case.
397397

@@ -405,20 +405,20 @@ dismissed depending on what is most suitable for the use case.
405405

406406
#### Active
407407

408-
The active loading state, represented by an animated blue bar indicator, conveys
409-
that the action is still in progress.
408+
The active status, represented by an animated blue bar indicator, conveys that
409+
the action is still in progress.
410410

411411
#### Success
412412

413-
The success loading state, conveyed by a full-width green progress bar and
414-
checkmark icon, indicates that the action completed successfully.
413+
The success status, conveyed by a full-width green progress bar and checkmark
414+
icon, indicates that the action completed successfully.
415415

416416
#### Error
417417

418-
The error loading state indicates that the action did not successfully complete.
419-
If an error occurs, an inline notification or error handling within the form
420-
should appear. As soon as a process fails, the indicator bar’s progress spans
421-
full width, turns red, and remains visible. A failed icon is also shown.
418+
The error status indicates that the action did not successfully complete. If an
419+
error occurs, an inline notification or error handling within the form should
420+
appear. As soon as a process fails, the indicator bar’s progress spans full
421+
width, turns red, and remains visible. A failed icon is also shown.
422422

423423
<Row>
424424
<Column colLg={8}>

0 commit comments

Comments
 (0)