Skip to content

feat: allow jumping forward and back between completed steps of stepper#1089

Merged
justEhmadSaeed merged 2 commits into
mainfrom
stepper-next
Jul 24, 2025
Merged

feat: allow jumping forward and back between completed steps of stepper#1089
justEhmadSaeed merged 2 commits into
mainfrom
stepper-next

Conversation

@justEhmadSaeed

Copy link
Copy Markdown
Collaborator

Describe your changes

Closes #1088

Screenshots [Optional]

Screen.Recording.2025-07-24.at.7.23.21.PM2.mov

Issue ticket number and link

Checklist before requesting a review

  • I have performed a self-review of my code
  • I have added tests
  • I have added a changeset pnpm changeset add
  • I have added example usage in the kitchen sink app

@justEhmadSaeed justEhmadSaeed self-assigned this Jul 24, 2025
@changeset-bot

changeset-bot Bot commented Jul 24, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 67da1c2

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR implements functionality to allow users to navigate between completed steps in a stepper component. The main change introduces a "max reached step" tracking mechanism that enables jumping back to previously completed steps while preventing forward navigation to incomplete steps.

  • Adds state tracking for the maximum step reached by the user
  • Updates step completion states and navigation controls based on user progress
  • Includes example usage updates in the kitchen sink app

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File Description
packages/runtime/src/widgets/Stepper/Stepper.tsx Implements max reached step tracking, updates step completion logic, and adds disabled state for unreachable steps
apps/kitchen-sink/src/ensemble/screens/widgets.yaml Updates stepper example to show both icon and text in step template

{namedData.map((data, index) => (
<Step key={index}>
<StepButton onClick={onChangeCallback(index)}>
<Step completed={index <= maxReachedStep} key={index}>

Copilot AI Jul 24, 2025

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The completion logic is incorrect. A step should be marked as completed only if it's less than the max reached step, not less than or equal to it. The current step (index === maxReachedStep) should be active but not completed.

Suggested change
<Step completed={index <= maxReachedStep} key={index}>
<Step completed={index < maxReachedStep} key={index}>

Copilot uses AI. Check for mistakes.
@github-actions

Copy link
Copy Markdown
Contributor

Visit the preview URL for this PR (updated for commit 67da1c2):

https://react-kitchen-sink-dev--pr1089-stepper-next-k6n0e050.web.app

(expires Thu, 31 Jul 2025 14:36:11 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 6267897ade2ba783b6db70a53a60fc3946d625e9

@justEhmadSaeed justEhmadSaeed merged commit 0a6ef94 into main Jul 24, 2025
3 checks passed
@justEhmadSaeed justEhmadSaeed deleted the stepper-next branch July 24, 2025 21:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow users to move between completed steps of stepper with no restrictions

3 participants