feat(webkit): add a side prop so a trailing panel is Sidebar too - #901
Draft
gabriel-lisboa-azion wants to merge 2 commits into
Draft
feat(webkit): add a side prop so a trailing panel is Sidebar too#901gabriel-lisboa-azion wants to merge 2 commits into
gabriel-lisboa-azion wants to merge 2 commits into
Conversation
An explorer layout — a log with a detail panel, a database browser with a schema panel — puts a resizable, hideable panel on the right. The only thing that differs there is the direction of every horizontal decision: which edge the border and the handle sit on, which way a drag grows the panel, which way it leaves, and which way the collapse glyph points. `side: 'end'` mirrors all of them from a single sign. `useSidebarRail` derives a `direction()` of +1 or -1 and every place that reads a horizontal direction multiplies by it, so a trailing panel inherits the same clamping, the same phase-aware transition, the same `inert` collapsed state and the same testids instead of being re-implemented beside the leading one — which is exactly how the two would drift. Defaults to `start`, so every existing consumer is unaffected. Adds `data-side` on the root and a Trailing story that puts both edges on one page, since a mirror is only demonstrable against the thing it mirrors.
…story Adds the 6 snapshots for the new Trailing story across the mode matrix. Generated by the Storybook Regenerate Baseline workflow on this branch's HEAD — baselines are ubuntu-only, so a local run would not match the folder the visual gate compares against. No existing snapshot is modified or deleted: `side` defaults to `start`, so the other Sidebar stories render exactly as before.
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
1 participant
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
side: 'start' | 'end'(default'start', so every existing consumer is unaffected). An explorer layout — a log with a detail panel, a database browser with a schema panel — needs a resizable, hideable panel on the right.useSidebarRailderives adirection()of +1/-1 and every horizontal decision multiplies by it, so the trailing panel inherits the same clamping, phase-aware transition,inertcollapsed state and testids instead of being re-implemented beside the leading one.data-sideon the root, a Trailing story putting both edges on one page, and spec + catalog updates.How to test
cd packages/webkit && npx vitest run src/components/layout/sidebar→ passes.pnpm storybook:dev→ Components/Layout/Sidebar → Trailing. The right-hand panel's border and drag handle are on its left edge; dragging left grows it; collapsing sends it out to the right; the collapse glyph and arrow keys mirror. The leading rail on the same page behaves exactly as before.sidepassed →start).Notes