New Tag Overflow

[guidari]

Closes #15893
This reference the old PR

This PR will add the ellipses to tags that have a long text. When the ellipses is active the Tooltip will added so the user can read the whole tag.

The logic to use the text prop in the primitive component couldn't be applied here because of the difference between the way the Tooltip would be displayed in the Dismissable and ReadOnly Tags.

Changelog

New

• max-inline-size to tags of 208px.
• Tooltip added when ellipses is active in a Tag.
• Focus is active in Read-only and Dismissible tag if the ellipses is active.
• Added prop text to Interactive tags. It will avoid the user to add a children inside the InteractiveTag.
• ReadOnly tag is using DefinitionTooltip and the rest of the tags are using Tooltip

Removed

• Remove children prop from interactive tags.

Testing / Reviewing

• Go to all Tags variants to test the Ellipses and Tooltip functionality.
• Validate if the prop text make sense

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	29081a1
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/66463e809d09f600084626c9
😎 Deploy Preview	https://deploy-preview-16437--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[laurenmrice]



Looking really good @guidari ! Just a couple things below and then it should be good to go! Thank you for all of your patience and help with this work! ⭐️

---



Tag (stable)

Read only story

• The red tag that is truncated does not have the correct text color. The color should be $tag-color-red. The text is also sitting too high in the container, it should be vertically center. (This looks like a Firefox bug specifically.)
• The cursor should be the arrow and not the pointer. I am also not seeing the browser based tooltip on hover in Chrome and Firefox. It appears in Safari.

Tag (unstable)

Dismissible story

• When hovering over the text in the tag, the cursor should be an arrow. It only should turn to a pointer cursor when it hovers over the close icon area.
• Disabled state: The truncated tags border gets removed, it should still be present in the disabled state like the other tags.
• Disabled state: Parts of the tag in the first interactive example is still interactive but should not be.

Operational story

• The browser tooltip text says “aaa” but it should say the full title of the tag.

Selectable story

• Looks great!

[laurenmrice]

Looks good! Thank you @guidari ⭐️

[alisonjoseph]

This is looking great, just seeing some weirdness when you click on Operational or Selectable Tags with the tooltip flashing.

Screen.Recording.2024-05-16.at.8.52.29.AM.mov

[carbon-automation]

Hey there! v11.58.0 was just released that references this issue/PR.