Skip to content

Commit e5c5312

Browse files
vdepizzoljonrohanlangermank
authored
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>
1 parent dd01060 commit e5c5312

File tree

4 files changed

+157
-19
lines changed

4 files changed

+157
-19
lines changed

‎.changeset/fifty-chefs-help.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/css": patch
3+
---
4+
5+
Page layout api updates renaming spacing options in storybook

‎docs/src/stories/components/Layout/LayoutExamples.stories.jsx‎

Lines changed: 103 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import clsx from 'clsx'
33
import {PageLayoutTemplate} from './PageLayout.stories'
44
import {SplitPageLayoutTemplate} from './SplitPageLayout.stories'
5-
import {RepoSettings, DiscussionsPane} from '../NavigationList/NavigationListExamples.stories'
5+
import {RepoSettings, DiscussionsPane, ActionListTreeViewTemplate} from '../ActionList/ActionListExamples.stories'
66
import {LayoutAlphaTemplate} from './LayoutAlpha.stories'
77

88
export default {
@@ -16,7 +16,7 @@ Settings.parameters = {
1616
}
1717
Settings.args = {
1818
// Structure
19-
innerSpacing: 'normal',
19+
padding: 'normal',
2020

2121
// Responsive
2222
primaryRegion: 'pane',
@@ -32,7 +32,7 @@ Settings.args = {
3232
<>
3333
<h2 className="h3 ml-2 mr-2">Repository settings</h2>
3434
<div className="ml-n2 mr-n2">
35-
<RepoSettings {...RepoSettings.args} />
35+
<NavRepoSettings {...NavRepoSettings.args} />
3636
</div>
3737
</>
3838
),
@@ -117,7 +117,7 @@ Discussions.args = {
117117
paneChildren: (
118118
<>
119119
<div className="ml-n2 mr-n2 mt-n2 mb-n2">
120-
<DiscussionsPane {...DiscussionsPane.args} />
120+
<NavDiscussionsPane {...NavDiscussionsPane.args} />
121121
</div>
122122
</>
123123
),
@@ -214,3 +214,102 @@ IssueDetail.args = {
214214
</>
215215
)
216216
}
217+
218+
export const PullDetail = SplitPageLayoutTemplate.bind({});
219+
PullDetail.storyName = 'Pull request detail';
220+
PullDetail.parameters = {
221+
layout: 'fullscreen',
222+
};
223+
PullDetail.args = {
224+
padding: 'none',
225+
primaryRegion: 'content',
226+
paneWidth: 'wide',
227+
paneIsSticky: true,
228+
contentWidth: 'full',
229+
hasHeader: true,
230+
hasFooter: true,
231+
headerChildren: (
232+
<>
233+
<div className="mt-3 mx-3">
234+
<h2 className="f2">
235+
Traverse does not calculate scope in object deconstructor
236+
<span className="f2-light color-fg-muted"> #14024</span>
237+
</h2>
238+
<div className="d-flex flex-items-center flex-wrap mt-2" style={{gap: '8px'}}>
239+
<span title="Status: Open" class="State State--open">
240+
<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
241+
</span>
242+
<span className="color-fg-muted"><strong class="color-fg-default">monalisa</strong> opened this issue 6 days ago</span>
243+
</div>
244+
<nav className="UnderlineNav ml-n2 mt-2" style={{marginBottom: '-1px'}}>
245+
<div className="UnderlineNav-body" role="tablist">
246+
<button className="UnderlineNav-item" role="tab" type="button">
247+
<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>
248+
Conversation
249+
</button>
250+
<button className="UnderlineNav-item" role="tab" type="button">
251+
<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>
252+
Commits
253+
</button>
254+
<button className="UnderlineNav-item" role="tab" type="button">
255+
<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>
256+
Checks
257+
</button>
258+
<button className="UnderlineNav-item" role="tab" type="button" aria-selected="true">
259+
<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>
260+
Files changed
261+
<span class="Counter">12</span>
262+
</button>
263+
</div>
264+
</nav>
265+
</div>
266+
</>
267+
),
268+
contentChildren: (
269+
<>
270+
<div className="m-3">
271+
<div className="d-flex flex-row flex-justify-end" style={{gap: '16px'}}>
272+
<button class="btn btn-primary" type="button" style={{paddingInline: '12px'}}>
273+
Review changes
274+
<span class="dropdown-caret ml-2"></span>
275+
</button>
276+
<button class="btn px-2" type="button">
277+
<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>
278+
</button>
279+
</div>
280+
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
281+
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
282+
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
283+
<div className="Box mt-3 p-3" style={{minHeight: '600px'}}> </div>
284+
</div>
285+
</>
286+
),
287+
paneChildren: (
288+
<>
289+
<div className="position-sticky top-0 p-3 color-bg-default" style={{zIndex: 2}}>
290+
<div className="d-flex flex-justify-between" style={{gap: '16px'}}>
291+
<button className="btn" type="button" style={{paddingInline: '12px'}}>
292+
<span className="text-normal color-fg-muted">Show:</span> all changes
293+
<span className="dropdown-caret ml-2"></span>
294+
</button>
295+
296+
<button className="btn btn-octicon p-2 mr-n2">
297+
<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>
298+
</button>
299+
</div>
300+
<div className="mt-3">
301+
<input class="form-control input-block" type="text" placeholder="Filter changed files" />
302+
</div>
303+
</div>
304+
<ActionListTreeViewTemplate {...ActionListTreeViewTemplate.args} />
305+
{/* <div className="Box p-3" style={{minHeight: '140px'}}> </div>
306+
<div className="Box p-3 mt-3" style={{minHeight: '200px'}}> </div>
307+
<div className="Box p-3 mt-3" style={{minHeight: '140px'}}> </div> */}
308+
</>
309+
),
310+
footerChildren: (
311+
<>
312+
footer
313+
</>
314+
)
315+
};

‎docs/src/stories/components/Layout/PageLayout.stories.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ export default {
2929
}
3030
},
3131

32-
outerSpacing: {
33-
options: ['normal', 'condensed'],
32+
padding: {
33+
options: ['normal', 'condensed', 'none'],
3434
control: {
3535
type: 'inline-radio'
3636
},
37-
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.',
37+
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.',
3838
table: {
3939
category: 'Structure'
4040
}
@@ -236,7 +236,7 @@ export default {
236236
export const PageLayoutTemplate = ({
237237
_debug,
238238
containerWidth,
239-
outerSpacing,
239+
padding,
240240
columnGap,
241241
rowGap,
242242
responsiveVariant,
@@ -263,7 +263,7 @@ export const PageLayoutTemplate = ({
263263
<LayoutTemplate
264264
_debug={_debug}
265265
containerWidth={containerWidth}
266-
outerSpacing={outerSpacing}
266+
outerSpacing={padding}
267267
innerSpacing='none'
268268
columnGap={columnGap}
269269
rowGap={rowGap}
@@ -306,7 +306,7 @@ Playground.args = {
306306

307307
// Structure
308308
containerWidth: 'xl',
309-
outerSpacing: 'normal',
309+
padding: 'normal',
310310
columnGap: 'normal',
311311
rowGap: 'normal',
312312

‎docs/src/stories/components/Layout/SplitPageLayout.stories.jsx‎

Lines changed: 43 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ export default {
99
argTypes: {
1010
// Structure
1111

12-
innerSpacing: {
13-
options: ['normal', 'condensed'],
12+
padding: {
13+
options: ['normal', 'condensed', 'none'],
1414
control: {
1515
type: 'inline-radio'
1616
},
@@ -59,6 +59,24 @@ export default {
5959
}
6060
},
6161

62+
// Header
63+
64+
hasHeader: {
65+
control: { type: 'boolean' },
66+
table: {
67+
category: 'Header'
68+
}
69+
},
70+
71+
// Footer
72+
73+
hasFooter: {
74+
control: { type: 'boolean' },
75+
table: {
76+
category: 'Footer'
77+
}
78+
},
79+
6280
// HTML
6381

6482
contentChildren: {
@@ -78,21 +96,25 @@ export default {
7896

7997
export const SplitPageLayoutTemplate = ({
8098
_debug,
81-
innerSpacing,
99+
padding,
82100
primaryRegion,
83101
paneWidth,
84102
paneIsSticky,
85103
contentWidth,
104+
hasHeader,
105+
hasFooter,
86106
contentChildren,
87-
paneChildren
107+
paneChildren,
108+
headerChildren,
109+
footerChildren
88110
}) => {
89111
return (
90112
<>
91113
<LayoutTemplate
92114
_debug={_debug}
93115
containerWidth="full"
94116
outerSpacing="none"
95-
innerSpacing={innerSpacing}
117+
innerSpacing={padding}
96118
columnGap="none"
97119
rowGap="none"
98120
responsiveVariant="separateRegions"
@@ -102,10 +124,14 @@ export const SplitPageLayoutTemplate = ({
102124
panePosition="start"
103125
hasPaneDivider={true}
104126
contentWidth={contentWidth}
105-
hasHeader={false}
106-
hasFooter={false}
127+
hasHeader={hasHeader}
128+
hasHeaderDivider={true}
129+
hasFooter={hasFooter}
130+
hasFooterDivider={true}
107131
contentChildren={contentChildren}
108132
paneChildren={paneChildren}
133+
headerChildren={headerChildren}
134+
footerChildren={footerChildren}
109135
/>
110136
</>
111137
)
@@ -120,7 +146,7 @@ Playground.args = {
120146
_debug: true,
121147

122148
// Structure
123-
innerSpacing: 'normal',
149+
padding: 'normal',
124150

125151
// Responsive
126152
primaryRegion: 'content',
@@ -131,7 +157,15 @@ Playground.args = {
131157
// Content
132158
contentWidth: 'full',
133159

160+
// Header
161+
hasHeader: false,
162+
163+
// Footer
164+
hasFooter: false,
165+
134166
// Children
135167
contentChildren: 'content',
136-
paneChildren: 'pane'
168+
paneChildren: 'pane',
169+
headerChildren: 'header',
170+
footerChildren: 'footer',
137171
}

0 commit comments

Comments
 (0)