fix: the inline-truncation should only work as a direct children of x… by PupilTong · Pull Request #2287 · lynx-family/lynx-stack

PupilTong · 2026-03-02T09:38:23Z

…-text

Summary by CodeRabbit

Bug Fixes
- Inline-truncation now only applies when it is a direct child of x-text, fixing inconsistent truncation in nested layouts for more predictable text display.
Tests
- Added a test and fixture validating text-maxline truncation with inline-truncation elements inside view contexts.

Checklist

Tests updated (or not required).
Documentation updated (or not required).
Changeset added, and when a BREAKING CHANGE occurs, it needs to be clearly marked (or not required).

…-text

changeset-bot · 2026-03-02T09:38:28Z

🦋 Changeset detected

Latest commit: 999e050

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

This PR includes changesets to release 2 packages

Name	Type
@lynx-js/web-elements	Patch
@lynx-js/web-core-wasm	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

coderabbitai · 2026-03-02T09:38:33Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between d078176 and 999e050.

📒 Files selected for processing (1)

.changeset/legal-snails-mix.md

📝 Walkthrough

Walkthrough

Modified inline-truncation detection to only match direct children (using > CSS selector) across TypeScript, CSS, and test fixtures. Changes include a new helper method in XTextTruncation, updated CSS selectors in x-text.css, a new HTML test fixture, and corresponding test specification.

Changes

Cohort / File(s)	Summary
Changeset Entry `.changeset/legal-snails-mix.md`	Added changeset documenting patch version fix for inline-truncation direct child matching constraint.
TypeScript XText Components `packages/web-platform/web-elements/src/elements/XText/InlineTruncation.ts`, `packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts`	Narrowed CSS.supports check to direct child selector; introduced private helper `#findValidInlineTruncation()` and replaced descendant-based detection logic with a scoped direct-child query.
Styling `packages/web-platform/web-elements/src/elements/XText/x-text.css`	Replaced `has(inline-truncation)` with `has(> inline-truncation)` in multiple selectors affecting text-maxline and truncation behavior; minor selector formatting changes.
Tests `packages/web-platform/web-elements/tests/fixtures/x-text/text-maxline-truncation-in-view.html`, `packages/web-platform/web-elements/tests/web-elements.spec.ts`	Added HTML fixture exercising x-text `text-maxline` truncation with an `inline-truncation` child inside an `x-view`; added test spec that loads the fixture and captures a screenshot.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

Sherry-hue
HuJean

Poem

🐰 A rabbit hops through selectors deep,
Where > now guards the truncation heap,
Direct children only shall pass the test,
From TS to CSS, the checks are dressed,
Nibble-nudge — the patch is snug and neat.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly summarizes the main change: restricting inline-truncation behavior to direct children of x-text, which aligns with all file modifications across CSS, TypeScript, and test changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

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 and usage tips.}

codecov · 2026-03-02T09:42:04Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

coderabbitai

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In @.changeset/legal-snails-mix.md:
- Line 5: The release note text in .changeset/legal-snails-mix.md contains a
grammatical error: replace the phrase "fix: the inline-truncation should only
work as a direct children of x-text" with the corrected wording, e.g. "fix: the
inline-truncation should only work as a direct child of x-text" (or "as direct
children of x-text" if plural is intended) so the changeset message is
grammatically correct and user-facing.

In `@packages/web-platform/web-elements/src/elements/XText/x-text.css`:
- Around line 217-225: The selector and comment violate stylelint: replace the
invalid combined :not([tail-color-convert="false"], :has(> inline-truncation))
with two separate :not() calls like
:not([tail-color-convert="false"]):not(:has(>inline-truncation)) to match the
earlier pattern used for x-text[text-maxline="1"] and remove the extra space
after the child combinator so it reads :has(>inline-truncation); also fix the
block comment spacing to use single spaces like /* text-wrap chrome 114, firefox
121, safari 17.4 */ to satisfy comment-whitespace-inside.

In `@packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts`:
- Around line 53-55: The private method `#findValidInlineTruncation`() currently
only queries ':scope > inline-truncation' which misses valid cases where the
inline-truncation is wrapped (e.g., ':scope > lynx-wrapper >
inline-truncation'); update `#findValidInlineTruncation`() to return the
inline-truncation element either directly or when nested immediately inside a
lynx-wrapper (check both ':scope > inline-truncation' and ':scope > lynx-wrapper
> inline-truncation'), and apply the same broadened selector/logic to the other
occurrence around the code referenced at lines 153-156 so both places
consistently detect wrapper-based truncation nodes (use the method name
`#findValidInlineTruncation` to locate the code to change).

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 88fbad8 and d078176.

⛔ Files ignored due to path filters (3)

packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-text/text-maxline-truncation-in-view/index-chromium-linux.png is excluded by !**/*.png
packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-text/text-maxline-truncation-in-view/index-firefox-linux.png is excluded by !**/*.png
packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-text/text-maxline-truncation-in-view/index-webkit-linux.png is excluded by !**/*.png

📒 Files selected for processing (6)

.changeset/legal-snails-mix.md
packages/web-platform/web-elements/src/elements/XText/InlineTruncation.ts
packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts
packages/web-platform/web-elements/src/elements/XText/x-text.css
packages/web-platform/web-elements/tests/fixtures/x-text/text-maxline-truncation-in-view.html
packages/web-platform/web-elements/tests/web-elements.spec.ts

.changeset/legal-snails-mix.md

packages/web-platform/web-elements/src/elements/XText/x-text.css

packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts

Copilot

Pull request overview

This PR fixes inline-truncation behavior in x-text so that custom truncation logic only applies when inline-truncation is a direct child of x-text, and adds a regression screenshot test to cover the case where inline-truncation is nested inside an x-view.

Changes:

Restrict inline-truncation detection to :scope > inline-truncation in JS and to :has(> inline-truncation) in CSS.
Add a new Playwright screenshot fixture + test case for text-maxline-truncation-in-view.
Add/update Linux browser snapshots (Chromium/Firefox/WebKit) and a changeset entry.

Reviewed changes

Copilot reviewed 6 out of 9 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/web-platform/web-elements/src/elements/XText/x-text.css	Updates `:has()` selectors to only match direct-child `inline-truncation`, preventing nested elements from disabling default ellipsis behavior.
packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts	Updates inline-truncation detection to only consider direct children via `:scope > inline-truncation`.
packages/web-platform/web-elements/src/elements/XText/InlineTruncation.ts	Updates feature-detection selector to the new direct-child `:has(> …)` form.
packages/web-platform/web-elements/tests/fixtures/x-text/text-maxline-truncation-in-view.html	New fixture demonstrating nested `inline-truncation` inside `x-view` under `x-text`.
packages/web-platform/web-elements/tests/web-elements.spec.ts	Registers the new screenshot test case.
packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-text/text-maxline-truncation-in-view/index-chromium-linux.png	New Chromium snapshot for the new fixture.
packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-text/text-maxline-truncation-in-view/index-firefox-linux.png	New Firefox snapshot for the new fixture.
packages/web-platform/web-elements/tests/web-elements.spec.ts-snapshots/x-text/text-maxline-truncation-in-view/index-webkit-linux.png	New WebKit snapshot for the new fixture.
.changeset/legal-snails-mix.md	Patch changeset documenting the fix.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts

.changeset/legal-snails-mix.md

codspeed-hq · 2026-03-02T10:02:04Z

Merging this PR will degrade performance by 11.85%

⚡ 2 improved benchmarks
❌ 1 regressed benchmark
✅ 69 untouched benchmarks
⏩ 3 skipped benchmarks¹

⚠️ Please fix the performance issues or acknowledge them on CodSpeed.

Performance Changes

	Benchmark	`BASE`	`HEAD`	Efficiency
⚡	`basic-performance-image-100`	10.6 ms	8.2 ms	+28.54%
⚡	`basic-performance-nest-level-100`	7.4 ms	6.9 ms	+6.21%
❌	`transform 1000 view elements`	40.8 ms	46.2 ms	-11.85%

_{Comparing PupilTong:p/hw/x-text-inline-truncation-direct-kid (999e050) with main (06ff838)}

3 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

relativeci · 2026-03-02T10:03:11Z

Web Explorer

#7913 Bundle Size — 383.53KiB (-0.04%).

999e050(current) vs 06ff838 main#7900(baseline)

Bundle metrics

4 changes

1 regression

1 improvement

	Current #7913	Baseline #7900
Initial JS	`154.63KiB`(`-0.09%`)	`154.78KiB`
Initial CSS	`35.1KiB`(`+0.02%`)	`35.09KiB`
Cache Invalidation	`49.49%`	`0%`
Chunks	`8`	`8`
Assets	`8`	`8`
Modules	`237`(`-0.42%`)	`238`
Duplicate Modules	`16`	`16`
Duplicate Code	`2.99%`	`2.99%`
Packages	`4`	`4`
Duplicate Packages	`0`	`0`

Bundle size by type

2 changes

1 regression

1 improvement

	Current #7913	Baseline #7900
JS	`252.58KiB` (`-0.06%`)	`252.72KiB`
Other	`95.85KiB`	`95.85KiB`
CSS	`35.1KiB` (`+0.02%`)	`35.09KiB`

Bundle analysis report Branch PupilTong:p/hw/x-text-inline-tru... Project dashboard

^{Generated by RelativeCI Documentation Report issue}

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Haoyang Wang <12288479+PupilTong@users.noreply.github.com>

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @lynx-js/devtool-mcp-server@0.5.0 ### Minor Changes - Use `@lynx-js/devtool-connector` instead of `@lynx-js/debug-router-connector`. ([#2284](#2284)) The new connector avoids using keep-alive connections, which makes the connection much more reliable. - **BREAKING CHANGE**: Remove the `./debug-router-connector` exports. ([#2284](#2284)) ## @lynx-js/web-elements@0.12.0 ### Minor Changes - feat: add `willchange` event to `x-viewpager-ng` ([#2305](#2305)) ### Patch Changes - fix: firefox `@supports(width:1rex)` ([#2288](#2288)) - fix: check computed overflow style in `getTheMostScrollableKid` to avoid treating `overflow: visible` elements as scroll containers ([#2309](#2309)) - fix: the inline-truncation should only work as a direct child of x-text ([#2287](#2287)) - fix: getVisibleCells cannot work in firefox due to contentvisibilityautostatechange not propagate list-item ([#2308](#2308)) - fix: foldview stuck issue ([#2304](#2304)) ## @lynx-js/gesture-runtime@2.1.3 ### Patch Changes - Optimize gesture callbacks and relationships to prevent unnecessary gesture registration and rerenders. ([#2277](#2277)) ## @lynx-js/react@0.116.5 ### Patch Changes - Improve React runtime hook profiling. ([#2235](#2235)) Enable Profiling recording first, then enter the target page so the trace includes full render/hydrate phases. - Record trace events for `useEffect` / `useLayoutEffect` hook entry, callback, and cleanup phases. - Log trace events for `useState` setter calls. - Wire `profileFlowId` support in debug profile utilities and attach flow IDs to related hook traces. - Instrument hydrate/background snapshot profiling around patch operations with richer args (e.g. snapshot id/type, dynamic part index, value type, and source when available). - Capture vnode source mapping in dev and use it in profiling args to improve trace attribution. - Expand debug test coverage for profile utilities, hook profiling behavior, vnode source mapping, and hydrate profiling branches. - refactor: call loadWorkletRuntime once in each module ([#2315](#2315)) ## @lynx-js/rspeedy@0.13.5 ### Patch Changes - feat: opt-in the web platform's new binary output format ([#2281](#2281)) Introduce a new flag to enable the new binary output format. Currently it's an internal-use-only flag that will be removed in the future; set the corresponding environment variable to 'true' to enable it. - Avoid generating `Rsbuild vundefined` in greeting message. ([#2275](#2275)) - Updated dependencies \[]: - @lynx-js/web-rsbuild-server-middleware@0.19.8 ## @lynx-js/lynx-bundle-rslib-config@0.2.2 ### Patch Changes - Support bundle and load css in external bundle ([#2143](#2143)) ## @lynx-js/external-bundle-rsbuild-plugin@0.0.3 ### Patch Changes - Updated dependencies \[[`c28b051`](c28b051), [`4cbf809`](4cbf809)]: - @lynx-js/externals-loading-webpack-plugin@0.0.4 ## @lynx-js/react-rsbuild-plugin@0.12.10 ### Patch Changes - Support bundle and load css in external bundle ([#2143](#2143)) - Updated dependencies \[[`59f2933`](59f2933), [`453e006`](453e006)]: - @lynx-js/template-webpack-plugin@0.10.5 - @lynx-js/css-extract-webpack-plugin@0.7.0 - @lynx-js/react-webpack-plugin@0.7.4 - @lynx-js/react-alias-rsbuild-plugin@0.12.10 - @lynx-js/use-sync-external-store@1.5.0 - @lynx-js/react-refresh-webpack-plugin@0.3.4 ## @lynx-js/web-core-wasm@0.0.5 ### Patch Changes - Updated dependencies \[[`4963907`](4963907), [`8fd936a`](8fd936a), [`0d41253`](0d41253), [`d32c4c6`](d32c4c6), [`7518b72`](7518b72), [`fca9d4a`](fca9d4a)]: - @lynx-js/web-elements@0.12.0 ## @lynx-js/externals-loading-webpack-plugin@0.0.4 ### Patch Changes - perf: optimize external bundle loading by merging multiple `fetchBundle` calls for the same URL into a single request. ([#2307](#2307)) - Support bundle and load css in external bundle ([#2143](#2143)) ## @lynx-js/template-webpack-plugin@0.10.5 ### Patch Changes - feat: allow `templateDebugUrl` to be customized via `output.publicPath` or the `beforeEncode` hook. ([#2274](#2274)) - feat: opt-in the web platform's new binary output format ([#2281](#2281)) Introduce a new flag to enable the new binary output format. Currently it's an internal-use-only flag that will be removed in the future; set the corresponding environment variable to 'true' to enable it. - Updated dependencies \[]: - @lynx-js/web-core-wasm@0.0.5 ## create-rspeedy@0.13.5 ## @lynx-js/react-alias-rsbuild-plugin@0.12.10 ## upgrade-rspeedy@0.13.5 Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

fix: the inline-truncation should only work as a direct children of x…

d078176

…-text

PupilTong marked this pull request as ready for review March 2, 2026 09:43

PupilTong requested a review from Sherry-hue as a code owner March 2, 2026 09:43

Copilot AI review requested due to automatic review settings March 2, 2026 09:43

Copilot started reviewing on behalf of PupilTong March 2, 2026 09:44 View session

coderabbitai bot added the platform:Web label Mar 2, 2026

coderabbitai bot reviewed Mar 2, 2026

View reviewed changes

.changeset/legal-snails-mix.md Outdated Show resolved Hide resolved

packages/web-platform/web-elements/src/elements/XText/x-text.css Show resolved Hide resolved

packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts Show resolved Hide resolved

Copilot AI reviewed Mar 2, 2026

View reviewed changes

packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts Show resolved Hide resolved

.changeset/legal-snails-mix.md Outdated Show resolved Hide resolved

PupilTong self-assigned this Mar 2, 2026

PupilTong and others added 2 commits March 3, 2026 11:33

Merge branch 'main' into p/hw/x-text-inline-truncation-direct-kid

f9f3dcf

Update .changeset/legal-snails-mix.md

999e050

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> Signed-off-by: Haoyang Wang <12288479+PupilTong@users.noreply.github.com>

Sherry-hue approved these changes Mar 3, 2026

View reviewed changes

PupilTong merged commit d32c4c6 into lynx-family:main Mar 3, 2026
77 of 80 checks passed

github-actions bot mentioned this pull request Mar 3, 2026

chore: Release 2026-03-09 08:57:23 #2280

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: the inline-truncation should only work as a direct children of x…#2287

fix: the inline-truncation should only work as a direct children of x…#2287
PupilTong merged 3 commits intolynx-family:mainfrom
PupilTong:p/hw/x-text-inline-truncation-direct-kid

PupilTong commented Mar 2, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

changeset-bot bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 2, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

codecov bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

codspeed-hq bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

relativeci bot commented Mar 2, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

PupilTong commented Mar 2, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Checklist

Uh oh!

changeset-bot bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coderabbitai bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Poem

Uh oh!

codecov bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

codspeed-hq bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merging this PR will degrade performance by 11.85%

Performance Changes

Footnotes

Uh oh!

relativeci bot commented Mar 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Web Explorer

#7913 Bundle Size — 383.53KiB (-0.04%).

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

PupilTong commented Mar 2, 2026 •

edited by coderabbitai bot

Loading

changeset-bot bot commented Mar 2, 2026 •

edited

Loading

coderabbitai bot commented Mar 2, 2026 •

edited

Loading

codecov bot commented Mar 2, 2026 •

edited

Loading

codspeed-hq bot commented Mar 2, 2026 •

edited

Loading

relativeci bot commented Mar 2, 2026 •

edited

Loading