[Stepper] Difficult to compose without learning implementation details

[Floriferous]

I've been struggling to use the Stepper component, as it seems to rely a lot on refs and React.cloneElement. This means that you can't simply compose the component together, as you need to know where and what-for refs, passed props are needed.

Here's a simple reproduction: https://stackblitz.com/edit/w2vekn

I've had to look around multiple files in the Stepper* tree to understand that you can fix the first example by passing any props along to the StepLabel.

I think it'd be simpler if the component used context instead of cloneElement.

The same visual glitches happen if you were to try to pull the Step component inside your own custom one and give that custom component as children to Stepper, if you do that, then you lose the connector.

[oliviertassinari]

@Floriferous Agree, it's much easier to use the context now than it was when first designing the component (2017). It's related to #12921. @eps1lon made some progress on it lately #18085. Would you be interested in trying that out?

[baterson]

@oliviertassinari I would give it a try :)

[oliviertassinari]

@baterson Great, note that it's a larger effort than previously. I think that the first step will be to update all the stepper tests to use testing-library. Then, we can actually look at changing the implementation.

[baterson]

@oliviertassinari Ok then. I'll start with tests first.

[oliviertassinari]

@baterson Thanks, the reason is that shallow and .find(ComponentName) will be bottlenecks in the update of the implementation. Ideally, we would like to be able to update the implementation without changing a single test.

[baterson]

@oliviertassinari I'm a bit confused on tests like this one:
https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Stepper/Stepper.test.js#L66
Stepper renders div elements instead of Step which causes prop related warnings because div doesn't care about Step props.
Is it ok if I change those divs to Step components?

[oliviertassinari]

Agree, I think that using the Step would make more sense here.

[mymattcarroll]

Is this expected to be a breaking change, and not be available until v5?

We have a use case to make the steps reorder-able, which is proving to be very difficult while the <Stepper /> component must have <Step /> components as children.

[oliviertassinari]

@mymattcarroll all ongoing development is on v5, yes. We still plan to make releases every week along the way to a stable state.