Skip to content

fix: icon & shape indicator overflow#21703

Closed
timfuhrmann wants to merge 2 commits intocarbon-design-system:mainfrom
timfuhrmann:fix/indicator-overflow
Closed

fix: icon & shape indicator overflow#21703
timfuhrmann wants to merge 2 commits intocarbon-design-system:mainfrom
timfuhrmann:fix/indicator-overflow

Conversation

@timfuhrmann
Copy link
Copy Markdown
Contributor

Closes #21700

In case you want to go through with a fix for the issue above. - This prevents both labels from overflowing but to properly truncate with an ellipsis.

Note: Previously multi word labels did wrap, now they won't anymore. In case this is not expected, I suggest to remove the CSS to prevent overflow again, but keep the span and class name for users to be able to apply it themselves, if necessary. Currently the label is not accessible via CSS.

Changelog

Changed

  • Wraps labels with a span
  • Applies CSS to achieve the outcome described above

Testing / Reviewing

  • Storybook

PR Checklist

As the author of this PR, before marking ready for review, confirm you:

  • Reviewed every line of the diff
  • Updated documentation and storybook examples
  • Wrote passing tests that cover this change
  • Addressed any impact on accessibility (a11y)
  • Tested for cross-browser consistency
  • Validated that this code is ready for review and status checks should pass

More details can be found in the pull request guide

@timfuhrmann timfuhrmann requested a review from a team as a code owner March 4, 2026 07:37
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 4, 2026

Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit 0039e4f
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-react/deploys/69a7e159575d0d0008176bfb
😎 Deploy Preview https://deploy-preview-21703--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 4, 2026

Deploy Preview for v11-carbon-web-components ready!

Name Link
🔨 Latest commit 0039e4f
🔍 Latest deploy log https://app.netlify.com/projects/v11-carbon-web-components/deploys/69a7e15966cc5600086db557
😎 Deploy Preview https://deploy-preview-21703--v11-carbon-web-components.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@codecov
Copy link
Copy Markdown

codecov Bot commented Mar 4, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 87.59%. Comparing base (0737550) to head (0039e4f).
⚠️ Report is 37 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #21703      +/-   ##
==========================================
- Coverage   87.70%   87.59%   -0.12%     
==========================================
  Files         538      184     -354     
  Lines       43680    28694   -14986     
  Branches     6699     1766    -4933     
==========================================
- Hits        38311    25135   -13176     
+ Misses       5217     3533    -1684     
+ Partials      152       26     -126     
Flag Coverage Δ
main-packages ?
web-components 87.59% <ø> (-0.02%) ⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Copy Markdown
Contributor

@maradwan26 maradwan26 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello the CI is failing. Looks like tests need to be updated to cover this change

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Status indicator overflow ☂️

2 participants