[Feature Request] StepIcon should be more customizable

[lucas-viewup]

Hello, folks!

I'm having a problem in customize the component StepIcon inside of StepLabel specifically in line 86, component is like this in the last version of material-ui-next (v1.0.0-beta.47):

{icon && (
        <span
          className={classNames(classes.iconContainer, {
            [classes.alternativeLabel]: alternativeLabel,
          })}
        >
          <StepIcon
            completed={completed}
            active={active}
            error={error}
            icon={icon}
            alternativeLabel={alternativeLabel}
          />
        </span>
      )}

This property didn't permit edit the properties of the icon. Ok, but you will tell me that I can create a custom Icon but I will loss access to the props that is passed through Step, so, my proposal is do something like:

• add a stepIconProps to edit the props of StepIcon props including access to CSS API through classes prop.

{icon && (
        <span
          className={classNames(classes.iconContainer, {
            [classes.alternativeLabel]: alternativeLabel,
          })}
        >
          <StepIcon
            completed={completed}
            active={active}
            error={error}
            icon={icon}
            alternativeLabel={alternativeLabel}
           {...stepIconProps}
          />
        </span>
      )}

• Another way is transform this in a callback, so the user can access the icon number that is passed through Step component but is unacessible by the user that is using the component:

{icon && iconCallback(icon, ...other)}

So when you use StepLabel would be:

<StepLabel iconCallback={{ (icon) => {
return (
 <MyCustomStepIcon>{icon}</MyCustomStepIcon>
)
} }} />

Regards,

[oliviertassinari]

@lucas-viewup Thanks for opening this issue. I'm not sure to fully understand your problem. What are you trying to achieve precisely? This would help me evaluate the best solution.

[lucas-viewup]

Thanks for feedback, @oliviertassinari! The problem I'm trying to solve is style the StepIcon without modify the behaviour of icon and without change the icon. The component is ok, the only problem is I can't access the props (props of StepIcon) using the StepLabel component. I think a good solution for this is add a property to modify these properties. This solution only will bind two wires that are well implemented, allowing the use of CSS API of StepIcon through StepLabel.

Take this example:

const styles = {
    stepIconRoot: (
       width: 24,
      height: 'auto',
     }
...

};

const {classes} = props;
...
<Stepper activeStep={activeStep}>
         
      <Step>
           <StepLabel iconProps={{
                 classes: {
                   root: classes.stepIconRoot,
...
                 }
          }}>Payment</StepLabel>
      </Step>
</Stepper>

[oliviertassinari]

The problem I'm trying to solve is style the StepIcon

Ok, I see different alternatives:

1. We add a classes.stepIcon or classes.icon key to the StepLabel. This is for the simple use cases
2. We add a StepIconProps property. We add the xxxProps over xxxComponent for frequent use cases. It's handier but less powerful.
3. We add a StepIconComponent property. This allows full customization.

[lucas-viewup]

The first option is good but you will be restricted to the root of the StepIcon.

I guess the 2nd option is better, because you will only bind that already exists, you will bind the StepIcon to the StepLabel, all the logic already implemented in StepIcon will be available in StepLabel through StepIconProps as you mentioned.

The 3rd option already exists (icon property of StepLabel), the problem is having a prop to pass the component is that you will lost the behavior of default icon (the default icon property of StepIcon renders the index of the step and another props like alternativeLabel, etc, the custom one doesn't).

[oliviertassinari]

I'm fine with option two too :).

[svenschaefer]

Hi, isn't this possible with "StepIconProps":
<StepLabel StepIconProps={{ classes: { active: { color: "red" } } }} >