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

@@ -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 -->

.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 -->

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 }",

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>,

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',

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'",