Coachmark component

[CrookedGrin]

What issue are you having?

My team has a need for a coachmark component, like this one in Adobe Spectrum: https://opensource.adobe.com/spectrum-web-components/components/coachmark/. Coachmarks are used to guide users to a specific place on the screen, similar to a pulsing badge, but transparent or hollow so they can be positioned above other elements. An example of usage would be an onboarding flow.

Describe the solution you'd like

Since the "pulse" animation for the badge already looks basically like what we'd want from a coachmark, we can just add a new parameter to Badge to get it to render as a coachmark. This element can then be placed above other elements. For the specific use case of a button (which currently positions the badge in the upper right), we can instead position the coachmark in the center.

Describe alternatives you've considered

The badge almost works for this use case as-is, but because it's filled with a solid background, it's not suitable for floating on top of other elements.

I've already created a PR: #901

[claviska]

I'm pasting my response to your PR here since I didn't notice this issue was created after the PR. Apologies for the confusion!

---

I'm open to introducing a coachmark component, but I'd prefer not to conflate badge with coachmark since they have very different usages and meanings. I don't believe there are any accessibility concerns with your approach, since coachmarks as primarily visual, but it feels strange that they would exist in the same component.

If you're interested in speccing out a new component for this, here's some prior art:

Adobe Spectrum - https://opensource.adobe.com/spectrum-web-components/components/coachmark/
Fluent UI (React)- https://developer.microsoft.com/en-us/fluentui#/controls/web/coachmark
There's also this, which is more like a popover:

Pearson - https://ux.pearson.com/web-components/docs/web-components/coach

But that feels like we're stretching the limits of what a coachmark should do.

If you're interested in speccing this out, feel free to describe the scope and the API you're proposing and we'll go from there. Thanks!

[CrookedGrin]

Yeah, that makes sense; I was actually re-thinking it after I submitted the PR and coming to the same conclusion.

I'm about to head out of the country for a couple weeks, so I'm not sure if I'll be able to get a new PR in before I leave, but if not I'll do so when I get back.

Thanks,
Michael