PageLayout API updated props + examples (#1931)

* Rename inner and outerSpacing props to padding to match with new conventions discussed in primer/react#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 <yes@jonrohan.codes> Co-authored-by: Katie Langerman <langermank@github.com>
primer · Feb 17, 2022 · e5c5312 · e5c5312
1 parent dd01060
commit e5c5312
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 19 deletions.
diff --git a/.changeset/fifty-chefs-help.md 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
@@ -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 = {
     <>
       <h2 className="h3 ml-2 mr-2">Repository settings</h2>
       <div className="ml-n2 mr-n2">
-        <RepoSettings {...RepoSettings.args} />
+        <NavRepoSettings {...NavRepoSettings.args} />
       </div>
     </>
   ),
@@ -117,7 +117,7 @@ Discussions.args = {
   paneChildren: (
     <>
       <div className="ml-n2 mr-n2 mt-n2 mb-n2">
-        <DiscussionsPane {...DiscussionsPane.args} />
+        <NavDiscussionsPane {...NavDiscussionsPane.args} />
       </div>
     </>
   ),
@@ -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: (
+    <>
+      <div className="mt-3 mx-3">
+        <h2 className="f2">
+          Traverse does not calculate scope in object deconstructor
+          <span className="f2-light color-fg-muted"> #14024</span>
+        </h2>
+        <div className="d-flex flex-items-center flex-wrap mt-2" style={{gap: '8px'}}>
+          <span title="Status: Open" class="State State--open">
+            <svg height="16" class="octicon octicon-issue-opened" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true"><path d="M8 9.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path><path fill-rule="evenodd" d="M8 0a8 8 0 100 16A8 8 0 008 0zM1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0z"></path></svg> Open
+          </span>
+          <span className="color-fg-muted"><strong class="color-fg-default">monalisa</strong> opened this issue 6 days ago</span>
+        </div>
+        <nav className="UnderlineNav ml-n2 mt-2" style={{marginBottom: '-1px'}}>
+          <div className="UnderlineNav-body" role="tablist">
+            <button className="UnderlineNav-item" role="tab" type="button">
+              <svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z"></path></svg>
+              Conversation
+            </button>
+            <button className="UnderlineNav-item" role="tab" type="button">
+              <svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z"></path></svg>
+              Commits
+            </button>
+            <button className="UnderlineNav-item" role="tab" type="button">
+              <svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.5 1.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v7.736a.75.75 0 101.5 0V1.75A1.75 1.75 0 0011.25 0h-8.5A1.75 1.75 0 001 1.75v11.5c0 .966.784 1.75 1.75 1.75h3.17a.75.75 0 000-1.5H2.75a.25.25 0 01-.25-.25V1.75zM4.75 4a.75.75 0 000 1.5h4.5a.75.75 0 000-1.5h-4.5zM4 7.75A.75.75 0 014.75 7h2a.75.75 0 010 1.5h-2A.75.75 0 014 7.75zm11.774 3.537a.75.75 0 00-1.048-1.074L10.7 14.145 9.281 12.72a.75.75 0 00-1.062 1.058l1.943 1.95a.75.75 0 001.055.008l4.557-4.45z"></path></svg>
+              Checks
+            </button>
+            <button className="UnderlineNav-item" role="tab" type="button" aria-selected="true">
+              <svg className="UnderlineNav-octicon octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H2.75zM1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V1.75zm7 1.5a.75.75 0 01.75.75v1.5h1.5a.75.75 0 010 1.5h-1.5v1.5a.75.75 0 01-1.5 0V7h-1.5a.75.75 0 010-1.5h1.5V4A.75.75 0 018 3.25zm-3 8a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z"></path></svg>
+              Files changed
+              <span class="Counter">12</span>
+            </button>
+          </div>
+        </nav>
+      </div>
+    </>
+  ),
+  contentChildren: (
+    <>
+      <div className="m-3">
+        <div className="d-flex flex-row flex-justify-end" style={{gap: '16px'}}>
+          <button class="btn btn-primary" type="button" style={{paddingInline: '12px'}}>
+            Review changes
+            <span class="dropdown-caret ml-2"></span>
+          </button>
+          <button class="btn px-2" type="button">
+            <svg className="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+          </button>
+        </div>
+        <div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
+        <div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
+        <div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
+        <div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
+      </div>
+    </>
+  ),
+  paneChildren: (
+    <>
+      <div className="position-sticky top-0 p-3 color-bg-default" style={{zIndex: 2}}>
+        <div className="d-flex flex-justify-between" style={{gap: '16px'}}>
+          <button className="btn" type="button" style={{paddingInline: '12px'}}>
+            <span className="text-normal color-fg-muted">Show:</span> all changes
+            <span className="dropdown-caret ml-2"></span>
+          </button>
+
+          <button className="btn btn-octicon p-2 mr-n2">
+            <svg className="octicon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M4.177 7.823l2.396-2.396A.25.25 0 017 5.604v4.792a.25.25 0 01-.427.177L4.177 8.177a.25.25 0 010-.354z"></path><path fill-rule="evenodd" d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v12.5A1.75 1.75 0 0114.25 16H1.75A1.75 1.75 0 010 14.25V1.75zm1.75-.25a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25H9.5v-13H1.75zm12.5 13H11v-13h3.25a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25z"></path></svg>
+          </button>
+        </div>
+        <div className="mt-3">
+          <input class="form-control input-block" type="text" placeholder="Filter changed files" />
+        </div>
+      </div>
+      <ActionListTreeViewTemplate {...ActionListTreeViewTemplate.args} />
+      {/* <div className="Box p-3" style={{minHeight: '140px'}}> </div>
+      <div className="Box p-3 mt-3" style={{minHeight: '200px'}}> </div>
+      <div className="Box p-3 mt-3" style={{minHeight: '140px'}}> </div> */}
+    </>
+  ),
+  footerChildren: (
+    <>
+      footer
+    </>
+  )
+};
diff --git 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 = ({
       <LayoutTemplate
         _debug={_debug}
         containerWidth={containerWidth}
-        outerSpacing={outerSpacing}
+        outerSpacing={padding}
         innerSpacing='none'
         columnGap={columnGap}
         rowGap={rowGap}
@@ -306,7 +306,7 @@ Playground.args = {
 
   // Structure
   containerWidth: 'xl',
-  outerSpacing: 'normal',
+  padding: 'normal',
   columnGap: 'normal',
   rowGap: 'normal',
 

diff --git a/docs/src/stories/components/Layout/SplitPageLayout.stories.jsx b/docs/src/stories/components/Layout/SplitPageLayout.stories.jsx
@@ -9,8 +9,8 @@ export default {
   argTypes: {
     // Structure
 
-    innerSpacing: {
-      options: ['normal', 'condensed'],
+    padding: {
+      options: ['normal', 'condensed', 'none'],
       control: {
         type: 'inline-radio'
       },
@@ -59,6 +59,24 @@ export default {
       }
     },
 
+    // Header
+
+    hasHeader: {
+      control: { type: 'boolean' },
+      table: {
+        category: 'Header'
+      }
+    },
+
+    // Footer
+
+    hasFooter: {
+      control: { type: 'boolean' },
+      table: {
+        category: 'Footer'
+      }
+    },    
+
     // HTML
 
     contentChildren: {
@@ -78,21 +96,25 @@ export default {
 
 export const SplitPageLayoutTemplate = ({
   _debug,
-  innerSpacing,
+  padding,
   primaryRegion,
   paneWidth,
   paneIsSticky,
   contentWidth,
+  hasHeader,
+  hasFooter,
   contentChildren,
-  paneChildren
+  paneChildren,
+  headerChildren,
+  footerChildren
 }) => {
   return (
     <>
       <LayoutTemplate
         _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',
 }