fix(progress-indicator): use circle--filled icon (#5585)

* fix(progress-indicator): use circle--filled icon * fix(progress-indicator): change token, adjust svg margin Co-authored-by: Josh Black <[email protected]>
carbon-design-system · Mar 18, 2020 · 7ae9915 · 7ae9915
1 parent 8836193
commit 7ae9915
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 16 deletions.
diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -48,7 +48,7 @@
     width: $carbon--spacing-05;
     height: $carbon--spacing-05;
     border-radius: 50%;
-    margin: 9px $carbon--spacing-03 0 0;
+    margin: rem(10px) $carbon--spacing-03 0 0;
     fill: $interactive-04;
   }
 
@@ -139,16 +139,7 @@
   //CURRENT STYLING
   .#{$prefix}--progress-step--current {
     .#{$prefix}--progress-line {
-      background-color: $interactive-01;
-    }
-  }
-
-  .#{$prefix}--progress-step--current svg {
-    stroke: $interactive-04;
-    fill: $interactive-04;
-
-    path:last-of-type {
-      stroke-width: 40%;
+      background-color: $interactive-04;
     }
   }
 
@@ -166,7 +157,7 @@
   //COMPLETED STYLING
   .#{$prefix}--progress-step--complete {
     .#{$prefix}--progress-line {
-      background-color: $interactive-01;
+      background-color: $interactive-04;
     }
   }
 
@@ -244,7 +235,7 @@
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step svg,
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {
     display: inline-block;
-    margin: 0.1rem 0.5rem;
+    margin: rem(3px) 0.5rem 0;
   }
 
   .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button svg {

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -12,8 +12,8 @@ import { settings } from 'carbon-components';
 import {
   CheckmarkOutline16,
   Warning16,
-  RadioButtonChecked16,
   RadioButton16,
+  CircleFilled16,
 } from '@carbon/icons-react';
 import { keys, matches } from '../../internal/keyboard';
 
@@ -66,9 +66,9 @@ export function ProgressStep({
     }
     if (current) {
       return (
-        <RadioButtonChecked16>
+        <CircleFilled16>
           <title>{description}</title>
-        </RadioButtonChecked16>
+        </CircleFilled16>
       );
     }
     if (complete) {