[StepIcon] Add className in render SvgIcon (#22559)

mui · Sep 11, 2020 · 81c10a5 · 81c10a5
1 parent 7a4bd58
commit 81c10a5
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 5 deletions.
diff --git a/packages/material-ui/src/StepIcon/StepIcon.js b/packages/material-ui/src/StepIcon/StepIcon.js
@@ -36,10 +36,18 @@ export const styles = (theme) => ({
 });
 
 const StepIcon = React.forwardRef(function StepIcon(props, ref) {
-  const { completed = false, icon, active = false, error = false, classes } = props;
+  const {
+    active = false,
+    classes,
+    className: classNameProp,
+    completed = false,
+    error = false,
+    icon,
+    ...other
+  } = props;
 
   if (typeof icon === 'number' || typeof icon === 'string') {
-    const className = clsx(classes.root, {
+    const className = clsx(classNameProp, classes.root, {
       [classes.active]: active,
       [classes.error]: error,
       [classes.completed]: completed,
@@ -54,7 +62,7 @@ const StepIcon = React.forwardRef(function StepIcon(props, ref) {
     }
 
     return (
-      <SvgIcon className={className} ref={ref}>
+      <SvgIcon className={className} ref={ref} {...other}>
         <circle cx="12" cy="12" r="12" />
         <text className={classes.text} x="12" y="16" textAnchor="middle">
           {icon}
@@ -80,6 +88,10 @@ StepIcon.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
   /**
    * Mark the step as completed. Is passed to child components.
    * @default false

diff --git a/packages/material-ui/src/StepIcon/StepIcon.test.js b/packages/material-ui/src/StepIcon/StepIcon.test.js
@@ -1,16 +1,23 @@
 import * as React from 'react';
 import { expect } from 'chai';
-import { createMount, describeConformance, createClientRender } from 'test/utils';
+import { createMount, getClasses, describeConformance, createClientRender } from 'test/utils';
 import StepIcon from './StepIcon';
 
 describe('<StepIcon />', () => {
   const render = createClientRender();
   const mount = createMount();
+  let classes;
+
+  before(() => {
+    classes = getClasses(<StepIcon icon={1} />);
+  });
 
   describeConformance(<StepIcon icon={1} />, () => ({
+    classes,
+    inheritComponent: 'svg',
     mount,
-    only: ['refForwarding'],
     refInstanceof: window.SVGSVGElement,
+    skip: ['componentProp'],
   }));
 
   it('renders <CheckCircle> when completed', () => {