diff --git a/.changeset/thirty-pillows-laugh.md b/.changeset/thirty-pillows-laugh.md
new file mode 100644
index 00000000000..8679736e2e2
--- /dev/null
+++ b/.changeset/thirty-pillows-laugh.md
@@ -0,0 +1,10 @@
+---
+"@primer/react": minor
+---
+
+SplitPageLayout has moved from `@primer/react/drafts` to `@primer/react`:
+
+```diff
+- import {SplitPageLayout} from '@primer/react/drafts'
++ import {SplitPageLayout} from '@primer/react'
+```
diff --git a/docs/content/PageLayout.mdx b/docs/content/PageLayout.mdx
index 59bc7cb5e4c..a97c495622f 100644
--- a/docs/content/PageLayout.mdx
+++ b/docs/content/PageLayout.mdx
@@ -5,6 +5,7 @@ status: Alpha
# description: TODO
source: https://github.com/primer/react/tree/main/src/PageLayout
storybook: https://primer.style/react/storybook?path=/story/layout-pagelayout--default
+a11yReviewed: true
---
```js
@@ -156,7 +157,7 @@ See [storybook](https://primer.style/react/storybook?path=/story/layout-pagelayo
-
+
@@ -183,7 +184,8 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
placeItems: 'center',
backgroundColor: 'canvas.subtle',
borderBottom: '1px solid',
- borderColor: 'border.default'
+ borderColor: 'border.default',
+ zIndex: 1
}}
>
Custom sticky header
diff --git a/docs/content/SplitPageLayout.mdx b/docs/content/SplitPageLayout.mdx
index f389ce3554c..7ee3cd6ecd1 100644
--- a/docs/content/SplitPageLayout.mdx
+++ b/docs/content/SplitPageLayout.mdx
@@ -1,14 +1,15 @@
---
title: SplitPageLayout
componentId: split_page_layout
-status: Draft
+status: Alpha
description: Provides structure for a split page layout, including independent scrolling for the pane and content regions. Useful for responsive list/detail patterns, when an item in the pane updates the page content on selection.
source: https://github.com/primer/react/tree/main/src/SplitPageLayout
storybook: https://primer.style/react/storybook?path=/story/layout-splitpagelayout--default
+a11yReviewed: true
---
```js
-import {SplitPageLayout} from '@primer/react/drafts'
+import {SplitPageLayout} from '@primer/react'
```
@@ -31,7 +32,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -60,7 +61,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -81,7 +82,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -102,7 +103,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -123,7 +124,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -141,7 +142,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -165,7 +166,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -186,7 +187,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -222,7 +223,7 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
-
+
@@ -244,14 +245,15 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
placeItems: 'center',
backgroundColor: 'canvas.subtle',
borderBottom: '1px solid',
- borderColor: 'border.default'
+ borderColor: 'border.default',
+ zIndex: 1
}}
>
Custom sticky header
-
+
@@ -479,12 +481,12 @@ If you need a more flexible layout component, consider using the [PageLayout](/P
noUnnecessaryDeps: true,
adaptsToThemes: true,
adaptsToScreenSizes: true,
- fullTestCoverage: false,
- usedInProduction: false,
+ fullTestCoverage: true,
+ usedInProduction: true,
usageExamplesDocumented: true,
- hasStorybookStories: false,
+ hasStorybookStories: true,
designReviewed: false,
- a11yReviewed: false,
+ a11yReviewed: true,
stableApi: false,
addressedApiFeedback: false,
hasDesignGuidelines: false,
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
index 71a548febde..261996aedbc 100644
--- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml
+++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -120,9 +120,10 @@
url: /Select
- title: SelectPanel
url: /SelectPanel
-
- title: Spinner
url: /Spinner
+ - title: SplitPageLayout
+ url: /SplitPageLayout
- title: StateLabel
url: /StateLabel
- title: StyledOcticon
diff --git a/src/index.ts b/src/index.ts
index cef3a066116..30e67be0b23 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -17,6 +17,14 @@ export type {
PageLayoutPaneProps,
PageLayoutFooterProps
} from './PageLayout'
+export {SplitPageLayout} from './SplitPageLayout'
+export type {
+ SplitPageLayoutProps,
+ SplitPageLayoutHeaderProps,
+ SplitPageLayoutContentProps,
+ SplitPageLayoutPaneProps,
+ SplitPageLayoutFooterProps
+} from './SplitPageLayout'
// Hooks
export {default as useDetails} from './hooks/useDetails'