-
Notifications
You must be signed in to change notification settings - Fork 1.1k
fix(core): render plain Link anchors inline so an ancestor Text clamp can truncate them - #6090
Open
parinith-web wants to merge 5 commits into
Open
fix(core): render plain Link anchors inline so an ancestor Text clamp can truncate them #6090parinith-web wants to merge 5 commits into
parinith-web wants to merge 5 commits into
Conversation
... can truncate them
The displayDeclarationsFor helper added in facebook#6038 matched an element's classList against raw selector text via String.includes, which is a substring check on hashed atomic class names (e.g. StyleX's x1a2b3c style classes). A shorter class name can be a substring of an unrelated longer one, so the check can both false-positive and false-negative depending on what else StyleX has generated for the test run. Rewrite it to walk the real CSSOM: parse each CSSStyleRule's selectorText into class tokens, compare those tokens against the element's classList by exact match, and read the declaration via rule.style.getPropertyValue('display') instead of a body-text regex. Also descends into grouping rules (e.g. @media) so nested declarations aren't missed. Flagged by Copilot review on facebook#6038: facebook#6038 (review) All 63 Link tests and 189 Text tests still pass; tsc --noEmit is clean.
...lf-clamped Link forms
parinith-web
requested review from
cixzhang,
imdreamrunner and
josephfarina
as code owners
September 6, 2026 18:18
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@meta-cla
meta-cla
Bot
added
the
CLA Signed
This label is managed by the Meta Open Source bot.
label
Sep 6, 2026
@github-actions
github-actions
Bot
added
community
Authored by a community contributor (not on the eng/design team)
needs:code-review
High-risk change (new package/component/API) — needs human code review before merge
needs:design-review
Affects visuals — Design should review
labels
Sep 6, 2026
github-actions
Bot
requested review from
cvkxx,
ernestt,
kentonquatman and
rubyycheung
September 6, 2026 18:19
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR is the same fix as #6038 (opened by @ManoharPaturi), plus one
additional commit addressing the latest review comment on that thread.
Opening this directly against
mainat @ManoharPaturi's suggestion /per our discussion.
Fixes #6021
Summary
A plain
<Text maxLines={2}><Link>...</Link></Text>silently did not truncate:the anchor was
display: inline-flex, and an inline-flex box establishes itsown formatting context that an ancestor
-webkit-line-clampcannot reach.This changes the plain anchor to
display: inlineso it participates in thesurrounding line boxes and an ancestor clamp truncates it normally. The flex
layout is preserved wherever it's load-bearing:
isExternalLink+ anchor form) stayinline-flexinline-flexdisplay="block"and self-clamping (maxLines > 0) Links stayinline-flexso their keyboard focus outline still paints (an inline anchor around a
block-level child computes a focus outline but paints nothing in Chromium)
now opt in via a new
hasBlockChildprop, for the same focus-visibilityreason — added as an explicit prop rather than introspecting
children,since this repo's
no-react-introspectionESLint rule disallowsChildren.toArray/isValidElementfor that kind of parent-child couplingDocs updated in all three variants (EN/zh/dense) for
LinkandTextcovering when ancestor-clamp truncation will/won't reach a Link.
Tests
inline, notinline-flexinline-flexinline-flexdisplay="block"→inline-flexmaxLines > 0) →inline-flexhasBlockChild(HStack + Icon composition) →inline-flexTesting
vitest run packages/core/src/Link packages/core/src/Text— 256 passedtsc --noEmit(core) cleaneslintcleancheck:synccleancheck:changesetscleanCo-authored-by: ManoharPaturi 186662190+ManoharPaturi@users.noreply.github.com