feat(react,styles): synced styles for progress bar and added thin variant #1309
Conversation
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
packages/styles/progressbar.css
Outdated
| --progress-bar-animation-timing: 150ms; | ||
| } | ||
|
|
||
| .ProgressBar { | ||
| background-color: var(--progress-bar-background-color); | ||
| padding: 2px; | ||
| padding: var(--space-half); |
There was a problem hiding this comment.
This is an instance where we don't really want spacing to scale with the global padding variable. The padding in this instance is acting like a border, which we do want to have a fixed size. Additionally, I think the padding is wrong here. The thin/normal variants have a 16px and 24px footprint respectively, so this appears to be 3px from the design.
| @@ -13,6 +13,14 @@ import { ProgressBar } from '@deque/cauldron-react' | |||
|
|
|||
| ## Examples | |||
|
|
|||
| ```jsx example | |||
There was a problem hiding this comment.
With multiple examples here, we probably want each example under a level 3 heading.
packages/styles/progressbar.css
Outdated
| @@ -18,3 +20,16 @@ | |||
| min-width: var(--space-small); | |||
| transition: width linear var(--progress-bar-animation-timing); | |||
| } | |||
|
|
|||
| .ProgressBar--thin .ProgressBar--fill { | |||
| height: var(--space-smallest); | |||
There was a problem hiding this comment.
Same issue as above comment. This should be a fixed size and not inheriting from --space-smallest.
packages/styles/progressbar.css
Outdated
| } | ||
|
|
||
| .cauldron--theme-dark .ProgressBar { | ||
| border: none; |
There was a problem hiding this comment.
This gives the dark themed progress bar a different footprint. It would be better to update --progress-bar-border-color to match the background color for dark theme.
packages/styles/progressbar.css
Outdated
| .cauldron--theme-dark { | ||
| --progress-bar-background-color: var(--accent-dark); | ||
| --progress-bar-fill-color: var(--accent-info-light); | ||
| } |
There was a problem hiding this comment.
This should be immediately below :root.
scurker
changed the title
Closes: #915