Repository: mui/material-ui (TypeScript)
Date: 2022-08-01 05:11:09+00:00
Task type: Bug Fix

Issue:
[Stepper] Mui-active / Mui-completed classes are not applied to icon container
### Duplicates

- [X] I have searched the existing issues

### Latest version

- [X] I have tested the latest version

### Current behavior 😯

CSS classes `.Mui-active` and `.Mui-completed` are not applied to `MuiStepLabel` iconContainer element. As a result, it's not possible to change the iconContainer style using custom theme

### Expected behavior 🤔

I would expect the `.Mui-active` and `.Mui-completed` classes to be applied to each elements of a step instead of just the label, or having any other class for applying style on each element of an active / completed step

### Steps to reproduce 🕹

You can replicate the issue using [this sandbox](https://codesandbox.io/s/customizedsteppers-demo-material-ui-forked-vxitv5?file=/demo.tsx)

Steps:

1. Check demo.tsx. This is where the stepper is implemented
2. Check index.tsx. This is where the theme is defined. On line 61, you'll find the style to change step icon style
3. Play around with steps. Only the label is colored
4. Inspect the HTML on the active Icon. You will see that no CSS class is applied to make it active
5. Inspect the HTML on the active label. You will see that the `.Mui-active` class is applied to make it active


### Context 🔦

I'm building a stepper with icons that I want to style using custom theme (using JSS). The stepper looks like this:
![image](https://user-images.githubusercontent.com/3204698/177518285-17963316-1d9e-44e3-b5b7-ef69dee6fdf0.png)

My goal is to apply a specific color/background color to the label and the icon of an active step in order to highlight it, just like this:
![image](https://user-images.githubusercontent.com/3204698/177518491-7a6ddae8-4eb0-43f7-82a6-17cdba26a886.png)

To do so, I'm relying on the `.Mui-active` class applied on an active step.
So far, this class is only applied to `MuiStepLabel-label` and not on `MuiStepLabel-iconContainer`
As a result, I'm able to apply the color I want on the label itself using a theme, but I have no way to target an *active* `iconContainer`
![image](https://user-images.githubusercontent.com/3204698/177519504-f6743bd9-4059-48a7-b45c-9c2c48487eb2.png)

I experience the exact same behavior with `.Mui-completed` class

### Your environment 🌎

<details>
  <summary><code>npx @mui/envinfo</code></summary>

```
  Tested on Chrome, safari, Firefox
  
System:
    OS: macOS 12.4
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 103.0.5060.53
    Edge: Not Found
    Firefox: 86.0
    Safari: 15.5
  npmPackages:
    @emotion/react: ^11.9.3 => 11.9.3 
    @emotion/styled: ^11.9.3 => 11.9.3 
    @mui/base:  5.0.0-alpha.86 
    @mui/codemod: ^5.8.4 => 5.8.5 
    @mui/envinfo: ^2.0.6 => 2.0.6 
    @mui/icons-material: ^5.8.4 => 5.8.4 
    @mui/lab: ^5.0.0-alpha.86 => 5.0.0-alpha.87 
    @mui/material: ^5.8.4 => 5.8.5 
    @mui/private-theming:  5.8.4 
    @mui/styled-engine:  5.8.0 
    @mui/styles: ^5.8.4 => 5.8.4 
    @mui/system:  5.8.5 
    @mui/types:  7.1.4 
    @mui/utils:  5.8.4 
    @mui/x-date-pickers: ^5.0.0-alpha.7 => 5.0.0-alpha.7 
    @types/react: ^17.0.0 => 17.0.0 
    react: ^17.0.1 => 17.0.1 
    react-dom: ^17.0.1 => 17.0.1 
    typescript: ^4.4.3 => 4.7.4 
```
</details>



Issue discussion:
~I think this is quite similar to https://github.com/mui/material-ui/issues/33388.~ Sorry, it is not.

I agree that the `.Mui-active` class should be applied to the StepRoot as well. So it becomes `.MuiStep-root.Mui-active`

Hey, @siriwatknp 
I would like to work on this issue if no one else is working on it.
Thanks!
> Hey, @siriwatknp I would like to work on this issue if no one else is working on it. Thanks!

Go for it!
I've only started learning to code in React not too long ago and wanted to try to help. 

I spent some time googling and found a stockoverflow post that seems pretty similar to this issues.
https://stackoverflow.com/questions/68729824/material-ui-stepicon-to-have-actual-icon-but-keep-background-circle

If you remove icon={icon} inside <StepIcon {...props}  icon={icon} />, it actually applies Mui-active class
I did some research on stack overflow starting with what @Uygnis said. And tried a somewhat quick fix after I understood some of the basics of this component.

Waiting on some checks, and willing to revise this if it doesn't work out. I only tested it locally. 
Hi, @siriwatknp
If no one else is working on it, I would like to work on this issue. I have studied the issue and I think I have the resolution to this bug.
Thanks!
We can both work on this if you'd like?  I just fixed my typo, I'm trying some other things once I can get my local set up re-running.

Solution patch:
diff --git a/packages/mui-material/src/StepLabel/StepLabel.js b/packages/mui-material/src/StepLabel/StepLabel.js
--- 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'],
   };
 


Test patch:
diff --git a/packages/mui-material/src/StepLabel/StepLabel.test.js b/packages/mui-material/src/StepLabel/StepLabel.test.js
--- 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);
+    });
+  });
 });