Allow Step content to be placed in between stepper UI in vertical mode

[vinayakakv]

Currently, in the Stepper, the content of the steps is rendered after the stepper UI.

While it is good with orientation="horizontal", it does not provide a nice experience in smaller screen sizes.

With orientation="vertical", if we support the content placed in between the steps, it would provide a seamless experience, in which user does not have to navigate top and bottom to understand in which step they are currently in.

I copied the source file src/components/Stepper/Stepper.tsx and dirty-fixed it to achieve the result in the screenshot.

If such support would be included in the package, for example, by means of a flag, that would be great!

The MUI stepper seems to have this functionality already - https://mui.com/components/steppers/#vertical-stepper

[rtivital]

I'm fine with adding this feature, I will not work on it myself though as I'm busy with other things

[vinayakakv]

Thanks for the reply @rtivital. How do you think is the appropriate way to implement it?

• Maybe adding this behaviour when orientation="vertical"? This would break existing uses
• Maybe adding a new prop contentPlacement: "inside" | "outside"? I think this is not applicable when orientation="horizontal".

Currently, since I'm doing it in a hacky way to get it working for my usecase, I did not add a new prop or anything.

[rtivital]

• It should look the same as Timeline component – https://mantine.dev/core/timeline/
• contentPlacement prop is fine
• It should be animated with Collapse component

[vinayakakv]

Got that, thanks 👍🏽 . Will try to set a development version of the library and send a PR, incorporating these features.

[hkkvo]

Would like to know any progress on it.

[rtivital]

No progress currently

[hkkvo]

We are in the middle of moving of our MUI components to Mantine because of the great features and we stumbled across the same issue of stepper mobile view. Is there any quick fix we can follow to mitigate this problem for now. it would be very helpful, we are going production with Mantine in two weeks.

[vinayakakv]

Hey @hkkvo, I had this issue and made a quick hack by editing the source code (and by placing it in my src/ directory). I created a gist of it. Hope you find that helpful.

Sorry that I could not contribute back this to Mantine project. I would be grateful if anyone picks this up.

The implementation looked like this:

[hkkvo]

Thank you @vinayakakv sharing the Git link

[hubertBS42]

Any chance you can help me with implementing this with @mantine/core 7.1.2?

[EmilioEsposito]

any update on this? It hinders Stepper usability on mobile. I'm trying to Migrate from MUI and used this feature a lot.

[hubertBS42]

Has there been any update on this? I tried implementing the solution @vinayakakv presented but quickly realized I don't know what I am doing lol.