Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
JonaMaiss wants to merge 1 commit into
base: main
Choose a base branch
from
Open

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/core/src/components/tab-item/tab-item.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,11 @@
flex-basis: 100%;
width: 100%;
@include text-truncation.ellipsis;

@lzeiml lzeiml Jul 31, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

ellipsis truncation on the host can be removed i think


div {
max-width: 100%;
@include text-truncation.ellipsis;
}
Comment on lines +118 to +122

@coderabbitai coderabbitai Bot Jul 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win

Add a changeset for this user-facing styling fix.

This changes visible tab behavior and addresses a user-impacting bug. Add a changeset scoped to the affected core package, or explicitly justify why the change is internal-only.

As per path instructions, changesets are required for “styling/theming changes” and “bug fixes with user impact.”

🤖 Prompt for 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.

In `@packages/core/src/components/tab-item/tab-item.scss` around lines 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.

Source: Path instructions

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Add regression coverage for actual truncation.

The supplied test at packages/core/src/components/tabs/test/tabs.ct.ts:339-369 only verifies that the stretched class is applied; it would pass even if ellipsis styling regressed. Add a component test with an oversized label that verifies the constrained element truncates, plus the required axe-based coverage.

As per path instructions, packages/core/** requires accessibility coverage with axe-based component tests where behavior/UI changed.

🤖 Prompt for 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.

In `@packages/core/src/components/tab-item/tab-item.scss` around lines 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.

Source: Path instructions

}

:host(.selected:not(.disabled)) {
Expand Down
Loading