Repository navigation
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
|
AI review status for this pull request.
|
PR Analysis Report📚 Storybook Preview🧪 Sandbox PreviewComponent Size
Sizes are gzip. Import counts the JavaScript the import loads eagerly; CSS counts the package stylesheet rules referenced by the modules it can load from its own package, lazily loaded ones included. Bundle Size SummaryGzip figures measure each package's entry file, not the code an import pulls in.
Accessibility AuditStatus: No accessibility violations detected. Visual Regression55 of 502 shot(s) changed. A change here is a question, not a failure: check whether the after is the
and 35 more. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
![astracat-bot[bot]](https://avatars.githubusercontent.com/in/4796231?s=60&v=4){kind=small}
There was a problem hiding this comment.
Approval is on hold until an engineering owner provides or identifies the governing spec for TabBar's minimizeBehavior API and for the new compact-touch threshold of presentation="adaptive" (the sheet below 744 px wide or 500 px tall instead of 768 px wide and below), which no current or draft record states, and approves or rejects the draft spec:AST-094 requirements this branch adds. Any engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so as an engineering owner. Independently of that decision, please:
- Keep the minimized circle whole when the bar's width changes (after a rotation the trailing cap stays 20.9 px away), with a browser test that resizes while minimized.
- Land #8045, #8052, #8062, #8074, #8076, #8129 and #8141 first or retarget onto #8141, so this pull request carries the 1,017-line minimize commit instead of 29,815 authored lines.
- Add a Changeset naming
@astryxdesign/clifor the TabBar entries in its discovery data, which the lint job requires.
[Automated review]
| } | ||
| const isRtl = getComputedStyle(element).direction === 'rtl'; | ||
| // The trailing cap's travel onto the leading one. | ||
| const travel = element.offsetWidth - tabBar.barHeight; |
There was a problem hiding this comment.
The trailing cap's travel is read once, when isMinimized toggles. If the capsule's width changes while the bar stays minimized (a phone rotated to landscape, a split view resized), the cap keeps the old offset: rotating a 375×667 touch viewport with four tabs leaves it 20.9 px off the circle. Re-apply the collapsed geometry when the capsule resizes while minimized (here and in collapsed() in useTabBarLens.ts), and add a browser test that changes the viewport while minimized.
| { | ||
| "kind": "component", | ||
| "name": "TabBar" | ||
| }, | ||
| { | ||
| "kind": "component", | ||
| "name": "TabBarItem" | ||
| }, |
There was a problem hiding this comment.
These entries change what the CLI ships to consumers, and the lint job's changeset coverage fails for want of a Changeset naming @astryxdesign/cli (pnpm changeset:new --packages @astryxdesign/cli --category feat).
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [experimental] `uikit.tabBar`, in the experimental motion subpath, gains the measured values of the iOS 26 tab bar's minimize on scroll: the scroll distance that collapses it, the minimized circle's size, and the lens's travel and size springs into and out of the circle. |
There was a problem hiding this comment.
minimizeFade is still marked GUESS pending M-TB1 in uikit/tabBar.ts, so "the measured values" overstates it; say which value is still a guess.
| follows. | ||
| - **FR7 — Exits animate as UIKit's do.** A touch presentation MUST play the | ||
| exit its UIKit counterpart plays. **Proposed; pending owner review:** this | ||
| departs from the draft `spec:AST-090` FR1 (exits off by default) and FR10 |
There was a problem hiding this comment.
No spec:AST-090 record exists at this head or on main, so this amendment has no target an owner can check; name the record that holds FR1 and FR10, or drop the reference.
c8cc31e to
c249161
Compare
c249161 to
f07d97a
Compare
There was a problem hiding this comment.
Approval is on hold until an engineering owner approves or rejects draft spec:AST-094 FR1–FR23 and provides or identifies the spec for TabBar's minimizeBehavior (with its five uikit.tabBar values) and for the new 744 px / 500 px compact-touch threshold of presentation="adaptive"; an engineering owner records that decision by commenting /approve-spec <full head SHA>, and the author may do so as an engineering owner.
- When a minimized bar's width changes (a rotation or a split view), its trailing glass cap stays 20.9 px off the circle because
useTabBarMinimize.ts:202measures the cap's travel only when the state flips, anduseTabBarLens.ts:402-412places the lens the same way, so please re-place both on resize and add a browser case for it. - The diff carries 29,837 authored lines, 28,837 of them from the seven open predecessors (#8045 to #8141), so please land those first or retarget this pull request onto #8141.
- The red lint job ran out of memory rather than reporting a lint error, so a re-run should clear it.
[Automated review]
| } | ||
| const isRtl = getComputedStyle(element).direction === 'rtl'; | ||
| // The trailing cap's travel onto the leading one. | ||
| const travel = element.offsetWidth - tabBar.barHeight; |
There was a problem hiding this comment.
The trailing cap's travel is read here only when isMinimized flips. If the capsule's width changes while the bar stays minimized (a rotation, a split view), the cap keeps the old offset: from 375×667 to 667×375 it ends 20.9 px past the circle until the next expand. Observing the capsule's size while minimized and re-placing the cap (and the lens's collapsed offset in useTabBarLens.ts:402-412) without animating would fix it, and a browser case that resizes a minimized bar would keep it fixed.
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [experimental] `uikit.tabBar`, in the experimental motion subpath, gains the measured values of the iOS 26 tab bar's minimize on scroll: the scroll distance that collapses it, the minimized circle's size, and the lens's travel and size springs into and out of the circle. |
There was a problem hiding this comment.
This names the four measured values but not minimizeFade, which uikit/tabBar.ts adds as @source GUESS pending M-TB1; please name it and say it is still a guess, so the release note covers the whole surface.
| follows. | ||
| - **FR7 — Exits animate as UIKit's do.** A touch presentation MUST play the | ||
| exit its UIKit counterpart plays. **Proposed; pending owner review:** this | ||
| departs from the draft `spec:AST-090` FR1 (exits off by default) and FR10 |
There was a problem hiding this comment.
No spec:AST-090 record exists at this head or on main, so an owner cannot check what this departs from; please name the record that holds FR1 and FR10, or drop the reference (it appears again at line 235).
f07d97a to
e62f5d6
Compare
There was a problem hiding this comment.
Approval needs an engineering owner to provide or identify the governing spec for TabBar's minimizeBehavior, for the new 744 px / 500 px compact-touch threshold of presentation="adaptive" and for the package-level experimental motion and gesture subpaths, and to approve or reject the draft AST-094 requirements. An engineering owner records that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so as an engineering owner. Separately from that decision, please address these points:
- A bar minimized before a rotation or a resize keeps its old geometry, so the circle tears by about 21 px (
useTabBarMinimize.ts:202,useTabBarLens.ts:402-412). - The diff carries about 30,000 authored lines from seven open predecessor pull requests; land them or rebase this branch onto
mainso it holds only minimize on scroll. .changeset/touch-presentation.mdsays an iPad mini in portrait keeps the popover, but it actually switches from the sheet to the popover, and.changeset/uikit-tab-bar-minimize.mdleaves out the guessedminimizeFade.
[Automated review]
| } | ||
| const isRtl = getComputedStyle(element).direction === 'rtl'; | ||
| // The trailing cap's travel onto the leading one. | ||
| const travel = element.offsetWidth - tabBar.barHeight; |
There was a problem hiding this comment.
travel is read from offsetWidth only when isMinimized flips, and useTabBarLens.ts:402-412 places the lens the same way, so a bar minimized in portrait and rotated to landscape keeps the old geometry: the trailing cap stops 20.9 px short of the circle and the lens sits 8.1 px off centre at 52.5 px wide. Re-measuring and set-ting both targets when the capsule resizes while minimized (a ResizeObserver on the capsule) would keep the circle whole.
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [feat] `presentation="adaptive"` on DropdownMenu, ContextMenu, MoreMenu, Selector and MultiSelector chooses the bottom sheet on a compact touch screen: a coarse primary pointer and a viewport narrower than 744px or shorter than 500px (it was 768px wide and below). An iPad mini in portrait keeps the anchored popover; a phone in landscape now gets the sheet. |
There was a problem hiding this comment.
An iPad mini in portrait is 744 px wide, so with a coarse pointer the base query (max-width: 768px) and (pointer: coarse) opened the bottom sheet; with this change it opens the popover. It switches surfaces rather than keeping the popover: "An iPad mini in portrait now gets the anchored popover instead of the sheet".
| '@astryxdesign/core': patch | ||
| --- | ||
|
|
||
| [experimental] `uikit.tabBar`, in the experimental motion subpath, gains the measured values of the iOS 26 tab bar's minimize on scroll: the scroll distance that collapses it, the minimized circle's size, and the lens's travel and size springs into and out of the circle. |
There was a problem hiding this comment.
This lists the measured values but not minimizeFade, the fifth value the change adds, which uikit/tabBar.ts marks @source GUESS pending M-TB1; naming it ("and a provisional fade spring, a guess pending M-TB1") keeps the release note complete.
| follows. | ||
| - **FR7 — Exits animate as UIKit's do.** A touch presentation MUST play the | ||
| exit its UIKit counterpart plays. **Proposed; pending owner review:** this | ||
| departs from the draft `spec:AST-090` FR1 (exits off by default) and FR10 |
There was a problem hiding this comment.
main has no spec:AST-090 record, so the departure FR7 describes (and the matching line under current-state impact) cannot be checked by an approver; cite the record that exists or drop the departure note.
|
Posted by Cindy's agent on her behalf. Parts of this PR re-implement behavior that already exists, or is being specified, as a shared part of core. Converging keeps one implementation per behavior:
This is about where the behavior lives, not about the PR's intent. |
|
Agreed: one implementation.
|
…-touch-model restack)
…-touch-model restack)
e62f5d6 to
802d149
Compare
github-actions
Bot
added
the
needs:design-review
…esture host's subscriptions The gesture host subscribes no click: the one cancelling click subscriber is the click guard's, added at a window's first arm and kept. The release note, the stream's header and the gestures README listed click with the host's touchend and contextmenu; they now name the guard's own.
…changed) bbc0a4a is the merge of the heads this pull request builds on. With it as an ancestor, GitHub's compare from it shows exactly this pull request's own files.
…ps reach it Red first: with no label the tab list has no name, and aria-label or aria-labelledby passed to TabBar land on its root, where they name nothing.
As TabList does, the tab list is named by aria-labelledby, else aria-label,
else label, else the translated `@astryx.tabList.label` ("Tabs"), and the
aria naming props go to the tab list instead of the root.
spec:AST-094 FR4 names none of the tab bar's values, and Core's roles test pins the registered roles to exactly FR4's list, so registerTabBarTable() lists no motion role and each spring plays as measured, as the scroll and navigation tables do. The comments and the changeset no longer call them motion roles.
The comments it rewrote say, at this layer's wording too, that the tab bar's springs play as measured; the lens's selection Effect says what it synchronizes.
…nges under it
Red first: four tabs shrinking to three under a finger held on the last one
throw at the lift ("Cannot read properties of undefined (reading 'value')"),
since the lift resolves its index against the new list.
…ges under it A press measured the tab centres of the list it began on. When the list changes under a held finger, the press now ends there as a cancel and the lens settles back to rest, so no move chases the old centres and the lift never hands onLift an index into the new list.
Its tab-list naming props sit beside this layer's minimizeBehavior, and the comments it rewrote say, at this layer's wording too, that the tab bar's springs play as measured.
Red first: expanded by a tap, the bar minimizes again on the next pixel down; where the browser sends no scrollend, a script's scroll after the person's counts; collapsed, the tab list stays in the accessibility tree and the circle is no button; and the circle and the split glass mount even with minimizing off.
… restarts on expand - Expanding starts the downward scroll run over, so an expanded bar takes another minimizeDistance down before it minimizes again (before, the next pixel down minimized it). - Where the browser sends no scrollend, the scroll watch ends when the gesture host's reader says the person's scroll ended (its own fallback), so a script's scroll after it no longer counts. - Collapsed, the circle is the bar's one element for assistive technology, as on iOS: a button beside the tab list, named after the selected tab and collapsed (aria-expanded), with the tabs inert until it expands; from the keys, focus lands on the selected tab. The capsule sits in the bar's box, which places the circle. - The circle and the glass's three pieces mount only when minimizing is on; otherwise the glass is one piece.
…object too On the global object the onscrollend handler is an own property, so the browser without scrollend the test models still detected one.
The merge of meta#8129's fixes ran Prettier over every file it staged, which reformatted 17 files this stack does not change (docs, scripts and a test from main and the gesture foundation). They are back to the foundation's text.
The tap and the second finger's landing went out 20 ms apart on the test's wall clock, which a loaded box stretched until the lens had reached Profile before the finger landed. They now go back to back, and the hold is a wait after the landing.
There was a problem hiding this comment.
Approval is on hold until an engineering owner provides or identifies the governing spec for Lab TabBar and its new minimizeBehavior prop: no current record covers the API, its finger-only behavior, the collapse with its guessed fade (tabBar.minimizeFade), or whether the tab-bar springs follow the theme's motion knobs. An engineering owner can record that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so as an engineering owner. Independent of that decision, these changes are needed:
- Narrow the diff to this layer (it carries 33,675 authored lines, mostly from the unlanded stack) and move the
astryxStylexbuild fix and the recognizers no component uses to their own pull requests. - Drive TabBar's press tracking from the shared action-group tracker for every pointer, so a lift off the bar acts on nothing and a mouse slide works, as
family:action-groupsasks of a tab bar. - Mount the minimize's wrappers only when minimizing is on, reach the animator through
@astryxdesign/core/internal/touch, and justify the 4.2 KB finger-only cost. - Add a real iPhone recording, and fix the docs that say focus on a tab expands the collapsed bar.
[Automated review]
| new LongPressGestureRecognizer({ | ||
| name: 'tab-bar-selection', | ||
| minimumPressDuration: 0, | ||
| allowedPointerTypes: ['touch', 'pen'], |
There was a problem hiding this comment.
Only touch and pen are tracked here, and the lift at lines 419-421 picks the nearest tab even when the finger has left the bar. family:action-groups counts a tab bar as a member: a lift outside the group acts on nothing (FR3), and a mouse slides too (FR1, FR5), through the one shared tracker. createActionGroupTracker (with resolveTarget and onMove for the lens) could drive this for every pointer.
| <div | ||
| {...stylex.props( | ||
| styles.bar, | ||
| styles.barSize(px(tabBar.barHeight), px(naturalWidth(count))), | ||
| )}> |
There was a problem hiding this comment.
With minimizing off, this sizing wrapper, the platter wrapper and its glass element (lines 773-801) and the tab layer (lines 802-806) do nothing that the capsule alone did not do in the layer below. Mounting them only while canMinimize, with the glass back on the capsule otherwise, would keep the default bar at its previous element count (architecture:component-style-authoring INV7).
| import { | ||
| registerTabBarTable, | ||
| tabBar, | ||
| useAnimator, | ||
| } from '@astryxdesign/core/internal/motion'; |
There was a problem hiding this comment.
architecture:react-component-runtime INV13 routes the animator and UIKit's measured tables through @astryxdesign/core/internal/touch; importing them from a second entry, internal/motion, needs either a re-export from internal/touch or an amendment to INV13.
| /** | ||
| * Whether scrolling the page down collapses the bar into a circle holding | ||
| * the selected tab's icon (UIKit's `tabBarMinimizeBehavior`): reaching the | ||
| * top of the page, a tap on the circle or focus on a tab expands it. Under a finger only; |
There was a problem hiding this comment.
While the bar is collapsed every tab is inert (line 832), so focus cannot reach a tab; keyboard focus lands on the circle, whose activation expands the bar and focuses the selected tab. The doc here, in TabBar.doc.mjs and in useTabBarMinimize.ts:70 could say that instead.
|
Thanks, fixed in this push:
The |
The Effect that ends a press when the recognizer turns off, and the one that ends it when the tab list changes under a finger, now say what they synchronize, as the selection Effect does.
While the bar is collapsed its tabs are inert, so focus never lands on a tab: keyboard focus reaches the circle, whose activation expands the bar. The prop doc, the component doc and the hook said focus on a tab expands it.
There was a problem hiding this comment.
Approval is on hold until an engineering owner provides or identifies the governing spec for Lab TabBar and its new minimizeBehavior prop: no current record covers the API, its finger-only behavior, the collapse with its guessed fade (tabBar.minimizeFade), or whether the tab-bar springs follow the theme's motion knobs. Any engineering owner can record that decision by commenting /approve-spec <full head SHA> on this pull request, and the author may do so as an engineering owner. Thanks for correcting the docs on how the collapsed bar expands; independent of the spec decision, these changes are still needed:
- Narrow the diff to this layer (it carries 33,677 authored lines, mostly from the unlanded stack) and move the
astryxStylexbuild fix and the recognizers no component uses to their own pull requests. - Drive TabBar's press tracking from the shared action-group tracker for every pointer, so a lift off the bar acts on nothing and a mouse slide works, as
family:action-groupsasks of a tab bar. - Mount the minimize's wrappers only when minimizing is on, and reach the animator through
@astryxdesign/core/internal/touch, the routearchitecture:react-component-runtimeINV13 names. - Justify the 4.5 KB finger-only cost and add real-device recordings, as
spec:AST-094asks.
[Automated review]
| const chosen = isCancelled | ||
| ? selected | ||
| : nearestIndex(press.lastX, press.centers); |
There was a problem hiding this comment.
A lift off the bar still commits nearestIndex here, and the long press above tracks only touch and pen under a coarse primary pointer, so a finger that slides off the bar and lifts over the page switches tabs while a mouse slide across the tabs chooses nothing. family:action-groups names a tab bar as a member by rule and asks for FR1, FR3 ("A press that lifts outside the group acts on nothing") and FR5 (every pointer) from the shared actionGroupTracker (architecture:interaction-modality INV13); its resolveTarget and onMove already support a lens that chases the finger.
| <div | ||
| ref={minimize.platter} | ||
| aria-hidden | ||
| data-tab-bar-platter="" | ||
| {...stylex.props(styles.platter(HALF_BAR))}> | ||
| {canMinimize ? ( | ||
| <> | ||
| <div | ||
| {...stylex.props(styles.glass, styles.platterStart(HALF_BAR))} | ||
| /> | ||
| <div | ||
| ref={minimize.platterMiddle} | ||
| {...stylex.props( | ||
| styles.glass, | ||
| styles.platterMiddle(HALF_BAR), | ||
| )} | ||
| /> | ||
| <div | ||
| ref={minimize.platterEnd} | ||
| data-tab-bar-platter-end="" | ||
| {...stylex.props(styles.glass, styles.platterEnd(HALF_BAR))} | ||
| /> | ||
| </> | ||
| ) : ( | ||
| <div | ||
| {...stylex.props(styles.glass, styles.platterWhole(HALF_BAR))} | ||
| /> | ||
| )} | ||
| </div> | ||
| <div | ||
| ref={minimize.items} | ||
| role="presentation" | ||
| data-tab-bar-items="" | ||
| {...stylex.props(styles.items)}> |
There was a problem hiding this comment.
With minimizing off, the platter wrapper, the whole-glass element and the tab layer still render, beside the sizing wrapper at line 748, where the layer below painted the glass and the size on the capsule itself: a four-tab bar at rest goes from 22 to 26 elements. architecture:component-style-authoring INV7 asks for element counts that justify them, or for mounting them only while canMinimize.
| import * as stylex from '@stylexjs/stylex'; | ||
| import type {BaseProps} from '@astryxdesign/core'; | ||
| import {useListFocus, useMergedRefs} from '@astryxdesign/core/hooks'; | ||
| import {tabBar} from '@astryxdesign/core/internal/motion'; |
There was a problem hiding this comment.
architecture:react-component-runtime INV13 lists the animator and UIKit's measured tables among the shared touch modules and says Core and Lab components reach them through @astryxdesign/core/internal/touch; this import, and the ones in useTabBarLens.ts and useTabBarMinimize.ts, use a second entry, internal/motion. Export them from internal/touch, or have INV13 amended.
|
Thanks. Fixed in this push: the docs now say that activating the collapsed circle expands the bar, since focus never reaches an inert tab. The description now gives the element counts and what the size increase holds. Mounting the bar's wrappers only while minimizing comes in a follow-up push. The |
Depends on #8141.
Review only this PR's change: vjeux/astryx@ff6c905...5f4e586
User need
Part of matching Astryx's touch components to iOS 26, so apps built with it feel native on phones. On iOS the tab bar steps aside while people read: scrolling down collapses it into a circle, and it returns at the top. Astryx's bar keeps its 83 px over every page. This adds
minimizeBehavior="onScrollDown".Problem and solution fit
Current specification
An engineering owner decides (no record governs it): this API, touch only, and the glass approximation with its fade (
GUESS, M-TB1).spec:AST-094FR13, FR8.Public delta and caller burden
New
minimizeBehavior?: 'never' | 'onScrollDown', default'never';uikit.tabBargains the minimize values;internal/touchgainsuseFingerScroll.Size, gzip against #8141's head: TabBar's import 59.4 → 63.9 KB JavaScript, 1,648 → 1,923 B CSS.
The increase is the minimize itself: the scroll watch, the circle and the collapse's springs. TabBar is one module, so a bar that never minimizes loads it too. Elements (Default story, Chromium): 32 → 36 under a mouse and a finger alike (the bar's box, the platter and its glass, the tab layer); mounting those only while minimizing is a follow-up. With minimizing on, under a finger: 41, at rest and minimized.
Design and alternatives
Evidence
iOS 26.2 simulator (minimize and expand; a 600 ms block; Reduce Motion), then Android 15 Chrome.
Scope
Stack: #8360 → #8129 → #8141 → this PR.
Testing
Try it:
pnpm storybook, Lab › TabBar › Minimize On Scroll, on a phone or Chrome's device mode.Browser tests: the collapse follows UIKit's springs, even through a 600 ms block; the bar puts no touch listener or
touch-actionon the page; a script's scroll never minimizes it.CI's
test-ui (4/4)red is the CodeBlockHeaderPlugin race #8569 fixes, outside TabBar.Passing locally, which is the evidence here (pushes skip CI, so no CI run is expected):
pnpm test:interaction TabBar,pnpm vitest run packages/lab/src/TabBar,pnpm typecheck, lint.