fix (core/tab-item): show ellipsed text for layout=stretched (Ix-68) - #2680
fix (core/tab-item): show ellipsed text for layout=stretched (Ix-68)#2680JonaMaiss wants to merge 1 commit into
Conversation
|
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthroughThe stretched tab item styling now constrains nested ChangesTab item styling
Estimated code review effort: 1 (Trivial) | ~2 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
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
📒 Files selected for processing (1)
packages/core/src/components/tab-item/tab-item.scss
|
|
||
| div { | ||
| max-width: 100%; | ||
| @include text-truncation.ellipsis; | ||
| } |
There was a problem hiding this comment.
📐 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
|
EIX-68 |
| @@ -115,6 +115,11 @@ | |||
| flex-basis: 100%; | |||
| width: 100%; | |||
| @include text-truncation.ellipsis; | |||
There was a problem hiding this comment.
ellipsis truncation on the host can be removed i think
3 participants
💡 What is the current behavior?
Setting layout=stretched for ix-tabs does not ellipse the text correctly if it has to little space.
https://siemens.ghe.com/foundation/ix-design-system/issues/68
GitHub Issue Number: #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):
pnpm test)pnpm lint)pnpm build, changes pushed)👨💻 Help & support
Summary by CodeRabbit