Tag - Overflow with longer text fix

[dchyun]

📌 Summary

If merged, this PR would fix an issue observed in the Tag where the dismiss button background overflows the border when the text wraps to multiple lines.

🛠️ Detailed description

It was observed in the Tag that when the text exceeds 3 lines, the background of the dismiss button obscures the border of the element.

The fix provided solves the issue by adding overflow: hidden to the tag. When the dismiss button is focused, the focus ring of the button goes outside of the Tag border, so for the :focus state, the overflow: hidden is removed.

There are design efforts underway in HDS-4317 to provide more guidance or future changes around this issue. This PR is an immediate fix for the present issue.

📸 Screenshots

Tag - Before

Tag - After

🔗 External links

Jira ticket: HDS-3854

---

👀 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 14, 2025 9:06pm
hds-website	✅ Ready (Inspect)	Visit Preview	Jan 14, 2025 9:06pm

[KristinLBradley]

Commented with another possible option for fixing

[jorytindall]

Thanks for tackling this @dchyun ! The solution makes sense to me, and from a design perspective things are looking solid.

[heatherlarsen]

@dchyun Thanks for catching this issue! However, to distinguish between Badge and Tag, Tag should always be fully rounded (a pill shape). The current proposed solution (rectangle with a very soft border-radius) does not fit within our visual language.

I tested the Figma component and it does what you have proposed, but I don't believe we expected there to be tags that wrapped to this many lines. I'd like design to take a look at this before moving forward to see if there's an alternative solution that lets us keep the pill shape. I've created a Jira ticket to track this work, HDS-4317.

[shleewhite]

Nice!

[KristinLBradley]

@dchyun If you merge in the latest main it should take care of one of the Percy visual diffs.

The other visual diff is from the fixes you made in this PR so if those are as expected they can be approved. (Merge in main first though.)

[dchyun]

@dchyun If you merge in the latest main it should take care of one of the Percy visual diffs.

The other visual diff is from the fixes you made in this PR so if those are as expected they can be approved. (Merge in main first though.)

Rebased to main and just have the one Percy change needing review from design.

[majedelass]

I also noticed the active state looks like this:

Active is ignoring the overflow hidden parent rule.

[dchyun]

I also noticed the active state looks like this:

Active is ignoring the overflow hidden parent rule.

Thanks for catching this. Fixed the issue by updating the CSS selectors.

The issue was that we were relying on :focus-within to set the overflow: visible, but setting the focus ring with :focus-visible on the button. This led to situations where a click with a mouse would trigger the :focus-within selector, but not the :focus-visible selector.

[shleewhite]

Fix is good!

Also looks like main needs to be merged in so the multi-select super select percy test updates.

[dchyun]

Reverting back to draft until @majedelass completes their exploration of the issue from the design side in HDS-4317.

Current solution solves issues with inactive, active, and hover states, but overflow still occurs on focus.