feat(progress-indicator): update to use carbon icons (#5122)

* feat(progress-indicator): update to use carbon icons * fix(progress-indicator): remove top margin from icon Co-authored-by: TJ Egan <tw15egan@gmail.com> Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>
carbon-design-system · Jan 28, 2020 · aa33fa0 · aa33fa0
1 parent e72508e
commit aa33fa0
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
@@ -20476,10 +20476,13 @@ Progress indicator styles
  }
 
  .#{$prefix}--progress-step--current svg {
- width: 14px;
- height: 14px;
+ stroke: $interactive-01;
  fill: $interactive-01;
  margin-top: rem(9.5px);
+
+ path:last-of-type {
+ stroke-width: 40%;
+ }
  }
 
  //INCOMPLETE STYLING

diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss
@@ -143,10 +143,12 @@
  }
 
  .#{$prefix}--progress-step--current svg {
- width: 14px;
- height: 14px;
+ stroke: $interactive-01;
  fill: $interactive-01;
- margin-top: rem(9.5px);
+
+ path:last-of-type {
+ stroke-width: 40%;
+ }
  }
 
  //INCOMPLETE STYLING

diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js
@@ -9,7 +9,12 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import classnames from 'classnames';
 import { settings } from 'carbon-components';
-import { CheckmarkOutline16, Warning16 } from '@carbon/icons-react';
+import {
+ CheckmarkOutline16,
+ Warning16,
+ RadioButtonChecked16,
+ RadioButton16,
+} from '@carbon/icons-react';
 import { keys, matches } from '../../internal/keyboard';
 
 const { prefix } = settings;
@@ -61,10 +66,9 @@ export function ProgressStep({
  }
  if (current) {
  return (
- <svg>
- <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
+ <RadioButtonChecked16>
  <title>{description}</title>
- </svg>
+ </RadioButtonChecked16>
  );
  }
  if (complete) {
@@ -75,10 +79,9 @@ export function ProgressStep({
  );
  }
  return (
- <svg>
+ <RadioButton16>
  <title>{description}</title>
- <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
- </svg>
+ </RadioButton16>
  );
  };