Repository navigation
fix(webkit): [ENG-47884] make sidebar collapse/expand animate in CSS, not JS - #960
Merged
Merged
Conversation
… not JS Collapse/expand, its motion, and the collapsed-rail preview affordance now run off a hidden native checkbox's :checked state and CSS :hover/:focus-within, instead of a JS-computed inline transition — so the sidebar paints and animates correctly before hydration. resizable adds a native CSS resize: horizontal fallback that is switched off once mounted in favor of the existing keyboard/ARIA-complete handle.
…SS-driven rail Generated on Linux by the baseline workflow (run 34391803069). The rail's resting width in the story moved from the max token (408px) to its measured natural width (about 312px): the width class now reads --sidebar-width, so with width=null the aside no longer opens at w-full before measure() clamps it to the maximum.
lucas-langeloh-azion
approved these changes
Sep 9, 2026
guilherme-santana-azion
approved these changes
Sep 9, 2026
Merged
gabriel-lisboa-azion
added a commit
that referenced
this pull request
Sep 21, 2026
demo/vue-sample had drifted 540 ahead / 31 behind main while most of its webkit work was reviewed and landed upstream (#941 command-menu, #942 GlobalHeader placements, #943 NavigationMenu, #952 Menu, #960 sidebar collapse, #973 floating-panel placement, #975 paginator, #977 templates exports, #921 amount ladder), after which main swept comments (#951) and reworked the CLI onto a derived bundle (#968/#970). Main is the source for everything the two share. Of the 28 conflicted source files, 17 differed from main only in comments — their code was byte-identical — and 6 more were genuinely newer on main, so all 23 take main verbatim, including the use-placement TypeScript rewrite that replaces the old index.js. Three carve-outs keep demo work main does not have yet: - sidebar: main's CSS-driven collapse is the base; the `side` axis is re-applied on top of it as data-[side=end] variants rather than the JS edge map it used to be, and the drag sign moves into the rail composable. The one test that asserted the removed inline transform now asserts the panel's published edge, since the direction is CSS the unstyled test env cannot see. - theme: texts.data.js keeps demo's 13 extra text-wrap and 10 extra tracking declarations (PR #982, in flight). Both sides carry the same 34 entries, so an entry count would not have caught the loss. - doc-prose keeps its chrome-padding fix (PR #981, in flight). catalog.json, authoring-baseline.json, the theme dist and the lockfile are regenerated rather than hand-resolved; the 13 conflicted visual baselines take main's and are regenerated from CI next. Verified: every file main touched is byte-identical to main except the 22 accounted for above; 2364 browser tests, 179 toolkit tests, lint, vue-tsc, 99.98% type coverage, both ratchets, the Storybook build and the webkit-sample build all pass.
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
3 participants
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.
Summary
:checkedstate and CSS:hover/:focus-within, instead of a JS-computed inlinetransition— so the component paints and animates correctly before hydration (ENG-47884).resizableadds a native CSSresize: horizontalfallback (works with zero JS) that switches off once mounted, handing control back to the existing keyboard/ARIA-complete drag handle.sidebar/presets/transitions.tsis removed; only the drag-driven preview sliver still needs a JS-computed transition, since its width comes from a pointer/focus gesture on a sibling element, not from the boolean.How to test
pnpm --filter webkit exec vitest run src/components/layout/sidebar— 61/61 tests pass.pnpm storybook:dev, open Components/Layout/Sidebar → Resizable. Click the collapse trigger: rail animates to 0 width; inspect the<aside>and confirmgetComputedStyle(aside).widthis driven by thehas-checked:classes, not an inlinewidthstyle.--size-10and the expand button rides in — this part is JS-driven (documented in the spec's new Progressive enhancement section) since the hovered zone and the rail are DOM siblings.pnpm webkit:lint,pnpm webkit:type-check,pnpm webkit:type-coverage,pnpm storybook:buildall pass.Notes
width=nullthe aside used to open atw-fullandmeasure()clamped it to the maximum; now the width class reads--sidebar-width, so the first measurement is the content's natural width, which is what the spec describes. Consumers that never passwidthwill see the same shift.