@patternfly/patternfly 6.6.0-prerelease.6 → 6.6.0-prerelease.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -175,6 +175,8 @@
175
175
  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
176
176
  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
177
177
  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
178
+ --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
179
+ --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
178
180
  }
179
181
  :where(.pf-v6-theme-glass) .pf-v6-c-table {
180
182
  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
@@ -244,6 +246,26 @@
244
246
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
245
247
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
246
248
  }
249
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
250
+ position: sticky;
251
+ inset-block-end: 0;
252
+ z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
253
+ background: var(--pf-v6-c-table--BackgroundColor);
254
+ }
255
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
256
+ position: absolute;
257
+ inset: 0;
258
+ z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
259
+ pointer-events: none;
260
+ content: "";
261
+ border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
262
+ }
263
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
264
+ border-block-end: 0;
265
+ }
266
+ .pf-v6-c-table.pf-m-plain {
267
+ --pf-v6-c-table--BackgroundColor: transparent;
268
+ }
247
269
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
248
270
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
249
271
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -978,6 +1000,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
978
1000
  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
979
1001
  }
980
1002
 
1003
+ .pf-v6-c-table__tfoot {
1004
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
1005
+ vertical-align: top;
1006
+ }
1007
+
981
1008
  .pf-v6-c-table__icon-inline {
982
1009
  display: flex;
983
1010
  align-items: center;
@@ -269,6 +269,10 @@
269
269
  --#{$table}--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
270
270
  --#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
271
271
  --#{$table}--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
272
+
273
+ // * Table sticky footer
274
+ --#{$table}--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
275
+ --#{$table}--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
272
276
 
273
277
  :where(.pf-v6-theme-glass) & {
274
278
  --#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
@@ -373,6 +377,34 @@
373
377
  }
374
378
  }
375
379
 
380
+ // - Table sticky footer
381
+ &.pf-m-sticky-footer {
382
+ > .#{$table}__tfoot {
383
+ position: sticky;
384
+ inset-block-end: 0;
385
+ z-index: var(--#{$table}--m-sticky-footer--ZIndex);
386
+ background: var(--#{$table}--BackgroundColor);
387
+
388
+ &::before {
389
+ position: absolute;
390
+ inset: 0;
391
+ z-index: var(--#{$table}--m-sticky-footer--border--ZIndex);
392
+ pointer-events: none;
393
+ content: "";
394
+ border-block-start: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
395
+ }
396
+ }
397
+
398
+ > .#{$table}__tbody:last-of-type > .#{$table}__tr:last-of-type {
399
+ border-block-end: 0;
400
+ }
401
+ }
402
+
403
+ // - Table plain
404
+ &.pf-m-plain {
405
+ --#{$table}--BackgroundColor: transparent;
406
+ }
407
+
376
408
  // - Table striped
377
409
  // stylelint-disable
378
410
  &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
@@ -544,8 +576,8 @@
544
576
  // }
545
577
 
546
578
  .#{$table}__td.pf-m-action {
547
- --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
548
- --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
579
+ --#{$table}--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
580
+ --#{$table}--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
549
581
  }
550
582
 
551
583
  // - Table sort
@@ -1235,8 +1267,8 @@
1235
1267
  }
1236
1268
 
1237
1269
  .#{$table}__td.pf-m-action {
1238
- --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
1239
- --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
1270
+ --#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
1271
+ --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
1240
1272
  }
1241
1273
 
1242
1274
  .#{$table}__icon {
@@ -1331,6 +1363,13 @@
1331
1363
  }
1332
1364
  }
1333
1365
 
1366
+ // - Table tfoot
1367
+ .#{$table}__tfoot {
1368
+ --#{$table}__tr--BorderBlockEndWidth: 0;
1369
+
1370
+ vertical-align: top;
1371
+ }
1372
+
1334
1373
  // - Table icon inline
1335
1374
  .#{$table}__icon-inline {
1336
1375
  display: flex;
@@ -19477,6 +19477,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19477
19477
  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
19478
19478
  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
19479
19479
  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
19480
+ --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
19481
+ --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
19480
19482
  }
19481
19483
  :where(.pf-v6-theme-glass) .pf-v6-c-table {
19482
19484
  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
@@ -19546,6 +19548,26 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
19546
19548
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
19547
19549
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
19548
19550
  }
19551
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
19552
+ position: sticky;
19553
+ inset-block-end: 0;
19554
+ z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
19555
+ background: var(--pf-v6-c-table--BackgroundColor);
19556
+ }
19557
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
19558
+ position: absolute;
19559
+ inset: 0;
19560
+ z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
19561
+ pointer-events: none;
19562
+ content: "";
19563
+ border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
19564
+ }
19565
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
19566
+ border-block-end: 0;
19567
+ }
19568
+ .pf-v6-c-table.pf-m-plain {
19569
+ --pf-v6-c-table--BackgroundColor: transparent;
19570
+ }
19549
19571
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
19550
19572
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
19551
19573
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -20280,6 +20302,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
20280
20302
  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
20281
20303
  }
20282
20304
 
20305
+ .pf-v6-c-table__tfoot {
20306
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
20307
+ vertical-align: top;
20308
+ }
20309
+
20283
20310
  .pf-v6-c-table__icon-inline {
20284
20311
  display: flex;
20285
20312
  align-items: center;
@@ -12,10 +12,16 @@
12
12
  #ws-core-c-table-sticky-columns-and-header .ws-preview-html,
13
13
  #ws-core-c-table-nested-column-headers-sticky-header .ws-preview-html,
14
14
  #ws-core-c-table-sticky-header .ws-preview-html,
15
+ #ws-core-c-table-sticky-footer .ws-preview-html,
15
16
  #ws-core-c-table-sticky-header-with-base-and-stuck .ws-preview-html {
16
17
  height: 400px;
17
18
  }
18
19
 
20
+ #ws-core-c-table-sticky-header .ws-preview-html,
21
+ #ws-core-c-table-sticky-footer .ws-preview-html {
22
+ overflow: auto;
23
+ }
24
+
19
25
  .pf-v6-c-overflow-menu .pf-v6-c-menu {
20
26
  position: absolute;
21
27
  inset-inline-end: 0;
@@ -24318,6 +24318,174 @@ This example shows the use of `.pf-m-sticky-header-base` and `.pf-m-sticky-heade
24318
24318
 
24319
24319
  ```
24320
24320
 
24321
+ ### Sticky footer
24322
+
24323
+ ```html
24324
+ <table
24325
+ class="pf-v6-c-table pf-m-grid-md pf-m-sticky-footer"
24326
+ role="grid"
24327
+ aria-label="This is a table with a sticky footer"
24328
+ id="table-sticky-footer"
24329
+ >
24330
+ <thead class="pf-v6-c-table__thead">
24331
+ <tr class="pf-v6-c-table__tr" role="row">
24332
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>
24333
+
24334
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th>
24335
+
24336
+ <th
24337
+ class="pf-v6-c-table__th"
24338
+ role="columnheader"
24339
+ scope="col"
24340
+ >Pull requests</th>
24341
+
24342
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th>
24343
+
24344
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th>
24345
+ </tr>
24346
+ </thead>
24347
+
24348
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
24349
+ <tr class="pf-v6-c-table__tr" role="row">
24350
+ <td
24351
+ class="pf-v6-c-table__td"
24352
+ role="cell"
24353
+ data-label="Repository name"
24354
+ >Repository 1</td>
24355
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24356
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24357
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24358
+ <td
24359
+ class="pf-v6-c-table__td"
24360
+ role="cell"
24361
+ data-label="Last commit"
24362
+ >2 days ago</td>
24363
+ </tr>
24364
+
24365
+ <tr class="pf-v6-c-table__tr" role="row">
24366
+ <td
24367
+ class="pf-v6-c-table__td"
24368
+ role="cell"
24369
+ data-label="Repository name"
24370
+ >Repository 2</td>
24371
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24372
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24373
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24374
+ <td
24375
+ class="pf-v6-c-table__td"
24376
+ role="cell"
24377
+ data-label="Last commit"
24378
+ >2 days ago</td>
24379
+ </tr>
24380
+
24381
+ <tr class="pf-v6-c-table__tr" role="row">
24382
+ <td
24383
+ class="pf-v6-c-table__td"
24384
+ role="cell"
24385
+ data-label="Repository name"
24386
+ >Repository 3</td>
24387
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24388
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24389
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24390
+ <td
24391
+ class="pf-v6-c-table__td"
24392
+ role="cell"
24393
+ data-label="Last commit"
24394
+ >2 days ago</td>
24395
+ </tr>
24396
+
24397
+ <tr class="pf-v6-c-table__tr" role="row">
24398
+ <td
24399
+ class="pf-v6-c-table__td"
24400
+ role="cell"
24401
+ data-label="Repository name"
24402
+ >Repository 4</td>
24403
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24404
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24405
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24406
+ <td
24407
+ class="pf-v6-c-table__td"
24408
+ role="cell"
24409
+ data-label="Last commit"
24410
+ >2 days ago</td>
24411
+ </tr>
24412
+
24413
+ <tr class="pf-v6-c-table__tr" role="row">
24414
+ <td
24415
+ class="pf-v6-c-table__td"
24416
+ role="cell"
24417
+ data-label="Repository name"
24418
+ >Repository 5</td>
24419
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24420
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24421
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24422
+ <td
24423
+ class="pf-v6-c-table__td"
24424
+ role="cell"
24425
+ data-label="Last commit"
24426
+ >2 days ago</td>
24427
+ </tr>
24428
+
24429
+ <tr class="pf-v6-c-table__tr" role="row">
24430
+ <td
24431
+ class="pf-v6-c-table__td"
24432
+ role="cell"
24433
+ data-label="Repository name"
24434
+ >Repository 6</td>
24435
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24436
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24437
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24438
+ <td
24439
+ class="pf-v6-c-table__td"
24440
+ role="cell"
24441
+ data-label="Last commit"
24442
+ >2 days ago</td>
24443
+ </tr>
24444
+
24445
+ <tr class="pf-v6-c-table__tr" role="row">
24446
+ <td
24447
+ class="pf-v6-c-table__td"
24448
+ role="cell"
24449
+ data-label="Repository name"
24450
+ >Repository 7</td>
24451
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24452
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24453
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24454
+ <td
24455
+ class="pf-v6-c-table__td"
24456
+ role="cell"
24457
+ data-label="Last commit"
24458
+ >2 days ago</td>
24459
+ </tr>
24460
+
24461
+ <tr class="pf-v6-c-table__tr" role="row">
24462
+ <td
24463
+ class="pf-v6-c-table__td"
24464
+ role="cell"
24465
+ data-label="Repository name"
24466
+ >Repository 8</td>
24467
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
24468
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
24469
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
24470
+ <td
24471
+ class="pf-v6-c-table__td"
24472
+ role="cell"
24473
+ data-label="Last commit"
24474
+ >2 days ago</td>
24475
+ </tr>
24476
+ </tbody>
24477
+
24478
+ <tfoot class="pf-v6-c-table__tfoot">
24479
+ <tr class="pf-v6-c-table__tr" role="row">
24480
+ <th class="pf-v6-c-table__th" role="columnheader" scope="row">Total nodes</th>
24481
+
24482
+ <td class="pf-v6-c-table__td" role="cell" colspan="4">4</td>
24483
+ </tr>
24484
+ </tfoot>
24485
+ </table>
24486
+
24487
+ ```
24488
+
24321
24489
  ### Sticky column
24322
24490
 
24323
24491
  ```html
@@ -31503,6 +31671,118 @@ Basic striped table rows are supported on tables with a single `<tbody>` element
31503
31671
  | `.pf-m-striped` | `.pf-v6-c-table`, `tbody`, `tr` | Modifies odd table rows to be striped. |
31504
31672
  | `.pf-m-striped-even` | `tbody` | Modifies even table rows to be striped. For use in tables with multiple `tbody` elements where adjacent `tbody` elements need even row striping to maintain visual consistency. |
31505
31673
 
31674
+ ## Table footer
31675
+
31676
+ ### Table footer example
31677
+
31678
+ ```html
31679
+ <table
31680
+ class="pf-v6-c-table pf-m-grid-md"
31681
+ role="grid"
31682
+ aria-label="This is a table with a footer example"
31683
+ id="table-footer"
31684
+ >
31685
+ <thead class="pf-v6-c-table__thead">
31686
+ <tr class="pf-v6-c-table__tr" role="row">
31687
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>
31688
+
31689
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th>
31690
+
31691
+ <th
31692
+ class="pf-v6-c-table__th"
31693
+ role="columnheader"
31694
+ scope="col"
31695
+ >Pull requests</th>
31696
+
31697
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th>
31698
+
31699
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th>
31700
+ </tr>
31701
+ </thead>
31702
+
31703
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
31704
+ <tr class="pf-v6-c-table__tr" role="row">
31705
+ <td
31706
+ class="pf-v6-c-table__td"
31707
+ role="cell"
31708
+ data-label="Repository name"
31709
+ >Repository 1</td>
31710
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
31711
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
31712
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
31713
+ <td
31714
+ class="pf-v6-c-table__td"
31715
+ role="cell"
31716
+ data-label="Last commit"
31717
+ >2 days ago</td>
31718
+ </tr>
31719
+
31720
+ <tr class="pf-v6-c-table__tr" role="row">
31721
+ <td
31722
+ class="pf-v6-c-table__td"
31723
+ role="cell"
31724
+ data-label="Repository name"
31725
+ >Repository 2</td>
31726
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
31727
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
31728
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
31729
+ <td
31730
+ class="pf-v6-c-table__td"
31731
+ role="cell"
31732
+ data-label="Last commit"
31733
+ >2 days ago</td>
31734
+ </tr>
31735
+
31736
+ <tr class="pf-v6-c-table__tr" role="row">
31737
+ <td
31738
+ class="pf-v6-c-table__td"
31739
+ role="cell"
31740
+ data-label="Repository name"
31741
+ >Repository 3</td>
31742
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
31743
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
31744
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
31745
+ <td
31746
+ class="pf-v6-c-table__td"
31747
+ role="cell"
31748
+ data-label="Last commit"
31749
+ >2 days ago</td>
31750
+ </tr>
31751
+
31752
+ <tr class="pf-v6-c-table__tr" role="row">
31753
+ <td
31754
+ class="pf-v6-c-table__td"
31755
+ role="cell"
31756
+ data-label="Repository name"
31757
+ >Repository 4</td>
31758
+ <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
31759
+ <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
31760
+ <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
31761
+ <td
31762
+ class="pf-v6-c-table__td"
31763
+ role="cell"
31764
+ data-label="Last commit"
31765
+ >2 days ago</td>
31766
+ </tr>
31767
+ </tbody>
31768
+
31769
+ <tfoot class="pf-v6-c-table__tfoot">
31770
+ <tr class="pf-v6-c-table__tr" role="row">
31771
+ <th class="pf-v6-c-table__th" role="columnheader" scope="row">Total nodes</th>
31772
+
31773
+ <td class="pf-v6-c-table__td" role="cell" colspan="4">4</td>
31774
+ </tr>
31775
+ </tfoot>
31776
+ </table>
31777
+
31778
+ ```
31779
+
31780
+ ### Table footer usage
31781
+
31782
+ | Class | Applied to | Outcome |
31783
+ | -- | -- | -- |
31784
+ | `.pf-v6-c-table__tfoot` | `tfoot` | Initiates a table footer. |
31785
+
31506
31786
  ## Documentation
31507
31787
 
31508
31788
  ### Overview
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly",
4
- "version": "6.6.0-prerelease.6",
4
+ "version": "6.6.0-prerelease.7",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -28733,6 +28733,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28733
28733
  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
28734
28734
  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
28735
28735
  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
28736
+ --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
28737
+ --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
28736
28738
  }
28737
28739
  :where(.pf-v6-theme-glass) .pf-v6-c-table {
28738
28740
  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
@@ -28802,6 +28804,26 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28802
28804
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
28803
28805
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
28804
28806
  }
28807
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
28808
+ position: sticky;
28809
+ inset-block-end: 0;
28810
+ z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
28811
+ background: var(--pf-v6-c-table--BackgroundColor);
28812
+ }
28813
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
28814
+ position: absolute;
28815
+ inset: 0;
28816
+ z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
28817
+ pointer-events: none;
28818
+ content: "";
28819
+ border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
28820
+ }
28821
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
28822
+ border-block-end: 0;
28823
+ }
28824
+ .pf-v6-c-table.pf-m-plain {
28825
+ --pf-v6-c-table--BackgroundColor: transparent;
28826
+ }
28805
28827
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
28806
28828
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
28807
28829
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -29536,6 +29558,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29536
29558
  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
29537
29559
  }
29538
29560
 
29561
+ .pf-v6-c-table__tfoot {
29562
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
29563
+ vertical-align: top;
29564
+ }
29565
+
29539
29566
  .pf-v6-c-table__icon-inline {
29540
29567
  display: flex;
29541
29568
  align-items: center;
package/patternfly.css CHANGED
@@ -28888,6 +28888,8 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28888
28888
  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
28889
28889
  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
28890
28890
  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
28891
+ --pf-v6-c-table--m-sticky-footer--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
28892
+ --pf-v6-c-table--m-sticky-footer--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
28891
28893
  }
28892
28894
  :where(.pf-v6-theme-glass) .pf-v6-c-table {
28893
28895
  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
@@ -28957,6 +28959,26 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
28957
28959
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
28958
28960
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
28959
28961
  }
28962
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot {
28963
+ position: sticky;
28964
+ inset-block-end: 0;
28965
+ z-index: var(--pf-v6-c-table--m-sticky-footer--ZIndex);
28966
+ background: var(--pf-v6-c-table--BackgroundColor);
28967
+ }
28968
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tfoot::before {
28969
+ position: absolute;
28970
+ inset: 0;
28971
+ z-index: var(--pf-v6-c-table--m-sticky-footer--border--ZIndex);
28972
+ pointer-events: none;
28973
+ content: "";
28974
+ border-block-start: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
28975
+ }
28976
+ .pf-v6-c-table.pf-m-sticky-footer > .pf-v6-c-table__tbody:last-of-type > .pf-v6-c-table__tr:last-of-type {
28977
+ border-block-end: 0;
28978
+ }
28979
+ .pf-v6-c-table.pf-m-plain {
28980
+ --pf-v6-c-table--BackgroundColor: transparent;
28981
+ }
28960
28982
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
28961
28983
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
28962
28984
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -29691,6 +29713,11 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
29691
29713
  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
29692
29714
  }
29693
29715
 
29716
+ .pf-v6-c-table__tfoot {
29717
+ --pf-v6-c-table__tr--BorderBlockEndWidth: 0;
29718
+ vertical-align: top;
29719
+ }
29720
+
29694
29721
  .pf-v6-c-table__icon-inline {
29695
29722
  display: flex;
29696
29723
  align-items: center;