From a67cfa043e451328ae733bb4bce618c93d20d9c7 Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 21 Feb 2023 13:15:13 -0500
Subject: [PATCH 1/4] test(SplitPageLayout): added failing test to fix

---
 src/SplitPageLayout/SplitPageLayout.test.tsx | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index b2b18058ce6..8770aaff16d 100644
--- a/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -27,6 +27,21 @@ describe('SplitPageLayout', () => {
         </SplitPageLayout>
       </ThemeProvider>,
     )
+
     expect(container).toMatchSnapshot()
   })
+
+  it('renders with a custom ID', () => {
+    const {getByText} = render(
+      <ThemeProvider>
+        <SplitPageLayout>
+          <SplitPageLayout.Pane id="customId">Pane</SplitPageLayout.Pane>
+        </SplitPageLayout>
+      </ThemeProvider>,
+    )
+
+    const pane = getByText('Pane')
+
+    expect(pane.getAttribute('id')).toBe('customId')
+  })
 })

From 1912cfc9df07632156bd525060598a43c7a07bee Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 21 Feb 2023 13:42:24 -0500
Subject: [PATCH 2/4] fix(PageLayout): conditionally include `id` prop

---
 src/PageLayout/PageLayout.tsx                | 1 +
 src/SplitPageLayout/SplitPageLayout.test.tsx | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 54bd7f9e285..f06af5ff006 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -736,6 +736,7 @@ const Pane = React.forwardRef<HTMLDivElement, React.PropsWithChildren<PageLayout
               '--pane-max-width-diff': '959px',
             },
           })}
+          {...(id && {id: paneId})}
         >
           {resizable && (
             <VisuallyHidden>
diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index 8770aaff16d..3a711dfce86 100644
--- a/src/SplitPageLayout/SplitPageLayout.test.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -31,16 +31,16 @@ describe('SplitPageLayout', () => {
     expect(container).toMatchSnapshot()
   })
 
-  it('renders with a custom ID', () => {
+  it('renders Pane with a custom ID', () => {
     const {getByText} = render(
       <ThemeProvider>
         <SplitPageLayout>
-          <SplitPageLayout.Pane id="customId">Pane</SplitPageLayout.Pane>
+          <SplitPageLayout.Pane id="customId">Pane Content</SplitPageLayout.Pane>
         </SplitPageLayout>
       </ThemeProvider>,
     )
 
-    const pane = getByText('Pane')
+    const pane = getByText('Pane Content')
 
     expect(pane.getAttribute('id')).toBe('customId')
   })

From e642d801c0c2d9e560f3263f5e603bfb4a9af4a4 Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 21 Feb 2023 13:43:43 -0500
Subject: [PATCH 3/4] chore: added changeset

---
 .changeset/rotten-hats-wonder.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/rotten-hats-wonder.md

diff --git a/.changeset/rotten-hats-wonder.md b/.changeset/rotten-hats-wonder.md
new file mode 100644
index 00000000000..33f2325a497
--- /dev/null
+++ b/.changeset/rotten-hats-wonder.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updated PageLayout.Pane to conditionally include id prop

From a20e93125ef122ef7b739e45842525215008fda4 Mon Sep 17 00:00:00 2001
From: "Amanda G. Brown" <green6erry@gmail.com>
Date: Tue, 21 Feb 2023 13:56:57 -0500
Subject: [PATCH 4/4] docs(SplitPageLayout): updated story

---
 src/SplitPageLayout/SplitPageLayout.stories.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/SplitPageLayout/SplitPageLayout.stories.tsx b/src/SplitPageLayout/SplitPageLayout.stories.tsx
index d3efd979e45..8926c6e7a18 100644
--- a/src/SplitPageLayout/SplitPageLayout.stories.tsx
+++ b/src/SplitPageLayout/SplitPageLayout.stories.tsx
@@ -159,6 +159,11 @@ const meta: Meta = {
       control: {type: 'radio'},
       table: {category: 'Pane props'},
     },
+    'Pane.id': {
+      type: 'string',
+      defaultValue: 'customId',
+      table: {category: 'Pane props'},
+    },
     'Pane.position.narrow': {
       type: {
         name: 'enum',
@@ -351,6 +356,7 @@ const Template: Story = args => (
           regular: args['Pane.hidden.regular'],
           wide: args['Pane.hidden.wide'],
         }}
+        id={args['Pane.id']}
       >
         <Placeholder height={args['Pane placeholder height']} label="Pane" />
       </SplitPageLayout.Pane>