Chore/stepper enhancements

[bennymi]

Before submitting the PR:

• Does your PR reference an issue? If not, please chat to the team on Discord or GitHub before submission.
• Did you update and run tests before submission using npm run test?
• Does your branch follow our naming convention? If not, please amend the branch name using branch -m new-branch-name
• Did you update documentation related to your new feature or changes?

What does your PR address?

This PR would Close #408 and also addresses suggestions from #332.

Changes made:

• Added an extra prop navigateOnClick with three different options. When active, it allows the user to click on the header or step numbers to open the step.
• Added a rounded prop, so the numeral shape can be changed.
• Added a horizontal version of the Stepper that can be activated with the horizontal prop.
• Stepper documentation was updated with examples of a vertical and horizontal stepper. I also added some inputs so that the different props can be tested.

Tips

• Tap "convert to draft" to indicate this is work in progress.
• Link to an issue using the verbiage Fixes #XX
• Linked issues will auto-close when the PR is merged.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
skeleton-docs	✅ Ready (Inspect)	Visit Preview	Dec 9, 2022 at 6:27PM (UTC)

[endigo9740]

Thank you @bennymi, FYI I'm in the process of finishing up the design token update, then reviewing Coka's new update for data tables, then this will be after that. Sorry if it takes a couple days, but I will get back to this asap.

[bennymi]

Take your time @endigo9740 , excited for all the new design token updates you're working on!

[cananda]

@bennymi Brilliant! This is the biggest UX improvement for stepper and thank you for this PR! I can't thank you enough for this PR and lookforward to all of the above changes!

[endigo9740]

Hey @bennymi with everything else going on right now I'm going to need to put this to the side for right now. I will return to it asap though.

[bennymi]

@endigo9740 do you have an update on this PR?

[endigo9740]

@bennymi Nothing yet, but as mentioned previously this is is not a priority. It will come when I have a gap between items that are priority as we move towards a v1.0 launch.

[endigo9740]

Hey @bennymi, first off I want to apologize for taking so long to get back to this. Just so you understand I've been juggling a lot behind the scenes lately:

• Getting the new sponsorship and company setup for Skeleton Labs
• I got hit with Covid a couple weeks ago
• Prepping and going on the Svelte Sirens livestream
• Keeping everything going in the project, and ensuring we continue to progress to our next release
• And of course the holiday break this last weekend.

But I've had your PR on my mind and I keep coming back to the same question - how do we implement a horizontal display that works well for with an unlimited number of steps at any screen size?

Unfortunately I don't have a solution for that yet, and I'm afraid your PR has helped illustrate the problem with the fixes step counts for a horizontal stepper. The issues I tried to voice early on in the threads that inspired your PR.

Take this screenshot for example:

This is already pretty cramped with 6 steps, what happens when 7+ are added? We could adjust the breakpoint, but then the experience become degraded for less steps. It's a cat and mouse game that we can't win. Plus we have no way to enforce a limit to the max number of steps, which means more support tickets for us when it doesn't work as folks expect. That's a problem.

The best Idea I've come up is to radically redesign the stepper and perhaps start playing with new ideas for layout and display. One idea would be something like an abacus, where the steps are small and compact, but slide over right-to-left:

But even this will eventually hit the same horizontal space boundary. So what I'm thinking is some way to display only a fixed number of steps depending on the screen size. Then have others slide into view as they become relevant. But this is a pretty drastic redesign and not something I would want to put on your shoulders to handle.

There's also the factor of time and priority here. Right now I need to devote my time to the items in the v1 roadmap:

• Skeleton Roadmap to v1.0 #503

I'd be happy to discuss the goals with the roadmap and what comes next if you want to reach out in a DM on Discord. But these items really make the stepper updates a very low priority in the grand scheme of things. So I really cannot make promises for when this will occur. But I would like to return to it in the future - perhaps even after v1 of Skeleton is launched, and with your help if you are willing and able.

I know you've put in a ton of work on this, but would you mind terribly if we close this and plan to return to it again in the future? It really pains me to close a PR with so much work in place, but hopefully the issues I explained above make it clear why I'm asking this.

[endigo9740]

I'm going to go ahead and close per the message above. Thanks for the contribution all the same Benny. We'll circle back to this in the future when more time is available. Thanks!

[bennymi]

Hey @endigo9740 thanks for the write up. I do understand your reasoning. It's better to think of a good implementation that works well all the time, regardless of the number of steps used, instead of having an intermediate solution right now.

I definitely think offering a horizontal stepper would be good for the library, because for small screens I actually think it is nicer to use, since it gives the description text more space (the timeline of the vertical stepper squishes text on smaller screens too much). I'd also be happy to work on it in the future. I have some university stuff to take care of though for the moment. I have a seminar presentation on January 11th but afterwards I'll work on some PRs (will look at 1.0 relevant tasks first this time though and will coordinate with you on Discord as well... Horizontal steppers can wait until after then).

If it's okay for you I'll create a PR later though just implementing the clickable steps and the changing the shape of the step numerals, since I've already did those, then we can also close the #408 open issue.

[endigo9740]

That would be great @bennymi! I think that would be a perfect temporary solution as we get closer to v1!