fix(tour): improve shepherd tour step progress and navigation#764
fix(tour): improve shepherd tour step progress and navigation#764harsh-na wants to merge 5 commits intoaccordproject:mainfrom
Conversation
Signed-off-by: harshit <harshitgalaxy710@gmail.com>
✅ Deploy Preview for ap-template-playground ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
sanketshevkar
left a comment
sanketshevkar
left a comment
There was a problem hiding this comment.
Can you please break down the file in separate isolated files? Please create a new folder for all shephard tour related things like styles, components and utils.
Also make sure you have unit test coverage for all the files. Thanks!
…tyles Signed-off-by: harshit <harshitgalaxy710@gmail.com>
…tyles(build safe) Signed-off-by: harshit <harshitgalaxy710@gmail.com>
|
Hi @sanketshevkar, As suggested by you, I modularize the files, and also ensured unit Test coverage, |
…tyles(build safe-css) Signed-off-by: harshit <harshitgalaxy710@gmail.com>
|
Hi @sanketshevkar , Please review my PR, as it's been quiet long since I raised it, |
| import { useEffect } from "react"; | ||
| import { tour } from "../tour/tourConfig"; | ||
| import "../styles/components/Tour.css"; | ||
| const Tour = () => { |
There was a problem hiding this comment.
This feels unnecessary, why do we need this?
| Steps Test | ||
| -----------------------------*/ | ||
|
|
||
| test("adds all 15 tour steps", () => { |
There was a problem hiding this comment.
I think writing tests simply for the utility function should help. I don't see the need to create a dummy component and then import and export the utilities separately.
2 participants
Closes #763
This PR improves the Template Playground onboarding tour by adding a step progress indicator and Back button navigation to enhance the user experience.
Users can now clearly see how many steps remain in the tour and navigate backwards if needed.
Changes
Added dynamic step counter (current step / total steps) to all tour popups
Added Back button for all steps after the first step
Refactored Shepherd tour implementation to reduce code duplication
Improved popup layout with clean header and structured content
Standardized tour buttons (Back / Skip / Next / Finish)
Improved visual hierarchy for better readability
Flags
Screenshots or Video
Before:
No indication of remaining steps
No backward navigation
After:
Step indicator (e.g. Step 3/15) visible in each popup
Back button available for navigation
Cleaner and more structured layout
Related Issues
Author Checklist
--signoffoption of git commit.mainfromfork:branchname