Tag - Text truncation for overflow fix

[dchyun]

📌 Summary

This PR examines the overflow issue present when text wraps to > 3 lines, and solves it by forcing all text to be one line, and have a character limit of 20 characters before being truncated.

🛠️ Detailed description

📸 Screenshots

🔗 External links

Jira ticket: HDS-4317
Figma file: [if it applies]

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Jan 22, 2025 1:50pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jan 22, 2025 1:50pm

[majedelass]

This is looking great, although I did find an interesting "bug"

The tooltip is still there even if the text is fully revealed. Wonder if there is a way to fix this?

UPDATE: It looks like something that was once truncated, but then isn't will have a tooltip. We should also check screen reader behavior. Does the text get read out twice or just once? I think we can loop in the entire team for A11Y

[dchyun]

This is looking great, although I did find an interesting "bug"

The tooltip is still there even if the text is fully revealed. Wonder if there is a way to fix this?

Did you notice this after doing some resizing of the page, or on load? One open issue with the fix is that the tooltip will be added if the text goes from not cut off to cut off on a resize, but not removed if the text goes from cut off to shown.

I figure this isn't a use case that will come up often as users aren't usually resizing their browser back and forth, but will see if I can find some fix.