Remove Box usage and sx prop from PageLayout

[francinelucca]

Reintroduces #6872 but without PageHeader and PageFooter styled wrappers (not needed and doesn't play well with slots)

[changeset-bot]

🦋 Changeset detected

Latest commit: fca3c90

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Major
@primer/styled-react	Major

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]

👋 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!

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/3899

[primer-integration]

🟢 ci completed with status success.

[Copilot]

Pull Request Overview

This PR removes Box component usage and the sx prop from PageLayout components in favor of native HTML elements and CSS classes. This continues the migration away from styled-components in the Primer Design System's React implementation while maintaining backward compatibility through the styled-react wrapper package.

Key changes:

• Replace Box/BoxWithFallback components with native HTML elements (div, header, footer)
• Remove sx prop support from all PageLayout subcomponents
• Add CSS classes for styling previously handled by sx props
• Update styled-react package to provide sx prop compatibility layer

Reviewed Changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/styled-react/src/index.tsx	Updates export to use local PageLayout implementation instead of re-exporting from @primer/react
packages/styled-react/src/components/PageLayout.tsx	Adds styled wrapper components that preserve sx prop functionality for backward compatibility
packages/styled-react/src/tests/primer-react.browser.test.tsx	Removes tests for Header and Footer sx prop support (now handled by styled wrappers)
packages/react/src/PageLayout/PageLayout.tsx	Replaces Box components with native HTML elements and removes sx prop from all interfaces
packages/react/src/PageLayout/PageLayout.stories.tsx	Removes sx prop usage from story template
packages/react/src/PageLayout/PageLayout.module.css	Adds CSS classes for draggable handle styling previously handled by sx props
packages/react/src/PageLayout/PageLayout.dev.stories.tsx	Replaces sx prop usage with CSS class names for debug styling
packages/react/src/PageLayout/PageLayout.dev.stories.module.css	Adds CSS classes for debug styling previously handled by sx props
.changeset/gold-geckos-send.md	Documents breaking change for sx prop removal

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[llastflowers]

✨

[francinelucca]

Needs https://github.com/github/github-ui/pull/3762