feat: add Stepper component - #46
Merged
Merged
Conversation
The horizontal StepperSeparator used a flat mt-4 offset, which landed near the title text instead of the indicator circle. Switched to self-center (horizontal-only) so the connecting line runs through the indicator's actual vertical center, confirmed via live bounding-box inspection in the browser. Also imports StepperContext directly instead of using the fully-qualified path at each call site.
…ariants demo_stepper shows all three step states at a glance via a non-zero default_step. demo_stepper_controlled adds external Previous/Next buttons that read StepperContext from outside StepperTrigger, proving the context is available to any descendant of Stepper. demo_stepper_vertical exercises the vertical orientation with the same anatomy.
Follows tabs.md's structure (frontmatter, Installation, Components, Usage, Examples, See Also). References StaticStepper/StaticInstallStepper/ StaticStepperControlled/StaticStepperVertical, wired up once build_registry regenerates the registry.
…ment The earlier import cleanup used a targeted replace that only matched variables named `ctx`, missing StepperTrigger's `stepper_ctx` — still had the fully-qualified StepperContext path. Also adds a doc comment to StepperOrientation, which was inconsistent with StepState already having one.
Contributor
|
Thanks for the contribution, @dexterhere! Merged 🎉 The Stepper component looks great. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a
Steppercomponent for multi-step workflows (onboarding, checkout, setup wizards) — scope and API discussed and approved in # before implementation.Stepper/StepperItem/StepperTrigger/StepperIndicator/StepperTitle/StepperDescription/StepperSeparator— compound component anatomy matching the approved proposaluse_stepperhook (app_crates/registry/src/hooks/use_stepper.rs) owns all navigation state —current_index,can_go_prev/can_go_next,go_next/go_prev/go_to, and per-stepStepStatederivation — exposed viaStepperContextand consumed throughprovide_context/expect_context, mirroringuse_pagination.rs/TabsCtxStepState(Completed/Active/Pending/Disabled) andStepperOrientation(Horizontal/Vertical) as enums, not stringsStepperIndicatorstyling via thevariants!macro (StepperIndicatorVariant), not hand-rolledtw_merge!branching<button>triggers witharia-current="step", disabled steps, custom titles/descriptions, custom indicator content viachildrenStepperContextfrom outsideStepperTrigger), verticalpublic/docs/components/stepper.md) followingtabs.md's structure, plus a changelog entryPer the discussion, this covers the initial scope only — controlled component + both orientations. Advanced states (validation, optional steps, error states, content panels) are intentionally deferred to a follow-up.
Notes for review
public/registry/*andapp/src/__registry__/*are untouched — these are regenerated bybuild_registry, which isn't part of this PR.Test plan
cargo checkclean acrossregistryandappcargo clippyclean (zero warnings in any Stepper file)cargo fmt && leptosfmt— no diffStepStatevisual states render correctly, checkmark/number swap on completion, direct trigger-click navigation (go_to), external Previous/Next controls (go_next/go_prev) with correct disabled-state binding at both ends, horizontal separator aligns through the indicator center, vertical orientation layout