[feat] interactive states for <rh-tag>

[marionnegp]

Description

Docs for the linked <rh-tag> show states for linked tags, but they have to be implemented.

We also need to consider instances where <rh-tag> acts as a button, and we may need to show a different affordance for interactivity. (For example, a tag in My Red Hat can trigger a popover.) PatternFly's tag demos currently show clickable tags and linked tags that use the same states.

Additional updates:

• When tag is used as a button, a space bar should be able to trigger it. Currently it's trigger by the enter key only.

Suggested solution

• Implement states for linked tags
• Design clickable tag states
• Make demos for linked tags and clickable tags (Currently linked tags are only shown in the color context demo.)
• Fix keyboard interactivity if it's used as a button

Screenshots

No response

Example API

Additional context

No response

[markcaron]

Since we currently have linkable <rh-tag> elements, I'm thinking it wouldn't be a stretch to provide the option for clickable through a similar approach.

Linkable:

<rh-tag href="#">

Clickable:

<rh-tag action="{namedAction}">

Where {namedAction} could be a string like popovertarget="popoverID"

And, in the template, we'd just embed a <button popovertarget="popoverID"> instead of <a href="#">.

Or maybe click="" makes more sense?

The attributes would be an either-or situation, as you couldn't have both at the same time. One would take precedence.