From ee84e0216766e2bef96ac3bbabfa2f84b2212d1d Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 14 Oct 2022 14:29:24 -0700 Subject: [PATCH 1/3] Move SplitPageLayout to alpha --- docs/content/PageLayout.mdx | 6 ++++-- docs/content/SplitPageLayout.mdx | 36 +++++++++++++++++--------------- src/index.ts | 8 +++++++ 3 files changed, 31 insertions(+), 19 deletions(-) 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/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' From 4716cec3cb158c43aa8dec84d02ad9b50c5aa9ca Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 14 Oct 2022 14:35:54 -0700 Subject: [PATCH 2/3] Create thirty-pillows-laugh.md --- .changeset/thirty-pillows-laugh.md | 10 ++++++++++ 1 file changed, 10 insertions(+) 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' +``` From d8c0e00e681b30e031954c353eb4258cd48f5636 Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Fri, 14 Oct 2022 14:36:39 -0700 Subject: [PATCH 3/3] Add SplitPageLayout to docs sidebar --- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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