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

Author: mperrotti

.changeset/gold-geckos-send.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Removes sx prop from PageLayout and subcomponents

packages/react/src/PageLayout/PageLayout.dev.stories.module.css

@@ -0,0 +1,9 @@
+.DebugPageLayout {
+  /* `red` is just used for debugging purposes. VRTs fail if changed. */
+  /* stylelint-disable-next-line color-named */
+  border: var(--borderWidth-thin) solid red;
+}
+
+.SuccessColor {
+  color: var(--fgColor-success);
+}

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

@@ -1,6 +1,7 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {Placeholder} from '../Placeholder'
 import {PageLayout} from './PageLayout'
+import classes from './PageLayout.dev.stories.module.css'
 
 const meta: Meta = {
   title: 'Components/PageLayout/Dev',
@@ -346,11 +347,11 @@ export const Default: StoryFn = args => (
     padding={args.padding}
     rowGap={args.rowGap}
     columnGap={args.columnGap}
-    sx={{border: '1px solid red'}}
+    className={classes.DebugPageLayout}
   >
     <PageLayout.Header
       padding={args['Header.padding']}
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       divider={{
         narrow: args['Header.divider.narrow'],
         regular: args['Header.divider.regular'],
@@ -365,7 +366,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Header placeholder height']} label="Header" />
     </PageLayout.Header>
     <PageLayout.Content
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       width={args['Content.width']}
       padding={args['Content.padding']}
       hidden={{
@@ -377,7 +378,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Content placeholder height']} label="Content" />
     </PageLayout.Content>
     <PageLayout.Pane
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       position={{
         narrow: args['Pane.position.narrow'],
         regular: args['Pane.position.regular'],
@@ -402,7 +403,7 @@ export const Default: StoryFn = args => (
       <Placeholder height={args['Pane placeholder height']} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Footer
-      sx={{color: 'var(--fgColor-success)'}}
+      className={classes.SuccessColor}
       padding={args['Footer.padding']}
       divider={{
         narrow: args['Footer.divider.narrow'],

packages/react/src/PageLayout/PageLayout.module.css

@@ -325,3 +325,23 @@ body[data-page-layout-dragging='true'] * {
   /* stylelint-disable-next-line primer/spacing */
   padding: var(--spacing);
 }
+
+.DraggableHandle {
+  position: absolute;
+  inset: 0 -2px;
+  cursor: col-resize;
+  background-color: transparent;
+  transition-delay: 0.1s;
+}
+
+.DraggableHandle:hover {
+  background-color: var(--bgColor-neutral-muted);
+}
+
+.DraggableHandle[data-dragging='true'] {
+  background-color: var(--bgColor-accent-emphasis);
+}
+
+.DraggableHandle[data-dragging='true']:hover {
+  background-color: var(--bgColor-accent-emphasis);
+}

packages/react/src/PageLayout/PageLayout.stories.tsx

@@ -349,7 +349,6 @@ export const Default: StoryFn = args => (
     padding={args.padding}
     rowGap={args.rowGap}
     columnGap={args.columnGap}
-    sx={args.sx}
   >
     {args['Render header?'] ? (
       <PageLayout.Header