horizontal stepper

[royling]

Summary

Now, the stepper has only vertical layout, accordion-like. But it does limit how it can be used in some a bit complex cases. I once described this in https://github.com/vmware/clarity/issues/3680#issuecomment-520287853...

There's also a stepper component in AngularMaterial, the default layout is horizontal, with a variant for vertical layout.

The horizontal layout can address some concerns with the space issue, somehow... How do you think of adding the horizontal layout support in stepper?

[gnomeontherun]

A horizontal accordion was not on our radar when developing, so I can't speak to how easily it could be done technically. Before we get to that though, we should talk about the overlap with the Timeline here. I think in many ways that would be the ideal instead of a horizontal accordion, because the Material version you show is different by being more like a set of tabs that have content sliding.

I'm going to mark this for us to review with design and accessibility, but we need a well defined use case and set of requirements to understand its impact. Complex forms are not necessarily better by being horizontal, and the timeline is another option.

[royling]

@gnomeontherun totally agree that a horizontal accordion is not an option in this case. And yeah, the horizontal stepper in angular material is more like a timeline.

If the timeline component can be an option for the design, is it better to add this in the timeline doc?

[gnomeontherun]

To consider a horizontal stepper, we'd need clear use cases. I've heard this request several times but without any real context for what the problem is that it solves that our other form containers don't. We have accordion, stepper, wizard, or vanilla forms, so adding yet another layout makes it more confusing.

In addition, there are several challenges with a horizontal layout:

1) Horizontal space is more constrained than vertical, because documents naturally flow vertically. This would inherently limit the number of steps horizontally, and causes more issues with accessibility when zooming in. 2) The Stepper/Accordion titles would have to turn vertical, which is a poor experience and harder to read. 3) The height of each inner content potentially changes, so the content underneath might jump up or down as you change panels, which is more jarring with a horizontal layout.

[BillyCottrell]

I don't think another layout should be added but rather add a different option or way to use it. In my case i'm looking to create a registration form with a stepper/timeline look.

I have been looking around for examples and I have found an example of what I kinda would like to achieve:

So as seen in the picture above this is a stepper/wizard setup completely horizontally.

So there are 3 components that could achieve this, so there are 4 ways to make it look like in the image.

1. The Stepper: You use the stepper component with an horizontal version, make the steps look like a timeline in between them.
2. The Wizard: You can use the wizard component without the popup/modal, with steps in horizontal mode and look like a timeline in between them.
3. The Timeline: You can use the timeline component with the active step shown and non-active steps hidden. Make it so the body can have the width of the page, or whatever size is wanted, but not only the step itself.
4. Combination of Timeline with regular form: use timeline only with title, when button next is clicked show next form and update the timeline so it corresponds to the active form.

So I think that using the timeline with regular form combo might be the fastest way to setup. Later it might be better to use the timeline method as this might be better/cleaner. This way its almost like the Angular material stepper aswell: https://stackblitz.com/angular/dmngyqxopgn.

[gnomeontherun]

The feature request here has been captured into our list and we’re going to take it into consideration as we develop Clarity Core capabilities. In an effort to clean up our backlog and focus our attention, I’m going to close this as captured in our feature requests. Please follow our development and releases to see when we release relevant components to make this possible. Future feature requests can be made in our GitHub Discussions.

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.