Skip to content

Commit 2a319c6

Browse files
llastflowersllastflowers
authored
Update PageLayout stories to no longer use styled-components (#6463)
1 parent 5153761 commit 2a319c6

File tree

4 files changed

+221
-165
lines changed

4 files changed

+221
-165
lines changed

‎packages/react/src/PageLayout/PageLayout.examples.stories.module.css

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
.ResponsiveFlash {
2+
display: none;
3+
}
4+
5+
@media screen and (min-width: 768px) {
6+
.ResponsiveFlash {
7+
display: block;
8+
}
9+
}
10+
11+
.BreadcrumbHeaderRow {
12+
display: flex;
13+
align-items: center;
14+
justify-content: space-between;
15+
gap: var(--base-size-16, 16px);
16+
}
17+
18+
.HeaderRow {
19+
display: flex;
20+
justify-content: space-between;
21+
}
22+
23+
.ResponsiveBox {
24+
display: none;
25+
}
26+
27+
@media (min-width: 768px) {
28+
.ResponsiveBox {
29+
display: block;
30+
}
31+
}

‎packages/react/src/PageLayout/PageLayout.examples.stories.tsx

Lines changed: 16 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import React from 'react'
22
import type {Meta, StoryFn} from '@storybook/react-vite'
33
import {PageLayout} from './PageLayout'
44
import {Placeholder} from '../Placeholder'
5-
import {ActionList, Box, Breadcrumbs, Button, Flash, LinkButton, NavList} from '..'
5+
import {ActionList, Breadcrumbs, Button, Flash, LinkButton, NavList} from '..'
66
import {ArrowLeftIcon, FilterIcon} from '@primer/octicons-react'
77
import {Dialog} from '../experimental'
8+
import classes from './PageLayout.examples.stories.module.css'
89

910
export default {
1011
title: 'Components/PageLayout/Examples',
@@ -32,14 +33,7 @@ export const ParentDetail: StoryFn = () => {
3233

3334
return (
3435
<>
35-
<Flash
36-
sx={{
37-
display: 'none',
38-
'@media screen and (min-width: 768px)': {
39-
display: 'block',
40-
},
41-
}}
42-
>
36+
<Flash className={classes.ResponsiveFlash}>
4337
Resize your browser window to see the responsive behavior of the parent-detail pattern.
4438
</Flash>
4539
<PageLayout containerWidth="full">
@@ -135,14 +129,7 @@ export const ParentDetailBreadcrumb: StoryFn = () => {
135129

136130
return (
137131
<>
138-
<Flash
139-
sx={{
140-
display: 'none',
141-
'@media screen and (min-width: 768px)': {
142-
display: 'block',
143-
},
144-
}}
145-
>
132+
<Flash className={classes.ResponsiveFlash}>
146133
Resize your browser window to see the responsive behavior of the parent-detail pattern.
147134
</Flash>
148135
<PageLayout containerWidth="full">
@@ -153,7 +140,7 @@ export const ParentDetailBreadcrumb: StoryFn = () => {
153140
wide: true,
154141
}}
155142
>
156-
<Box display="flex" alignItems="center" justifyContent="space-between">
143+
<div className={classes.BreadcrumbHeaderRow}>
157144
<Breadcrumbs>
158145
<Breadcrumbs.Item href="#index">Pages</Breadcrumbs.Item>
159146
<Breadcrumbs.Item
@@ -167,7 +154,7 @@ export const ParentDetailBreadcrumb: StoryFn = () => {
167154
{!currentHash || currentHash === '#index' || currentHash === '#fruits' ? (
168155
<LinkButton href="#new-fruit">New fruit</LinkButton>
169156
) : null}
170-
</Box>
157+
</div>
171158
</PageLayout.Header>
172159
<PageLayout.Pane
173160
position="start"
@@ -238,14 +225,7 @@ export const FilterBottomSheet: StoryFn = () => {
238225

239226
return (
240227
<>
241-
<Flash
242-
sx={{
243-
display: 'none',
244-
'@media screen and (min-width: 768px)': {
245-
display: 'block',
246-
},
247-
}}
248-
>
228+
<Flash className={classes.ResponsiveFlash}>
249229
Resize your browser window to see the responsive behavior of the filter sidebar pattern.
250230
</Flash>
251231

@@ -328,14 +308,7 @@ export const FilterActionMenu: StoryFn = () => {
328308

329309
return (
330310
<>
331-
<Flash
332-
sx={{
333-
display: 'none',
334-
'@media screen and (min-width: 768px)': {
335-
display: 'block',
336-
},
337-
}}
338-
>
311+
<Flash className={classes.ResponsiveFlash}>
339312
Resize your browser window to see the responsive behavior of the filter sidebar pattern.
340313
</Flash>
341314

@@ -551,14 +524,7 @@ export const FiltersBottomSheetTwoLevels: StoryFn = () => {
551524

552525
return (
553526
<>
554-
<Flash
555-
sx={{
556-
display: 'none',
557-
'@media screen and (min-width: 768px)': {
558-
display: 'block',
559-
},
560-
}}
561-
>
527+
<Flash className={classes.ResponsiveFlash}>
562528
Resize your browser window to see the responsive behavior of the filter sidebar pattern.
563529
</Flash>
564530

@@ -655,14 +621,7 @@ export const FiltersBottomSheetTwoLevels: StoryFn = () => {
655621
Animals
656622
</NavList.Item>
657623
</NavList>
658-
<Box
659-
sx={{
660-
display: 'none',
661-
'@media (min-width: 768px)': {
662-
display: 'block',
663-
},
664-
}}
665-
>
624+
<div className={classes.ResponsiveBox}>
666625
<ActionList>
667626
<ActionList.Group selectionVariant="single">
668627
<ActionList.GroupHeading as="h4">Filters</ActionList.GroupHeading>
@@ -692,7 +651,7 @@ export const FiltersBottomSheetTwoLevels: StoryFn = () => {
692651
</ActionList.Item>
693652
</ActionList.Group>
694653
</ActionList>
695-
</Box>
654+
</div>
696655
</PageLayout.Pane>
697656
<PageLayout.Content
698657
hidden={{
@@ -1057,14 +1016,7 @@ export const ParentDetailPlusFilters: StoryFn = () => {
10571016

10581017
return (
10591018
<>
1060-
<Flash
1061-
sx={{
1062-
display: 'none',
1063-
'@media screen and (min-width: 768px)': {
1064-
display: 'block',
1065-
},
1066-
}}
1067-
>
1019+
<Flash className={classes.ResponsiveFlash}>
10681020
Resize your browser window to see the responsive behavior of the sidebar patterns.
10691021
</Flash>
10701022

@@ -1076,7 +1028,7 @@ export const ParentDetailPlusFilters: StoryFn = () => {
10761028
wide: true,
10771029
}}
10781030
>
1079-
<Box sx={{display: 'flex', justifyContent: 'space-between'}}>
1031+
<div className={classes.HeaderRow}>
10801032
<LinkButton href={generateHref('#index')} leadingVisual={ArrowLeftIcon} variant="invisible">
10811033
Categories
10821034
</LinkButton>
@@ -1114,7 +1066,7 @@ export const ParentDetailPlusFilters: StoryFn = () => {
11141066
</ActionList>
11151067
</Dialog>
11161068
)}
1117-
</Box>
1069+
</div>
11181070
</PageLayout.Header>
11191071
<PageLayout.Pane
11201072
position="start"
@@ -1147,14 +1099,7 @@ export const ParentDetailPlusFilters: StoryFn = () => {
11471099
Animals
11481100
</NavList.Item>
11491101
</NavList>
1150-
<Box
1151-
sx={{
1152-
display: 'none',
1153-
'@media (min-width: 768px)': {
1154-
display: 'block',
1155-
},
1156-
}}
1157-
>
1102+
<div className={classes.ResponsiveBox}>
11581103
<ActionList>
11591104
<ActionList.Group selectionVariant="single">
11601105
<ActionList.GroupHeading as="h4">Filters</ActionList.GroupHeading>
@@ -1184,7 +1129,7 @@ export const ParentDetailPlusFilters: StoryFn = () => {
11841129
</ActionList.Item>
11851130
</ActionList.Group>
11861131
</ActionList>
1187-
</Box>
1132+
</div>
11881133
</PageLayout.Pane>
11891134
<PageLayout.Content
11901135
hidden={{

‎packages/react/src/PageLayout/PageLayout.features.stories.module.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
.HeaderStack {
2+
display: flex;
3+
flex-direction: column;
4+
gap: var(--base-size-16);
5+
}
6+
7+
.TitleHeading {
8+
font-weight: var(--base-text-weight-normal);
9+
}
10+
11+
.TitleSubdued {
12+
color: var(--fgColor-muted);
13+
font-weight: var(--base-text-weight-light);
14+
}
15+
16+
.StatusRow {
17+
display: flex;
18+
gap: var(--base-size-8);
19+
align-items: center;
20+
}
21+
22+
.StatusMeta {
23+
font-size: var(--text-body-size-medium);
24+
color: var(--fgColor-muted);
25+
}
26+
27+
.BoldMetaLink {
28+
font-weight: var(--base-text-weight-semibold);
29+
}
30+
31+
.ContentBox {
32+
border: var(--borderWidth-default) solid var(--borderColor-default);
33+
border-radius: var(--borderRadius-medium);
34+
height: 200px;
35+
}
36+
37+
.ScrollBox {
38+
max-width: 100%;
39+
overflow-x: auto;
40+
border: var(--borderWidth-default) solid var(--borderColor-default);
41+
white-space: nowrap;
42+
margin-top: var(--base-size-16);
43+
padding: var(--base-size-16);
44+
border-radius: var(--borderRadius-medium);
45+
}
46+
47+
.PaneStack {
48+
display: flex;
49+
flex-direction: column;
50+
gap: var(--base-size-16);
51+
}
52+
53+
.PaneSectionHeading {
54+
font-size: var(--text-body-size-small);
55+
font-weight: var(--base-text-weight-semibold);
56+
display: block;
57+
color: var(--fgColor-muted);
58+
}
59+
60+
.PaneMetaText {
61+
font-size: var(--text-body-size-small, 12px);
62+
color: var(--fgColor-muted);
63+
/* stylelint-disable-next-line primer/typography */
64+
line-height: 1.25;
65+
}
66+
67+
.PaneSeparator {
68+
width: 100%;
69+
height: 1px;
70+
/* stylelint-disable-next-line primer/colors */
71+
background-color: var(--borderColor-default);
72+
}
73+
74+
.ContentGrid {
75+
display: grid;
76+
gap: var(--base-size-16);
77+
}
78+
79+
.Paragraph {
80+
margin: 0;
81+
}
82+
83+
.NestedScrollContainer {
84+
display: grid;
85+
grid-template-rows: auto 1fr auto;
86+
height: 100vh;
87+
}
88+
89+
.OverflowAuto {
90+
overflow: auto;
91+
}
92+
93+
.StickyHeader {
94+
position: sticky;
95+
top: 0;
96+
display: grid;
97+
place-items: center;
98+
background-color: var(--bgColor-muted);
99+
border-bottom: var(--borderWidth-default) solid var(--borderColor-default);
100+
z-index: 100;
101+
}
102+
103+
.PaneHeading {
104+
font-size: var(--text-title-size-medium);
105+
}

0 commit comments

Comments
 (0)