Skip to content

[Feat]: Walkthrough Component Implementation #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 11 commits into
base: master
Choose a base branch
from

Conversation

KumarNitin19
Copy link
Collaborator

Hello @mkrause , I would like to contribute the walkthrough component in baklava and I have created the component with few stories as a walkthrough demonstration:

  • Basic - Standard walkthrough implementation.
  • Scroll - Demonstrates that it works for components not in viewport by scrolling to them and highlighting them.
  • Lazy - Shows it works with lazy components by waiting for the component to load and then highlighting it.
  • Without Overlay - No spotlight, no overlay, just the tooltip near the component

What it does
This component allows to create guided user tours with spotlight highlighting and contextual tooltips.

Key Features:

  • Spotlight overlay highlighting target elements.
  • Dynamic tooltip positioning with configurable placement.
  • Keyboard navigation (arrow keys, escape).
  • Scroll handling and lazy loading support.
  • Optional overlay mode.

Note: I have used the tooltip component but it is not wrapping the spotlight because currently the tooltip present in baklava doesn't have any prop to make it open - it only appears when we hover on the wrapped element. So I have calculated the bounding rect value to position the tooltip. We can get rid of this if we add an open prop to make the tooltip visible always.

Please review and let me know if any changes are required.
Thanks!

@mkrause
Copy link
Collaborator

mkrause commented Jun 16, 2025

Hi @KumarNitin19, thank you! Will have a look at the PR 🙂

@Mahek-Vasoya Mahek-Vasoya self-assigned this Jun 25, 2025
@mkrause
Copy link
Collaborator

mkrause commented Jun 26, 2025

@Mahek-Vasoya We can pick up this work as part of this PR: #183

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.

4 participants