@patternfly/patternfly 6.3.0-prerelease.35 → 6.3.0-prerelease.37

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.
Files changed (15) hide show
  1. package/components/Button/button.css +2 -2
  2. package/components/Button/button.scss +2 -2
  3. package/components/DataList/data-list.css +2 -2
  4. package/components/DataList/data-list.scss +2 -2
  5. package/components/Table/table-grid.css +15 -0
  6. package/components/Table/table-grid.scss +4 -0
  7. package/components/Table/table.css +12 -0
  8. package/components/Table/table.scss +18 -0
  9. package/components/_index.css +31 -4
  10. package/docs/components/Table/examples/Table.md +150 -0
  11. package/package.json +1 -1
  12. package/patternfly-no-globals.css +31 -4
  13. package/patternfly.css +31 -4
  14. package/patternfly.min.css +1 -1
  15. package/patternfly.min.css.map +1 -1
package/components/Button/button.css CHANGED
@@ -327,7 +327,7 @@
327
327
  cursor: pointer;
328
328
  -webkit-user-select: none;
329
329
  user-select: none;
330
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
330
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000% 15000%;
331
331
  border: 0;
332
332
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
333
333
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -680,7 +680,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
680
680
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
681
681
  }
682
682
  .pf-v6-c-button:active {
683
- background-size: 100%;
683
+ background-size: 100% 100%;
684
684
  transition-duration: 0s;
685
685
  }
686
686
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
package/components/Button/button.scss CHANGED
@@ -385,7 +385,7 @@
385
385
  -webkit-user-select: none;
386
386
  user-select: none;
387
387
  // stylelint-enable property-no-vendor-prefix
388
- background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
388
+ background: var(--#{$button}--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000% 15000%;
389
389
  border: 0;
390
390
  border-start-start-radius: var(--#{$button}--BorderStartStartRadius, var(--#{$button}--BorderRadius));
391
391
  border-start-end-radius: var(--#{$button}--BorderStartEndRadius, var(--#{$button}--BorderRadius));
@@ -777,7 +777,7 @@
777
777
  }
778
778
 
779
779
  &:active {
780
- background-size: 100%; // apply the background surface for ripple
780
+ background-size: 100% 100%; // apply the background surface for ripple
781
781
  transition-duration: 0s; // transition immediately
782
782
  }
783
783
 
package/components/DataList/data-list.css CHANGED
@@ -511,8 +511,8 @@
511
511
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
512
512
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
513
513
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
514
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
515
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
514
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
515
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
516
516
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
517
517
  }
518
518
  @media screen and (min-width: 36rem) {
package/components/DataList/data-list.scss CHANGED
@@ -140,8 +140,8 @@
140
140
  --#{$data-list}--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
141
141
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
142
142
  --#{$data-list}--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
143
- --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
144
- --#{$data-list}--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
143
+ --#{$data-list}--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
144
+ --#{$data-list}--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
145
145
  --#{$data-list}--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
146
146
  }
147
147
 
package/components/Table/table-grid.css CHANGED
@@ -154,6 +154,9 @@
154
154
  grid-template-columns: 1fr minmax(0, 1.5fr);
155
155
  align-items: start;
156
156
  }
157
+ .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
158
+ align-items: center;
159
+ }
157
160
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
158
161
  grid-column: 2;
159
162
  }
@@ -454,6 +457,9 @@
454
457
  grid-template-columns: 1fr minmax(0, 1.5fr);
455
458
  align-items: start;
456
459
  }
460
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
461
+ align-items: center;
462
+ }
457
463
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
458
464
  grid-column: 2;
459
465
  }
@@ -757,6 +763,9 @@
757
763
  grid-template-columns: 1fr minmax(0, 1.5fr);
758
764
  align-items: start;
759
765
  }
766
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
767
+ align-items: center;
768
+ }
760
769
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
761
770
  grid-column: 2;
762
771
  }
@@ -1060,6 +1069,9 @@
1060
1069
  grid-template-columns: 1fr minmax(0, 1.5fr);
1061
1070
  align-items: start;
1062
1071
  }
1072
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
1073
+ align-items: center;
1074
+ }
1063
1075
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
1064
1076
  grid-column: 2;
1065
1077
  }
@@ -1363,6 +1375,9 @@
1363
1375
  grid-template-columns: 1fr minmax(0, 1.5fr);
1364
1376
  align-items: start;
1365
1377
  }
1378
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
1379
+ align-items: center;
1380
+ }
1366
1381
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
1367
1382
  grid-column: 2;
1368
1383
  }
package/components/Table/table-grid.scss CHANGED
@@ -266,6 +266,10 @@
266
266
  grid-template-columns: 1fr minmax(0, 1.5fr);
267
267
  align-items: start;
268
268
 
269
+ &.pf-m-action {
270
+ align-items: center;
271
+ }
272
+
269
273
  // set contents of td to start at column two of td grid
270
274
  > * {
271
275
  grid-column: 2;
package/components/Table/table.css CHANGED
@@ -118,6 +118,10 @@
118
118
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
119
119
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
120
120
  --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
121
+ --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
122
+ --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
123
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
124
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
121
125
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
122
126
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
123
127
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -346,6 +350,10 @@
346
350
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
347
351
  overflow-wrap: break-word;
348
352
  }
353
+ .pf-v6-c-table .pf-v6-c-table__td.pf-m-action {
354
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart);
355
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd);
356
+ }
349
357
  .pf-v6-c-table .pf-v6-c-table__sort {
350
358
  min-width: var(--pf-v6-c-table__sort--MinWidth);
351
359
  }
@@ -824,6 +832,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
824
832
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart);
825
833
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd);
826
834
  }
835
+ .pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action {
836
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart);
837
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd);
838
+ }
827
839
  .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon {
828
840
  width: auto;
829
841
  min-width: 0;
package/components/Table/table.scss CHANGED
@@ -196,6 +196,14 @@
196
196
  --#{$table}--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
197
197
  --#{$table}--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
198
198
 
199
+ // * Table cell with button
200
+ --#{$table}__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
201
+ --#{$table}__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
202
+
203
+ // * Table compact cell with button
204
+ --#{$table}--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
205
+ --#{$table}--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
206
+
199
207
  // * Table compact action
200
208
  --#{$table}--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
201
209
  --#{$table}--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
@@ -478,6 +486,11 @@
478
486
  // }
479
487
  // }
480
488
 
489
+ .#{$table}__td.pf-m-action {
490
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}__td--m-action--PaddingBlockStart);
491
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}__td--m-action--PaddingBlockEnd);
492
+ }
493
+
481
494
  // - Table sort
482
495
  // set property here to increase specificity
483
496
  .#{$table}__sort {
@@ -1122,6 +1135,11 @@
1122
1135
  --#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact__action--PaddingBlockEnd);
1123
1136
  }
1124
1137
 
1138
+ .#{$table}__td.pf-m-action {
1139
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--#{$table}--m-compact__td--m-action--PaddingBlockStart);
1140
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--#{$table}--m-compact__td--m-action--PaddingBlockEnd);
1141
+ }
1142
+
1125
1143
  .#{$table}__icon {
1126
1144
  width: auto;
1127
1145
  min-width: 0;
package/components/_index.css CHANGED
@@ -1855,7 +1855,7 @@ button.pf-v6-c-breadcrumb__link {
1855
1855
  cursor: pointer;
1856
1856
  -webkit-user-select: none;
1857
1857
  user-select: none;
1858
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
1858
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000% 15000%;
1859
1859
  border: 0;
1860
1860
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
1861
1861
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -2208,7 +2208,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2208
2208
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
2209
2209
  }
2210
2210
  .pf-v6-c-button:active {
2211
- background-size: 100%;
2211
+ background-size: 100% 100%;
2212
2212
  transition-duration: 0s;
2213
2213
  }
2214
2214
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
@@ -4127,8 +4127,8 @@ ul) {
4127
4127
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4128
4128
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
4129
4129
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
4130
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4131
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
4130
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
4131
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
4132
4132
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
4133
4133
  }
4134
4134
  @media screen and (min-width: 36rem) {
@@ -15803,6 +15803,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
15803
15803
  grid-template-columns: 1fr minmax(0, 1.5fr);
15804
15804
  align-items: start;
15805
15805
  }
15806
+ .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
15807
+ align-items: center;
15808
+ }
15806
15809
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
15807
15810
  grid-column: 2;
15808
15811
  }
@@ -16103,6 +16106,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16103
16106
  grid-template-columns: 1fr minmax(0, 1.5fr);
16104
16107
  align-items: start;
16105
16108
  }
16109
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
16110
+ align-items: center;
16111
+ }
16106
16112
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
16107
16113
  grid-column: 2;
16108
16114
  }
@@ -16406,6 +16412,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16406
16412
  grid-template-columns: 1fr minmax(0, 1.5fr);
16407
16413
  align-items: start;
16408
16414
  }
16415
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
16416
+ align-items: center;
16417
+ }
16409
16418
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
16410
16419
  grid-column: 2;
16411
16420
  }
@@ -16709,6 +16718,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
16709
16718
  grid-template-columns: 1fr minmax(0, 1.5fr);
16710
16719
  align-items: start;
16711
16720
  }
16721
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
16722
+ align-items: center;
16723
+ }
16712
16724
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
16713
16725
  grid-column: 2;
16714
16726
  }
@@ -17012,6 +17024,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17012
17024
  grid-template-columns: 1fr minmax(0, 1.5fr);
17013
17025
  align-items: start;
17014
17026
  }
17027
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
17028
+ align-items: center;
17029
+ }
17015
17030
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
17016
17031
  grid-column: 2;
17017
17032
  }
@@ -17339,6 +17354,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17339
17354
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17340
17355
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17341
17356
  --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17357
+ --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
17358
+ --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
17359
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
17360
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17342
17361
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
17343
17362
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
17344
17363
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -17567,6 +17586,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17567
17586
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
17568
17587
  overflow-wrap: break-word;
17569
17588
  }
17589
+ .pf-v6-c-table .pf-v6-c-table__td.pf-m-action {
17590
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart);
17591
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd);
17592
+ }
17570
17593
  .pf-v6-c-table .pf-v6-c-table__sort {
17571
17594
  min-width: var(--pf-v6-c-table__sort--MinWidth);
17572
17595
  }
@@ -18045,6 +18068,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18045
18068
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart);
18046
18069
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd);
18047
18070
  }
18071
+ .pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action {
18072
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart);
18073
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd);
18074
+ }
18048
18075
  .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon {
18049
18076
  width: auto;
18050
18077
  min-width: 0;
package/docs/components/Table/examples/Table.md CHANGED
@@ -1130,6 +1130,155 @@ These classes can be used to ensure that the table changes between the tabular a
1130
1130
 
1131
1131
  ```
1132
1132
 
1133
+ ### Table with buttons and actions
1134
+
1135
+ ```html
1136
+ <table
1137
+ class="pf-v6-c-table pf-m-grid-md"
1138
+ role="grid"
1139
+ aria-label="This is a table with buttons and actions"
1140
+ id="table-buttons-and-actions"
1141
+ >
1142
+ <thead class="pf-v6-c-table__thead">
1143
+ <tr class="pf-v6-c-table__tr" role="row">
1144
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Deployment</th>
1145
+
1146
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Status</th>
1147
+
1148
+ <th class="pf-v6-c-table__th" role="columnheader" scope="col">Builds</th>
1149
+
1150
+ <th
1151
+ class="pf-v6-c-table__th"
1152
+ role="columnheader"
1153
+ scope="col"
1154
+ >Start New Build</th>
1155
+
1156
+ <th
1157
+ class="pf-v6-c-table__th pf-v6-c-table__action"
1158
+ role="columnheader"
1159
+ scope="col"
1160
+ >
1161
+ <button
1162
+ class="pf-v6-c-menu-toggle pf-m-plain"
1163
+ type="button"
1164
+ aria-expanded="false"
1165
+ aria-label="Table actions"
1166
+ >
1167
+ <span class="pf-v6-c-menu-toggle__icon">
1168
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1169
+ </span>
1170
+ </button>
1171
+ </th>
1172
+ </tr>
1173
+ </thead>
1174
+
1175
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
1176
+ <tr class="pf-v6-c-table__tr" role="row">
1177
+ <td
1178
+ class="pf-v6-c-table__td"
1179
+ role="cell"
1180
+ data-label="Deployment"
1181
+ >Deployment 1</td>
1182
+ <td class="pf-v6-c-table__td" role="cell" data-label="Status">Success</td>
1183
+ <td class="pf-v6-c-table__td" role="cell" data-label="Builds">6</td>
1184
+ <td
1185
+ class="pf-v6-c-table__td pf-m-action"
1186
+ role="cell"
1187
+ data-label="Start Build"
1188
+ >
1189
+ <span>
1190
+ <button class="pf-v6-c-button pf-m-tertiary" type="button">
1191
+ <span class="pf-v6-c-button__text">Start</span>
1192
+ </button>
1193
+ </span>
1194
+ </td>
1195
+
1196
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
1197
+ <button
1198
+ class="pf-v6-c-menu-toggle pf-m-plain"
1199
+ type="button"
1200
+ aria-expanded="false"
1201
+ aria-label="Table actions"
1202
+ >
1203
+ <span class="pf-v6-c-menu-toggle__icon">
1204
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1205
+ </span>
1206
+ </button>
1207
+ </td>
1208
+ </tr>
1209
+
1210
+ <tr class="pf-v6-c-table__tr" role="row">
1211
+ <td
1212
+ class="pf-v6-c-table__td"
1213
+ role="cell"
1214
+ data-label="Deployment"
1215
+ >Deployment 2</td>
1216
+ <td class="pf-v6-c-table__td" role="cell" data-label="Status">Failed</td>
1217
+ <td class="pf-v6-c-table__td" role="cell" data-label="Builds">2</td>
1218
+ <td
1219
+ class="pf-v6-c-table__td pf-m-action"
1220
+ role="cell"
1221
+ data-label="Start Build"
1222
+ >
1223
+ <span>
1224
+ <button class="pf-v6-c-button pf-m-tertiary" type="button">
1225
+ <span class="pf-v6-c-button__text">Start</span>
1226
+ </button>
1227
+ </span>
1228
+ </td>
1229
+
1230
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
1231
+ <button
1232
+ class="pf-v6-c-menu-toggle pf-m-plain"
1233
+ type="button"
1234
+ aria-expanded="false"
1235
+ aria-label="Table actions"
1236
+ >
1237
+ <span class="pf-v6-c-menu-toggle__icon">
1238
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1239
+ </span>
1240
+ </button>
1241
+ </td>
1242
+ </tr>
1243
+
1244
+ <tr class="pf-v6-c-table__tr" role="row">
1245
+ <td
1246
+ class="pf-v6-c-table__td"
1247
+ role="cell"
1248
+ data-label="Deployment"
1249
+ >Deployment 3</td>
1250
+ <td class="pf-v6-c-table__td" role="cell" data-label="Status">Success</td>
1251
+ <td class="pf-v6-c-table__td" role="cell" data-label="Builds">7</td>
1252
+ <td
1253
+ class="pf-v6-c-table__td pf-m-action"
1254
+ role="cell"
1255
+ data-label="Start Build"
1256
+ >
1257
+ <span>
1258
+ <button class="pf-v6-c-button pf-m-tertiary" type="button">
1259
+ <span class="pf-v6-c-button__text">Start</span>
1260
+ </button>
1261
+ </span>
1262
+ </td>
1263
+
1264
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
1265
+ <button
1266
+ class="pf-v6-c-menu-toggle pf-m-plain"
1267
+ type="button"
1268
+ aria-expanded="false"
1269
+ aria-label="Table actions"
1270
+ >
1271
+ <span class="pf-v6-c-menu-toggle__icon">
1272
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1273
+ </span>
1274
+ </button>
1275
+ </td>
1276
+ </tr>
1277
+ </tbody>
1278
+ </table>
1279
+
1280
+ ```
1281
+
1133
1282
  When including interactive elements in a table, the primary, descriptive cell in the corresponding row is a `<th>`, rather than a `<td>`. In this example, 'Node 1' and 'Node 2 siemur/test-space' are `<th>`s.
1134
1283
 
1135
1284
  When header cells are empty or they contain interactive elements, `<th>` should be replaced with `<td>`.
@@ -1148,6 +1297,7 @@ When header cells are empty or they contain interactive elements, `<th>` should
1148
1297
  | `.pf-v6-c-table__check` | `<th>`, `<td>` | Initiates a checkbox or radio input table cell. |
1149
1298
  | `.pf-v6-c-table__action` | `<th>`, `<td>` | Initiates an action table cell. |
1150
1299
  | `.pf-v6-c-table__inline-edit-action` | `<th>`, `<td>` | Initiates an inline edit action table cell. |
1300
+ | `.pf-m-action` | `<td>` | Initiates an table cell with button. |
1151
1301
 
1152
1302
  ## Expandable
1153
1303
 
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",
4
- "version": "6.3.0-prerelease.35",
4
+ "version": "6.3.0-prerelease.37",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-no-globals.css CHANGED
@@ -9351,7 +9351,7 @@ button.pf-v6-c-breadcrumb__link {
9351
9351
  cursor: pointer;
9352
9352
  -webkit-user-select: none;
9353
9353
  user-select: none;
9354
- background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000%;
9354
+ background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 1%) center/15000% 15000%;
9355
9355
  border: 0;
9356
9356
  border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
9357
9357
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -9704,7 +9704,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
9704
9704
  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-clicked__icon--Color);
9705
9705
  }
9706
9706
  .pf-v6-c-button:active {
9707
- background-size: 100%;
9707
+ background-size: 100% 100%;
9708
9708
  transition-duration: 0s;
9709
9709
  }
9710
9710
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled {
@@ -11623,8 +11623,8 @@ ul) {
11623
11623
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11624
11624
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
11625
11625
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
11626
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11627
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11626
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
11627
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11628
11628
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11629
11629
  }
11630
11630
  @media screen and (min-width: 36rem) {
@@ -23299,6 +23299,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
23299
23299
  grid-template-columns: 1fr minmax(0, 1.5fr);
23300
23300
  align-items: start;
23301
23301
  }
23302
+ .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
23303
+ align-items: center;
23304
+ }
23302
23305
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
23303
23306
  grid-column: 2;
23304
23307
  }
@@ -23599,6 +23602,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
23599
23602
  grid-template-columns: 1fr minmax(0, 1.5fr);
23600
23603
  align-items: start;
23601
23604
  }
23605
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
23606
+ align-items: center;
23607
+ }
23602
23608
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
23603
23609
  grid-column: 2;
23604
23610
  }
@@ -23902,6 +23908,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
23902
23908
  grid-template-columns: 1fr minmax(0, 1.5fr);
23903
23909
  align-items: start;
23904
23910
  }
23911
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
23912
+ align-items: center;
23913
+ }
23905
23914
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
23906
23915
  grid-column: 2;
23907
23916
  }
@@ -24205,6 +24214,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24205
24214
  grid-template-columns: 1fr minmax(0, 1.5fr);
24206
24215
  align-items: start;
24207
24216
  }
24217
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
24218
+ align-items: center;
24219
+ }
24208
24220
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
24209
24221
  grid-column: 2;
24210
24222
  }
@@ -24508,6 +24520,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24508
24520
  grid-template-columns: 1fr minmax(0, 1.5fr);
24509
24521
  align-items: start;
24510
24522
  }
24523
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
24524
+ align-items: center;
24525
+ }
24511
24526
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
24512
24527
  grid-column: 2;
24513
24528
  }
@@ -24835,6 +24850,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24835
24850
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24836
24851
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
24837
24852
  --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24853
+ --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
24854
+ --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24855
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
24856
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24838
24857
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
24839
24858
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24840
24859
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -25063,6 +25082,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
25063
25082
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
25064
25083
  overflow-wrap: break-word;
25065
25084
  }
25085
+ .pf-v6-c-table .pf-v6-c-table__td.pf-m-action {
25086
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart);
25087
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd);
25088
+ }
25066
25089
  .pf-v6-c-table .pf-v6-c-table__sort {
25067
25090
  min-width: var(--pf-v6-c-table__sort--MinWidth);
25068
25091
  }
@@ -25541,6 +25564,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25541
25564
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart);
25542
25565
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd);
25543
25566
  }
25567
+ .pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action {
25568
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart);
25569
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd);
25570
+ }
25544
25571
  .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon {
25545
25572
  width: auto;
25546
25573
  min-width: 0;