@patternfly/patternfly 5.0.0-alpha.36 → 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 (29) hide show
  1. package/assets/images/pfbg-icon.svg +1 -0
  2. package/components/AboutModalBox/about-modal-box.css +15 -7
  3. package/components/AboutModalBox/about-modal-box.scss +17 -9
  4. package/components/BackgroundImage/background-image.css +8 -35
  5. package/components/BackgroundImage/background-image.scss +17 -43
  6. package/components/DataList/data-list.css +34 -29
  7. package/components/DataList/data-list.scss +32 -24
  8. package/components/Login/login.css +9 -9
  9. package/components/Login/login.scss +6 -8
  10. package/components/Login/themes/dark/login.scss +4 -0
  11. package/components/Page/page.css +30 -9
  12. package/components/Page/page.scss +37 -9
  13. package/components/Table/table.css +60 -63
  14. package/components/Table/table.scss +56 -60
  15. package/docs/components/AboutModalBox/examples/AboutModalBox.md +8 -2
  16. package/docs/components/BackgroundImage/examples/BackgroundImage.md +10 -26
  17. package/docs/components/DataList/examples/DataList.md +52 -54
  18. package/docs/components/Login/examples/Login.md +5 -120
  19. package/docs/components/Page/examples/Page.css +7 -1
  20. package/docs/components/Page/examples/Page.md +31 -4
  21. package/docs/components/Table/examples/Table.md +136 -2125
  22. package/docs/demos/AboutModal/examples/AboutModal.md +0 -1
  23. package/docs/demos/Page/examples/Page.md +931 -0
  24. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +10 -20
  25. package/package.json +3 -3
  26. package/patternfly-no-globals.css +156 -152
  27. package/patternfly.css +156 -152
  28. package/patternfly.min.css +1 -1
  29. package/patternfly.min.css.map +1 -1
package/components/Page/page.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --pf-global--BackgroundColor--100: var(--pf-global--BackgroundColor--light-100);
9
9
  }
10
10
 
11
- .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__header {
11
+ .pf-c-page__main-section[class*=pf-m-dark-], .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector, .pf-c-page__sidebar, .pf-c-page__header {
12
12
  --pf-global--Color--100: var(--pf-global--Color--light-100);
13
13
  --pf-global--Color--200: var(--pf-global--Color--light-200);
14
14
  --pf-global--BorderColor--100: var(--pf-global--BorderColor--light-100);
@@ -69,6 +69,8 @@
69
69
 
70
70
  .pf-c-page {
71
71
  --pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
72
+ --pf-c-page--inset: var(--pf-global--spacer--md);
73
+ --pf-c-page--xl--inset: var(--pf-global--spacer--lg);
72
74
  --pf-c-page__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
73
75
  --pf-c-page__header--ZIndex: var(--pf-global--ZIndex--md);
74
76
  --pf-c-page__header--MinHeight: 4.75rem;
@@ -115,10 +117,10 @@
115
117
  --pf-c-page__sidebar--TranslateZ: 0;
116
118
  --pf-c-page__sidebar--m-expanded--TranslateX: 0;
117
119
  --pf-c-page__sidebar--xl--TranslateX: 0;
118
- --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
119
- --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
120
- --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
121
- --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
120
+ --pf-c-page__sidebar-body--PaddingRight: 0;
121
+ --pf-c-page__sidebar-body--PaddingLeft: 0;
122
+ --pf-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-c-page--inset);
123
+ --pf-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-c-page--inset);
122
124
  --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
123
125
  --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
124
126
  --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
@@ -189,6 +191,7 @@
189
191
  @media (min-width: 1200px) {
190
192
  .pf-c-page {
191
193
  --pf-c-page__header-brand--PaddingLeft: var(--pf-c-page__header-brand--xl--PaddingLeft);
194
+ --pf-c-page--inset: var(--pf-c-page--xl--inset);
192
195
  }
193
196
  }
194
197
  @media screen and (min-width: 1200px) {
@@ -374,7 +377,10 @@
374
377
  }
375
378
 
376
379
  .pf-c-page__sidebar {
380
+ color: var(--pf-global--Color--100);
377
381
  z-index: var(--pf-c-page__sidebar--ZIndex);
382
+ display: flex;
383
+ flex-direction: column;
378
384
  grid-area: nav;
379
385
  grid-row-start: 2;
380
386
  grid-column-start: 1;
@@ -406,12 +412,13 @@
406
412
  }
407
413
 
408
414
  .pf-c-page__sidebar-body {
409
- padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
410
- padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
415
+ padding-right: var(--pf-c-page__sidebar-body--PaddingRight);
416
+ padding-left: var(--pf-c-page__sidebar-body--PaddingLeft);
417
+ }
418
+ .pf-c-page__sidebar-body:last-child {
419
+ flex-grow: 1;
411
420
  }
412
421
  .pf-c-page__sidebar-body.pf-m-menu {
413
- --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
414
- --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
415
422
  background-color: var(--pf-global--palette--black-900);
416
423
  border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
417
424
  }
@@ -427,6 +434,20 @@
427
434
  color: var(--pf-global--Color--100);
428
435
  width: 100%;
429
436
  }
437
+ .pf-c-page__sidebar-body.pf-m-page-insets {
438
+ --pf-c-page__sidebar-body--PaddingRight: var(--pf-c-page__sidebar-body--m-page-insets--PaddingRight);
439
+ --pf-c-page__sidebar-body--PaddingLeft: var(--pf-c-page__sidebar-body--m-page-insets--PaddingLeft);
440
+ }
441
+ .pf-c-page__sidebar-body.pf-m-inset-none {
442
+ --pf-c-page__sidebar-body--PaddingRight: 0;
443
+ --pf-c-page__sidebar-body--PaddingLeft: 0;
444
+ }
445
+ .pf-c-page__sidebar-body.pf-m-fill {
446
+ flex-grow: 1;
447
+ }
448
+ .pf-c-page__sidebar-body.pf-m-no-fill {
449
+ flex-grow: 0;
450
+ }
430
451
 
431
452
  .pf-c-page__main-nav.pf-m-limit-width,
432
453
  .pf-c-page__main-breadcrumb.pf-m-limit-width,
package/components/Page/page.scss CHANGED
@@ -1,9 +1,13 @@
1
+ // stylelint-disable
1
2
  $pf-c-page--breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
2
3
  $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg", "xl", "2xl");
4
+ // stylelint-enable
3
5
 
4
6
  // URL.com/guidelines#layout
5
7
  .pf-c-page {
6
8
  --pf-c-page--BackgroundColor: var(--pf-global--BackgroundColor--light-300);
9
+ --pf-c-page--inset: var(--pf-global--spacer--md);
10
+ --pf-c-page--xl--inset: var(--pf-global--spacer--lg);
7
11
 
8
12
  // Header
9
13
  --pf-c-page__header--BackgroundColor: var(--pf-global--BackgroundColor--dark-100);
@@ -17,6 +21,7 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
17
21
 
18
22
  @media (min-width: $pf-global--breakpoint--xl) {
19
23
  --pf-c-page__header-brand--PaddingLeft: var(--pf-c-page__header-brand--xl--PaddingLeft);
24
+ --pf-c-page--inset: var(--pf-c-page--xl--inset);
20
25
  }
21
26
 
22
27
  // Toggle
@@ -84,10 +89,10 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
84
89
  --pf-c-page__sidebar--xl--TranslateX: 0;
85
90
 
86
91
  // Sidebar body
87
- --pf-c-page__sidebar-body--PaddingTop: var(--pf-global--spacer--sm);
88
- --pf-c-page__sidebar-body--PaddingBottom: var(--pf-global--spacer--md);
89
- --pf-c-page__sidebar-body--m-menu--PaddingTop: 0;
90
- --pf-c-page__sidebar-body--m-menu--PaddingBottom: 0;
92
+ --pf-c-page__sidebar-body--PaddingRight: 0;
93
+ --pf-c-page__sidebar-body--PaddingLeft: 0;
94
+ --pf-c-page__sidebar-body--m-page-insets--PaddingRight: var(--pf-c-page--inset);
95
+ --pf-c-page__sidebar-body--m-page-insets--PaddingLeft: var(--pf-c-page--inset);
91
96
  --pf-c-page__sidebar-body--m-menu--BorderTopColor: var(--pf-global--BackgroundColor--dark-200);
92
97
  --pf-c-page__sidebar-body--m-menu--BorderTopWidth: var(--pf-global--BorderWidth--sm);
93
98
  --pf-c-page__sidebar-body--m-menu--c-context-selector--BorderBottomColor: var(--pf-global--BackgroundColor--dark-200);
@@ -386,7 +391,11 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
386
391
 
387
392
  // Sidebar
388
393
  .pf-c-page__sidebar {
394
+ @include pf-t-dark;
395
+
389
396
  z-index: var(--pf-c-page__sidebar--ZIndex);
397
+ display: flex;
398
+ flex-direction: column;
390
399
  grid-area: nav;
391
400
  grid-row-start: 2;
392
401
  grid-column-start: 1;
@@ -427,13 +436,14 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
427
436
  }
428
437
 
429
438
  .pf-c-page__sidebar-body {
430
- padding-top: var(--pf-c-page__sidebar-body--PaddingTop);
431
- padding-bottom: var(--pf-c-page__sidebar-body--PaddingBottom);
439
+ padding-right: var(--pf-c-page__sidebar-body--PaddingRight);
440
+ padding-left: var(--pf-c-page__sidebar-body--PaddingLeft);
432
441
 
433
- &.pf-m-menu {
434
- --pf-c-page__sidebar-body--PaddingTop: var(--pf-c-page__sidebar-body--m-menu--PaddingTop);
435
- --pf-c-page__sidebar-body--PaddingBottom: var(--pf-c-page__sidebar-body--m-menu--PaddingBottom);
442
+ &:last-child {
443
+ flex-grow: 1;
444
+ }
436
445
 
446
+ &.pf-m-menu {
437
447
  background-color: var(--pf-global--palette--black-900);
438
448
  border-top: var(--pf-c-page__sidebar-body--m-menu--BorderTopWidth) solid var(--pf-c-page__sidebar-body--m-menu--BorderTopColor);
439
449
 
@@ -453,6 +463,24 @@ $pf-c-page--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg"
453
463
  width: 100%;
454
464
  }
455
465
  }
466
+
467
+ &.pf-m-page-insets {
468
+ --pf-c-page__sidebar-body--PaddingRight: var(--pf-c-page__sidebar-body--m-page-insets--PaddingRight);
469
+ --pf-c-page__sidebar-body--PaddingLeft: var(--pf-c-page__sidebar-body--m-page-insets--PaddingLeft);
470
+ }
471
+
472
+ &.pf-m-inset-none {
473
+ --pf-c-page__sidebar-body--PaddingRight: 0;
474
+ --pf-c-page__sidebar-body--PaddingLeft: 0;
475
+ }
476
+
477
+ &.pf-m-fill {
478
+ flex-grow: 1;
479
+ }
480
+
481
+ &.pf-m-no-fill {
482
+ flex-grow: 0;
483
+ }
456
484
  }
457
485
 
458
486
  .pf-c-page__main-nav,
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
  }
package/components/Table/table.scss CHANGED
@@ -246,50 +246,50 @@
246
246
  // Modifier - expandable row expanded
247
247
  --pf-c-table__expandable-row--m-expanded--BorderBottomColor: var(--pf-global--BorderColor--100);
248
248
 
249
- // tr hoverable
250
- --pf-c-table--tr--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
251
- --pf-c-table--tr--m-hoverable--BackgroundColor: transparent;
252
- --pf-c-table--tr--m-hoverable--BoxShadow: none;
253
- --pf-c-table--tr--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
254
- --pf-c-table--tr--m-hoverable--hover--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
255
- --pf-c-table--tr--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
256
- --pf-c-table--tr--m-hoverable--focus--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
257
- --pf-c-table--tr--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
258
- --pf-c-table--tr--m-hoverable--active--BoxShadow: var(--pf-c-table--tr--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
259
- --pf-c-table--tr--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
260
- --pf-c-table--tr--m-hoverable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
249
+ // tr clickable
250
+ --pf-c-table--tr--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
251
+ --pf-c-table--tr--m-clickable--BackgroundColor: transparent;
252
+ --pf-c-table--tr--m-clickable--BoxShadow: none;
253
+ --pf-c-table--tr--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
254
+ --pf-c-table--tr--m-clickable--hover--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
255
+ --pf-c-table--tr--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
256
+ --pf-c-table--tr--m-clickable--focus--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
257
+ --pf-c-table--tr--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
258
+ --pf-c-table--tr--m-clickable--active--BoxShadow: var(--pf-c-table--tr--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
259
+ --pf-c-table--tr--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
260
+ --pf-c-table--tr--m-clickable--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
261
261
 
262
262
  // tr selected
263
263
  --pf-c-table--tr--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
264
264
  --pf-c-table--tr--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
265
265
  --pf-c-table--tr--m-selected--BoxShadow: var(--pf-c-table--tr--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
266
266
  --pf-c-table--tr--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
267
- --pf-c-table--tr--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
267
+ --pf-c-table--tr--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
268
268
  --pf-c-table--tr--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
269
269
  --pf-c-table--tr--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
270
270
  --pf-c-table--tr--m-selected--hover--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
271
271
  --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);
272
272
 
273
- // tbody hoverable
274
- --pf-c-table--tbody--m-hoverable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
275
- --pf-c-table--tbody--m-hoverable--BoxShadow: none;
276
- --pf-c-table--tbody--m-hoverable--BackgroundColor: transparent;
277
- --pf-c-table--tbody--m-hoverable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
278
- --pf-c-table--tbody--m-hoverable--hover--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
279
- --pf-c-table--tbody--m-hoverable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
280
- --pf-c-table--tbody--m-hoverable--focus--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
281
- --pf-c-table--tbody--m-hoverable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
282
- --pf-c-table--tbody--m-hoverable--active--BoxShadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
283
- --pf-c-table--tbody--m-hoverable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
284
- --pf-c-table--tbody--m-hoverable--m-expanded--BorderColor: var(--pf-global--active-color--400);
285
- --pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
273
+ // tbody clickable
274
+ --pf-c-table--tbody--m-clickable--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
275
+ --pf-c-table--tbody--m-clickable--BoxShadow: none;
276
+ --pf-c-table--tbody--m-clickable--BackgroundColor: transparent;
277
+ --pf-c-table--tbody--m-clickable--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
278
+ --pf-c-table--tbody--m-clickable--hover--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
279
+ --pf-c-table--tbody--m-clickable--hover--BackgroundColor: var(--pf-global--BackgroundColor--100);
280
+ --pf-c-table--tbody--m-clickable--focus--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
281
+ --pf-c-table--tbody--m-clickable--focus--BackgroundColor: var(--pf-global--BackgroundColor--100);
282
+ --pf-c-table--tbody--m-clickable--active--BoxShadow: var(--pf-c-table--tbody--m-clickable--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
283
+ --pf-c-table--tbody--m-clickable--active--BackgroundColor: var(--pf-global--BackgroundColor--100);
284
+ --pf-c-table--tbody--m-clickable--m-expanded--BorderColor: var(--pf-global--active-color--400);
285
+ --pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
286
286
 
287
287
  // tbody selected
288
288
  --pf-c-table--tbody--m-selected--BackgroundColor: var(--pf-global--BackgroundColor--100);
289
289
  --pf-c-table--tbody--m-selected--BoxShadow--top: var(--pf-c-table--tr--BoxShadow--top--base);
290
290
  --pf-c-table--tbody--m-selected--BoxShadow: var(--pf-c-table--tbody--m-selected--BoxShadow--top), var(--pf-global--BoxShadow--sm-bottom);
291
291
  --pf-c-table--tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-global--spacer--xs));
292
- --pf-c-table--tbody--m-selected--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
292
+ --pf-c-table--tbody--m-selected--after--BorderLeftWidth: calc(2 * var(--pf-c-table__expandable-row--after--border-width--base));
293
293
  --pf-c-table--tbody--m-selected--after--BorderLeftColor: var(--pf-global--active-color--100);
294
294
  --pf-c-table--tbody--m-selected--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom);
295
295
  --pf-c-table--tbody--m-selected--hover--tbody--m-selected--BoxShadow: var(--pf-global--BoxShadow--sm-bottom) inset, var(--pf-global--BoxShadow--sm-bottom);
@@ -580,6 +580,10 @@
580
580
  vertical-align: top;
581
581
  }
582
582
  }
583
+
584
+ &.pf-m-expanded > :first-child:not(.pf-c-table__control-row) {
585
+ border-bottom-width: 0;
586
+ }
583
587
  }
584
588
  // stylelint-enable
585
589
 
@@ -668,34 +672,34 @@
668
672
  }
669
673
  }
670
674
 
671
- // tr hoverable
672
- tr.pf-m-hoverable {
675
+ // tr clickable
676
+ tr.pf-m-clickable {
673
677
  cursor: pointer;
674
- background-color: var(--pf-c-table--tr--m-hoverable--BackgroundColor);
675
- outline-offset: var(--pf-c-table--tr--m-hoverable--OutlineOffset);
676
- box-shadow: var(--pf-c-table--tr--m-hoverable--BoxShadow);
678
+ background-color: var(--pf-c-table--tr--m-clickable--BackgroundColor);
679
+ outline-offset: var(--pf-c-table--tr--m-clickable--OutlineOffset);
680
+ box-shadow: var(--pf-c-table--tr--m-clickable--BoxShadow);
677
681
 
678
682
  &:hover,
679
683
  &:focus,
680
684
  &:active {
681
685
  &:not(.pf-m-selected) + tr.pf-m-selected {
682
- box-shadow: var(--pf-c-table--tr--m-hoverable--m-selected--BoxShadow);
686
+ box-shadow: var(--pf-c-table--tr--m-clickable--m-selected--BoxShadow);
683
687
  }
684
688
  }
685
689
 
686
690
  &:hover {
687
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--hover--BoxShadow);
688
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--hover--BackgroundColor);
691
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--hover--BoxShadow);
692
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--hover--BackgroundColor);
689
693
  }
690
694
 
691
695
  &:focus {
692
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--focus--BoxShadow);
693
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--focus--BackgroundColor);
696
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--focus--BoxShadow);
697
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--focus--BackgroundColor);
694
698
  }
695
699
 
696
700
  &:active {
697
- --pf-c-table--tr--m-hoverable--BoxShadow: var(--pf-c-table--tr--m-hoverable--active--BoxShadow);
698
- --pf-c-table--tr--m-hoverable--BackgroundColor: var(--pf-c-table--tr--m-hoverable--active--BackgroundColor);
701
+ --pf-c-table--tr--m-clickable--BoxShadow: var(--pf-c-table--tr--m-clickable--active--BoxShadow);
702
+ --pf-c-table--tr--m-clickable--BackgroundColor: var(--pf-c-table--tr--m-clickable--active--BackgroundColor);
699
703
  }
700
704
  }
701
705
 
@@ -726,38 +730,38 @@
726
730
  --pf-c-table--cell--first-last-child--PaddingLeft: var(--pf-c-table--tr--m-first-cell-offset-reset--cell--PaddingLeft);
727
731
  }
728
732
 
729
- // tbody hoverable
730
- tbody.pf-m-hoverable {
733
+ // tbody clickable
734
+ tbody.pf-m-clickable {
731
735
  cursor: pointer;
732
- background-color: var(--pf-c-table--tbody--m-hoverable--BackgroundColor);
733
- outline-offset: var(--pf-c-table--tbody--m-hoverable--OutlineOffset);
734
- box-shadow: var(--pf-c-table--tbody--m-hoverable--BoxShadow);
736
+ background-color: var(--pf-c-table--tbody--m-clickable--BackgroundColor);
737
+ outline-offset: var(--pf-c-table--tbody--m-clickable--OutlineOffset);
738
+ box-shadow: var(--pf-c-table--tbody--m-clickable--BoxShadow);
735
739
 
736
740
  &.pf-m-expanded:not(.pf-m-selected) {
737
- --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-hoverable--m-expanded--BorderColor);
741
+ --pf-c-table__expandable-row--after--BorderColor: var(--pf-c-table--tbody--m-clickable--m-expanded--BorderColor);
738
742
  }
739
743
 
740
744
  &:hover,
741
745
  &:focus,
742
746
  &:active {
743
747
  &:not(.pf-m-selected) + tbody.pf-m-selected {
744
- box-shadow: var(--pf-c-table--tbody--m-hoverable--m-selected--hover--tr--BoxShadow);
748
+ box-shadow: var(--pf-c-table--tbody--m-clickable--m-selected--hover--tr--BoxShadow);
745
749
  }
746
750
  }
747
751
 
748
752
  &:hover {
749
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--hover--BoxShadow);
750
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--hover--BackgroundColor);
753
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--hover--BoxShadow);
754
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--hover--BackgroundColor);
751
755
  }
752
756
 
753
757
  &:focus {
754
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--focus--BoxShadow);
755
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--focus--BackgroundColor);
758
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--focus--BoxShadow);
759
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--focus--BackgroundColor);
756
760
  }
757
761
 
758
762
  &:active {
759
- --pf-c-table--tbody--m-hoverable--BoxShadow: var(--pf-c-table--tbody--m-hoverable--active--BoxShadow);
760
- --pf-c-table--tbody--m-hoverable--BackgroundColor: var(--pf-c-table--tbody--m-hoverable--active--BackgroundColor);
763
+ --pf-c-table--tbody--m-clickable--BoxShadow: var(--pf-c-table--tbody--m-clickable--active--BoxShadow);
764
+ --pf-c-table--tbody--m-clickable--BackgroundColor: var(--pf-c-table--tbody--m-clickable--active--BackgroundColor);
761
765
  }
762
766
  }
763
767
 
@@ -1239,14 +1243,6 @@
1239
1243
  }
1240
1244
  }
1241
1245
 
1242
- // stylelint-disable
1243
- .pf-c-table__compound-expansion-toggle.pf-m-expanded:first-child,
1244
- .pf-c-table__expandable-row.pf-m-expanded > :first-child,
1245
- .pf-c-table tbody.pf-m-expanded > tr > :not(.pf-c-table__compound-expansion-toggle) {
1246
- --pf-c-table__expandable-row--after--BorderLeftWidth: var(--pf-c-table__expandable-row--after--border-width--base);
1247
- }
1248
- // stylelint-enable
1249
-
1250
1246
  // Nested table
1251
1247
  // ==================================================================
1252
1248
  .pf-c-table .pf-c-table {
package/docs/components/AboutModalBox/examples/AboutModalBox.md CHANGED
@@ -27,7 +27,6 @@ cssPrefix: pf-c-about-modal-box
27
27
  <div class="pf-c-about-modal-box__header">
28
28
  <h1 class="pf-c-title pf-m-4xl" id="about-modal-title">Product name</h1>
29
29
  </div>
30
- <div class="pf-c-about-modal-box__hero"></div>
31
30
  <div class="pf-c-about-modal-box__content">
32
31
  <div class="pf-c-about-modal-box__body">content</div>
33
32
  <p
@@ -46,6 +45,14 @@ cssPrefix: pf-c-about-modal-box
46
45
  | -- | -- | -- |
47
46
  | `aria-label="Close Dialog"` | `.pf-c-modal-box__close .pf-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
48
47
 
48
+ ### Customizing the background image
49
+
50
+ In order to use a custom image, pass a new value to the `--pf-c-about-modal-box--BackgroundImage` CSS variable. For example:
51
+
52
+ ```css
53
+ --pf-c-about-modal-box--BackgroundImage: url("custom/image/path");
54
+ ```
55
+
49
56
  ### Usage
50
57
 
51
58
  | Class | Applied to | Outcome |
@@ -55,7 +62,6 @@ cssPrefix: pf-c-about-modal-box
55
62
  | `.pf-c-about-modal-box__brand-image` | `<img>` | Initiates a modal box brand image. |
56
63
  | `.pf-c-about-modal-box__close` | `<div>` | Initiates a modal box close cell. |
57
64
  | `.pf-c-about-modal-box__header` | `<div>`, `<header>` | Initiates a modal box header cell. |
58
- | `.pf-c-about-modal-box__hero` | `<div>` | Initiates a modal box hero cell. |
59
65
  | `.pf-c-about-modal-box__content` | `<div>` | Initiates a modal box content cell. |
60
66
  | `.pf-c-about-modal-box__body` | `<div>` | Initiates a modal box body cell. |
61
67
  | `.pf-c-about-modal-box__strapline` | `<p>` | Initiates a modal box strapline cell. |