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

Progress bar docs #2688

Merged
merged 35 commits into from
Mar 17, 2022
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
52b943e
new progress bar docs
thyhmdo Jan 10, 2022
f621375
new update for progress bar
thyhmdo Jan 12, 2022
e340097
progress-bar-update2
thyhmdo Jan 14, 2022
f391590
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Jan 19, 2022
af22a9d
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Jan 19, 2022
a9cc52a
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Jan 19, 2022
a36a98c
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Jan 19, 2022
bd3e870
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Jan 19, 2022
b044569
Update usage.mdx
thyhmdo Jan 19, 2022
53eeef4
Update usage.mdx
thyhmdo Jan 19, 2022
16cd4bb
Merge branch 'main' into progress-bar-2
thyhmdo Jan 19, 2022
51efe65
Update usage.mdx
thyhmdo Jan 19, 2022
5bc4364
Merge branch 'progress-bar-2' of https://github.com/thyhmdo/carbon-we…
thyhmdo Jan 19, 2022
d34ad15
Update progress bar
thyhmdo Jan 19, 2022
b449663
update progress bar
thyhmdo Jan 25, 2022
a9ecc29
update progress bars
thyhmdo Jan 26, 2022
acfdf13
update progress bar
thyhmdo Feb 1, 2022
810d75a
Update progress bar
thyhmdo Feb 1, 2022
8604b50
update progress bar
thyhmdo Feb 1, 2022
0a6f1b3
update progress bar
thyhmdo Feb 8, 2022
1e2dcd1
Update progress bar
thyhmdo Feb 8, 2022
d05b21d
Update progress bar
thyhmdo Feb 11, 2022
e3db7f4
Update progress bars
thyhmdo Feb 22, 2022
b2bb220
Update progress bar
thyhmdo Feb 23, 2022
2b7fec8
Update progress bars
thyhmdo Feb 24, 2022
d41f43c
Update progress bar
thyhmdo Mar 2, 2022
715ebcf
update progress bar misc.
thyhmdo Mar 4, 2022
137b4d1
Update progress bar misc.
thyhmdo Mar 4, 2022
baafb80
Update progress bars
thyhmdo Mar 11, 2022
c5da335
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Mar 14, 2022
1905ccf
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Mar 14, 2022
a665836
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Mar 14, 2022
0575579
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Mar 14, 2022
4ed87cd
Update src/pages/components/progress-bar/usage.mdx
thyhmdo Mar 15, 2022
c781779
Merge branch 'main' into progress-bar-2
thyhmdo Mar 17, 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
2 changes: 2 additions & 0 deletions src/data/nav-items.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,8 @@
path: /components/overflow-menu/usage/
- title: Pagination
path: /components/pagination/usage/
- title: Progress bar
path: /components/progress-bar/usage/
- title: Progress indicator
path: /components/progress-indicator/usage/
- title: Radio button
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.
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.
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.
105 changes: 105 additions & 0 deletions src/pages/components/progress-bar/style.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
---
title: Progress bar
description:
A progress bar provides feedback about the duration and progression of a
process.
tabs: ['Usage', 'Style']
---

## Color

| Element | Property | Color token |
thyhmdo marked this conversation as resolved.
Show resolved Hide resolved
| ------------- | ---------- | --------------------- |
| Label | Text color | `$text-primary` |
| Helper text | Text color | `$text-helper` |
| Track | Background | `$border-subtle` |
| Bar: active | Background | `$border-interactive` |
| Bar: success | Background | `$support-success` |
| Icon: success | Fill | `$support-success` |
| Bar: error | Background | `$support-error` |
| Icon: error | Fill | `$support-error` |

<Row>
<Column colLg={8}>

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

<Caption>Status colors</Caption>

</Column>
</Row>

<Row>
<Column colLg={12}>

![Progress bar status colors](images/progress-bar-style-2.png)

<Caption>Progress bar colors for light themes</Caption>

</Column>
</Row>

<Row>
<Column colLg={12}>

![Progress bar status colors](images/progress-bar-style-3.png)

<Caption>Progress bar colors for dark themes</Caption>

</Column>
</Row>

## Typography

The width and height of a popover container can vary depending on the amount of
thyhmdo marked this conversation as resolved.
Show resolved Hide resolved
content within it. We recommend to not exceed a popover width size of four
columns.

| Element | Font-size (px/rem) | Font-weight | Type token |
| ----------- | ------------------ | ----------- | ----------------- |
| Label | 14px / 0.875rem | Regular/400 | `$label-01` |
thyhmdo marked this conversation as resolved.
Show resolved Hide resolved
| Helper text | 12px / 0.75rem | Regular/400 | `$helper-text-01` |

## Structure

Progress bar can have two ways for text alignment. The first one has text
aligned left with progress bar and the second one has text aligned to the middle
of the progress bar. The width of a progress bar can be customized appropriately
for its context. The minimum width of a progress bar is 48px and keep its width
to a maximum of six columns when possible.

| Element | Property | px / rem | Spacing token |
| -------------------- | -------------- | -------- | ------------- |
| Label (top aligned) | Padding-bottom | 8/.5 | `$spacing-03` |
thyhmdo marked this conversation as resolved.
Show resolved Hide resolved
| Helper text | Padding-top | 8/0.5 | `$spacing-03` |
| Label (left aligned) | Padding-right | 16/1 | `$spacing-05` |

<div className="image--fixed">

![Structure and spacing measurements for a popover container.](images/progress-bar-style-4.png)

</div>

<Caption>
Structure and spacing measurements a popover container. | px / rem
</Caption>

## Sizes

There are two sizes for the progress bar height, default and small.

| Size | Height px / rem |
| ------- | --------------- |
| Default | 8 / 0.5 |
| Small | 4 / 0.25 |

<div className="image--fixed">

![Structure and spacing measurements between a popover container and trigger button.](images/progress-bar-style-5.png)

</div>

<Caption>
Structure and spacing measurements between a popover container and trigger
button. | px / rem
</Caption>
Loading