[Stepper] Merge StepPositionIcon in StepIcon (#12026)

* Merged StepIcon and StepPositionIcon

* yarn docs:api

* fix typescript

Author: bousejin

packages/material-ui/src/StepIcon/StepIcon.d.ts

@@ -9,7 +9,7 @@ export interface StepIconProps
   icon: React.ReactNode;
 }
 
-export type StepIconClasskey = 'root' | 'active' | 'completed' | 'error';
+export type StepIconClasskey = 'root' | 'text' | 'active' | 'completed' | 'error';
 
 declare const StepIcon: React.ComponentType<StepIconProps>;
 

packages/material-ui/src/StepIcon/StepIcon.js

@@ -4,11 +4,12 @@ import classNames from 'classnames';
 import CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
 import withStyles from '../styles/withStyles';
-import StepPositionIcon from './StepPositionIcon';
+import SvgIcon from '../SvgIcon';
 
 export const styles = theme => ({
   root: {
     display: 'block',
+    color: theme.palette.text.disabled,
     '&$active': {
       color: theme.palette.primary.main,
     },
@@ -19,6 +20,11 @@ export const styles = theme => ({
       color: theme.palette.error.main,
     },
   },
+  text: {
+    fill: theme.palette.primary.contrastText,
+    fontSize: theme.typography.caption.fontSize,
+    fontFamily: theme.typography.fontFamily,
+  },
   active: {},
   completed: {},
   error: {},
@@ -35,12 +41,16 @@ function StepIcon(props) {
       return <CheckCircle className={classNames(classes.root, classes.completed)} />;
     }
     return (
-      <StepPositionIcon
+      <SvgIcon
         className={classNames(classes.root, {
           [classes.active]: active,
         })}
-        position={icon}
-      />
+      >
+        <circle cx="12" cy="12" r="12" />
+        <text className={classes.text} x="12" y="16" textAnchor="middle">
+          {icon}
+        </text>
+      </SvgIcon>
     );
   }
 

packages/material-ui/src/StepIcon/StepIcon.test.js

@@ -3,8 +3,8 @@ import { assert } from 'chai';
 import CheckCircle from '../internal/svg-icons/CheckCircle';
 import Warning from '../internal/svg-icons/Warning';
 import { createShallow, createMount } from '../test-utils';
-import StepPositionIcon from './StepPositionIcon';
 import StepIcon from './StepIcon';
+import SvgIcon from '../SvgIcon';
 
 describe('<StepIcon />', () => {
   let shallow;
@@ -31,13 +31,14 @@ describe('<StepIcon />', () => {
     assert.strictEqual(warning.length, 1, 'should have an <Warning />');
   });
 
-  it('renders <StepPositionIcon> when not completed', () => {
-    const wrapper = shallow(<StepIcon icon={1} active />);
-    const checkCircle = wrapper.find(StepPositionIcon);
-    assert.strictEqual(checkCircle.length, 1, 'should have an <StepPositionIcon />');
-    const props = checkCircle.props();
-    assert.strictEqual(props.position, 1, 'should set position');
-    assert.include(props.className, 'active');
+  it('renders a <SvgIcon>', () => {
+    const wrapper = shallow(<StepIcon icon={1} />);
+    assert.strictEqual(wrapper.find(SvgIcon).length, 1);
+  });
+
+  it('contains text "3" when position is "3"', () => {
+    const wrapper = shallow(<StepIcon icon={3} />);
+    assert.strictEqual(wrapper.find('text').text(), '3');
   });
 
   it('renders the custom icon', () => {

packages/material-ui/src/StepIcon/StepPositionIcon.js

@@ -28,6 +28,7 @@ Any other properties supplied will be spread to the root element (native element
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
+- `text`
 - `active`
 - `completed`
 - `error`