Export `PageLayout` resizable functionality by TylerJDev · Pull Request #8160 · primer/react

TylerJDev · 2026-07-14T13:39:34Z

Part of https://github.com/github/core-ux/issues/2973, prerequisite to https://github.com/github/github-ui/pull/26724

Places PageLayout drag functionality into its own component: packages/react/src/PageLayout/DragHandle.tsx, to allow usage outside of PageLayout.

The changes here aim to extend the modularity of PageLayout by breaking up the drag functionality. We keep the functionality exactly the same within PageLayout, but export the pieces that can be used in other components, (see https://github.com/github/core-ux/issues/2973 for more context).

PR changes:

packages/react/src/PageLayout/usePaneWidth.ts
- We make the contentWrapperRef prop optional so that other components can pass or omit a ref.
- Changes in this file are mostly additive.
packages/react/src/PageLayout/PageLayout.tsx
- We move DragHandle into its own component (packages/react/src/PageLayout/DragHandle.tsx)
- We move some imports to DragHandle
packages/react/src/PageLayout/DragHandle.tsx
- Near 1:1 with what already existed within PageLayout.
- Modified/added props, such as dragTargetRef.
- Behavior remains the same.

Changelog

Changed

Moves DragHandle outside of PageLayout.tsx, into its own component.
Adjusted some props to handle usage of DragHandle / usePaneWidth outside of PageLayout context.

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

Testing & Reviewing

The behavior should be exactly the same as it is today in production. In addition, I've added a story (on dev) that shows what usage could look like when DragHandle is used outside of PageLayout.

Questions

Could we simplify the usage any more than what we have currently?
Do we need to add new additions to our docs?

changeset-bot · 2026-07-14T13:39:38Z

🦋 Changeset detected

Latest commit: b07d552

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 · 2026-07-14T13:40:07Z

⚠️ 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. If this doesn't work, you can also use the original workflow here. 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.

primer · 2026-07-14T17:47:03Z

🤖 Formatting issues have been automatically fixed and committed to this PR.

TylerJDev · 2026-07-14T18:10:56Z

+export const DragHandle = memo<DragHandleProps>(function DragHandle({
+  handleRef,
+  onDragStart,
+  onDrag,
+  onDragEnd,
+  onDoubleClick,
+  'aria-valuemin': ariaValueMin,
+  'aria-valuemax': ariaValueMax,
+  'aria-valuenow': ariaValueNow,
+  dragTargetRef,
+  contentWrapperRef,
+  formatValueText = defaultFormatValueText,
+  'data-component': dataComponent = 'PageLayout.DragHandle',
+}) {


A near 1:1 with what we already had in PageLayout, just moved to its own file so that it can be exported.

There are a few changes, such as props to improve the portability. Behavior and functionality should remain the same within PageLayout.

TylerJDev · 2026-07-14T18:14:05Z

+  'aria-valuemin': ariaValueMin,
+  'aria-valuemax': ariaValueMax,
+  'aria-valuenow': ariaValueNow,
+  dragTargetRef,


This is different compared to how it was in PageLayout. Before we directly used paneRef via context, but now we pass paneRef via this prop in PageLayout.

This is to support usage outside of PageLayout, where the target ref differs from the one within the PageLayout component.

TylerJDev · 2026-07-14T18:15:08Z

  )
 })

-type DragHandleProps = {


Drag handler functionality moved to DragHandle.tsx.

Copilot

Pull request overview

Exports PageLayout’s resizable-pane building blocks by extracting the drag interaction logic into a standalone DragHandle component and widening usePaneWidth to support usage outside of PageLayout.

Changes:

Extracted DragHandle into packages/react/src/PageLayout/DragHandle.tsx and wired it back into PageLayout.
Made usePaneWidth’s contentWrapperRef optional and added a shared aria-valuetext formatter hook-up path.
Added new public exports (top-level @primer/react and PageLayout subpath), plus a dev story demonstrating standalone usage.

Show a summary per file

File	Description
packages/react/src/PageLayout/usePaneWidth.ts	Makes `contentWrapperRef` optional and centralizes `aria-valuetext` formatting for DOM updates.
packages/react/src/PageLayout/PageLayout.tsx	Replaces inline drag-handle logic with the extracted `DragHandle` component.
packages/react/src/PageLayout/DragHandle.tsx	New standalone component implementing pointer/keyboard resize interactions.
packages/react/src/PageLayout/index.ts	Expands `PageLayout` subpath exports to include resize primitives (and currently also exports paneUtils helpers).
packages/react/src/index.ts	Re-exports `usePaneWidth`, `defaultPaneWidth`, `DragHandle`, and related types from `PageLayout`.
packages/react/src/PageLayout/PageLayout.dev.stories.tsx	Adds a dev story demonstrating standalone resizable panel usage.
packages/react/src/PageLayout/PageLayout.dev.stories.module.css	Adds styles for the standalone resizable panel dev story.
packages/react/src/tests/snapshots/exports.test.ts.snap	Updates export snapshot to reflect newly added top-level exports/types.
.changeset/pagelayout-export-resize-primitives.md	Adds a minor changeset for the new public exports.

Review details

Files reviewed: 9/9 changed files
Comments generated: 2
Review effort level: Low

Copilot

Review details

Files reviewed: 10/10 changed files
Comments generated: 2
Review effort level: Low

Copilot

Review details

Files reviewed: 10/10 changed files
Comments generated: 2
Review effort level: Low

Copilot

Review details

Files reviewed: 10/10 changed files
Comments generated: 4
Review effort level: Low

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

primer-integration · 2026-07-16T17:18:24Z

Integration test results from github/github-ui PR:

CI Passed
VRT Waiting
Projects Waiting

Export PageLayout resizable functionality

74c731b

TylerJDev added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Jul 14, 2026

github-actions Bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 14, 2026

TylerJDev deployed to github-pages July 14, 2026 13:50 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 14, 2026 13:50 Inactive

TylerJDev and others added 2 commits July 14, 2026 13:41

Add dev story

dc7f02e

chore: auto-fix lint and formatting issues

85c1936

github-actions Bot temporarily deployed to storybook-preview-8160 July 14, 2026 17:50 Inactive

primer Bot deployed to github-pages July 14, 2026 18:01 View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 14, 2026 18:01 Inactive

Update snapshots

b543c58

TylerJDev deployed to github-pages July 14, 2026 18:42 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 14, 2026 18:42 Inactive

TylerJDev commented Jul 14, 2026

View reviewed changes

TylerJDev marked this pull request as ready for review July 14, 2026 20:41

TylerJDev requested a review from a team as a code owner July 14, 2026 20:41

TylerJDev requested review from Copilot and jonrohan July 14, 2026 20:41

Copilot started reviewing on behalf of TylerJDev July 14, 2026 20:41 View session

Copilot AI reviewed Jul 14, 2026

View reviewed changes

Comment thread packages/react/src/PageLayout/PageLayout.tsx Outdated

Comment thread packages/react/src/PageLayout/index.ts Outdated

TylerJDev added 2 commits July 15, 2026 09:20

Address some feedback

ee349a4

Remove some exports

172e8a5

TylerJDev requested a review from Copilot July 15, 2026 13:23

Copilot started reviewing on behalf of TylerJDev July 15, 2026 13:23 View session

github-actions Bot requested a deployment to storybook-preview-8160 July 15, 2026 13:27 Abandoned

Copilot AI reviewed Jul 15, 2026

View reviewed changes

Comment thread packages/react/src/PageLayout/usePaneWidth.ts

Comment thread packages/react/src/PageLayout/DragHandle.tsx

Copilot started reviewing on behalf of TylerJDev July 15, 2026 13:48 View session

TylerJDev deployed to github-pages July 15, 2026 13:58 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 15, 2026 13:58 Inactive

Copilot AI reviewed Jul 15, 2026

View reviewed changes

Comment thread packages/react/src/PageLayout/usePaneWidth.ts

Comment thread packages/react/src/PageLayout/PageLayout.dev.stories.tsx

Address even more feedback

86ff1e5

TylerJDev deployed to github-pages July 15, 2026 15:43 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 15, 2026 15:44 Inactive

TylerJDev requested a review from Copilot July 15, 2026 18:43

Copilot started reviewing on behalf of TylerJDev July 15, 2026 18:44 View session

Copilot AI reviewed Jul 15, 2026

View reviewed changes

Comment thread packages/react/src/PageLayout/PageLayout.test.tsx Outdated

Comment thread packages/react/src/PageLayout/PageLayout.test.tsx

Comment thread packages/react/src/PageLayout/PageLayout.dev.stories.tsx

Comment thread packages/react/src/PageLayout/usePaneWidth.ts

TylerJDev and others added 4 commits July 15, 2026 14:53

Potential fix for pull request finding

7b683f4

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

9991fe0

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

ce55f77

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Potential fix for pull request finding

775dfea

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

github-actions Bot requested a deployment to storybook-preview-8160 July 15, 2026 18:57 Abandoned

TylerJDev deployed to github-pages July 15, 2026 19:08 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 15, 2026 19:08 Inactive

Fix test

495eac3

TylerJDev deployed to github-pages July 16, 2026 16:56 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 16, 2026 16:57 Inactive

Fix another test

b07d552

TylerJDev deployed to github-pages July 16, 2026 17:08 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-8160 July 16, 2026 17:09 Inactive

joshblack approved these changes Jul 16, 2026

View reviewed changes

TylerJDev added this pull request to the merge queue Jul 16, 2026

Merged via the queue into main with commit f8e7cf2 Jul 16, 2026
54 checks passed

TylerJDev deleted the tylerjdev/export-pagelayout-resizable branch July 16, 2026 20:08

primer Bot mentioned this pull request Jul 16, 2026

Release tracking #8154

Open

Uh oh!

Conversation

TylerJDev commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Changed

Rollout strategy

Testing & Reviewing

Uh oh!

changeset-bot Bot commented Jul 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 14, 2026

⚠️ Action required

Uh oh!

primer Bot commented Jul 14, 2026

Uh oh!

TylerJDev Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

TylerJDev Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

TylerJDev Jul 14, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Review details

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Review details

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Review details

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Review details

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer-integration Bot commented Jul 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

TylerJDev commented Jul 14, 2026 •

edited

Loading

changeset-bot Bot commented Jul 14, 2026 •

edited

Loading

primer-integration Bot commented Jul 16, 2026 •

edited

Loading