[StepConnector][StepContent][StepLabel] Remove deprecated props and classes by siriwatknp · Pull Request #48058 · mui/material-ui (original) (raw)

Summary

Remove all deprecated props and classes from Step* components:

StepConnector: Remove deprecated classes lineHorizontal and lineVertical
StepContent: Remove deprecated props TransitionComponent and TransitionProps
StepLabel: Remove deprecated props componentsProps, StepIconComponent, and StepIconProps

Breaking changes

StepConnector

lineHorizontal class removed — combine .MuiStepConnector-horizontal and .MuiStepConnector-line instead
lineVertical class removed — combine .MuiStepConnector-vertical and .MuiStepConnector-line instead

StepContent

TransitionComponent prop removed — use slots.transition instead
TransitionProps prop removed — use slotProps.transition instead

StepLabel

componentsProps prop removed — use slotProps instead
StepIconComponent prop removed — use slots.stepIcon instead
StepIconProps prop removed — use slotProps.stepIcon instead

Codemods available:

npx @mui/codemod@latest deprecations/step-connector-classes npx @mui/codemod@latest deprecations/step-content-props npx @mui/codemod@latest deprecations/step-label-props

Relates to #47987


if (transitionDurationProp === 'auto' && !TransitionComponent.muiSupportAuto) {
const TransitionSlotComponent = slots.transition ?? StepContentTransition;
if (transitionDurationProp === 'auto' && !TransitionSlotComponent.muiSupportAuto) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

StepContentTransition.muiSupportAuto will always be undefined in this check because it's checking a styled wrapper as opposed to the raw Collapse component like before

The Claude code suggested fix is to follow Popover and pass Collapse as the elementType param of useSlot:

const [TransitionSlot, transitionSlotProps] = useSlot('transition', {
elementType: Grow,

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you check again, I simplify it without removing the StepContentTransition styled component.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good ~

This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.Learn more about bidirectional Unicode characters

[ Show hidden characters]({{ revealButtonHref }})