[Stepper] Difficult to compose without learning implementation details

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]

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

[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.