feat(progress-indicator): add spaceEqual prop and functionality to pr…

…ogress step (#5635) * Initial commit with Sams changes * Applied required changes * Applied required changes * chore(tests): fix failing ci Co-authored-by: Vlad Balanescu <vlad.balanescu@uk.ibm.com> Co-authored-by: TJ Egan <tw15egan@gmail.com>
carbon-design-system · Apr 15, 2020 · 22a411c · 22a411c
1 parent 1fc4d0b
commit 22a411c
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 2 deletions.
diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -34,6 +34,11 @@
     }
   }
 
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-step {
+    min-width: 8rem;
+    flex-grow: 1;
+  }
+
   .#{$prefix}--progress-line {
     position: absolute;
     left: 0;
@@ -42,6 +47,11 @@
     border: $progress-indicator-bar-width;
   }
 
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-line {
+    min-width: rem(128px);
+    width: 100%;
+  }
+
   .#{$prefix}--progress-step svg {
     position: relative;
     z-index: 1;
@@ -82,6 +92,11 @@
     box-shadow: 0 rem(3px) 0 0 $link-01;
   }
 
+  .#{$prefix}--progress--space-equal .#{$prefix}--progress-label {
+    max-width: 100%;
+    margin-right: 0.75rem;
+  }
+
   .#{$prefix}--progress-label:active {
     color: $interactive-01;
     box-shadow: 0 rem(3px) 0 0 $interactive-01;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -4024,6 +4024,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "spaceEqually": Object {
+        "type": "bool",
+      },
       "vertical": Object {
         "type": "bool",
       },

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
@@ -23,7 +23,8 @@ storiesOf('ProgressIndicator', module)
     () => (
       <ProgressIndicator
         vertical={boolean('Vertical', false)}
-        currentIndex={number('Current progress (currentIndex)', 1)}>
+        currentIndex={number('Current progress (currentIndex)', 1)}
+        spaceEqually={boolean('Space Equally', false)}>
         <ProgressStep
           label={text('Label', 'First step')}
           description="Step 1: Getting started with Carbon Design System"

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -237,6 +237,10 @@ export class ProgressIndicator extends Component {
      * Determines whether or not the ProgressIndicator should be rendered vertically.
      */
     vertical: PropTypes.bool,
+    /**
+     * Specify whether the progress steps should be split equally in size in the div
+     */
+    spaceEqually: PropTypes.bool,
   };
 
   static defaultProps = {
@@ -285,10 +289,17 @@ export class ProgressIndicator extends Component {
   };
 
   render() {
-    const { className, currentIndex, vertical, ...other } = this.props; // eslint-disable-line no-unused-vars
+    const {
+      className,
+      currentIndex, // eslint-disable-line no-unused-vars
+      vertical,
+      spaceEqually,
+      ...other
+    } = this.props;
     const classes = classnames({
       [`${prefix}--progress`]: true,
       [`${prefix}--progress--vertical`]: vertical,
+      [`${prefix}--progress--space-equal`]: spaceEqually && !vertical,
       [className]: className,
     });
     return (