Remove support for sx from PageLayout component

.changeset/strange-steaks-burn.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": major
+---
+
+Update PageLayout component to no longer support sx

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

@@ -0,0 +1,7 @@
+.PageLayoutRedBorder {
+  border: var(--borderWidth-default) solid var(--borderColor-closed-emphasis);
+}
+
+.PageLayoutGreenText {
+  color: var(--fgColor-success);
+}

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

@@ -1,6 +1,8 @@
 import type {Meta, StoryFn} from '@storybook/react-vite'
 import {Placeholder} from '../Placeholder'
 import {PageLayout} from './PageLayout'
+import {clsx} from 'clsx'
+import classes from './PageLayout.dev.stories.module.css'
 
 const meta: Meta = {
   title: 'Components/PageLayout/Dev',
@@ -346,11 +348,10 @@
     padding={args.padding}
     rowGap={args.rowGap}
     columnGap={args.columnGap}
-    sx={{border: '1px solid red'}}
+    className={classes.PageLayoutRedBorder}
   >
     <PageLayout.Header
       padding={args['Header.padding']}
-      sx={{color: 'var(--fgColor-success)'}}
       divider={{
         narrow: args['Header.divider.narrow'],
         regular: args['Header.divider.regular'],
@@ -361,23 +362,23 @@
         regular: args['Header.hidden.regular'],
         wide: args['Header.hidden.wide'],
       }}
+      className={classes.PageLayoutGreenText}
     >
       <Placeholder height={args['Header placeholder height']} label="Header" />
     </PageLayout.Header>
     <PageLayout.Content
-      sx={{color: 'var(--fgColor-success)'}}
       width={args['Content.width']}
       padding={args['Content.padding']}
       hidden={{
         narrow: args['Content.hidden.narrow'],
         regular: args['Content.hidden.regular'],
         wide: args['Content.hidden.wide'],
       }}
+      className={classes.PageLayoutGreenText}
     >
       <Placeholder height={args['Content placeholder height']} label="Content" />
     </PageLayout.Content>
     <PageLayout.Pane
-      sx={{color: 'var(--fgColor-success)'}}
       position={{
         narrow: args['Pane.position.narrow'],
         regular: args['Pane.position.regular'],
@@ -398,11 +399,11 @@
         regular: args['Pane.hidden.regular'],
         wide: args['Pane.hidden.wide'],
       }}
+      className={classes.PageLayoutGreenText}
     >
       <Placeholder height={args['Pane placeholder height']} label="Pane" />
     </PageLayout.Pane>
     <PageLayout.Footer
-      sx={{color: 'var(--fgColor-success)'}}
       padding={args['Footer.padding']}
       divider={{
         narrow: args['Footer.divider.narrow'],
@@ -414,6 +415,7 @@
         regular: args['Footer.hidden.regular'],
         wide: args['Footer.hidden.wide'],
       }}
+      className={classes.PageLayoutGreenText}
     >
       <Placeholder height={args['Footer placeholder height']} label="Footer" />
     </PageLayout.Footer>

packages/react/src/PageLayout/PageLayout.docs.json

@@ -57,11 +57,6 @@
       "type": "| 'none' | 'condensed' | 'normal'",
       "defaultValue": "'normal'",
       "description": ""
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": [
@@ -104,11 +99,6 @@
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
           "defaultValue": "false",
           "description": "Whether the header is hidden."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -144,11 +134,6 @@
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
           "defaultValue": "false",
           "description": "Whether the content is hidden."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     },
@@ -232,11 +217,6 @@
           "description": "Which side of the page the pane should be on. Can be changed for different viewport widths.",
           "defaultValue": ""
         },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
-        },
         {
           "name": "ref",
           "type": "React.RefObject<HTMLDivElement>"
@@ -282,11 +262,6 @@
           "type": "| boolean | { narrow?: boolean regular?: boolean wide?: boolean }",
           "defaultValue": "false",
           "description": "Whether the footer is hidden."
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     }

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

@@ -154,6 +154,24 @@ body[data-page-layout-dragging='true'] * {
   }
 }
 
+/* DRAG HANDLE STYLES */
+.PageLayoutPaneDragHandle {
+  position: absolute;
+  inset: 0 -2px;
+  cursor: col-resize;
+  transition: background 0.2s;
+  background: transparent;
+}
+
+.PageLayoutPaneDragHandle:hover {
+  background: var(--bgColor-neutral-muted);
+}
+
+.PageLayoutPaneDragHandle.IsDragging,
+.PageLayoutPaneDragHandle.IsDragging:hover {
+  background: var(--bgColor-accent-emphasis);
+}
+
 .Header {
   width: 100%;
   /* stylelint-disable-next-line primer/spacing */

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