[Stepper] Support reverse vertical stepper

[tomlim1017]

Current Behavior 😯

My issue is basically the same as the one below.

#15784

it is marked as solved but in the code sandbox the connector lines are messed up
Node 1 has a line going down while Node 2-> 3 does not have a complete connector line.

https://codesandbox.io/s/material-demo-75ehz

Expected Behavior 🤔

Node 3 content now has the ".MuiStepContent-last" class which removes the border-left (connector line).

The class should be removed and be applied to Node 1, so there is no extra line below node 1

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-75ehz

Your Environment 🌎

Tech	Version
Material-UI	v4.5.0
React
Browser	Chrome

Context

I know what needs to be done to solve the issue (removing the MuiStepContent-last class etc) but i don't know how to go about accomplishing it

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as we are not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[tomlim1017]

I don't understand why this issue was closed.

It is the same issue as
#15784

but that issue was marked as closed before all the bugs were worked out.

I think wanting to reverse the starting point on a vertical stepper is a pretty common issue.

[oliviertassinari]

You have shown how the related issue wasn't solved properly. It has transformed the request into a new feature proposal. Could you expand on your use case for a reverse stepper? :)

[tomlim1017]

Well the project I am working on is designed with a vertical stepper that starts from the Bottom and activates nodes based on the user's point total, to show progress.

starting at the top, in this case, doesn't really work

[oliviertassinari]

Do you have a visual example? I think that it could help better evaluate the potential value of the feature. Also, if you could have a look at how this can be properly implemented in the component, it would also help get it closer to the finish line :).

[tomlim1017]

In the screenshot, I have reversed the stepper so it starts from the bottom.

as you can see the content at the very top node has no connector line, this is because it has the class MuiStepContent-last has the property "border-left: none"

and the very bottom node, should have MuiStepContent-last, to remove the extra connector line

I believe this is the problem:

the non reversed stepper classes look like this
MuiStepContent
MuiStepContent
MuiStepContent
MuiStepContent-last

when it is reversed it looked like
MuiStepContent-last
MuiStepContent
MuiStepContent
MuiStepContent

When it should still look like the non reversed stepper. Because we don't want the extra connector line.

MuiStepContent-last class should be applied to the bottom node content regardless of where the stepper starts

I'm relatively new to development, and this is just what I think would solve it. I don't know how to implement it though.

[siriwatknp]

This issue has been a while with very few upvotes. I closing this to keep us focus on other tasks.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@tomlim1017 How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.