diff --git a/.changeset/hungry-spies-remember.md b/.changeset/hungry-spies-remember.md
index 5ccf73c543f..67f7edc74d2 100644
--- a/.changeset/hungry-spies-remember.md
+++ b/.changeset/hungry-spies-remember.md
@@ -2,6 +2,19 @@
"@primer/react": patch
---
-Deprecates position prop for PageLayout.Pane. Users will receive a console warning when it is used.
+Deprecates `position` prop for PageLayout.Pane and SplitPageLayout.Pane.
-
+```diff
+-
+-
+-
+-
+
++
++
++
++
+
+```
+
+
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index b3a7be5f539..127d72423cb 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -87,12 +87,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
+
+
+
-
-
-
@@ -106,12 +106,12 @@ See [storybook](https://primer.style/react/storybook?path=/story/components-page
+
+
+
-
-
-
@@ -193,12 +193,12 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
Custom sticky header
+
+
+
-
-
-
@@ -221,7 +221,7 @@ navigation container is used for.
-
+
Home
diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
index b6f82f4f7fc..3dc7bb4f343 100644
--- a/docs/content/SplitPageLayout.mdx
+++ b/docs/content/SplitPageLayout.mdx
@@ -167,7 +167,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json
index fd71e789354..199f7f27edb 100644
--- a/src/PageLayout/PageLayout.docs.json
+++ b/src/PageLayout/PageLayout.docs.json
@@ -137,7 +137,7 @@
"name": "position",
"type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
"defaultValue": "'end'",
- "description": "",
+ "description": "Use source order instead of relying on the `position` prop",
"deprecated": true
},
{
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 6a81204d3a0..76c7c9eb59d 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -482,6 +482,25 @@ Content.displayName = 'PageLayout.Content'
// PageLayout.Pane
export type PageLayoutPaneProps = {
+ /**
+ * @deprecated Use source order instead of relying on the `position` prop
+ *
+ * Before:
+ * ```
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * After:
+ * ```
+ *
+ *
+ *
+ *
+ * ```
+ */
position?: keyof typeof panePositions | ResponsiveValue
/**
* @deprecated Use the `position` prop with a responsive value instead.
@@ -563,13 +582,6 @@ const Pane = React.forwardRef {
- if (responsivePosition !== undefined) {
- // eslint-disable-next-line no-console
- console.warn(
- 'The `position` prop will be removed on the next major version. You should order your markup as you want it to render instead.',
- )
- }
-
// Combine position and positionWhenNarrow for backwards compatibility
const positionProp =
!isResponsiveValue(responsivePosition) && positionWhenNarrow !== 'inherit'
diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json
index b6b70f17f9f..fdd133c71f9 100644
--- a/src/SplitPageLayout/SplitPageLayout.docs.json
+++ b/src/SplitPageLayout/SplitPageLayout.docs.json
@@ -72,7 +72,7 @@
"name": "position",
"type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
"defaultValue": "start'",
- "description": "",
+ "description": "Use source order instead of relying on the `position` prop",
"deprecated": true
},
{
diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index 27d7cc182fa..3a711dfce86 100644
--- a/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -17,7 +17,6 @@ describe('SplitPageLayout', () => {
})
it('renders default layout', () => {
- const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
const {container} = render(
@@ -28,13 +27,11 @@ describe('SplitPageLayout', () => {
,
)
- expect(spy).toHaveBeenCalled()
expect(container).toMatchSnapshot()
})
it('renders Pane with a custom ID', () => {
- const spy = jest.spyOn(console, 'warn').mockImplementation(() => {})
const {getByText} = render(
@@ -42,7 +39,6 @@ describe('SplitPageLayout', () => {
,
)
- expect(spy).toHaveBeenCalled()
const pane = getByText('Pane Content')