From 4fffd72ebc1ea391b30c4d0d40041e9e48d8318d Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Wed, 25 Oct 2023 15:19:17 +0200
Subject: [PATCH] next-major: Update docs and changeset for #3386 and #3367
 (#3858)

* Update pagelayout pane changeset

* Update docs for PageLayout.Pane

* Update SplitPageLayout.Pane docs

* Update yellow-windows-accept.md

* positionWhenNarrow is never actually used

* delete deprecated prop from test

* add components changed to changeset

* Update changeset for ConfirmationDialog
---
 .changeset/lucky-coins-guess.md               |  6 +++--
 .changeset/yellow-windows-accept.md           |  4 +++-
 src/PageLayout/PageLayout.docs.json           | 13 -----------
 src/PageLayout/PageLayout.test.tsx            |  2 +-
 src/PageLayout/PageLayout.tsx                 | 22 -------------------
 src/SplitPageLayout/SplitPageLayout.docs.json |  6 -----
 6 files changed, 8 insertions(+), 45 deletions(-)

diff --git a/.changeset/lucky-coins-guess.md b/.changeset/lucky-coins-guess.md
index 6377f43d809..5862e44ff31 100644
--- a/.changeset/lucky-coins-guess.md
+++ b/.changeset/lucky-coins-guess.md
@@ -1,5 +1,7 @@
 ---
-"@primer/react": patch
+"@primer/react": major
 ---
 
-Use createRoot instead of ReactDOM.render for React 18 compatibility.
+ConfirmationDialog: Use createRoot instead of ReactDOM.render for React 18 compatibility.
+
+<!-- Changed components: ConfirmationDialog -->
diff --git a/.changeset/yellow-windows-accept.md b/.changeset/yellow-windows-accept.md
index 79b7a1079fb..5390f04ebd0 100644
--- a/.changeset/yellow-windows-accept.md
+++ b/.changeset/yellow-windows-accept.md
@@ -2,4 +2,6 @@
 "@primer/react": major
 ---
 
-Removes PageLayout.Pane position prop.
+Removes PageLayout.Pane position prop. The layout is now decided by the order in which PageLayout.Pane and PageLayout.Content appear in the DOM.
+
+<!-- Changed components: PageLayout, SplitPageLayout -->
diff --git a/src/PageLayout/PageLayout.docs.json b/src/PageLayout/PageLayout.docs.json
index 5da95e2cce0..fd999fca3dc 100644
--- a/src/PageLayout/PageLayout.docs.json
+++ b/src/PageLayout/PageLayout.docs.json
@@ -121,19 +121,6 @@
           "type": "string | undefined",
           "description": "Id of an element that acts as a label for the pane. Required if the pane overflows and doesn't have aria-label."
         },
-        {
-          "name": "position",
-          "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
-          "defaultValue": "'end'",
-          "description": ""
-        },
-        {
-          "name": "positionWhenNarrow",
-          "type": "| 'inherit' | 'start' | 'end'",
-          "defaultValue": "'inherit'",
-          "deprecated": true,
-          "description": "Use the position prop with a responsive value instead."
-        },
         {
           "name": "width",
           "type": "| 'small' | 'medium' | 'large' | { min: string max: string default: string }",
diff --git a/src/PageLayout/PageLayout.test.tsx b/src/PageLayout/PageLayout.test.tsx
index dec502086b7..ba41f499091 100644
--- a/src/PageLayout/PageLayout.test.tsx
+++ b/src/PageLayout/PageLayout.test.tsx
@@ -70,7 +70,7 @@ describe('PageLayout', () => {
         <PageLayout>
           <PageLayout.Header>Header</PageLayout.Header>
           <PageLayout.Content>Content</PageLayout.Content>
-          <PageLayout.Pane positionWhenNarrow="start">Pane</PageLayout.Pane>
+          <PageLayout.Pane>Pane</PageLayout.Pane>
           <PageLayout.Footer>Footer</PageLayout.Footer>
         </PageLayout>
       </ThemeProvider>,
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 11caa1f97c8..e6de1a73259 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -493,21 +493,6 @@ const isPaneWidth = (width: PaneWidth | CustomWidthOptions): width is PaneWidth
 }
 
 export type PageLayoutPaneProps = {
-  /**
-   * @deprecated Use the `position` prop with a responsive value instead.
-   *
-   * Before:
-   * ```
-   * position="start"
-   * positionWhenNarrow="end"
-   * ```
-   *
-   * After:
-   * ```
-   * position={{regular: 'start', narrow: 'end'}}
-   * ```
-   */
-  positionWhenNarrow?: 'inherit' | keyof typeof panePositions
   'aria-labelledby'?: string
   'aria-label'?: string
   width?: PaneWidth | CustomWidthOptions
@@ -537,11 +522,6 @@ export type PageLayoutPaneProps = {
   id?: string
 } & SxProp
 
-const panePositions = {
-  start: REGION_ORDER.paneStart,
-  end: REGION_ORDER.paneEnd,
-}
-
 const paneWidths = {
   small: ['100%', null, '240px', '256px'],
   medium: ['100%', null, '256px', '296px'],
@@ -555,8 +535,6 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
     {
       'aria-label': label,
       'aria-labelledby': labelledBy,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      positionWhenNarrow = 'inherit',
       width = 'medium',
       minWidth = 256,
       padding = 'none',
diff --git a/src/SplitPageLayout/SplitPageLayout.docs.json b/src/SplitPageLayout/SplitPageLayout.docs.json
index 9fb036a25d3..e6bfeda2865 100644
--- a/src/SplitPageLayout/SplitPageLayout.docs.json
+++ b/src/SplitPageLayout/SplitPageLayout.docs.json
@@ -68,12 +68,6 @@
     {
       "name": "SplitPageLayout.Pane",
       "props": [
-        {
-          "name": "position",
-          "type": "| 'start' | 'end' | { narrow?: | 'start' | 'end' regular?: | 'start' | 'end' wide?: | 'start' | 'end' }",
-          "defaultValue": "'start'",
-          "description": ""
-        },
         {
           "name": "width",
           "type": "| 'small' | 'medium' | 'large'",