Skip to content

Commit 9be020a

Browse files
vursenvursen
authored
refactor: add has-header and has-footer attrs to avoid :has selector (#10428)
1 parent 4602337 commit 9be020a

File tree

4 files changed

+253
-6
lines changed

4 files changed

+253
-6
lines changed

‎packages/grid/src/styles/vaadin-grid-base-styles.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -204,7 +204,7 @@ export const gridStyles = css`
204204
border-top: 0;
205205
}
206206
207-
table:has(#header > tr:not([hidden])) [part~='first-row-cell'] {
207+
table[has-header] [part~='first-row-cell'] {
208208
border-top: var(--_row-border-width) solid var(--_border-color);
209209
}
210210
@@ -257,7 +257,7 @@ export const gridStyles = css`
257257
--_top-opaque: 1;
258258
}
259259
260-
table:has(#footer > tr:not([hidden])) [part~='last-row-cell']:not([part~='details-opened-row-cell']) {
260+
table[has-footer] [part~='last-row-cell']:not([part~='details-opened-row-cell']) {
261261
border-bottom: var(--_row-border-width) solid var(--_border-color);
262262
--_bottom: 0;
263263
}
@@ -529,7 +529,7 @@ export const gridStyles = css`
529529
top: 0;
530530
}
531531
532-
table:has(#header > tr:not([hidden])) [part~='first-row-cell']::after {
532+
table[has-header] [part~='first-row-cell']::after {
533533
top: calc(var(--_row-border-width) * -1);
534534
}
535535
@@ -541,7 +541,7 @@ export const gridStyles = css`
541541
}
542542
543543
#header [part~='row']:last-child::after,
544-
table:has(#footer > tr:not([hidden])) [part*='last-row']::after {
544+
table[has-footer] [part*='last-row']::after {
545545
bottom: calc(var(--_row-border-width) * -1);
546546
}
547547
@@ -588,7 +588,7 @@ export const gridStyles = css`
588588
}
589589
590590
[part~='row']:not([part*='first-row'])[dragover='above']::after,
591-
table:has(#header > tr:not([hidden])) [part*='first-row'][dragover='above']::after {
591+
table[has-header] [part*='first-row'][dragover='above']::after {
592592
top: calc(var(--vaadin-focus-ring-width) / -2);
593593
}
594594
@@ -598,7 +598,7 @@ export const gridStyles = css`
598598
}
599599
600600
[part~='row']:not([part*='last-row'])[dragover='below']::after,
601-
table:has(#footer > tr:not([hidden])) [part*='last-row'][dragover='below']::after {
601+
table[has-footer] [part*='last-row'][dragover='below']::after {
602602
bottom: calc(var(--vaadin-focus-ring-width) / -2);
603603
}
604604

‎packages/grid/src/vaadin-grid-mixin.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -639,6 +639,14 @@ export const GridMixin = (superClass) =>
639639
row.hidden = !visibleRowCells.length;
640640
}
641641

642+
if (row.parentElement === this.$.header) {
643+
this.$.table.toggleAttribute('has-header', this.$.header.querySelector('tr:not([hidden])'));
644+
}
645+
646+
if (row.parentElement === this.$.footer) {
647+
this.$.table.toggleAttribute('has-footer', this.$.footer.querySelector('tr:not([hidden])'));
648+
}
649+
642650
// Make sure the section has a tabbable element
643651
this._resetKeyboardNavigation();
644652
this._a11yUpdateGridSize(this.size, this._columnTree, this.__emptyState);

‎packages/grid/test/dom/__snapshots__/grid.test.snap.js‎

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ snapshots["vaadin-grid shadow default"] =
4646
aria-colcount="2"
4747
aria-multiselectable="true"
4848
aria-rowcount="3"
49+
has-header=""
4950
id="table"
5051
role="treegrid"
5152
tabindex="0"
@@ -270,6 +271,7 @@ snapshots["vaadin-grid shadow selected"] =
270271
aria-colcount="2"
271272
aria-multiselectable="true"
272273
aria-rowcount="3"
274+
has-header=""
273275
id="table"
274276
role="treegrid"
275277
tabindex="0"
@@ -495,6 +497,7 @@ snapshots["vaadin-grid shadow details opened"] =
495497
aria-colcount="2"
496498
aria-multiselectable="true"
497499
aria-rowcount="3"
500+
has-header=""
498501
id="table"
499502
role="treegrid"
500503
tabindex="0"
@@ -720,6 +723,7 @@ snapshots["vaadin-grid shadow hidden column"] =
720723
aria-colcount="2"
721724
aria-multiselectable="true"
722725
aria-rowcount="3"
726+
has-header=""
723727
id="table"
724728
role="treegrid"
725729
tabindex="0"
@@ -893,6 +897,7 @@ snapshots["vaadin-grid shadow hidden column selected"] =
893897
aria-colcount="2"
894898
aria-multiselectable="true"
895899
aria-rowcount="3"
900+
has-header=""
896901
id="table"
897902
role="treegrid"
898903
tabindex="0"
@@ -1057,3 +1062,229 @@ snapshots["vaadin-grid shadow hidden column selected"] =
10571062
`;
10581063
/* end snapshot vaadin-grid shadow hidden column selected */
10591064

1065+
snapshots["vaadin-grid shadow with footer"] =
1066+
`<div
1067+
id="scroller"
1068+
scrolling=""
1069+
style="touch-action: none;"
1070+
>
1071+
<table
1072+
aria-colcount="2"
1073+
aria-multiselectable="true"
1074+
aria-rowcount="4"
1075+
has-footer=""
1076+
has-header=""
1077+
id="table"
1078+
role="treegrid"
1079+
tabindex="0"
1080+
>
1081+
<caption
1082+
id="sizer"
1083+
part="row"
1084+
>
1085+
</caption>
1086+
<tbody>
1087+
<tr>
1088+
<td
1089+
first-column=""
1090+
id="vaadin-grid-cell-4"
1091+
part="cell body-cell first-column-cell"
1092+
role="gridcell"
1093+
style="width: 100px; flex-grow: 1; order: 10000000;"
1094+
tabindex="-1"
1095+
>
1096+
<slot name="vaadin-grid-cell-content-4">
1097+
</slot>
1098+
</td>
1099+
<td
1100+
id="vaadin-grid-cell-5"
1101+
last-column=""
1102+
part="cell body-cell last-column-cell"
1103+
role="gridcell"
1104+
style="width: 100px; flex-grow: 1; order: 20000000;"
1105+
tabindex="-1"
1106+
>
1107+
<slot name="vaadin-grid-cell-content-5">
1108+
</slot>
1109+
</td>
1110+
</tr>
1111+
</tbody>
1112+
<thead
1113+
id="header"
1114+
role="rowgroup"
1115+
style="transform: translate(0px, 0px);"
1116+
>
1117+
<tr
1118+
aria-rowindex="1"
1119+
part="row"
1120+
role="row"
1121+
tabindex="-1"
1122+
>
1123+
<th
1124+
first-column=""
1125+
id="vaadin-grid-cell-0"
1126+
part="cell header-cell first-column-cell first-header-row-cell last-header-row-cell"
1127+
role="columnheader"
1128+
style="width: 100px; flex-grow: 1; order: 10000000;"
1129+
tabindex="0"
1130+
>
1131+
<slot name="vaadin-grid-cell-content-0">
1132+
</slot>
1133+
</th>
1134+
<th
1135+
id="vaadin-grid-cell-1"
1136+
last-column=""
1137+
part="cell header-cell last-column-cell first-header-row-cell last-header-row-cell"
1138+
role="columnheader"
1139+
style="width: 100px; flex-grow: 1; order: 20000000;"
1140+
tabindex="-1"
1141+
>
1142+
<slot name="vaadin-grid-cell-content-1">
1143+
</slot>
1144+
</th>
1145+
</tr>
1146+
</thead>
1147+
<tbody
1148+
id="items"
1149+
role="rowgroup"
1150+
style="transform: translate(0px, 0px); height: 71px;"
1151+
>
1152+
<tr
1153+
aria-rowindex="2"
1154+
aria-selected="false"
1155+
drag-disabled=""
1156+
drop-disabled=""
1157+
even=""
1158+
first=""
1159+
part="row body-row first-row even-row drag-disabled-row drop-disabled-row"
1160+
role="row"
1161+
style="position: absolute; transform: translateY(0px);"
1162+
tabindex="-1"
1163+
>
1164+
<td
1165+
aria-selected="false"
1166+
first-column=""
1167+
id="vaadin-grid-cell-6"
1168+
part="cell body-cell first-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
1169+
role="gridcell"
1170+
style="width: 100px; flex-grow: 1; order: 10000000;"
1171+
tabindex="0"
1172+
>
1173+
<slot name="vaadin-grid-cell-content-6">
1174+
</slot>
1175+
</td>
1176+
<td
1177+
aria-selected="false"
1178+
id="vaadin-grid-cell-7"
1179+
last-column=""
1180+
part="cell body-cell last-column-cell first-row-cell even-row-cell drag-disabled-row-cell drop-disabled-row-cell"
1181+
role="gridcell"
1182+
style="width: 100px; flex-grow: 1; order: 20000000;"
1183+
tabindex="-1"
1184+
>
1185+
<slot name="vaadin-grid-cell-content-7">
1186+
</slot>
1187+
</td>
1188+
</tr>
1189+
<tr
1190+
aria-rowindex="3"
1191+
aria-selected="false"
1192+
drag-disabled=""
1193+
drop-disabled=""
1194+
last=""
1195+
odd=""
1196+
part="row body-row last-row odd-row drag-disabled-row drop-disabled-row"
1197+
role="row"
1198+
style="position: absolute; transform: translateY(36px);"
1199+
tabindex="-1"
1200+
>
1201+
<td
1202+
aria-selected="false"
1203+
first-column=""
1204+
id="vaadin-grid-cell-8"
1205+
part="cell body-cell first-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
1206+
role="gridcell"
1207+
style="width: 100px; flex-grow: 1; order: 10000000;"
1208+
tabindex="-1"
1209+
>
1210+
<slot name="vaadin-grid-cell-content-8">
1211+
</slot>
1212+
</td>
1213+
<td
1214+
aria-selected="false"
1215+
id="vaadin-grid-cell-9"
1216+
last-column=""
1217+
part="cell body-cell last-column-cell last-row-cell odd-row-cell drag-disabled-row-cell drop-disabled-row-cell"
1218+
role="gridcell"
1219+
style="width: 100px; flex-grow: 1; order: 20000000;"
1220+
tabindex="-1"
1221+
>
1222+
<slot name="vaadin-grid-cell-content-9">
1223+
</slot>
1224+
</td>
1225+
</tr>
1226+
</tbody>
1227+
<tbody id="emptystatebody">
1228+
<tr id="emptystaterow">
1229+
<td
1230+
id="emptystatecell"
1231+
part="empty-state"
1232+
tabindex="0"
1233+
>
1234+
<slot
1235+
id="emptystateslot"
1236+
name="empty-state"
1237+
>
1238+
</slot>
1239+
</td>
1240+
</tr>
1241+
</tbody>
1242+
<tfoot
1243+
id="footer"
1244+
role="rowgroup"
1245+
style="transform: translate(0px, 0px);"
1246+
>
1247+
<tr
1248+
aria-rowindex="4"
1249+
part="row"
1250+
role="row"
1251+
tabindex="-1"
1252+
>
1253+
<td
1254+
first-column=""
1255+
id="vaadin-grid-cell-2"
1256+
part="cell footer-cell first-column-cell first-footer-row-cell last-footer-row-cell"
1257+
role="gridcell"
1258+
style="width: 100px; flex-grow: 1; order: 10000000;"
1259+
tabindex="0"
1260+
>
1261+
<slot name="vaadin-grid-cell-content-2">
1262+
</slot>
1263+
</td>
1264+
<td
1265+
id="vaadin-grid-cell-3"
1266+
last-column=""
1267+
part="cell footer-cell last-column-cell first-footer-row-cell last-footer-row-cell"
1268+
role="gridcell"
1269+
style="width: 100px; flex-grow: 1; order: 20000000;"
1270+
tabindex="-1"
1271+
>
1272+
<slot name="vaadin-grid-cell-content-3">
1273+
</slot>
1274+
</td>
1275+
</tr>
1276+
</tfoot>
1277+
</table>
1278+
<div part="reorder-ghost">
1279+
</div>
1280+
</div>
1281+
<slot name="tooltip">
1282+
</slot>
1283+
<div
1284+
id="focusexit"
1285+
tabindex="0"
1286+
>
1287+
</div>
1288+
`;
1289+
/* end snapshot vaadin-grid shadow with footer */
1290+

‎packages/grid/test/dom/grid.test.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,5 +51,13 @@ describe('vaadin-grid', () => {
5151
await nextFrame();
5252
await expect(grid).shadowDom.to.equalSnapshot();
5353
});
54+
55+
it('with footer', async () => {
56+
grid.querySelector('vaadin-grid-column').footerRenderer = (root) => {
57+
root.textContent = 'Footer';
58+
};
59+
await nextFrame();
60+
await expect(grid).shadowDom.to.equalSnapshot();
61+
});
5462
});
5563
});

0 commit comments

Comments
 (0)