feat(components/atom/progressBar): Add hideBorder property

SUI-Components · Jul 15, 2024 · 2efa49b · 2efa49b
1 parent 7649d56
commit 2efa49b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/components/atom/progressBar/src/ProgressBarLine/index.js b/components/atom/progressBar/src/ProgressBarLine/index.js
@@ -14,6 +14,7 @@ import useIndicator from './useIndicator.js'
 import usePercentage from './usePercentage.js'
 
 const ProgressBarLine = ({
+  hideBorder,
   hideIndicator,
   indicatorBottom,
   indicatorTotal,
@@ -42,6 +43,7 @@ const ProgressBarLine = ({
       <div
         className={cx(CLASS_CONTAINER_BAR, {
           [`${CLASS_CONTAINER_BAR}--size-${size}`]: size,
+          [`${CLASS_CONTAINER_BAR}--noborder`]: hideBorder,
           [`${CLASS_CONTAINER_BAR}--success`]: status === STATUS.SUCCESS,
           [`${CLASS_CONTAINER_BAR}--error`]: status === STATUS.ERROR,
           [`${CLASS_CONTAINER_BAR}--loading`]: status === STATUS.LOADING
@@ -74,6 +76,8 @@ ProgressBarLine.displayName = 'ProgressBarLine'
 
 ProgressBarLine.propTypes = {
   percentage: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number)]),
+  /** Hide the border */
+  hideBorder: PropTypes.bool,
   /** Hide the indicator */
   hideIndicator: PropTypes.bool,
   /** If the indicator should be placed below the bar */

diff --git a/components/atom/progressBar/src/ProgressBarLine/index.scss b/components/atom/progressBar/src/ProgressBarLine/index.scss
@@ -28,6 +28,10 @@ $base-class-line: '#{$base-class}Line';
       border: $bd-line-progress-container--success;
     }
 
+    &--noborder {
+      border: none;
+    }
+
     background: $bg-progress-bar;
     border: $bd-line-progress-container;
     border-radius: $bdrs-progress-container;