Skip to content

fix (core/tab-item): show ellipsed text for layout=stretched (Ix-68) - #2680

Merged
nuke-ellington merged 9 commits into
mainfrom
fix/tab-overflow-layout-streched
Aug 6, 2026
Merged

nuke-ellington merged 9 commits into
mainfrom
fix/tab-overflow-layout-streched

Conversation

@JonaMaiss

@JonaMaiss JonaMaiss commented Jul 29, 2026 •

Copy link
Copy Markdown
Collaborator

💡 What is the current behavior?

Setting layout=stretched for ix-tabs does not ellipse the text correctly if it has to little space.

GitHub Issue Number: EIX-68

🆕 What is the new behavior?

Text ellipses now correctly when space is not enough and property layout=stretched is set.

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

  • 🦮 Accessibility (a11y) features were implemented
  • 🗺️ Internationalization (i18n) - no hard coded strings
  • 📲 Responsiveness - components handle viewport changes and content overflow gracefully
  • 📕 Add or update a Storybook story
  • 📄 Documentation was reviewed/updated siemens/ix-docs
  • 🧪 Unit tests were added/updated and pass (pnpm test)
  • 📸 Visual regression tests were added/updated and pass (Guide)
  • 🧐 Static code analysis passes (pnpm lint)
  • 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

Summary by CodeRabbit

Bug Fixes

  • Improved stretched tab items so long labels remain constrained to the available space.
  • Long tab text now truncates with an ellipsis instead of overflowing or disrupting the layout.
  • Improved consistency when displaying tabs with a mixture of short and lengthy labels.
  • Added coverage for stretched tabs to help ensure reliable text truncation across supported layouts.

@changeset-bot

changeset-bot Bot commented Jul 29, 2026 •

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 755de83

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages
Name Type
@siemens/ix Patch
@siemens/ix-angular Patch
@siemens/ix-docs Patch
@siemens/ix-react Patch
@siemens/ix-vue Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@netlify

netlify Bot commented Jul 29, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for ix-storybook ready!

Name Link
🔨 Latest commit 755de83
🔍 Latest deploy log https://app.netlify.com/projects/ix-storybook/deploys/6a747505c43eda000819b796
😎 Deploy Preview https://deploy-preview-2680--ix-storybook.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@coderabbitai

coderabbitai Bot commented Jul 29, 2026 •

Copy link
Copy Markdown

Review Change Stack

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (2)
  • testing/visual-testing/__screenshots__/tests/tabs/tabs.e2e.ts/tabs-stretched-1-chromium---classic-dark-linux.png is excluded by !**/*.png
  • testing/visual-testing/__screenshots__/tests/tabs/tabs.e2e.ts/tabs-stretched-1-chromium---classic-light-linux.png is excluded by !**/*.png

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8d89e1d9-8ac6-4941-82f1-a2e2dc3f0a20

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

The stretched tab item styling now constrains nested div elements and applies ellipsis truncation. A visual fixture and end-to-end test verify long-label behavior. A patch changeset documents the fix.

Changes

Tab item styling

Layer / File(s) Summary
Nested stretched content truncation
packages/core/src/components/tab-item/tab-item.scss, .changeset/curvy-swans-rescue.md
Nested div elements within stretched tab items now use max-width: 100% and the text-truncation.ellipsis mixin. The changeset records the patch release.
Stretched tab truncation validation
testing/visual-testing/tests/tabs/stretched/index.html, testing/visual-testing/tests/tabs/tabs.e2e.ts
The visual fixture adds a long stretched-tab label. The end-to-end test checks text overflow and captures a visual snapshot.

Estimated code review effort: 1 (Trivial) | ~2 minutes

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title clearly identifies the core tab-item fix for ellipsized text in stretched layout, which matches the main changes.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/tab-overflow-layout-streched

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/core/src/components/tab-item/tab-item.scss`:
- Around line 118-122: Add a changeset for the user-facing styling fix in the
affected core package, describing the tab text truncation behavior and selecting
the appropriate release bump; do not treat this change as internal-only.
- Around line 118-122: Add regression coverage for the ellipsis behavior
introduced in the tab-item styling by extending the tabs component tests near
the existing stretched-class case. Render an oversized label, constrain the
relevant element, and assert that its rendered truncation behavior is applied
rather than only checking the stretched class; also add the required axe-based
accessibility assertion for the component test.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 8abede4c-95ac-49d4-8959-4473e76fc08a

📥 Commits

Reviewing files that changed from the base of the PR and between 60d38b5 and 8615203.

📒 Files selected for processing (1)
  • packages/core/src/components/tab-item/tab-item.scss

@flxlst09

Copy link
Copy Markdown
Collaborator

EIX-68

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.changeset/curvy-swans-rescue.md:
- Around line 5-6: Update the changeset text to use “ellipsized” and “too long”
while preserving the existing description of the stretched tab-item layout fix.
🪄 Autofix

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 4845ce5f-b9bb-4ce6-827c-49f1d0e3eafd

📥 Commits

Reviewing files that changed from the base of the PR and between 8615203 and c82f640.

📒 Files selected for processing (1)
  • .changeset/curvy-swans-rescue.md

Comment thread .changeset/curvy-swans-rescue.md Resolved
lzeiml
lzeiml previously approved these changes Aug 5, 2026
@nuke-ellington nuke-ellington added this to the 5.2.0 milestone Aug 6, 2026
nuke-ellington
nuke-ellington previously approved these changes Aug 6, 2026
@sonarqubecloud

sonarqubecloud Bot commented Aug 6, 2026

Copy link
Copy Markdown

@nuke-ellington
nuke-ellington merged commit 5c43ed5 into main Aug 6, 2026
19 checks passed
@nuke-ellington
nuke-ellington deleted the fix/tab-overflow-layout-streched branch August 6, 2026 12:51
@github-actions github-actions Bot mentioned this pull request Aug 6, 2026
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.

4 participants