Skip to content

Commit 3fcfba8

Browse files
hussam-i-amhussam-i-am
authored
feat(PageHeader): Convert PageHeader to CSS modules behind feature flag (#5332)
* feat(PageHeader): Convert PageHeader to CSS modules behind feature flag * revert default value * use data attributes for hidden * move css variable and update data attribute
1 parent bd5f0d4 commit 3fcfba8

File tree

4 files changed

+584
-203
lines changed

4 files changed

+584
-203
lines changed

‎.changeset/friendly-tomatoes-yell.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/react": minor
3+
---
4+
5+
Convert PageHeader to CSS modules behind feature flag

‎packages/react/src/PageHeader/PageHeader.module.css‎

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
1+
.PageHeader {
2+
/* Grid Row Order */
3+
--grid-row-order-context-area: 1;
4+
--grid-row-order-leading-action: 2;
5+
--grid-row-order-breadcrumbs: 2;
6+
--grid-row-order-title-area: 2;
7+
--grid-row-order-trailing-action: 2;
8+
--grid-row-order-actions: 2;
9+
--grid-row-order-description: 3;
10+
--grid-row-order-navigation: 4;
11+
12+
/* Title Area Region Order */
13+
--title-area-region-order-leading-visual: 0;
14+
--title-area-region-order-title: 1;
15+
--title-area-region-order-trailing-visual: 2;
16+
17+
/* Context Area Region Order */
18+
--context-area-region-order-parent-link: 0;
19+
--context-area-region-order-context-bar: 1;
20+
--context-area-region-order-context-area-actions: 2;
21+
22+
display: grid;
23+
24+
/* We have max 5 columns. */
25+
grid-template-columns: auto auto auto auto 1fr;
26+
grid-template-areas:
27+
'context-area context-area context-area context-area context-area'
28+
'leading-action breadcrumbs title-area trailing-action actions'
29+
'description description description description description'
30+
'navigation navigation navigation navigation navigation';
31+
32+
/*
33+
line-height is calculated with calc(height/font-size) and the below numbers are from @primer/primitives.
34+
--custom-font-size, --custom-line-height, --custom-font-weight are custom properties that can be used to override the below values.
35+
We don't want these values to be overridden but still want to allow consumers to override them if needed.
36+
*/
37+
&:has([data-component='TitleArea'][data-size-variant='large']) {
38+
font-size: var(--custom-font-size, var(--text-title-size-large, 2rem));
39+
font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
40+
line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5)); /* calc(48/32) */
41+
42+
--title-line-height: var(--custom-line-height, var(--text-title-lineHeight-large, 1.5));
43+
}
44+
45+
&:has([data-component='TitleArea'][data-size-variant='medium']) {
46+
font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
47+
font-weight: var(--custom-font-weight, var(--base-text-weight-semibold, 600));
48+
line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */
49+
50+
--title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
51+
}
52+
53+
&:has([data-component='TitleArea'][data-size-variant='subtitle']) {
54+
font-size: var(--custom-font-size, var(--text-title-size-medium, 1.25rem));
55+
font-weight: var(--custom-font-weight, var(--base-text-weight-normal, 400));
56+
line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6)); /* calc(32/20) */
57+
58+
--title-line-height: var(--custom-line-height, var(--text-title-lineHeight-medium, 1.6));
59+
}
60+
61+
& [data-component='PH_LeadingAction'],
62+
& [data-component='PH_TrailingAction'],
63+
& [data-component='PH_Actions'],
64+
& [data-component='PH_LeadingVisual'],
65+
& [data-component='PH_TrailingVisual'] {
66+
height: calc(var(--title-line-height) * 1em);
67+
}
68+
69+
& [data-hidden-all] {
70+
display: none;
71+
}
72+
73+
& [data-hidden-narrow] {
74+
@media screen and (max-width: 768px) {
75+
display: none;
76+
}
77+
}
78+
79+
& [data-hidden-regular] {
80+
@media screen and (min-width: 768px) {
81+
display: none;
82+
}
83+
}
84+
85+
& [data-hidden-wide] {
86+
@media screen and (min-width: 1440px) {
87+
display: none;
88+
}
89+
}
90+
}
91+
92+
.ContextArea {
93+
display: flex;
94+
padding-bottom: var(--base-size-8);
95+
font-size: var(--text-body-size-medium, 0.875rem);
96+
font-weight: var(--base-text-weight-light);
97+
line-height: var(--text-body-lineHeight-medium, 1.4285);
98+
flex-direction: row;
99+
grid-row: var(--grid-row-order-context-area);
100+
grid-area: context-area;
101+
align-items: center;
102+
gap: var(--stack-gap-condensed);
103+
}
104+
105+
.ParentLink {
106+
display: flex;
107+
align-items: center;
108+
order: var(--context-area-region-order-parent-link);
109+
gap: var(--stack-gap-condensed);
110+
}
111+
112+
.ContextBar {
113+
display: flex;
114+
order: var(--context-area-region-order-context-bar);
115+
}
116+
117+
.ContextAreaActions {
118+
display: flex;
119+
flex-direction: row;
120+
order: var(--context-area-region-order-context-area-actions);
121+
align-items: center;
122+
gap: var(--stack-gap-condensed);
123+
flex-grow: 1;
124+
justify-content: flex-end;
125+
}
126+
127+
.TitleArea {
128+
grid-row: var(--grid-row-order-title-area);
129+
grid-area: title-area;
130+
display: flex;
131+
gap: var(--stack-gap-condensed);
132+
flex-direction: row;
133+
align-items: flex-start;
134+
}
135+
136+
.LeadingAction {
137+
display: flex;
138+
padding-right: var(--base-size-8);
139+
grid-row: var(--grid-row-order-leading-action);
140+
grid-area: leading-action;
141+
align-items: center;
142+
}
143+
144+
.Breadcrumbs {
145+
display: flex;
146+
padding-right: var(--base-size-8);
147+
font-size: var(--text-body-size-medium, 0.875rem);
148+
font-weight: var(--base-text-weight-light);
149+
line-height: var(--text-body-lineHeight-medium, 1.4285);
150+
grid-row: var(--grid-row-order-breadcrumbs);
151+
grid-area: breadcrumbs;
152+
align-items: center;
153+
}
154+
155+
.LeadingVisual {
156+
/* using flex and order to display the leading visual in the title area. */
157+
display: flex;
158+
order: var(--title-area-region-order-leading-visual);
159+
align-items: center;
160+
}
161+
162+
.Title {
163+
/* using flex and order to display the title in the title area. */
164+
display: flex;
165+
order: var(--title-area-region-order-title);
166+
font-size: inherit;
167+
font-weight: inherit;
168+
}
169+
170+
.TrailingVisual {
171+
/* using flex and order to display the trailing visual in the title area. */
172+
display: flex;
173+
order: var(--title-area-region-order-trailing-visual);
174+
align-items: center;
175+
}
176+
177+
.TrailingAction {
178+
display: flex;
179+
padding-left: var(--base-size-8);
180+
grid-row: var(--grid-row-order-trailing-action);
181+
grid-area: trailing-action;
182+
align-items: center;
183+
}
184+
185+
.Actions {
186+
display: flex;
187+
min-width: max-content;
188+
padding-left: var(--base-size-8);
189+
flex-direction: row;
190+
grid-row: var(--grid-row-order-actions);
191+
grid-area: actions;
192+
gap: var(--stack-gap-condensed);
193+
justify-content: flex-end;
194+
align-items: center;
195+
}
196+
197+
.Description {
198+
display: flex;
199+
padding-top: var(--base-size-8);
200+
font-size: var(--text-body-size-medium, 0.875rem);
201+
font-weight: var(--base-text-weight-light);
202+
line-height: var(--text-body-lineHeight-medium, 1.4285);
203+
flex-direction: row;
204+
grid-row: var(--grid-row-order-description);
205+
grid-area: description;
206+
align-items: center;
207+
gap: var(--stack-gap-condensed);
208+
}
209+
210+
.Navigation {
211+
display: block;
212+
padding-top: var(--base-size-8);
213+
font-size: var(--text-body-size-medium, 0.875rem);
214+
font-weight: var(--base-text-weight-light);
215+
line-height: var(--text-body-lineHeight-medium, 1.4285);
216+
grid-row: var(--grid-row-order-navigation);
217+
grid-area: navigation;
218+
}

0 commit comments

Comments
 (0)