carbon: Tag: when a Tag is actionable(has an onClick), the pointer icon does not change

Title line template: Tag: when a Tag is actionable(has an onClick), change the pointer icon

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

When a Tag has a filter property, the mouse icon will change when hovering over the Tag. <Tag type="red" title="Clear Filter" filter> Red </Tag> If a Tag does not have the filter property but does have an actionable property(onClick), the mouse will NOT change when hovering over the Tag. <Tag type="red" title="Clear Filter" onClick={()=>alert("red")}> Red </Tag>

I expected the mouse icon to change when actionable in the same way as when filter property is set.

This happens in any browser. This happens in any version of the Carbon Design System.

Steps to reproduce the issue

1. Create a tag like <Tag type="red" title="Clear Filter" filter> Red </Tag>
2. Create a tag like <Tag type="red" title="Clear Filter" onClick={()=>alert("red")}> Red </Tag>
3. Hover over each and observe the icon changing(or not).

Use case

The product has a search input. The product has three suggestions for searching “Platform”, “Runtimes”, and “Services”. It shows these as clickable tags for quick filtering. This is on the Carbon Design System Tag page just above the Live Demo. https://www.carbondesignsystem.com/components/tag/usage#live-demo

Work arounds

The child of Tag is a node, so it could be coded as an input. Styling could be applied, to account for the hover. Always create a filter tag - and apply display: none; to the filter button when not a filter tag. All of these are client work and they come with their own problems.