Revert "Remove Box usage and sx prop from PageLayout (#6872)"

[francinelucca]

This reverts commit 4e797ef.

This wont play well with our useSlots strategy, reverting and will fix up for next release

Closes #

Changelog

New

Changed

Removed

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

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 (Learn more about how to run integration tests)

[changeset-bot]

⚠️ No Changeset found

Latest commit: a3af68f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[Copilot]

Pull Request Overview

This PR reverts a previous commit that removed Box usage and the sx prop from PageLayout components. The revert is necessary because the original changes conflict with the useSlots strategy, and the team plans to fix the implementation in a future release.

• Restores the sx prop to all PageLayout components and subcomponents
• Re-adds Box/BoxWithFallback usage throughout the PageLayout implementation
• Reverts CSS module changes that were part of the original removal

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/styled-react/src/index.tsx	Restores PageLayout export from @primer/react instead of local implementation
packages/styled-react/src/components/PageLayout.tsx	Removes the entire styled-components wrapper implementation
packages/react/src/PageLayout/PageLayout.tsx	Re-adds sx prop support and BoxWithFallback usage across all components
packages/react/src/PageLayout/PageLayout.stories.tsx	Adds sx prop to story template
packages/react/src/PageLayout/PageLayout.module.css	Removes draggable handle CSS classes
packages/react/src/PageLayout/PageLayout.dev.stories.tsx	Converts CSS classes to sx prop usage
packages/react/src/PageLayout/PageLayout.dev.stories.module.css	Removes CSS file entirely
.changeset/gold-geckos-send.md	Removes changeset for the original breaking change

[Copilot]

The empty fragment wrapper <>...</> around the Box component is unnecessary. The Box can be returned directly without the fragment wrapper.

See below for a potential fix:

        <Box
          sx={{
            position: 'absolute',
            inset: '0 -2px',
            cursor: 'col-resize',
            bg: isDragging || isKeyboardDrag ? 'accent.fg' : 'transparent',
            transitionDelay: '0.1s',
            '&:hover': {
              bg: isDragging || isKeyboardDrag ? 'accent.fg' : 'neutral.muted',
            },
          }}
          role="slider"
          aria-label="Draggable pane splitter"
          aria-valuemin={minWidth}
          aria-valuemax={maxWidth}
          aria-valuenow={currentWidth}
          aria-valuetext={`Pane width ${currentWidth} pixels`}
          tabIndex={0}
          onMouseDown={event => {
            if (event.button === 0) {
              setIsDragging(true)
              onDragStart?.()
            }
          }}
          onKeyDown={event => {
            if (
              event.key === 'ArrowLeft' ||
              event.key === 'ArrowRight' ||
              event.key === 'ArrowUp' ||
              event.key === 'ArrowDown'
            ) {
              setIsKeyboardDrag(true)
              onDragStart?.()
            }
          }}
          onDoubleClick={onDoubleClick}
        />

[Copilot]

The empty fragment wrapper <>...</> around the Box component is unnecessary. The Box can be returned directly without the fragment wrapper.

See below for a potential fix:

        <Box
          sx={{
            position: 'absolute',
            inset: '0 -2px',
            cursor: 'col-resize',
            bg: isDragging || isKeyboardDrag ? 'accent.fg' : 'transparent',
            transitionDelay: '0.1s',
            '&:hover': {
              bg: isDragging || isKeyboardDrag ? 'accent.fg' : 'neutral.muted',
            },
          }}
          role="slider"
          aria-label="Draggable pane splitter"
          aria-valuemin={minWidth}
          aria-valuemax={maxWidth}
          aria-valuenow={currentWidth}
          aria-valuetext={`Pane width ${currentWidth} pixels`}
          tabIndex={0}
          onMouseDown={event => {
            if (event.button === 0) {
              setIsDragging(true)
              onDragStart?.()
            }
          }}
          onKeyDown={event => {
            if (
              event.key === 'ArrowLeft' ||
              event.key === 'ArrowRight' ||
              event.key === 'ArrowUp' ||
              event.key === 'ArrowDown'
            ) {
              setIsKeyboardDrag(true)
              onDragStart?.()
            }
          }}
          onDoubleClick={onDoubleClick}
        />

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!