@patternfly/patternfly 5.0.0-alpha.54 → 5.0.0-alpha.56

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 (21) hide show
  1. package/components/Table/table-grid.css +380 -391
  2. package/components/Table/table-grid.scss +97 -92
  3. package/components/Table/table-tree-view.css +254 -254
  4. package/components/Table/table-tree-view.scss +30 -30
  5. package/components/Table/table.css +232 -232
  6. package/components/Table/table.scss +265 -255
  7. package/docs/components/InlineEdit/examples/InlineEdit.md +50 -28
  8. package/docs/components/Table/examples/Table.md +6839 -3703
  9. package/docs/demos/Card/examples/Card.md +73 -34
  10. package/docs/demos/DataList/examples/DataList.md +187 -52
  11. package/docs/demos/DescriptionList/examples/DescriptionList.md +63 -23
  12. package/docs/demos/Table/examples/Table.md +2673 -1316
  13. package/docs/demos/Tabs/examples/Tabs.md +203 -50
  14. package/docs/demos/Toolbar/examples/Toolbar.md +272 -112
  15. package/layouts/Flex/flex.css +60 -60
  16. package/package.json +5 -5
  17. package/patternfly-no-globals.css +926 -937
  18. package/patternfly.css +926 -937
  19. package/patternfly.min.css +1 -1
  20. package/patternfly.min.css.map +1 -1
  21. package/sass-utilities/functions.scss +1 -3
package/components/Table/table-grid.scss CHANGED
@@ -41,42 +41,42 @@
41
41
  --#{$table}--responsive--BorderColor: var(--#{$pf-global}--BorderColor--300);
42
42
 
43
43
  // Body
44
- --#{$table}--tbody--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
45
- --#{$table}--tbody--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
46
- --#{$table}--tbody--after--BorderLeftWidth: 0;
47
- --#{$table}--tbody--after--BorderColor: var(--#{$pf-global}--active-color--100);
44
+ --#{$table}__tbody--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
45
+ --#{$table}__tbody--after--border-width--base: var(--#{$pf-global}--BorderWidth--lg);
46
+ --#{$table}__tbody--after--BorderLeftWidth: 0;
47
+ --#{$table}__tbody--after--BorderColor: var(--#{$pf-global}--active-color--100);
48
48
 
49
49
  // Row
50
- --#{$table}-tr--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
51
- --#{$table}-tr--responsive--last-child--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
52
- --#{$table}-tr--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
53
- --#{$table}-tr--responsive--MarginTop: var(--#{$pf-global}--spacer--sm);
54
- --#{$table}-tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
55
- --#{$table}-tr--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
56
- --#{$table}-tr--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
57
- --#{$table}-tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--md);
58
- --#{$table}-tr--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
59
- --#{$table}-tr--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
50
+ --#{$table}__tr--responsive--border-width--base: var(--#{$pf-global}--spacer--sm);
51
+ --#{$table}__tr--responsive--last-child--BorderBottomWidth: var(--#{$pf-global}--BorderWidth--sm);
52
+ --#{$table}__tr--responsive--GridColumnGap: var(--#{$pf-global}--spacer--md);
53
+ --#{$table}__tr--responsive--MarginTop: var(--#{$pf-global}--spacer--sm);
54
+ --#{$table}__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--md);
55
+ --#{$table}__tr--responsive--PaddingRight: var(--#{$pf-global}--spacer--lg);
56
+ --#{$table}__tr--responsive--xl--PaddingRight: var(--#{$pf-global}--spacer--md);
57
+ --#{$table}__tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--md);
58
+ --#{$table}__tr--responsive--PaddingLeft: var(--#{$pf-global}--spacer--lg);
59
+ --#{$table}__tr--responsive--xl--PaddingLeft: var(--#{$pf-global}--spacer--md);
60
60
 
61
61
  @media screen and (max-width: $pf-v5-global--breakpoint--xl) {
62
- --#{$table}-tr--responsive--PaddingRight: var(--#{$table}-tr--responsive--xl--PaddingRight);
63
- --#{$table}-tr--responsive--PaddingLeft: var(--#{$table}-tr--responsive--xl--PaddingLeft);
62
+ --#{$table}__tr--responsive--PaddingRight: var(--#{$table}__tr--responsive--xl--PaddingRight);
63
+ --#{$table}__tr--responsive--PaddingLeft: var(--#{$table}__tr--responsive--xl--PaddingLeft);
64
64
  }
65
65
 
66
- --#{$table}-tr--responsive--nested-table--PaddingTop: var(--#{$pf-global}--spacer--xl);
67
- --#{$table}-tr--responsive--nested-table--PaddingRight: var(--#{$pf-global}--spacer--lg);
68
- --#{$table}-tr--responsive--nested-table--PaddingBottom: var(--#{$pf-global}--spacer--xl);
69
- --#{$table}-tr--responsive--nested-table--PaddingLeft: var(--#{$pf-global}--spacer--lg);
66
+ --#{$table}__tr--responsive--nested-table--PaddingTop: var(--#{$pf-global}--spacer--xl);
67
+ --#{$table}__tr--responsive--nested-table--PaddingRight: var(--#{$pf-global}--spacer--lg);
68
+ --#{$table}__tr--responsive--nested-table--PaddingBottom: var(--#{$pf-global}--spacer--xl);
69
+ --#{$table}__tr--responsive--nested-table--PaddingLeft: var(--#{$pf-global}--spacer--lg);
70
70
 
71
71
  // expandable
72
- --#{$table}--tbody--after--tr--BorderLeftWidth: 0;
73
- --#{$table}--tbody--after--tr--BorderLeftColor: transparent;
74
- --#{$table}--tbody--m-expanded--after--tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
75
- --#{$table}--tbody--m-expanded--after--tr--BorderLeftColor: var(--#{$pf-global}--active-color--400);
72
+ --#{$table}__tbody--after__tr--BorderLeftWidth: 0;
73
+ --#{$table}__tbody--after__tr--BorderLeftColor: transparent;
74
+ --#{$table}__tbody--m-expanded--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
75
+ --#{$table}__tbody--m-expanded--after__tr--BorderLeftColor: var(--#{$pf-global}--active-color--400);
76
76
 
77
77
  // selected
78
- --#{$table}--tbody--m-selected--after--tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
79
- --#{$table}--tbody--m-selected--after--tr--BorderLeftColor: var(--#{$pf-global}--active-color--100);
78
+ --#{$table}__tbody--m-selected--after__tr--BorderLeftWidth: var(--#{$table}__expandable-row--after--border-width--base);
79
+ --#{$table}__tbody--m-selected--after__tr--BorderLeftColor: var(--#{$pf-global}--active-color--100);
80
80
 
81
81
  // Cell display
82
82
  --#{$table}--m-grid--cell--hidden-visible--Display: grid;
@@ -96,10 +96,10 @@
96
96
  --#{$table}--cell--responsive--PaddingLeft: 0;
97
97
 
98
98
  // Compact table
99
- --#{$table}--m-compact-tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--sm);
100
- --#{$table}--m-compact-tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--sm);
101
- --#{$table}--m-compact-tr-td--responsive--PaddingTop: var(--#{$pf-global}--spacer--xs);
102
- --#{$table}--m-compact-tr-td--responsive--PaddingBottom: var(--#{$pf-global}--spacer--xs);
99
+ --#{$table}--m-compact__tr--responsive--PaddingTop: var(--#{$pf-global}--spacer--sm);
100
+ --#{$table}--m-compact__tr--responsive--PaddingBottom: var(--#{$pf-global}--spacer--sm);
101
+ --#{$table}--m-compact__tr__td--responsive--PaddingTop: var(--#{$pf-global}--spacer--xs);
102
+ --#{$table}--m-compact__tr__td--responsive--PaddingBottom: var(--#{$pf-global}--spacer--xs);
103
103
  --#{$table}--m-compact__action--responsive--MarginTop: calc(var(--#{$pf-global}--spacer--xs) * -1);
104
104
  --#{$table}--m-compact__action--responsive--MarginBottom: calc(var(--#{$pf-global}--spacer--xs) * -1);
105
105
  --#{$table}--m-compact__toggle--c-button--responsive--MarginBottom: calc(#{pf-size-prem(6px)} * -1);
@@ -151,7 +151,7 @@
151
151
  border: none;
152
152
 
153
153
  // reset cell modifications
154
- tr > * {
154
+ tr:where(.#{$table}__tr) > * {
155
155
  width: auto;
156
156
  min-width: 0;
157
157
  max-width: none;
@@ -172,65 +172,65 @@
172
172
  }
173
173
 
174
174
  // Thead
175
- thead {
175
+ thead:where(.#{$table}__thead) {
176
176
  display: none;
177
177
  }
178
178
 
179
179
  // Tbody
180
- tbody {
180
+ tbody:where(.#{$table}__tbody) {
181
181
  display: block;
182
182
 
183
183
  &:first-of-type {
184
- border-top: var(--#{$table}--tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
184
+ border-top: var(--#{$table}__tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
185
185
  }
186
186
  }
187
187
 
188
188
  // Remove the border from the body inside of the nested table
189
- table.pf-m-compact > tbody {
189
+ .#{$table}.pf-m-compact > tbody:where(.#{$table}__tbody) {
190
190
  border-top: 0;
191
191
  }
192
192
 
193
193
  // Table row
194
- tr:not(.#{$table}__expandable-row) {
195
- border-bottom: var(--#{$table}-tr--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
194
+ tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
195
+ border-bottom: var(--#{$table}__tr--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
196
196
  }
197
197
 
198
198
  // The last tr should always have a border width of 1px
199
- tr:last-child,
200
- tbody:last-of-type:not(:only-of-type) > tr {
201
- border-bottom-width: var(--#{$table}-tr--responsive--last-child--BorderBottomWidth);
199
+ tr:where(.#{$table}__tr):last-child,
200
+ tbody:where(.#{$table}__tbody):last-of-type:not(:only-of-type) > tr:where(.#{$table}__tr) {
201
+ border-bottom-width: var(--#{$table}__tr--responsive--last-child--BorderBottomWidth);
202
202
  }
203
203
 
204
- tbody.pf-m-expanded {
204
+ tbody:where(.#{$table}__tbody).pf-m-expanded {
205
205
  border-bottom: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
206
206
 
207
- tr:not(.#{$table}__expandable-row) {
207
+ tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
208
208
  border-bottom: 0;
209
209
  }
210
210
 
211
211
  &:not(:last-of-type) {
212
- border-bottom: var(--#{$table}--tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
212
+ border-bottom: var(--#{$table}__tbody--responsive--border-width--base) solid var(--#{$table}--responsive--BorderColor);
213
213
  }
214
214
  }
215
215
 
216
- tr.pf-m-selected {
216
+ tr:where(.#{$table}__tr).pf-m-selected {
217
217
  --#{$table}__expandable-row--after--BorderLeftWidth: 0;
218
218
  --#{$table}__expandable-row--after--BorderColor: transparent;
219
219
  }
220
220
 
221
221
  // Standard table row (non-expandable)
222
222
  // exclude expandable rows
223
- tr:not(.#{$table}__expandable-row) {
223
+ tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
224
224
  display: grid;
225
225
  grid-template-columns: 1fr;
226
226
  height: auto;
227
227
 
228
228
  // set subsequent auto column width to max-content
229
229
  grid-auto-columns: max-content;
230
- grid-column-gap: var(--#{$table}-tr--responsive--GridColumnGap);
230
+ grid-column-gap: var(--#{$table}__tr--responsive--GridColumnGap);
231
231
 
232
232
  // set base variables to reset later
233
- padding: var(--#{$table}-tr--responsive--PaddingTop) var(--#{$table}-tr--responsive--PaddingRight) var(--#{$table}-tr--responsive--PaddingBottom) var(--#{$table}-tr--responsive--PaddingLeft);
233
+ padding: var(--#{$table}__tr--responsive--PaddingTop) var(--#{$table}__tr--responsive--PaddingRight) var(--#{$table}__tr--responsive--PaddingBottom) var(--#{$table}__tr--responsive--PaddingLeft);
234
234
 
235
235
  // Reset td padding
236
236
  & > * {
@@ -244,10 +244,10 @@
244
244
  }
245
245
 
246
246
  &.pf-m-compact {
247
- --#{$table}-tr--responsive--PaddingTop: var(--#{$table}--m-compact-tr--responsive--PaddingTop);
248
- --#{$table}-tr--responsive--PaddingBottom: var(--#{$table}--m-compact-tr--responsive--PaddingBottom);
249
- --#{$table}--cell--responsive--PaddingTop: var(--#{$table}--m-compact-tr-td--responsive--PaddingTop);
250
- --#{$table}--cell--responsive--PaddingBottom: var(--#{$table}--m-compact-tr-td--responsive--PaddingBottom);
247
+ --#{$table}__tr--responsive--PaddingTop: var(--#{$table}--m-compact__tr--responsive--PaddingTop);
248
+ --#{$table}__tr--responsive--PaddingBottom: var(--#{$table}--m-compact__tr--responsive--PaddingBottom);
249
+ --#{$table}--cell--responsive--PaddingTop: var(--#{$table}--m-compact__tr__td--responsive--PaddingTop);
250
+ --#{$table}--cell--responsive--PaddingBottom: var(--#{$table}--m-compact__tr__td--responsive--PaddingBottom);
251
251
  --#{$table}__check--input--MarginTop: 0;
252
252
 
253
253
  .#{$table}__action {
@@ -265,7 +265,7 @@
265
265
  }
266
266
 
267
267
  // Standard td, in standard row (non-expandable)
268
- [data-label] {
268
+ :where(.#{$table}__th, .#{$table}__td)[data-label] {
269
269
  // default pf-v5-hidden-visible() mixin is called in table.scss. redefining variable here
270
270
  --#{$table}--cell--hidden-visible--Display: var(--#{$table}--m-grid--cell--hidden-visible--Display);
271
271
 
@@ -288,7 +288,7 @@
288
288
  }
289
289
  }
290
290
 
291
- tr > * {
291
+ tr:where(.#{$table}__tr) > * {
292
292
  // Remove first child padding left
293
293
  &:first-child {
294
294
  --#{$table}--cell--PaddingLeft: 0;
@@ -302,15 +302,15 @@
302
302
 
303
303
  // nested tables
304
304
  .#{$table} {
305
- --#{$table}-tr--responsive--PaddingTop: var(--#{$table}-tr--responsive--nested-table--PaddingTop);
306
- --#{$table}-tr--responsive--PaddingRight: var(--#{$table}-tr--responsive--nested-table--PaddingRight);
307
- --#{$table}-tr--responsive--PaddingBottom: var(--#{$table}-tr--responsive--nested-table--PaddingBottom);
308
- --#{$table}-tr--responsive--PaddingLeft: var(--#{$table}-tr--responsive--nested-table--PaddingLeft);
305
+ --#{$table}__tr--responsive--PaddingTop: var(--#{$table}__tr--responsive--nested-table--PaddingTop);
306
+ --#{$table}__tr--responsive--PaddingRight: var(--#{$table}__tr--responsive--nested-table--PaddingRight);
307
+ --#{$table}__tr--responsive--PaddingBottom: var(--#{$table}__tr--responsive--nested-table--PaddingBottom);
308
+ --#{$table}__tr--responsive--PaddingLeft: var(--#{$table}__tr--responsive--nested-table--PaddingLeft);
309
309
 
310
310
  border: 0;
311
311
 
312
- tr:not(.#{$table}__expandable-row) + tr:not(.#{$table}__expandable-row) {
313
- --#{$table}-tr--responsive--PaddingTop: 0;
312
+ tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) + tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
313
+ --#{$table}__tr--responsive--PaddingTop: 0;
314
314
  }
315
315
  }
316
316
 
@@ -322,7 +322,7 @@
322
322
 
323
323
  // Compound expansion responsive
324
324
  // Tbody
325
- tbody {
325
+ tbody:where(.#{$table}__tbody) {
326
326
  position: relative;
327
327
 
328
328
  &::after {
@@ -332,18 +332,18 @@
332
332
  left: 0;
333
333
  content: "";
334
334
  border: 0;
335
- border-left: var(--#{$table}--tbody--after--BorderLeftWidth) solid var(--#{$table}--tbody--after--BorderColor);
335
+ border-left: var(--#{$table}__tbody--after--BorderLeftWidth) solid var(--#{$table}__tbody--after--BorderColor);
336
336
  }
337
337
 
338
338
  &.pf-m-expanded {
339
- --#{$table}--tbody--after--BorderLeftWidth: var(--#{$table}--tbody--after--border-width--base);
339
+ --#{$table}__tbody--after--BorderLeftWidth: var(--#{$table}__tbody--after--border-width--base);
340
340
 
341
- & tbody {
342
- --#{$table}--tbody--after--BorderLeftWidth: 0;
341
+ & tbody:where(.#{$table}__tbody) {
342
+ --#{$table}__tbody--after--BorderLeftWidth: 0;
343
343
  }
344
344
  }
345
345
 
346
- > tr > :first-child:not(.#{$table}__check)::after {
346
+ > tr:where(.#{$table}__tr) > :first-child:not(.#{$table}__check)::after {
347
347
  --#{$table}__expandable-row--after--BorderLeftWidth: 0;
348
348
 
349
349
  position: static;
@@ -383,7 +383,8 @@
383
383
  content: none;
384
384
  }
385
385
 
386
- td, th {
386
+ th:where(.#{$table}__th),
387
+ td:where(.#{$table}__td) {
387
388
  &.pf-m-no-padding {
388
389
  .#{$table}__expandable-row-content {
389
390
  padding: 0;
@@ -402,52 +403,52 @@
402
403
  }
403
404
 
404
405
  // tr selected
405
- tbody.pf-m-hoverable {
406
- --#{$table}--tbody--after--BorderLeftWidth: 0;
407
- --#{$table}--tbody--after--BorderLeftColor: transparent;
406
+ tbody:where(.#{$table}__tbody).pf-m-hoverable {
407
+ --#{$table}__tbody--after--BorderLeftWidth: 0;
408
+ --#{$table}__tbody--after--BorderLeftColor: transparent;
408
409
 
409
410
  &,
410
- > tr {
411
+ > tr:where(.#{$table}__tr) {
411
412
  position: relative;
412
413
  }
413
414
 
414
- > tr::after {
415
+ > tr:where(.#{$table}__tr)::after {
415
416
  content: '';
416
417
  position: absolute;
417
418
  top: 0;
418
419
  bottom: 0;
419
420
  left: 0;
420
- width: var(--#{$table}--tbody--after--tr--BorderLeftWidth);
421
- background-color: var(--#{$table}--tbody--after--tr--BorderLeftColor);
421
+ width: var(--#{$table}__tbody--after__tr--BorderLeftWidth);
422
+ background-color: var(--#{$table}__tbody--after__tr--BorderLeftColor);
422
423
  }
423
424
 
424
425
  &.pf-m-expanded {
425
- --#{$table}--tbody--after--tr--BorderLeftWidth: var(--#{$table}--tbody--m-expanded--after--tr--BorderLeftWidth);
426
- --#{$table}--tbody--after--tr--BorderLeftColor: var(--#{$table}--tbody--m-expanded--after--tr--BorderLeftColor);
426
+ --#{$table}__tbody--after__tr--BorderLeftWidth: var(--#{$table}__tbody--m-expanded--after__tr--BorderLeftWidth);
427
+ --#{$table}__tbody--after__tr--BorderLeftColor: var(--#{$table}__tbody--m-expanded--after__tr--BorderLeftColor);
427
428
  }
428
429
 
429
430
  &.pf-m-selected {
430
- --#{$table}--tbody--after--tr--BorderLeftWidth: var(--#{$table}--tbody--m-selected--after--tr--BorderLeftWidth);
431
- --#{$table}--tbody--after--tr--BorderLeftColor: var(--#{$table}--tbody--m-selected--after--tr--BorderLeftColor);
431
+ --#{$table}__tbody--after__tr--BorderLeftWidth: var(--#{$table}__tbody--m-selected--after__tr--BorderLeftWidth);
432
+ --#{$table}__tbody--after__tr--BorderLeftColor: var(--#{$table}__tbody--m-selected--after__tr--BorderLeftColor);
432
433
  }
433
434
  }
434
435
 
435
436
 
436
437
  // tr selected
437
- tr.pf-m-selected {
438
+ tr:where(.#{$table}__tr).pf-m-selected {
438
439
  &::after {
439
440
  content: '';
440
441
  position: absolute;
441
442
  top: 0;
442
443
  bottom: 0;
443
444
  left: 0;
444
- width: var(--#{$table}--tr--m-selected--after--BorderLeftWidth);
445
- background-color: var(--#{$table}--tr--m-selected--after--BorderLeftColor);
445
+ width: var(--#{$table}__tr--m-selected--after--BorderLeftWidth);
446
+ background-color: var(--#{$table}__tr--m-selected--after--BorderLeftColor);
446
447
  }
447
448
  }
448
449
 
449
450
  // Set defaults
450
- tr:not(.#{$table}__expandable-row) {
451
+ tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
451
452
  .#{$table}__toggle,
452
453
  .#{$table}__check,
453
454
  .#{$table}__favorite,
@@ -534,19 +535,23 @@
534
535
  }
535
536
  }
536
537
 
537
- // No wrap
538
- .pf-m-nowrap {
539
- --#{$table}--cell--Overflow: auto;
540
- }
538
+ :where(.#{$table}, .#{$table}__thead, .#{$table}__tbody, .#{$table}__tr, .#{$table}__th, .#{$table}__td, .#{$table}__text) {
541
539
 
542
- // Fit content
543
- .pf-m-fit-content {
544
- width: auto;
545
- white-space: normal;
546
- }
540
+ // No wrap
541
+ &.pf-m-nowrap {
542
+ --#{$table}--cell--Overflow: auto;
543
+ }
547
544
 
548
- .pf-m-truncate {
549
- --#{$table}--cell--MaxWidth: 100%;
545
+ // Fit content
546
+ &.pf-m-fit-content {
547
+ width: auto;
548
+ white-space: normal;
549
+ }
550
+
551
+ // Truncate
552
+ &.pf-m-truncate {
553
+ --#{$table}--cell--MaxWidth: 100%;
554
+ }
550
555
  }
551
556
 
552
557
  [class*="pf-m-width"] {