fix(ProgressBar): scale component with user font size

narmi · Jun 3, 2024 · d4dd099 · d4dd099
1 parent 82eaeb0
commit d4dd099
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/src/ProgressBar/index.js b/src/ProgressBar/index.js
@@ -5,7 +5,7 @@ const ProgressBar = ({ totalWidth = "100%", percentComplete = 0 }) => {
   return (
     <div
       className="nds-progressbar"
-      style={{ width: `${totalWidth}`, height: "18px" }}
+      style={{ width: `${totalWidth}`, height: "var(--font-size-default)" }}
     >
       <svg xmlns="http://www.w3.org/2000/svg">
         <line

diff --git a/src/ProgressBar/index.scss b/src/ProgressBar/index.scss
@@ -1,11 +1,15 @@
 .nds-progressbar {
   border: 1px solid var(--theme-primary);
   border-radius: var(--border-radius-default);
+  box-sizing: border-box;
+  position: relative;
 }
 
 .nds-progressbar svg {
-  height: 100%;
   width: 100%;
+  height: 100%;
+  position: absolute;
+  inset: 0;
 }
 
 .nds-progressbar line {