Add Badge pattern

[davidkudera]

Currently, there is no badge component.

Spectrum: https://spectrum.adobe.com/page/badge/
Spectrum CSS: https://opensource.adobe.com/spectrum-css/label.html

---

I'm not sure if the Spectrum CSS Label is compatible with the Spectrum Badge or if it even matters... I can see two possible ways of how to implement this:

1. Wait with this issue until [SDL, Badge, 1.0.0] Add "Badge" component - Make a prototype spectrum-css#598 is done
2. Implement it based on the current Label component and change it later to use the new Badge component

The name should be (I think) in both cases <sp-badge>. I could also probably help by preparing a PR with an initial implementation.

[Westbrook]

Agreed, this will be a good add. We're working through the a pending release of Spectrum CSS output, and then if you interested in taking a swing at this, we'd love to see it. If not, I could see someone getting into it in the next couple of months. Thoughts?

[davidkudera]

@Westbrook Cool, I'll send a PR. Is there some issue in Spectrum CSS I can subscribe to, to be notified when your work is done? Or is the issue I send above?

[Westbrook]

I believe that is happening in adobe/spectrum-css#1138 but I’ll double check with their team!

[hunterloftis]

For visibility - we have a branch with a first draft here: https://hunterloftis-add-badge--spectrum-web-components.netlify.app/storybook/?path=/story/badge--default

The Badge design spec is going through some revisions right now; I'll integrate any changes into the above component and open a PR once the spec is stable.

[castastrophe]

I was hoping to follow-up on this component - it's used in the Account Menu designs and I would rather pull it from SWC than create a UEC element for it.

[hunterloftis]

@castastrophe sorry for the delay getting back to you; I'm catching up on GH notifications today.

As long as @Westbrook and @najikahalsema are 👍 , I can update this branch and ship a web component that matches the current CSS implementation.

The spec question is basically: should (can) a badge be interactive? Or is it purely informational? The hover-state visual cue suggests interactivity, and the spec mentions interactivity, but it's not currently an accessibly interactive component (the CSS implementation is a span).

Along those same lines: if a badge can be interactive, is it sufficiently different from an action button?

action-button:

badge:

If a badge can be interactive, then I'd like to add an interactive attr that wraps them in <button>s with cursor: pointer. But I could ship the current version in the short term and change the implementation later if necessary.

@castastrophe, how are badges used in the designs you're working on? Are they interactive, or are they informational?

[castastrophe]

@hunterloftis They are informational at the moment though I imagine that could evolve over time.

Admin badge

The admin badge is visible to both contract owners (primary admins) or secondary admins, and serves as a reminder of their special role.