search

skeletonlabs / skeleton

A complete design system and component solution, built on Tailwind.
https://skeleton.dev
MIT License
5.12k stars 322 forks source link

Cookbook: Stepper #1780

Open endigo9740 opened 1 year ago

endigo9740 commented 1 year ago

[!WARNING] This issue is a work in progress.

This will act as a hub to centralize this information.

Maintainer Requests

The following requests are coming straight from the Skeleton team. These are highly likely be implemented:

[!NOTE] We're aiming to retire the Stepper component in Skeleton v3 in favor of a Cookbook recipe that teaches the core concepts for building a custom and unique stepper and/or multi-part form. We've not been satisfied with the reception of the feature in prior versions. We need a solution that's more flexible to the variety of use cases users have in mind for this feature.

Show addition notes - Each step should contribute to a multi-part form (ex: onboarding) - Can navigate forward/back by clicking the numeric steps - Better way to set a uniform height on the contents of each step - More control over the button options provide per each step - Programmatically control the stepper state (read: set current step)

Community Requests

The following requests have come from the community and are under consideration:

Bugs and Issues

Feedback

If you have additional updates or requests for this feature, please do so in the comments section below.

Josh-Nicholson commented 1 year ago

It would be incredibly helpful if the complete button had more options, or if the stepper component allowed you to provide a custom complete button.

This would enable functionality such as disabling the button or adding a spinner, which would be particularly useful when the stepper component is used with a form. The complete button could then notify the user that something is happening in the background and that they cannot press the button until the operation is completed.

Currently I'm only able to do the following:

<Stepper
  buttonCompleteType="submit"
  buttonCompleteLabel={isSubmitting ? 'Creating Case...' : 'Create Case'}
  buttonComplete={isSubmitting ? 'btn variant-filled-warning' : 'btn variant-filled-primary'}
>

Where ideally I could do something like this

<Stepper buttonComplete={<CustomButton {isSubmitting} />} >
endigo9740 commented 1 year ago

Thanks for the add Josh.

Just so everyone is aware, the direction I'm leaning on is to break this feature up to be a looser set of UI feature that allow users to construct this in any manner they see fit. We're never going to make a single component that checks off every wish list feature folks might have. But we can provide the specialized Lego pieces that allows folks to construct this as they see fit. This may even move from a component to a Tailwind > Blocks feature similar tot the Chat/Prompt interface. Much looser, but much more flexible.

I need to formalize this idea before we can implement, but just want folks to know the direction I'm leaning and to gather input on that.

chazzmoney commented 1 year ago

I'd also like to call out a way to intercept events in a handler. Like if you have a handler on:next={nextHandler} then in nextHandler you could call event.preventDefault() to prevent the next from occurring.

BlueFrog130 commented 1 year ago

I am very interested in an update to the stepper component. Trying to leverage the form validation API has been difficult with the current implementation.

endigo9740 commented 1 year ago

FYI I've closed a number of related issues. Those should now be considered consolidated here. Please keep any feedback or updates or additional requests related to the steppe here for now please.

hugotox commented 1 year ago

Any advice how to prevent the initial load "jump" of the content element? This is happening because the steps are rendered client side only, and even when used on not SEO pages, it is a bad UX to move things on load.

djdembeck commented 1 year ago

Would like to add clickable steps. They were added in https://github.com/skeletonlabs/skeleton/pull/752 but removed by https://github.com/skeletonlabs/skeleton/commit/9c399576b871b10021a2d4f178b75c46279feb1a

somadevmcc commented 11 months ago

Hello, I would like to add a "reset" option for the stepper to return it to the first step.

Darkskald commented 9 months ago

Would like to add clickable steps. They were added in #752 but removed by 9c39957

any progess in this? That would be an amazing feature!

Sarenor commented 9 months ago

@Darkskald it's going to be a part of the next Skeleton major version that's currently in early active development. So no progress or ETA for this specific feature, but we're getting there.

There should be a couple of videos and github discussions with progress reports and shared thoughts going out later today, actually!

pixelrebel commented 6 months ago

I'm here because of the deprecation update in the docs. What does this mean for projects using the stepper today? Does this mean that stepper will not be available in the initial v3 release?

endigo9740 commented 6 months ago

@pixelrebel we've provide that information on the page itself for each feature. See the red alert here: https://www.skeleton.dev/components/steppers

This feature is being phased out as we transition to Skeleton v3. This will remain functional for all 2.x releases. Expect a dedicated v3 alternative as soon as possible.

The general idea is a single component won't satisfy everyones wants and desires for this feature, so we'll likely show folks how to build a version of this themselves directly. Akin to the Chat blocks guide on v2.