Implement multiple element highlighting feature

[yunusemre-dev]

Hey 👋🏻

I'm in need of a feature that allows me to select multiple items in a single step. Currently, Shepherd highlights the overlay for the target element defined by the attachTo.element option.

To address this, I implemented an additional option, extraHighlights, in the StepOptions, along with an extra attribute in the Step object. While I saw previous attempts to add multi-highlight functionality (which suggested modifying the attachTo option to accept an array), I believe adding a separate option is more reasonable.

Modifying the existing attachTo option is not ideal because it also handles the element targeting for the tooltip and the arrow placement. Refactoring this option to support an array would require reworking the entire logic for these aspects, which could introduce unnecessary complexity.

An example of the proposed approach using an array for attachTo would look something like this:

attachTo: [
  {
    element: '.hero-including',
    on: 'bottom'
  },
  {
    element: '.pricing',
  },
  {
    element: '.docs',
  },
  {
    element: '#box-1',
  },
  {
    element: '#box-2',
  },
]

In this structure, there would only be a single element property for each object, which seems redundant.

Here's the current implementation with the new extraHighlights option:

const step = new Step(tour, {
  attachTo: {
    element: '.hero-including',
    on: 'bottom'
  },
  extraHighlights: [ '.pricing', '.docs', '#box-1', '#box-2' ],
  ...moreOptions
});

Also closes #2487

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shepherd-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 4:38pm
shepherd-landing	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 4:38pm

[vercel]

@YuunsGit is attempting to deploy a commit to the shipshapecode Team on Vercel.

A member of the Team first needs to authorize it.

[yunusemre-dev]

Added .replace(/\s/g, '') to remove the redundant space from overlay path string returning from makeOverlayPath

The unit tests should be fine now!

[yunusemre-dev]

@RobbieTheWagner bump for notification
Sorry if bothered, it would be awesome to have this feature soon 🙂

[RobbieTheWagner]

Hi @YuunsGit, thanks for the PR! Could you please add some test coverage for this?

[yunusemre-dev]

Hi @YuunsGit, thanks for the PR! Could you please add some test coverage for this?

Hi @RobbieTheWagner, sure thing! Implemented tests for the parts that I've modified or added.

[yunusemre-dev]

I just noticed a mistake in the content of the step I added to the demo tour on the landing page, so I just removed my modifications on the landing page, thinking they weren't needed for this feature. Fyi, @RobbieTheWagner

[yunusemre-dev]

Also, @RobbieTheWagner, I just saw your comment on the other PR regarding this feature and that was such an edge case haha! I modified the code so that if an element to be highlighted is contained by another element it will be skipped.

And with this change this PR closes #2487

[RobbieTheWagner]

Forgive my ignorance, but why do we want to add these classes to the extra highlighted elements?

[yunusemre-dev]

I thought we would want the same classes applied to the target element (attackTo.element) on the extra highlighted elements as well.

[RobbieTheWagner]

I'm not sure if we do? We just want the cutout overlay I would assume? I am not sure what the classes do anymore though.

[yunusemre-dev]

For example, one of the classes I added disables the click event if canClickTarget option is false. I guess it's needed since we're cutting out the overlay and the extra highlighted elements will be exposed as well.

[RobbieTheWagner]

This is looking great @YuunsGit! I do think we should include an example in the demo and/or provide a cookbook example for this, so folks can find out more about it.

[yunusemre-dev]

This is looking great @YuunsGit! I do think we should include an example in the demo and/or provide a cookbook example for this, so folks can find out more about it.

@RobbieTheWagner I added an extra step to the landing page demo as well as a cookbook example. I removed the old workaround in the cookbook for highlighting multiple elements in favor of the new implementation.

[earlwilson]

@RobbieTheWagner Do you have a date planned for this to be rolled out?

[RobbieTheWagner]

@RobbieTheWagner Do you have a date planned for this to be rolled out?

@earlwilson I will try to get it merged soon. Apologies for the delay!

[RobbieTheWagner]

Thank you so much for the PR @YuunsGit! 🎉