fix(SplitPageLayout): add className prop (#5737)

primer · Mar 5, 2025 · 454ff20 · 454ff20
1 parent 2646c12
commit 454ff20
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/three-lobsters-wonder.md b/.changeset/three-lobsters-wonder.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+fix(SplitPageLayout): add className prop
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.test.tsx
@@ -44,4 +44,19 @@ describe('SplitPageLayout', () => {
 
     expect(pane.getAttribute('id')).toBe('customId')
   })
+
+  it('applies custom className', () => {
+    const {container} = render(
+      <ThemeProvider>
+        <SplitPageLayout className="custom-class">
+          <SplitPageLayout.Header>Header</SplitPageLayout.Header>
+          <SplitPageLayout.Content>Content</SplitPageLayout.Content>
+          <SplitPageLayout.Pane>Pane</SplitPageLayout.Pane>
+          <SplitPageLayout.Footer>Footer</SplitPageLayout.Footer>
+        </SplitPageLayout>
+      </ThemeProvider>,
+    )
+
+    expect(container.firstChild).toHaveClass('custom-class')
+  })
 })
diff --git a/packages/react/src/SplitPageLayout/SplitPageLayout.tsx b/packages/react/src/SplitPageLayout/SplitPageLayout.tsx
@@ -11,7 +11,7 @@ import {PageLayout} from '../PageLayout'
 // ----------------------------------------------------------------------------
 // SplitPageLayout
 
-export type SplitPageLayoutProps = SxProp
+export type SplitPageLayoutProps = SxProp & {className?: string}
 
 export const Root: React.FC<React.PropsWithChildren<SplitPageLayoutProps>> = props => {
   return (