feat(PageLayout.Sidebar): support controlled width via currentWidth + onResizeEnd

[mattcosta7]

Closes #

Adds controlled-width support to PageLayout.Sidebar (and transitively SplitPageLayout.Sidebar), matching the discriminated-union API that already exists on PageLayout.Pane. The underlying usePaneWidth hook already accepted these options — this change only exposes them on the Sidebar prop surface and forwards them through.

Changelog

New

• PageLayout.Sidebar and SplitPageLayout.Sidebar now accept a controlled-width pair:
  • currentWidth: number | undefined — the displayed pane width (in pixels); the existing width prop continues to define the default used on reset/double-click.
  • onResizeEnd: (width: number) => void — fires at the end of a drag or keyboard resize gesture; when supplied, localStorage persistence is bypassed entirely (consumer owns persistence).
  • Types use the same discriminated-union pattern as PageLayoutPaneProps — either both are required together or both must be omitted.
• Storybook stories:
  • PageLayout/Features/ResizableSidebarWithoutPersistence — in-memory controlled state, no persistence.
  • PageLayout/Features/ResizableSidebarWithCustomPersistence — controlled state backed by a consumer-managed localStorage key.
• Unit tests in PageLayout.test.tsx:
  • Asserts the controlled currentWidth is written into the --pane-width CSS variable on the sidebar element.
  • Asserts onResizeEnd is invoked exactly once after a keyboard resize gesture, with a numeric width.
• Doc entries (PageLayout.docs.json) for currentWidth, onResizeEnd, and the previously-undocumented widthStorageKey prop on Sidebar.

Changed

• PageLayoutSidebarProps is now PageLayoutSidebarBaseProps & ({onResizeEnd, currentWidth} | {onResizeEnd?: never, currentWidth?: never}) — mirroring PageLayoutPaneProps. The non-controlled shape is unchanged; existing call sites continue to compile.
• Sidebar's suppressHydrationWarning becomes resizable === true && !!widthStorageKey && !onResizeEnd — only set when a hydration mismatch is actually possible (server can't read localStorage). Sidebar's opt-in storage model means !!widthStorageKey stays in the predicate (unlike Pane, which defaults widthStorageKey to 'paneWidth').
• Sidebar's widthStorageKey JSDoc now mentions that it is bypassed when onResizeEnd is provided, matching Pane.

Removed

Nothing public.

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

(The changeset is published as a minor bump because it adds two new public props on a public component; flag if the team prefers patch.)

Testing & Reviewing

• All 86 unit tests in packages/react/src/PageLayout/** and packages/react/src/SplitPageLayout/** pass (2 pre-existing todos).
• `tsc --noEmit` on `packages/react` is clean.
• Prettier + ESLint clean on touched files.
• Existing uncontrolled stories (`ResizableSidebar`, `SidebarWithPaneResizable`, etc.) are byte-identical at default rendering — only the two new stories exercise the controlled-width branch.

The new stories are the easiest manual check: drag or arrow-key the divider on ResizableSidebarWithoutPersistence and confirm the displayed width in the placeholder label updates on release; reload ResizableSidebarWithCustomPersistence and confirm the previously-set width is restored from localStorage.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 87d9f7b

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[Copilot]

Pull request overview

Adds controlled-width support to PageLayout.Sidebar, aligning it with the existing PageLayout.Pane controlled resize API and flowing through to SplitPageLayout.Sidebar.

Changes:

• Introduces currentWidth + onResizeEnd discriminated-union props for PageLayout.Sidebar.
• Forwards controlled resize options into usePaneWidth and adjusts hydration suppression for persistence-only cases.
• Adds tests, Storybook examples, docs metadata, and a changeset for the new public API.

Show a summary per file

File	Description
packages/react/src/PageLayout/PageLayout.tsx	Adds Sidebar controlled-width props and forwards them to resize state handling.
packages/react/src/PageLayout/PageLayout.test.tsx	Adds component-level coverage for controlled width rendering and resize-end callback behavior.
packages/react/src/PageLayout/PageLayout.features.stories.tsx	Adds controlled Sidebar Storybook examples with in-memory and custom persistence.
packages/react/src/PageLayout/PageLayout.docs.json	Documents new Sidebar props and related resizable behavior.
.changeset/pagelayout-sidebar-controlled-width.md	Adds a minor changeset for the public API addition.

Copilot's findings

• Files reviewed: 5/5 changed files
• Comments generated: 2

[primer-integration]

Integration test results from github/github-ui PR:

CI Passed
VRT Passed
Projects Passed

All checks passed!