From 7140ac8f14f309e879b1cc98742b92b1c2d78961 Mon Sep 17 00:00:00 2001
From: Amanda Brown <amanda.brown@testdouble.com>
Date: Mon, 6 Mar 2023 11:55:18 -0500
Subject: [PATCH] 2909 splitpagelayoutpane accepts an id but doesnt apply it
 (#2922)

* test(SplitPageLayout): added failing test to fix

* fix(PageLayout): conditionally include `id` prop

* chore: added changeset

* docs(SplitPageLayout): updated story
---
 .changeset/rotten-hats-wonder.md                |  5 +++++
 src/PageLayout/PageLayout.tsx                   |  1 +
 src/SplitPageLayout/SplitPageLayout.stories.tsx |  6 ++++++
 src/SplitPageLayout/SplitPageLayout.test.tsx    | 15 +++++++++++++++
 4 files changed, 27 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
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.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>
diff --git a/src/SplitPageLayout/SplitPageLayout.test.tsx b/src/SplitPageLayout/SplitPageLayout.test.tsx
index b2b18058ce6..3a711dfce86 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 Pane with a custom ID', () => {
+    const {getByText} = render(
+      <ThemeProvider>
+        <SplitPageLayout>
+          <SplitPageLayout.Pane id="customId">Pane Content</SplitPageLayout.Pane>
+        </SplitPageLayout>
+      </ThemeProvider>,
+    )
+
+    const pane = getByText('Pane Content')
+
+    expect(pane.getAttribute('id')).toBe('customId')
+  })
 })