Tag - Prevent inheritance overrides for font styles

[dchyun]

📌 Summary

This PR fixes an issue with the Tag where when the text is at a specific character length, the overflow tooltip is infinitely added and removed.

🛠️ Detailed description

This issue was originally observed in Atlas. Where when applying filters to the organization run page, the tooltip button that is added when a tag's text goes beyond a max width, was being infinitely added and removed causing the tag to flash back and forth.

This issue is caused by the fact that the font of the tag's text is changing from when it is not overflowing and using a span vs. when it is overflowing and using a button element from the Hds::TooltipButton.

In atlas there is a different default font used for button elements, that does not align to the HDS default font. This was causing the following cycle.

1. The text is rendered for a span and the text is set to overflow
2. The overflow causes the component to update to a tooltip button
3. The tooltip button has a narrower font, which causes the overflow to be removed

Setting font: inherit; insures that all fonts are standardized when both the button element and span element is used.

Steps to reproduce in Atlas

1. Run atlas locally, and go to the /settings/runs page.
2. Click on "add filters"
3. Add the filter Status -> Running -> Cost estimating
4. Observe the tag issue

External Link

• Atlas RC Test PR

---

👀 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	Apr 24, 2025 4:44pm
hds-website	✅ Ready (Inspect)	Visit Preview	Apr 24, 2025 4:44pm

[github-actions]

📦 RC Packages Published

Latest commit: d546836

Published 1 packages

@hashicorp/[email protected]

yarn up -C @hashicorp/design-system-components@rc

[didoo]

@dchyun maybe it would be worth to add a specific test/example to the showcase, to make sure there are no regressions in the future and this use case is correctly covered? (see for example how it's done in the Tooltip or RichTooltip)

[dchyun]

@dchyun maybe it would be worth to add a specific test/example to the showcase, to make sure there are no regressions in the future and this use case is correctly covered? (see for example how it's done in the Tooltip or RichTooltip)

@didoo Thanks for the suggestion. Added an inheritance section into the showcase page.

[didoo]

Left a few comments, but I think I may have found the root problem.

[didoo]

Left a couple of comment, everything is minor.

[didoo]

LGTM