@patternfly/patternfly 5.0.0-alpha.37 → 5.0.0-alpha.38

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 (12) hide show
  1. package/components/DataList/data-list.css +34 -29
  2. package/components/DataList/data-list.scss +32 -24
  3. package/components/Table/table.css +60 -63
  4. package/components/Table/table.scss +56 -60
  5. package/docs/components/DataList/examples/DataList.md +52 -54
  6. package/docs/components/Table/examples/Table.md +136 -2125
  7. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +10 -20
  8. package/package.json +3 -3
  9. package/patternfly-no-globals.css +94 -92
  10. package/patternfly.css +94 -92
  11. package/patternfly.min.css +1 -1
  12. package/patternfly.min.css.map +1 -1
package/components/DataList/data-list.css CHANGED
@@ -498,25 +498,25 @@
498
498
  --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
499
499
  --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
500
500
  --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
501
+ --pf-c-data-list--MarginLeft: var(--pf-global--spacer--md);
501
502
  --pf-c-data-list__item--BackgroundColor: var(--pf-global--BackgroundColor--100);
502
503
  --pf-c-data-list__item--m-selected--ZIndex: var(--pf-global--ZIndex--xs);
503
504
  --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
504
505
  --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
505
506
  --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
506
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
507
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
508
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
509
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
510
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
511
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
507
+ --pf-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
508
+ --pf-c-data-list__item--m-clickable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
509
+ --pf-c-data-list__item--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
510
+ --pf-c-data-list__item--m-clickable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
511
+ --pf-c-data-list__item--m-clickable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
512
512
  --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
513
513
  --pf-c-data-list__item--BorderBottomWidth: 0.5rem;
514
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
515
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
514
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
515
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
516
516
  --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
517
517
  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
518
518
  --pf-c-data-list__item--before--BackgroundColor: transparent;
519
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
519
+ --pf-c-data-list__item--before--Width: calc(2 * var(--pf-global--BorderWidth--lg));
520
520
  --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
521
521
  --pf-c-data-list__item--before--Top: 0;
522
522
  --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
@@ -576,8 +576,6 @@
576
576
  --pf-c-data-list__item-action__action--MarginTop: calc(var(--pf-global--spacer--form-element) * -1);
577
577
  --pf-c-data-list__action--MarginTop: var(--pf-c-data-list__item-action__action--MarginTop);
578
578
  --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
579
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
580
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
581
579
  --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
582
580
  --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
583
581
  --pf-c-data-list__expandable-content--MaxHeight: 37.5rem;
@@ -709,28 +707,28 @@
709
707
  background-color: var(--pf-c-data-list__item--before--BackgroundColor);
710
708
  transition: var(--pf-c-data-list__item--before--Transition);
711
709
  }
712
- .pf-c-data-list__item.pf-m-selectable {
710
+ .pf-c-data-list__item.pf-m-clickable {
713
711
  cursor: pointer;
714
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
712
+ outline-offset: var(--pf-c-data-list__item--m-clickable--OutlineOffset);
715
713
  }
716
- .pf-c-data-list__item.pf-m-selectable:hover, .pf-c-data-list__item.pf-m-selectable:focus {
714
+ .pf-c-data-list__item.pf-m-clickable:hover, .pf-c-data-list__item.pf-m-clickable:focus {
717
715
  position: relative;
718
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
716
+ z-index: var(--pf-c-data-list__item--m-clickable--hover--ZIndex);
719
717
  }
720
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) {
718
+ .pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child), .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) {
721
719
  --pf-c-data-list__item--BorderBottomWidth: 0;
722
720
  }
723
- .pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
724
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
721
+ .pf-c-data-list__item.pf-m-clickable:hover:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item, .pf-c-data-list__item.pf-m-clickable:focus:not(.pf-m-selected):not(:last-child) + .pf-c-data-list__item {
722
+ border-top: var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopColor);
725
723
  }
726
- .pf-c-data-list__item.pf-m-selectable:hover {
727
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
724
+ .pf-c-data-list__item.pf-m-clickable:hover {
725
+ box-shadow: var(--pf-c-data-list__item--m-clickable--hover--BoxShadow);
728
726
  }
729
- .pf-c-data-list__item.pf-m-selectable:focus {
730
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
727
+ .pf-c-data-list__item.pf-m-clickable:focus {
728
+ box-shadow: var(--pf-c-data-list__item--m-clickable--focus--BoxShadow);
731
729
  }
732
- .pf-c-data-list__item.pf-m-selectable:active {
733
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
730
+ .pf-c-data-list__item.pf-m-clickable:active {
731
+ box-shadow: var(--pf-c-data-list__item--m-clickable--active--BoxShadow);
734
732
  }
735
733
  .pf-c-data-list__item.pf-m-selected {
736
734
  --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-selected--before--BackgroundColor);
@@ -750,10 +748,6 @@
750
748
  }
751
749
  .pf-c-data-list__item.pf-m-expanded {
752
750
  --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
753
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
754
- }
755
- .pf-c-data-list__item.pf-m-expanded.pf-m-selectable:not(.pf-m-selected) {
756
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
757
751
  }
758
752
 
759
753
  .pf-c-data-list__item-row {
@@ -885,11 +879,22 @@
885
879
  .pf-c-data-list__expandable-content {
886
880
  max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
887
881
  overflow-y: auto;
888
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
889
882
  }
890
883
  .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body {
891
884
  padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
892
885
  }
886
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body > .pf-c-data-list {
887
+ margin-left: var(--pf-c-data-list--MarginLeft);
888
+ }
889
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item:last-child {
890
+ border-bottom: 0;
891
+ }
892
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__item-row {
893
+ --pf-c-data-list__item-row--PaddingLeft: 0;
894
+ }
895
+ .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body .pf-c-data-list__expandable-content-body {
896
+ --pf-c-data-list__expandable-content-body--PaddingLeft: 0;
897
+ }
893
898
  .pf-c-data-list__expandable-content .pf-c-data-list__expandable-content-body.pf-m-no-padding {
894
899
  padding: 0;
895
900
  }
package/components/DataList/data-list.scss CHANGED
@@ -7,6 +7,7 @@
7
7
  --pf-c-data-list--BorderTopWidth: var(--pf-global--spacer--sm);
8
8
  --pf-c-data-list--sm--BorderTopWidth: var(--pf-global--BorderWidth--sm);
9
9
  --pf-c-data-list--sm--BorderTopColor: var(--pf-global--BorderColor--100);
10
+ --pf-c-data-list--MarginLeft: var(--pf-global--spacer--md);
10
11
 
11
12
  @media screen and (min-width: $pf-global--breakpoint--sm) {
12
13
  --pf-c-data-list--BorderTopColor: var(--pf-c-data-list--sm--BorderTopColor);
@@ -19,16 +20,15 @@
19
20
  --pf-c-data-list__item--m-expanded--before--BackgroundColor: var(--pf-global--active-color--100);
20
21
  --pf-c-data-list__item--m-selected--before--BackgroundColor: var(--pf-global--active-color--100);
21
22
  --pf-c-data-list__item--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
22
- --pf-c-data-list__item--m-selectable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
23
- --pf-c-data-list__item--m-selectable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
24
- --pf-c-data-list__item--m-selectable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
25
- --pf-c-data-list__item--m-selectable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
26
- --pf-c-data-list__item--m-selectable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
27
- --pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor: var(--pf-global--active-color--300);
23
+ --pf-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
24
+ --pf-c-data-list__item--m-clickable--hover--ZIndex: calc(var(--pf-c-data-list__item--m-selected--ZIndex) + 1);
25
+ --pf-c-data-list__item--m-clickable--hover--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
26
+ --pf-c-data-list__item--m-clickable--focus--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
27
+ --pf-c-data-list__item--m-clickable--active--BoxShadow: var(--pf-global--BoxShadow--sm-top), var(--pf-global--BoxShadow--sm-bottom);
28
28
  --pf-c-data-list__item--BorderBottomColor: var(--pf-global--BorderColor--300);
29
29
  --pf-c-data-list__item--BorderBottomWidth: #{pf-size-prem(8px)};
30
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
31
- --pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
30
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopColor: var(--pf-c-data-list__item--BorderBottomColor);
31
+ --pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth: var(--pf-c-data-list__item--BorderBottomWidth);
32
32
  --pf-c-data-list__item--sm--BorderBottomWidth: var(--pf-global--BorderWidth--sm);
33
33
  --pf-c-data-list__item--sm--BorderBottomColor: var(--pf-global--BorderColor--100);
34
34
 
@@ -39,7 +39,7 @@
39
39
 
40
40
  // list item border left
41
41
  --pf-c-data-list__item--before--BackgroundColor: transparent;
42
- --pf-c-data-list__item--before--Width: var(--pf-global--BorderWidth--lg);
42
+ --pf-c-data-list__item--before--Width: calc(2 * var(--pf-global--BorderWidth--lg));
43
43
  --pf-c-data-list__item--before--Transition: var(--pf-global--Transition);
44
44
  --pf-c-data-list__item--before--Top: 0;
45
45
  --pf-c-data-list__item--before--sm--Top: calc(var(--pf-c-data-list__item--BorderBottomWidth) * -1);
@@ -122,8 +122,6 @@
122
122
  --pf-c-data-list__item-action__action--MarginBottom: calc(var(--pf-global--spacer--form-element) * -1);
123
123
 
124
124
  // expandable content
125
- --pf-c-data-list__expandable-content--BorderTopWidth: var(--pf-global--BorderWidth--sm);
126
- --pf-c-data-list__expandable-content--BorderTopColor: var(--pf-global--BorderColor--100);
127
125
  --pf-c-data-list__expandable-content--MarginRight: calc(var(--pf-c-data-list__expandable-content-body--PaddingRight) * -1);
128
126
  --pf-c-data-list__expandable-content--MarginLeft: calc(var(--pf-c-data-list__expandable-content-body--PaddingLeft) * -1);
129
127
  --pf-c-data-list__expandable-content--MaxHeight: #{pf-size-prem(600px)};
@@ -247,14 +245,14 @@
247
245
  transition: var(--pf-c-data-list__item--before--Transition);
248
246
  }
249
247
 
250
- &.pf-m-selectable {
248
+ &.pf-m-clickable {
251
249
  cursor: pointer;
252
- outline-offset: var(--pf-c-data-list__item--m-selectable--OutlineOffset);
250
+ outline-offset: var(--pf-c-data-list__item--m-clickable--OutlineOffset);
253
251
 
254
252
  &:hover,
255
253
  &:focus {
256
254
  position: relative;
257
- z-index: var(--pf-c-data-list__item--m-selectable--hover--ZIndex);
255
+ z-index: var(--pf-c-data-list__item--m-clickable--hover--ZIndex);
258
256
 
259
257
  // stylelint-disable selector-not-notation
260
258
  // update to single :not() in breaking change
@@ -263,22 +261,22 @@
263
261
 
264
262
  // stylelint-disable
265
263
  + .pf-c-data-list__item {
266
- border-top: var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-selectable--hover--item--BorderTopColor);
264
+ border-top: var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopWidth) solid var(--pf-c-data-list__item--m-clickable--hover--item--BorderTopColor);
267
265
  }
268
266
  // stylelint-enable
269
267
  }
270
268
  }
271
269
 
272
270
  &:hover {
273
- box-shadow: var(--pf-c-data-list__item--m-selectable--hover--BoxShadow);
271
+ box-shadow: var(--pf-c-data-list__item--m-clickable--hover--BoxShadow);
274
272
  }
275
273
 
276
274
  &:focus {
277
- box-shadow: var(--pf-c-data-list__item--m-selectable--focus--BoxShadow);
275
+ box-shadow: var(--pf-c-data-list__item--m-clickable--focus--BoxShadow);
278
276
  }
279
277
 
280
278
  &:active {
281
- box-shadow: var(--pf-c-data-list__item--m-selectable--active--BoxShadow);
279
+ box-shadow: var(--pf-c-data-list__item--m-clickable--active--BoxShadow);
282
280
  }
283
281
  }
284
282
 
@@ -305,11 +303,6 @@
305
303
 
306
304
  &.pf-m-expanded {
307
305
  --pf-c-data-list__toggle-icon--Rotate: var(--pf-c-data-list__item--m-expanded__toggle-icon--Rotate);
308
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--before--BackgroundColor);
309
-
310
- &.pf-m-selectable:not(.pf-m-selected) {
311
- --pf-c-data-list__item--before--BackgroundColor: var(--pf-c-data-list__item--m-expanded--m-selectable--before--BackgroundColor);
312
- }
313
306
  }
314
307
  }
315
308
 
@@ -465,11 +458,26 @@
465
458
  .pf-c-data-list__expandable-content {
466
459
  max-height: var(--pf-c-data-list__expandable-content--MaxHeight);
467
460
  overflow-y: auto;
468
- border-top: var(--pf-c-data-list__expandable-content--BorderTopWidth) solid var(--pf-c-data-list__expandable-content--BorderTopColor);
469
461
 
470
462
  .pf-c-data-list__expandable-content-body {
471
463
  padding: var(--pf-c-data-list__expandable-content-body--PaddingTop) var(--pf-c-data-list__expandable-content-body--PaddingRight) var(--pf-c-data-list__expandable-content-body--PaddingBottom) var(--pf-c-data-list__expandable-content-body--PaddingLeft);
472
464
 
465
+ > .pf-c-data-list {
466
+ margin-left: var(--pf-c-data-list--MarginLeft);
467
+ }
468
+
469
+ .pf-c-data-list__item:last-child {
470
+ border-bottom: 0;
471
+ }
472
+
473
+ .pf-c-data-list__item-row {
474
+ --pf-c-data-list__item-row--PaddingLeft: 0;
475
+ }
476
+
477
+ .pf-c-data-list__expandable-content-body {
478
+ --pf-c-data-list__expandable-content-body--PaddingLeft: 0;
479
+ }
480
+
473
481
  &.pf-m-no-padding {
474
482
  padding: 0;
475
483
  }
package/components/Table/table.css CHANGED
@@ -215,43 +215,43 @@
215
215
  --pf-c-table--nested--first-last-child--PaddingRight: var(--pf-c-table--m-compact--cell--first-last-child--PaddingLeft);
216
216
  --pf-c-table--nested--first-last-child--PaddingLeft: var(--pf-c-table--m-compact--cell--first-last-child--PaddingRight);
217
217
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
218
- --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
219
- --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
220
- --pf-c-table--tr--m-hoverable--BoxShadow: none;
221
- --pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
222
- --pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
223
- --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
224
- --pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
225
- --pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
226
- --pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
227
- --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
228
- --pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
218
+ --pf-c-table--tr--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
219
+ --pf-c-table--tr--m-clickable--BackgroundColor: transparent;
220
+ --pf-c-table--tr--m-clickable--BoxShadow: none;
221
+ --pf-c-table--tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
222
+ --pf-c-table--tr--m-clickable--hover--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
223
+ --pf-c-table--tr--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
224
+ --pf-c-table--tr--m-clickable--focus--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
225
+ --pf-c-table--tr--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
226
+ --pf-c-table--tr--m-clickable--active--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
227
+ --pf-c-table--tr--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
228
+ --pf-c-table--tr--m-clickable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
229
229
  --pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
230
230
  --pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
231
231
  --pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
232
232
  --pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
233
- --pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
233
+ --pf-c-table--tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
234
234
  --pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
235
235
  --pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
236
236
  --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
237
237
  --pf-c-table--tr--m-selected--tr--m-selected--hover--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
238
- --pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
239
- --pf-c-table--tbody--m-hoverable--BoxShadow: none;
240
- --pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
241
- --pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
242
- --pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
243
- --pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
244
- --pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
245
- --pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
246
- --pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
247
- --pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
248
- --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400);
249
- --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
238
+ --pf-c-table--tbody--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
239
+ --pf-c-table--tbody--m-clickable--BoxShadow: none;
240
+ --pf-c-table--tbody--m-clickable--BackgroundColor: transparent;
241
+ --pf-c-table--tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
242
+ --pf-c-table--tbody--m-clickable--hover--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
243
+ --pf-c-table--tbody--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
244
+ --pf-c-table--tbody--m-clickable--focus--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
245
+ --pf-c-table--tbody--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
246
+ --pf-c-table--tbody--m-clickable--active--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
247
+ --pf-c-table--tbody--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
248
+ --pf-c-table--tbody--m-clickable--m-expanded--BorderColor: var(--pf-global--active-color--400);
249
+ --pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
250
250
  --pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
251
251
  --pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
252
252
  --pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
253
253
  --pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
254
- --pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
254
+ --pf-c-table--tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
255
255
  --pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
256
256
  --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
257
257
  --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
@@ -448,6 +448,9 @@
448
448
  margin-top: var(--pf-c-table__check--input--MarginTop);
449
449
  vertical-align: top;
450
450
  }
451
+ .pf-c-table tbody.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
452
+ border-bottom-width: 0;
453
+ }
451
454
  .pf-c-table .pf-c-table__compound-expansion-toggle, .pf-c-table .pf-c-table__compound-expansion-toggle:first-child, .pf-c-table .pf-c-table__compound-expansion-toggle:last-child {
452
455
  padding: 0;
453
456
  }
@@ -507,26 +510,26 @@
507
510
  .pf-c-table.pf-m-no-border-rows > tbody .pf-c-table__control-row > .pf-c-table__compound-expansion-toggle:first-child > ::before {
508
511
  border-left-width: 0;
509
512
  }
510
- .pf-c-table tr.pf-m-hoverable {
513
+ .pf-c-table tr.pf-m-clickable {
511
514
  cursor: pointer;
512
- background-color: var(--pf-c-table--tr--m-hoverable--BackgroundColor);
513
- outline-offset: var(--pf-c-table--tr--m-hoverable--OutlineOffset);
514
- box-shadow: var(--pf-c-table--tr--m-hoverable--BoxShadow);
515
+ background-color: var(--pf-c-table--tr--m-clickable--BackgroundColor);
516
+ outline-offset: var(--pf-c-table--tr--m-clickable--OutlineOffset);
517
+ box-shadow: var(--pf-c-table--tr--m-clickable--BoxShadow);
515
518
  }
516
- .pf-c-table tr.pf-m-hoverable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-hoverable:active:not(.pf-m-selected) + tr.pf-m-selected {
517
- box-shadow: var(--pf-c-table--tr--m-hoverable--m-selected--BoxShadow);
519
+ .pf-c-table tr.pf-m-clickable:hover:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:focus:not(.pf-m-selected) + tr.pf-m-selected, .pf-c-table tr.pf-m-clickable:active:not(.pf-m-selected) + tr.pf-m-selected {
520
+ box-shadow: var(--pf-c-table--tr--m-clickable--m-selected--BoxShadow);
518
521
  }
519
- .pf-c-table tr.pf-m-hoverable:hover {
520
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--hover--BoxShadow);
521
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--hover--BackgroundColor);
522
+ .pf-c-table tr.pf-m-clickable:hover {
523
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--hover--BoxShadow);
524
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--hover--BackgroundColor);
522
525
  }
523
- .pf-c-table tr.pf-m-hoverable:focus {
524
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--focus--BoxShadow);
525
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--focus--BackgroundColor);
526
+ .pf-c-table tr.pf-m-clickable:focus {
527
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--focus--BoxShadow);
528
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--focus--BackgroundColor);
526
529
  }
527
- .pf-c-table tr.pf-m-hoverable:active {
528
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--active--BoxShadow);
529
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--active--BackgroundColor);
530
+ .pf-c-table tr.pf-m-clickable:active {
531
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--active--BoxShadow);
532
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--active--BackgroundColor);
530
533
  }
531
534
  .pf-c-table tr.pf-m-selected {
532
535
  --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tr--m-selected--after--BorderLeftWidth);
@@ -548,29 +551,29 @@
548
551
  .pf-c-table tr.pf-m-first-cell-offset-reset {
549
552
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
550
553
  }
551
- .pf-c-table tbody.pf-m-hoverable {
554
+ .pf-c-table tbody.pf-m-clickable {
552
555
  cursor: pointer;
553
- background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
554
- outline-offset: var(--pf-c-table--tbody--m-hoverable--OutlineOffset);
555
- box-shadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow);
556
+ background-color: var(--pf-c-table--tbody--m-clickable--BackgroundColor);
557
+ outline-offset: var(--pf-c-table--tbody--m-clickable--OutlineOffset);
558
+ box-shadow: var(--pf-c-table--tbody--m-clickable--BoxShadow);
556
559
  }
557
- .pf-c-table tbody.pf-m-hoverable.pf-m-expanded:not(.pf-m-selected) {
558
- --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor);
560
+ .pf-c-table tbody.pf-m-clickable.pf-m-expanded:not(.pf-m-selected) {
561
+ --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-clickable--m-expanded--BorderColor);
559
562
  }
560
- .pf-c-table tbody.pf-m-hoverable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-hoverable:active:not(.pf-m-selected) + tbody.pf-m-selected {
561
- box-shadow: var(--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow);
563
+ .pf-c-table tbody.pf-m-clickable:hover:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:focus:not(.pf-m-selected) + tbody.pf-m-selected, .pf-c-table tbody.pf-m-clickable:active:not(.pf-m-selected) + tbody.pf-m-selected {
564
+ box-shadow: var(--pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
562
565
  }
563
- .pf-c-table tbody.pf-m-hoverable:hover {
564
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--hover--BoxShadow);
565
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--hover--BackgroundColor);
566
+ .pf-c-table tbody.pf-m-clickable:hover {
567
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--hover--BoxShadow);
568
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--hover--BackgroundColor);
566
569
  }
567
- .pf-c-table tbody.pf-m-hoverable:focus {
568
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--focus--BoxShadow);
569
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--focus--BackgroundColor);
570
+ .pf-c-table tbody.pf-m-clickable:focus {
571
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--focus--BoxShadow);
572
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--focus--BackgroundColor);
570
573
  }
571
- .pf-c-table tbody.pf-m-hoverable:active {
572
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--active--BoxShadow);
573
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--active--BackgroundColor);
574
+ .pf-c-table tbody.pf-m-clickable:active {
575
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--active--BoxShadow);
576
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--active--BackgroundColor);
574
577
  }
575
578
  .pf-c-table tbody.pf-m-selected {
576
579
  --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table--tbody--m-selected--after--BorderLeftWidth);
@@ -938,12 +941,6 @@
938
941
  display: none;
939
942
  }
940
943
 
941
- .pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child,
942
- .pf-c-table__expandable-row.pf-m-expanded > :first-child,
943
- .pf-c-table tbody.pf-m-expanded > tr > :not(.pf-c-table__compound-expansion-toggle) {
944
- --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
945
- }
946
-
947
944
  .pf-c-table .pf-c-table tr > *:first-child {
948
945
  --pf-c-table--cell--PaddingLeft: var(--pf-c-table--nested--first-last-child--PaddingLeft);
949
946
  }