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

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Updated PageLayout.Pane to conditionally include id prop

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>

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>

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')
+  })
 })