From e5c5312ec8bf139f6c94d2f70ceecd4b3cd9fd82 Mon Sep 17 00:00:00 2001 From: Vinicius Depizzol Date: Thu, 17 Feb 2022 12:31:42 -0800 Subject: [PATCH] PageLayout API updated props + examples (#1931) * Rename inner and outerSpacing props to padding to match with new conventions discussed in https://github.com/primer/react/pull/1820 * Fix Layout example stories * Add header and footer slots to SplitPageLayout Also add initial skeleton for Pull request detail story * add TreeView to Pull request detail story * Add padding: none prop * Ongoing Pull request detail story * Create fifty-chefs-help.md * Resolve storybook conflicts * Resolve storybook conflicts, second try Co-authored-by: Jon Rohan Co-authored-by: Katie Langerman --- .changeset/fifty-chefs-help.md | 5 + .../Layout/LayoutExamples.stories.jsx | 107 +++++++++++++++++- .../components/Layout/PageLayout.stories.jsx | 12 +- .../Layout/SplitPageLayout.stories.jsx | 52 +++++++-- 4 files changed, 157 insertions(+), 19 deletions(-) create mode 100644 .changeset/fifty-chefs-help.md diff --git a/.changeset/fifty-chefs-help.md b/.changeset/fifty-chefs-help.md new file mode 100644 index 0000000000..c497befe36 --- /dev/null +++ b/.changeset/fifty-chefs-help.md @@ -0,0 +1,5 @@ +--- +"@primer/css": patch +--- + +Page layout api updates renaming spacing options in storybook diff --git a/docs/src/stories/components/Layout/LayoutExamples.stories.jsx b/docs/src/stories/components/Layout/LayoutExamples.stories.jsx index 4f50820af8..77051f6321 100644 --- a/docs/src/stories/components/Layout/LayoutExamples.stories.jsx +++ b/docs/src/stories/components/Layout/LayoutExamples.stories.jsx @@ -2,7 +2,7 @@ import React from 'react' import clsx from 'clsx' import {PageLayoutTemplate} from './PageLayout.stories' import {SplitPageLayoutTemplate} from './SplitPageLayout.stories' -import {RepoSettings, DiscussionsPane} from '../NavigationList/NavigationListExamples.stories' +import {RepoSettings, DiscussionsPane, ActionListTreeViewTemplate} from '../ActionList/ActionListExamples.stories' import {LayoutAlphaTemplate} from './LayoutAlpha.stories' export default { @@ -16,7 +16,7 @@ Settings.parameters = { } Settings.args = { // Structure - innerSpacing: 'normal', + padding: 'normal', // Responsive primaryRegion: 'pane', @@ -32,7 +32,7 @@ Settings.args = { <>

Repository settings

- +
), @@ -117,7 +117,7 @@ Discussions.args = { paneChildren: ( <>
- +
), @@ -214,3 +214,102 @@ IssueDetail.args = { ) } + +export const PullDetail = SplitPageLayoutTemplate.bind({}); +PullDetail.storyName = 'Pull request detail'; +PullDetail.parameters = { + layout: 'fullscreen', +}; +PullDetail.args = { + padding: 'none', + primaryRegion: 'content', + paneWidth: 'wide', + paneIsSticky: true, + contentWidth: 'full', + hasHeader: true, + hasFooter: true, + headerChildren: ( + <> +
+

+ Traverse does not calculate scope in object deconstructor + #14024 +

+
+ + Open + + monalisa opened this issue 6 days ago +
+ +
+ + ), + contentChildren: ( + <> +
+
+ + +
+
+
+
+
+
+ + ), + paneChildren: ( + <> +
+
+ + + +
+
+ +
+
+ + {/*
+
+
*/} + + ), + footerChildren: ( + <> + footer + + ) +}; diff --git a/docs/src/stories/components/Layout/PageLayout.stories.jsx b/docs/src/stories/components/Layout/PageLayout.stories.jsx index 40a8443a4b..a759b0bc0d 100644 --- a/docs/src/stories/components/Layout/PageLayout.stories.jsx +++ b/docs/src/stories/components/Layout/PageLayout.stories.jsx @@ -29,12 +29,12 @@ export default { } }, - outerSpacing: { - options: ['normal', 'condensed'], + padding: { + options: ['normal', 'condensed', 'none'], control: { type: 'inline-radio' }, - description: 'Sets wrapper margins surrounding the component to distance itself from the viewport edges. `normal` sets the margin to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the margin at 16px.', + description: 'Sets container spacing surrounding the component to distance itself from the viewport edges. `normal` sets the spacing to 16px, and to 24px on `lg` breakpoints and above. `condensed` keeps the spacing at 16px.', table: { category: 'Structure' } @@ -236,7 +236,7 @@ export default { export const PageLayoutTemplate = ({ _debug, containerWidth, - outerSpacing, + padding, columnGap, rowGap, responsiveVariant, @@ -263,7 +263,7 @@ export const PageLayoutTemplate = ({ { return ( <> @@ -92,7 +114,7 @@ export const SplitPageLayoutTemplate = ({ _debug={_debug} containerWidth="full" outerSpacing="none" - innerSpacing={innerSpacing} + innerSpacing={padding} columnGap="none" rowGap="none" responsiveVariant="separateRegions" @@ -102,10 +124,14 @@ export const SplitPageLayoutTemplate = ({ panePosition="start" hasPaneDivider={true} contentWidth={contentWidth} - hasHeader={false} - hasFooter={false} + hasHeader={hasHeader} + hasHeaderDivider={true} + hasFooter={hasFooter} + hasFooterDivider={true} contentChildren={contentChildren} paneChildren={paneChildren} + headerChildren={headerChildren} + footerChildren={footerChildren} /> ) @@ -120,7 +146,7 @@ Playground.args = { _debug: true, // Structure - innerSpacing: 'normal', + padding: 'normal', // Responsive primaryRegion: 'content', @@ -131,7 +157,15 @@ Playground.args = { // Content contentWidth: 'full', + // Header + hasHeader: false, + + // Footer + hasFooter: false, + // Children contentChildren: 'content', - paneChildren: 'pane' + paneChildren: 'pane', + headerChildren: 'header', + footerChildren: 'footer', }