Skip to content

Commit 5cba52a

Browse files
joshblackjonrohanJelloBagel
authored
refactor(Table): update to CSS Modules (#5435)
* refactor(Table): update to CSS Modules * chore: add changeset * chore: update import for css module classes * chore: fix stylelint errors * fix: update type tokens used for Table * chore: disable stylelint rule for custom line height * test(vrt): update snapshots * Revert "test(vrt): update snapshots" This reverts commit a7ddd68. * Fix subtitle lineheight to match VRT * Add missing Button styles * Fix lineheight when feature flag is on --------- Co-authored-by: Jon Rohan <[email protected]> Co-authored-by: jonrohan <[email protected]> Co-authored-by: Stephanie Hong <[email protected]>
1 parent d43f27f commit 5cba52a

File tree

3 files changed

+707
-304
lines changed

3 files changed

+707
-304
lines changed

‎.changeset/selfish-flowers-approve.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+
Update Table to use CSS Modules behind feature flag

‎packages/react/src/DataTable/Table.module.css

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
/* Container ---------------------------------------------------------------- */
2+
.TableContainer {
3+
display: grid;
4+
grid-template-columns: 1fr 1fr;
5+
grid-template-areas:
6+
'title actions'
7+
'divider divider'
8+
'subtitle subtitle'
9+
'filter filter'
10+
'table table'
11+
'footer footer';
12+
column-gap: var(--base-size-8);
13+
}
14+
15+
/* TableTitle */
16+
.TableTitle {
17+
margin: 0;
18+
font-size: var(--text-body-size-medium);
19+
font-weight: var(--base-text-weight-semibold);
20+
/* stylelint-disable-next-line primer/typography */
21+
line-height: 20px;
22+
color: var(--fgColor-default);
23+
grid-area: title;
24+
align-self: center;
25+
}
26+
27+
/* TableSubtitle */
28+
.TableSubtitle {
29+
margin: 0;
30+
font-size: var(--text-body-size-small);
31+
font-weight: var(--base-text-weight-normal);
32+
line-height: var(--text-title-lineHeight-small);
33+
color: var(--fgColor-default);
34+
grid-area: subtitle;
35+
}
36+
37+
/* TableActions */
38+
.TableActions {
39+
display: flex;
40+
column-gap: var(--base-size-8);
41+
align-items: center;
42+
grid-area: actions;
43+
justify-self: end;
44+
}
45+
46+
/* TableDivider */
47+
.TableDivider {
48+
width: 100%;
49+
height: 1px;
50+
/* stylelint-disable-next-line primer/colors */
51+
background-color: var(--borderColor-default);
52+
grid-area: divider;
53+
margin-block-start: var(--base-size-16);
54+
margin-block-end: var(--base-size-8);
55+
}
56+
57+
/* Spacing before the table */
58+
.TableTitle + .TableOverflowWrapper,
59+
.TableSubtitle + .TableOverflowWrapper,
60+
.TableActions + .TableOverflowWrapper {
61+
margin-block-start: var(--base-size-8);
62+
}
63+
64+
.TableOverflowWrapper {
65+
grid-area: table;
66+
}
67+
68+
/* Table -------------------------------------------------------------------- */
69+
.Table {
70+
/* Default table styles */
71+
--table-border-radius: 0.375rem;
72+
--table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);
73+
--table-font-size: 0.75rem;
74+
75+
display: grid;
76+
width: 100%;
77+
/* stylelint-disable-next-line primer/typography */
78+
font-size: var(--table-font-size);
79+
/* stylelint-disable-next-line primer/typography */
80+
line-height: calc(20 / 12);
81+
border-spacing: 0;
82+
/* stylelint-disable-next-line primer/borders */
83+
border-collapse: separate;
84+
background-color: var(--bgColor-default);
85+
grid-area: table;
86+
grid-template-columns: var(--grid-template-columns);
87+
88+
/* Density modes: condensed, normal, spacious */
89+
&:where([data-cell-padding='condensed']) {
90+
--cell-padding-block: 0.25rem;
91+
--cell-padding-inline: 0.5rem;
92+
}
93+
94+
&:where([data-cell-padding='normal']) {
95+
--cell-padding-block: 0.5rem;
96+
--cell-padding-inline: 0.75rem;
97+
}
98+
99+
&:where([data-cell-padding='spacious']) {
100+
--cell-padding-block: 0.75rem;
101+
--cell-padding-inline: 1rem;
102+
}
103+
}
104+
105+
/* Borders */
106+
.TableCell:first-child,
107+
.TableHeader:first-child {
108+
border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);
109+
}
110+
111+
.TableCell:last-child,
112+
.TableHeader:last-child {
113+
border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);
114+
}
115+
116+
.TableHeader,
117+
.TableCell {
118+
display: flex;
119+
/* stylelint-disable-next-line primer/spacing */
120+
padding: var(--table-cell-padding);
121+
text-align: start;
122+
align-items: center;
123+
border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
124+
}
125+
126+
.TableHeader:where([data-cell-align='end']),
127+
.TableCell:where([data-cell-align='end']) {
128+
display: flex;
129+
text-align: end;
130+
justify-content: flex-end;
131+
}
132+
133+
.TableHeader[data-cell-align='end'] .TableSortButton {
134+
display: flex;
135+
flex-direction: row-reverse;
136+
}
137+
138+
.TableHead .TableRow:first-of-type .TableHeader {
139+
border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
140+
}
141+
142+
/* Border radius */
143+
/* stylelint-disable-next-line selector-max-specificity */
144+
.TableHead .TableRow:first-of-type .TableHeader:first-child {
145+
/* stylelint-disable-next-line primer/borders */
146+
border-top-left-radius: var(--table-border-radius);
147+
}
148+
149+
/* stylelint-disable-next-line selector-max-specificity */
150+
.TableHead .TableRow:first-of-type .TableHeader:last-child {
151+
/* stylelint-disable-next-line primer/borders */
152+
border-top-right-radius: var(--table-border-radius);
153+
}
154+
155+
/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
156+
.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child {
157+
/* stylelint-disable-next-line primer/borders */
158+
border-bottom-left-radius: var(--table-border-radius);
159+
}
160+
161+
/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */
162+
.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child {
163+
/* stylelint-disable-next-line primer/borders */
164+
border-bottom-right-radius: var(--table-border-radius);
165+
}
166+
167+
/**
168+
* Offset padding to make sure type aligns regardless of cell padding
169+
* selection
170+
*/
171+
.TableRow > *:first-child:not(.TableCellSkeleton),
172+
.TableRow > *:first-child .TableCellSkeletonItem {
173+
padding-inline-start: var(--base-size-16);
174+
}
175+
176+
.TableRow > *:last-child:not(.TableCellSkeleton),
177+
.TableRow > *:last-child .TableCellSkeletonItem {
178+
padding-inline-end: var(--base-size-16);
179+
}
180+
181+
/* TableHeader */
182+
.TableHeader {
183+
font-weight: var(--base-text-weight-semibold);
184+
color: var(--fgColor-muted);
185+
background-color: var(--bgColor-muted);
186+
border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);
187+
}
188+
189+
.TableHeader:where([aria-sort='descending']),
190+
.TableHeader:where([aria-sort='ascending']) {
191+
color: var(--fgColor-default);
192+
}
193+
194+
/* Control visibility of sort icons */
195+
.TableSortIcon {
196+
visibility: hidden;
197+
}
198+
199+
/* The ASC icon is visible if the header is sortable and is hovered or focused */
200+
.TableHeader:hover .TableSortIcon--ascending,
201+
.TableHeader .TableSortButton:focus .TableSortIcon--ascending {
202+
visibility: visible;
203+
}
204+
205+
/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */
206+
.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,
207+
.TableHeader[aria-sort='descending'] .TableSortIcon--descending {
208+
visibility: visible;
209+
}
210+
211+
/* TableRow */
212+
.TableRow:hover .TableCell:not(.TableCellSkeleton) {
213+
background-color: var(--control-transparent-bgColor-hover);
214+
}
215+
216+
/* TableCell */
217+
.TableCell:where([scope='row']) {
218+
display: flex;
219+
font-weight: var(--base-text-weight-semibold);
220+
color: var(--fgColor-default);
221+
align-items: center;
222+
}
223+
224+
/* TableCellSkeleton */
225+
.TableCellSkeleton {
226+
padding: 0;
227+
}
228+
229+
.TableCellSkeletonItems {
230+
display: flex;
231+
width: 100%;
232+
flex-direction: column;
233+
}
234+
235+
.TableCellSkeletonItem {
236+
/* stylelint-disable-next-line primer/spacing */
237+
padding: var(--table-cell-padding);
238+
239+
&:nth-of-type(5n + 1) {
240+
--skeleton-item-width: 85%;
241+
}
242+
243+
&:nth-of-type(5n + 2) {
244+
--skeleton-item-width: 67.5%;
245+
}
246+
247+
&:nth-of-type(5n + 3) {
248+
--skeleton-item-width: 80%;
249+
}
250+
251+
&:nth-of-type(5n + 4) {
252+
--skeleton-item-width: 60%;
253+
}
254+
255+
&:nth-of-type(5n + 5) {
256+
--skeleton-item-width: 75%;
257+
}
258+
}
259+
260+
.TableCellSkeletonItem [data-component='SkeletonText'] {
261+
width: var(--skeleton-item-width);
262+
}
263+
264+
.TableCellSkeletonItem:not(:last-of-type) {
265+
border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);
266+
}
267+
268+
.TableSortButton {
269+
column-gap: 0.5rem;
270+
}
271+
272+
/* Grid layout */
273+
.TableHead,
274+
.TableBody,
275+
.TableRow {
276+
display: contents;
277+
}
278+
279+
@supports (grid-template-columns: subgrid) {
280+
.TableHead,
281+
.TableBody,
282+
.TableRow {
283+
display: grid;
284+
grid-template-columns: subgrid;
285+
grid-column: -1 /1;
286+
}
287+
}

0 commit comments

Comments
 (0)