fix: comments and mistakes after resolving conflicts

dequelabs · Jan 5, 2024 · 0d22e22 · 0d22e22
1 parent 3f06820
commit 0d22e22
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 12 deletions.
diff --git a/docs/pages/components/ProgressBar.mdx b/docs/pages/components/ProgressBar.mdx
@@ -13,6 +13,8 @@ import { ProgressBar } from '@deque/cauldron-react'
 
 ## Examples
 
+### Thin
+
 ```jsx example
 <ProgressBar
   aria-label="Progress %"
@@ -21,6 +23,8 @@ import { ProgressBar } from '@deque/cauldron-react'
 />
 ```
 
+### Normal
+
 ```jsx example
 <ProgressBar
   aria-label="Progress %"

diff --git a/packages/react/src/components/ProgressBar/index.tsx b/packages/react/src/components/ProgressBar/index.tsx
@@ -18,7 +18,7 @@ const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
     const { className, ...otherProps } = props;
     return (
       <div
-        className={classnames(className, 'Progressbar', {
+        className={classnames(className, 'ProgressBar', {
           'ProgressBar--thin': thin
         })}
         role="progressbar"

diff --git a/packages/styles/progressbar.css b/packages/styles/progressbar.css
@@ -5,9 +5,15 @@
   --progress-bar-animation-timing: 150ms;
 }
 
+.cauldron--theme-dark {
+  --progress-bar-background-color: var(--accent-dark);
+  --progress-bar-fill-color: var(--accent-info-light);
+  --progress-bar-border-color: var(--progress-bar-background-color);
+}
+
 .ProgressBar {
   background-color: var(--progress-bar-background-color);
-  padding: var(--space-half);
+  padding: 3px;
   border-radius: calc((var(--space-small) * 0.5) + 2px);
   border: 1px solid var(--progress-bar-border-color);
   margin-bottom: var(--space-smallest);
@@ -22,14 +28,5 @@
 }
 
 .ProgressBar--thin .ProgressBar--fill {
-  height: var(--space-smallest);
-}
-
-.cauldron--theme-dark {
-  --progress-bar-background-color: var(--accent-dark);
-  --progress-bar-fill-color: var(--accent-info-light);
-}
-
-.cauldron--theme-dark .ProgressBar {
-  border: none;
+  height: 8px;
 }