feat: add a composable Sidebar component#1089

Draft

frankieyan wants to merge 22 commits into

mainfrom

frankie/sidebar

frankieyan commented Jun 29, 2026 •

edited

Loading

Member

Short description

This PR adds a composable Sidebar primitive (a provider plus SidebarContent and an optional SidebarResizeHandle slot) per these specs.

We also set displayName on other Reactist components used in these new stories so Storybook's dynamic "Show code" shows real component names instead of <React.ForwardRef>.

Sidebar.storybook.mov

PR Checklist

Added tests for bugs / new features
Updated docs (storybooks, readme)
Reviewed and approved Chromatic visual regression tests in CI

frankieyan and others added 22 commits

June 28, 2026 23:13


          feat(sidebar): add the imperative resizable-panel engine

7fdf731

Co-Authored-By: Claude <noreply@anthropic.com>


          feat(sidebar): add docked Sidebar with controlled width and collapse

09426e3

Co-Authored-By: Claude <noreply@anthropic.com>


          feat(sidebar): add overlay modes, modal backdrop, focus trap, and Esc…

1b31115

…ape dismiss

Co-Authored-By: Claude <noreply@anthropic.com>


          feat(sidebar): add the SidebarResizeHandle slot

Co-Authored-By: Claude <noreply@anthropic.com>


          feat(sidebar): unmount content on hide after the exit transition

c7c5cee

Co-Authored-By: Claude <noreply@anthropic.com>


          docs(sidebar): add Storybook stories

2cd3b7c

Co-Authored-By: Claude <noreply@anthropic.com>


          docs(sidebar): add the MDX docs page

f4525d9

Co-Authored-By: Claude <noreply@anthropic.com>


          docs(sidebar): inline the composition so story source shows the real …

e95dbfe

…usage

Co-Authored-By: Claude <noreply@anthropic.com>


          chore: set displayName on forwardRef components for readable Storyboo…

18ba876

…k source

Co-Authored-By: Claude <noreply@anthropic.com>


          docs(sidebar): add a responsive docked/overlay story

06baa24

Co-Authored-By: Claude <noreply@anthropic.com>


          docs(sidebar): add a stacked sidebars story

fd0e159

Co-Authored-By: Claude <noreply@anthropic.com>


          docs(sidebar): add a left and right sidebars story

c604d2c

Co-Authored-By: Claude <noreply@anthropic.com>


          docs(sidebar): link the Figma design in the stories

d3f1c45

Co-Authored-By: Claude <noreply@anthropic.com>


          feat(sidebar): make SidebarContent a neutral panel with a landmark child

969e4ec

Co-Authored-By: Claude <noreply@anthropic.com>


          feat(sidebar): hide the background from assistive tech for modal over…

b4eb36d

…lays

Co-Authored-By: Claude <noreply@anthropic.com>


          fix(sidebar): scope the Escape dismiss to the panel

e48617a

Co-Authored-By: Claude <noreply@anthropic.com>


          refactor(sidebar): remove the unused isResizing state from the resize…

3f990e9

… engine

Co-Authored-By: Claude <noreply@anthropic.com>


          refactor(sidebar): drive the panel width from a single CSS variable

f37e767

Co-Authored-By: Claude <noreply@anthropic.com>


          fix(sidebar): derive the unmountOnHide fallback from the transition d…

34208f0

…uration

Co-Authored-By: Claude <noreply@anthropic.com>


          feat(sidebar): warn when a resize handle has no usable bounds

a3bc7f6

Co-Authored-By: Claude <noreply@anthropic.com>


          fix(sidebar): make Home/End edge-aware so align="end" swaps them

4add270

Co-Authored-By: Claude <noreply@anthropic.com>


          test(sidebar): restructure suite into scenario-level tests

be7c2f7

Co-Authored-By: Claude <noreply@anthropic.com>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet