[Stepper] Fix classes for icon container (mui#33734)

daniel-rabe · Nov 29, 2022 · bf84c74 · bf84c74
1 parent 97c12d5
commit bf84c74
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js
@@ -28,7 +28,14 @@ const useUtilityClasses = (ownerState) => {
       disabled && 'disabled',
       alternativeLabel && 'alternativeLabel',
     ],
-    iconContainer: ['iconContainer', alternativeLabel && 'alternativeLabel'],
+    iconContainer: [
+      'iconContainer',
+      active && 'active',
+      completed && 'completed',
+      error && 'error',
+      disabled && 'disabled',
+      alternativeLabel && 'alternativeLabel',
+    ],
     labelContainer: ['labelContainer'],
   };
 

diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js
@@ -201,4 +201,32 @@ describe('<StepLabel />', () => {
       expect(getByTestId('label')).to.have.class('step-label-test');
     });
   });
+
+  describe('renders <StepIcon> with the className completed', () => {
+    it('renders with completed className when completed', () => {
+      const CustomizedIcon = () => <div data-testid="custom-icon" />;
+      const { container } = render(
+        <Step completed>
+          <StepLabel StepIconComponent={CustomizedIcon}>Step One</StepLabel>
+        </Step>,
+      );
+
+      const icon = container.querySelector(`.${classes.iconContainer}`);
+      expect(icon).to.have.class(classes.completed);
+    });
+  });
+
+  describe('renders <StepIcon> with the className active', () => {
+    it('renders with active className when active', () => {
+      const CustomizedIcon = () => <div data-testid="custom-icon" />;
+      const { container } = render(
+        <Step active>
+          <StepLabel StepIconComponent={CustomizedIcon}>Step One</StepLabel>
+        </Step>,
+      );
+
+      const icon = container.querySelector(`.${classes.iconContainer}`);
+      expect(icon).to.have.class(classes.active);
+    });
+  });
 });