Interactive tag ☂️

[MaxHam]

The problem

I am from the IBM Cloud PAL team and reviewed differences between the Carbon Tag component and the Cloud Tag component. The only difference is that the Carbon Tag does not provide a "clickable" design. Meaning when you add an onClick handler to the component it is just rendered with default HTML button design.
Before overwriting the Tag component in the Cloud PAL repository, I want to propose adding a click state for the Carbon Tag component.
There are a few use cases for the click state for the tags in the Cloud context and I think a clickable state could be useful for other use cases as well.

The solution

A solution could be adding styles for the "clickable" Tag state.

As reference I can add the design of Cloud PALs Tag. This is just an example how it could look like.
I am open for feedback to this proposal and also about the design.

Examples

Application/PAL

Cloud PAL

Business priority

Medium Priority = upcoming release but is not pressing

Code of Conduct

• I agree to follow this project's Code of Conduct

Tasks

Beta Give feedback

1. Interactive tag: audit, research, design iterations #13305
   adopter: PAL component: tags proposal: accepted role: design ✏️ type: enhancement 💡 +5
   
2. Interactive tag: final spec #15227
   adopter: PAL component: tags proposal: accepted role: design ✏️ type: enhancement 💡 +5
   
3. Interactive tag: usage and style image docs #15546
   component: tags role: design ✏️ type: docs 📖 type: enhancement 💡 +4
   
4. Interactive tag: Figma kit carbon-design-kit#668
   kit: figma role: design ✏️ type: enhancement 💡 version: 11 +4
   
5. Interactive tag: Usage and Style tab docs carbon-website#3449
   component: tags role: design ✏️ type: docs 📖 +3
   
6. Interactive tag: Selectable Tag Implementation #13337
   adopter: PAL component: tags proposal: accepted role: dev 🤖 type: enhancement 💡 +5
   
7. Interactive tag: Operational Tag Implementation #15529
   adopter: PAL component: tags proposal: accepted role: dev 🤖 type: enhancement 💡 +5
   
8. Interactive tag: Accessibility tab docs carbon-website#3914
   component: tags role: design ✏️ type: docs 📖 type: enhancement 💡 +4
   
9. docs: add tag component overflow guidance carbon-website#3959
   component: tags role: visual 🎨 type: docs 📖 type: enhancement 💡 +4
   
10. [Feature Request]: change tag title overflow content to truncate and ellipsis #15893
    component: tags role: dev 🤖 type: enhancement 💡 +3
    

[tay1orjones]

Thanks for this suggestion! The last time this was proposed it seemed like there was interest in an "interactive" or "selectable" tag variant, #7592

On the technical side, this would have a few implications as it would essentially be a new type of button.

• The element would need to change from div to button
• All interactive states would need designed - hover, focus, active, etc.
• Figure out how to handle the existing filter prop. Interactive elements can't be nested because screen readers ignore them. So at first glance these two may be incompatible unless we change the x button to be a sibling element and use styling to place it properly overlaid the tag.
• As you mentioned, an onClick prop would need to be added to proptypes
• It may need an href prop added as well?
• Based on the above changes significantly deviating from the existing component, we would need to consider making this it's own component. Perhaps TagButton or something.

[MaxHam]

Hi,

• looking at the code the component already switches from a div to a button element when adding an onChange prop.
• I think it should not be possible to have a filter and selectable state at the same time. Since it would nest two buttons when you add onChange and filter I think it should not be allowed to add both.
• Here you can find a quick summary how the clickable tag is used in the Cloud environment at the moment. It also shows the interactive states. Invision Board

I hope that helps understanding the use cases we had in mind.

[sstrubberg]

We need to define the "click" behavior. The tags in the Freehand are different than the tags in the issue. Recommend ya'll head to Design Office Hours and chat with our designer about this.

Also there's a lot of undocumented implementation in this component that we could revisit once the designs the hardened.

Thanks for bringing this to our attention and we looking forward to working with you!

[aagonzales]

@sstrubberg we talked to them in office hours and this is something we want to take on in the core library. There is additional design exploration and spec-ing that will need to happen. We want to collaborate with the cloud pal team to get this done and they have said they are also willing to contribute.

From @laurenmrice

My understanding is we have three different kinds of tags:
1 Our normal tag (read-only and filterable)
2 Clickable tag (navigational)
3 Selectable tag (on or off, like we have on platform)
And all of them need to have their distinct visual differences for their states.

The full work stream would include:

• Design spec for variations
• Website docs
• Code (contributed?)
• Kit work

Do we want to take this issue to refinement? Or set up a workstream kick-off with Max and team

---

Related discussion from Gower.
We have also previously talked about clickable tags with Zak Crapo

[skcele]

Thanks Anna! Looking forward to hearing how we can best collaborate with y'all. :)

Some additional notes from @mbgower on a possible interactive state I wanted to capture in GH:

• stroke around interactive
• offset focus indicator (not abutted directly against tile border OR thicker 2px)
• when/why is the tag interactive vs read-only? Need to define use cases (visually distinct forms of link, toggle button, etc)
• differentiation from a tag which is ONLY deletable (in which case, only the X needs to be interactive, and I don’t think it needs the stroke?)

Exploration from the call:

[sstrubberg]

@sstrubberg we talked to them in office hours and this is something we want to take on in the core library. There is additional design exploration and spec-ing that will need to happen. We want to collaborate with the cloud pal team to get this done and they have said they are also willing to contribute.

From @laurenmrice

My understanding is we have three different kinds of tags:
1 Our normal tag (read-only and filterable)
2 Clickable tag (navigational)
3 Selectable tag (on or off, like we have on platform)
And all of them need to have their distinct visual differences for their states.

The full work stream would include:

• Design spec for variations
• Website docs
• Code (contributed?)
• Kit work

Do we want to take this issue to refinement? Or set up a workstream kick-off with Max and team

Related discussion from Gower. We have also previously talked about clickable tags with Zak Crapo

Let's do a little of both. Maybe a kick-off call where we refine and scope out the work. It'll be good for everyone to get on the same page.

[aagonzales]

Figma file