From e335cc4b39eb626e327d1c6e6a1adab29a437245 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 14 Oct 2022 14:52:13 -0700 Subject: [PATCH] Move SplitPageLayout from drafts to alpha (#2435) * Move SplitPageLayout to alpha * Create thirty-pillows-laugh.md * Add SplitPageLayout to docs sidebar --- .changeset/thirty-pillows-laugh.md | 10 ++++++ docs/content/PageLayout.mdx | 6 ++-- docs/content/SplitPageLayout.mdx | 36 ++++++++++--------- .../src/@primer/gatsby-theme-doctocat/nav.yml | 3 +- src/index.ts | 8 +++++ 5 files changed, 43 insertions(+), 20 deletions(-) create mode 100644 .changeset/thirty-pillows-laugh.md 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'