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

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.
@@ -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) {
@@ -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
 
@@ -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
  }
@@ -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;
@@ -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;
@@ -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;
@@ -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;
@@ -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.36",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
@@ -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;
package/patternfly.css CHANGED
@@ -11759,8 +11759,8 @@ ul) {
11759
11759
  --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11760
11760
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
11761
11761
  --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
11762
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11763
- --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
11762
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
11763
+ --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
11764
11764
  --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
11765
11765
  }
11766
11766
  @media screen and (min-width: 36rem) {
@@ -23435,6 +23435,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
23435
23435
  grid-template-columns: 1fr minmax(0, 1.5fr);
23436
23436
  align-items: start;
23437
23437
  }
23438
+ .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
23439
+ align-items: center;
23440
+ }
23438
23441
  .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
23439
23442
  grid-column: 2;
23440
23443
  }
@@ -23735,6 +23738,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
23735
23738
  grid-template-columns: 1fr minmax(0, 1.5fr);
23736
23739
  align-items: start;
23737
23740
  }
23741
+ .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
23742
+ align-items: center;
23743
+ }
23738
23744
  .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
23739
23745
  grid-column: 2;
23740
23746
  }
@@ -24038,6 +24044,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24038
24044
  grid-template-columns: 1fr minmax(0, 1.5fr);
24039
24045
  align-items: start;
24040
24046
  }
24047
+ .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
24048
+ align-items: center;
24049
+ }
24041
24050
  .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
24042
24051
  grid-column: 2;
24043
24052
  }
@@ -24341,6 +24350,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24341
24350
  grid-template-columns: 1fr minmax(0, 1.5fr);
24342
24351
  align-items: start;
24343
24352
  }
24353
+ .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
24354
+ align-items: center;
24355
+ }
24344
24356
  .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
24345
24357
  grid-column: 2;
24346
24358
  }
@@ -24644,6 +24656,9 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24644
24656
  grid-template-columns: 1fr minmax(0, 1.5fr);
24645
24657
  align-items: start;
24646
24658
  }
24659
+ .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label].pf-m-action {
24660
+ align-items: center;
24661
+ }
24647
24662
  .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label] > * {
24648
24663
  grid-column: 2;
24649
24664
  }
@@ -24971,6 +24986,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
24971
24986
  --pf-v6-c-table--m-compact__th--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24972
24987
  --pf-v6-c-table--m-compact--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
24973
24988
  --pf-v6-c-table--m-compact--cell--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24989
+ --pf-v6-c-table__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
24990
+ --pf-v6-c-table__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
24991
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
24992
+ --pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24974
24993
  --pf-v6-c-table--m-compact__action--PaddingBlockStart: var(--pf-t--global--spacer--xs);
24975
24994
  --pf-v6-c-table--m-compact__action--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
24976
24995
  --pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor: var(--pf-t--global--border--color--default);
@@ -25199,6 +25218,10 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
25199
25218
  .pf-v6-c-table tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr) > :where(th, td) {
25200
25219
  overflow-wrap: break-word;
25201
25220
  }
25221
+ .pf-v6-c-table .pf-v6-c-table__td.pf-m-action {
25222
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table__td--m-action--PaddingBlockStart);
25223
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__td--m-action--PaddingBlockEnd);
25224
+ }
25202
25225
  .pf-v6-c-table .pf-v6-c-table__sort {
25203
25226
  min-width: var(--pf-v6-c-table__sort--MinWidth);
25204
25227
  }
@@ -25677,6 +25700,10 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
25677
25700
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__action--PaddingBlockStart);
25678
25701
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__action--PaddingBlockEnd);
25679
25702
  }
25703
+ .pf-v6-c-table.pf-m-compact .pf-v6-c-table__td.pf-m-action {
25704
+ --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockStart);
25705
+ --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table--m-compact__td--m-action--PaddingBlockEnd);
25706
+ }
25680
25707
  .pf-v6-c-table.pf-m-compact .pf-v6-c-table__icon {
25681
25708
  width: auto;
25682
25709
  min-width: 0;