New Component Request: Labels

Please use this template to request a new component.
If you're not sure whether a component already exists,
go ahead and file the issue here, and the team will triage appropriately.

Fill in as many sections as possible below.

Please describe the use case(s) for this component

I would like a component to label things in the Glean Dictionary, similar to GitHub labels. Examples of where we do this already (using a mostly-unstyled adhoc component):

Annotating metrics in the application

Annotating applications on the front page

Please provide any designs or previous implementations of the proposed component

The rally website has developed an adhoc version of this:

In our case I don't think we'd want to capitalize the text (since case has a strong semantic meaning).

Please describe what this component does in the following conditions

• When set in front of a dark background

It would be cool if the colors adapted themselves when in dark mode, similar to GitHub:

... but I don't know if that's required.

• When set in front of a light background

Probably the most common use case, default behaviour here.

• When viewed in a mobile/responsive viewport

I don't think we'd do anything different, labels tend to be small.

Please provide examples of this type of component in use in non-Mozilla web properties

Add screenshots and links to web properties that use a similar component.

GitHub labels are an example of existing best practice:

https://styleguide.github.com/primer/components/labels/

Is the development of this component a blocking dependency for other work? Please explain if so

This doesn't block anything strictly, but it would be very nice to have (labels are a key component in the Glean Dictionary, and are only going to get more important over time).

The request does not identify implementation files, tests, or an entry point. Begin by reviewing the existing component structure in the Mozilla Protocol repository and the linked GitHub and Rally examples, then define the component’s behavior, styling, dark-mode treatment, and responsive expectations before implementation.