Repository navigation
fix(lab): NavigationStack re-measures a screen when its title resizes - #10191
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
Contributor
|
AI review status for this pull request.
|
Contributor
PR Analysis Report🔎 Preview ·
|
| Component | Size | LoC |
|---|---|---|
| lab/NavigationStack | 74.8 kB (+7 B) · 1.1 kB CSS (0) | — |
| lab/NavigationScreen | 74.8 kB (+6 B) · 1.1 kB CSS (0) | — |
Package size: measured; main has no measurement of the merge base to compare yet.
API changes: none in this pull request
Committed API report behind this build: cli 19 rows, core 23 rows; run pnpm api:report.
Not run on this PR: add ci:run-visual, ci:run-a11y or ci:run-rtl to run them.
Generated by PR Enrichment workflow | View full report
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Requesting changes for a wording fix in the description. The code change does what it says.
Moving the large title into the scroll area's content root makes a title that grows or shrinks re-measure its screen. In the Large title story, the bar handoff and keyboard entry are unchanged.
- Blocking: the User impact section and the commit message name "larger text" as a cause and describe a scroller that chains at its end, but on
maina larger browser text size already re-measures the Large title screen (the rows grow with it) and a stale screen staysoverflow-y: clipand does not scroll at all, so please describe a title-only change instead, for example: "When only a screen's large title changes height, such as a longer title, a screen that now overflows stays clipped and does not scroll, offers no keyboard stop and contains no overscroll until another change re-measures it."
CI has not run on this head yet because the pull request is a draft.
[Automated review]
The large title sat outside the scroll area's content root, so a change of its height alone, such as a longer title, re-measured nothing. A screen that then overflowed stayed clipped: it did not scroll, offered no keyboard stop and contained no overscroll until another change re-measured it. The title is now first in the content root, whose size the scroll area watches. The headers of navigationTransition.ts and the browser spec keep their fields only. The transition's layer notes move to the JSDoc of the type and function they describe.
vjeux
force-pushed
the
navigation-stack-title-remeasure
branch
from
November 6, 2026 01:16
8f96824 to
740d13a
Compare
Contributor
There was a problem hiding this comment.
Approved pending CI: CI has not run on this head yet.
Moving the large title into the scroll area's content root makes a title-only height change re-measure the screen, and the new browser case fails on main and passes here. The reworded description and commit message now match what main does.
Next step: a maintainer adds the ci:run label so CI runs.
[Automated review]
vjeux
marked this pull request as ready for review
November 6, 2026 01:37
vjeux
requested review from
cixzhang,
imdreamrunner and
josephfarina
as code owners
November 6, 2026 01:37
4 tasks done
vjeux
added a commit
to vjeux/astryx
that referenced
this pull request
Nov 6, 2026
Both are open: meta#10191 moves NavigationStack's large title into the scroll area's content, and meta#10172 lets useFingerScroll tell its caller when a finger's scroll ends. They share no file.
cixzhang
added
the
ci:run
cixzhang
marked this pull request as draft
November 6, 2026 04:42
cixzhang
marked this pull request as ready for review
November 6, 2026 04:42
cixzhang
added a commit
to vjeux/astryx
that referenced
this pull request
Nov 6, 2026
cixzhang
added a commit
that referenced
this pull request
Nov 6, 2026
#8396) * feat(core): useFingerScroll tells its caller when a finger's scroll ends `useFingerScroll(scroller, {onEnd})` calls `onEnd` once each time a finger's scroll on the scroller ends — its scrollend after the lift, the lift after a scrollend under a resting finger, the quiet fallback, or the pointer turning fine — after the reader already says false. Unmounting never calls it. The internal touch entry re-exports the hook for Lab's ChatVirtualizer, which will drop its own touch listeners for it. * fix(lab): NavigationStack re-measures a screen when its title resizes The large title sat outside the scroll area's content root, so a change of its height alone, such as a longer title, re-measured nothing. A screen that then overflowed stayed clipped: it did not scroll, offered no keyboard stop and contained no overscroll until another change re-measured it. The title is now first in the content root, whose size the scroll area watches. The headers of navigationTransition.ts and the browser spec keep their fields only. The transition's layer notes move to the JSDoc of the type and function they describe. * fix(core): useFingerScroll keeps the latest onEnd through the isomorphic layout effect Core hooks write commit-time refs with useIsomorphicLayoutEffect, which stays quiet under server rendering. * docs(core): the finger-scroll re-export names no reader that main does not have The changeset, the internal touch entry, the gestures README and the tests say Lab components that watch a finger's scroll, instead of naming ChatVirtualizer, which is still in an open pull request. Text only. * Merge #10172 into #10191 as this change's base Both are open: #10191 moves NavigationStack's large title into the scroll area's content, and #10172 lets useFingerScroll tell its caller when a finger's scroll ends. They share no file. * feat(lab): under a finger, NavigationStack's bar takes the iOS 26 look Under a finger, NavigationStack's bars paint no background and no hairline, as iOS 26's do. Each screen carries a scroll edge effect: a veil of the body colour that fades in once its content has moved 10px under the bar, on UIKit's measured springs. A push, a pop and a back swipe carry each screen's veil with its card, and the bar a card covers is cut at that card's leading edge. A mouse keeps opaque bars. The veil and the UIKit bar constants live in Lab. The veil reads Core's finger-scroll hook, with its end call, and Core's internal touch entry also names the gesture host and the coarse-pointer check: export-only additions, with no change to Core's behavior. * Merge main into the NavigationStack clear bars branch (#10172 and #10191 landed) * test(lab): NavigationStack's cut specs read the push at held times Under load, WebKit can report one moving layer's animated translate a frame late. The old mid-flight read then put the cut 2 to 3 px off the card's edge while the layers moved as one. The two cut specs now freeze the scene while the push runs, move every animation of the push to the same scene times, and read the rendered boxes there. * Merge branch 'main' into uikit/c16-stack-bar Co-authored-by: Cindy Zhang <cindyxz@meta.com>
This branch was successfully deployed
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.
User impact
When only a NavigationStack screen's large title changes height, such as a longer title, a screen that now overflows stays clipped and does not scroll. It offers no keyboard stop and contains no overscroll until another change re-measures it. A larger text size grows the rows too, so it already re-measures.
Problem and solution fit
useScrollableArea's content root. The hook measures when its viewport or its content root changes size, and a title-only change resized neither.The title is now the content root's first child, so its height is part of what the hook watches.
Expected behavior and authority
spec:AST-025:Each screen's scroller is a
useScrollableAreaviewport (#9697).Smallest restoration
NavigationStack.tsx: the large<h1>moves inside the content root, first. Its scroll listener finds the scroller one level up. The content root is not positioned, so the title's offsetParent and the collapse math are unchanged. The h1 keepstabIndex={-1}, which the keyboard handoff skips.:first-child. So ScrollableAreafullBleed's pull-up by--container-padding-block-startno longer draws it over the title.navigationTransition.tsand the browser spec keep their fields. The transition's layer and progress notes move to theTransitionLayersandlayersAtJSDoc.Evidence
overscroll-behavior-yatauto.contain.Scope
Testing
NavigationStack.interaction.browser.spec.ts, on a fresh Storybook build of this head: Chromium 44/44; WebKit 40 passed and 4 skipped (Chromium-only rendering traces). The new case passes 5 of 5 in each engine.auto. Before the change, the case lets three unrelated measurements end: a font load, the resize, and the stack's release of its motion hints. Each re-measured main by chance in an earlier draft of this case.NavigationStack.test.tsxandnavigationTransition.test.ts, 37/37.pnpm build,pnpm typecheck, the Storybook build,check:knowledge,check:repo, changeset coverage (Lab ships nothing to consumers) andreview:pre(144 authored lines, 0 findings).