Skip to content

Commit d21e7a3

Browse files
mcokermcoker
authored
fix(table): fixed expandable table styles (#7654)
* fix(table): fixed expandable table styles * chore(table): updates * chore(table): updates * chore(table): updates
1 parent 407bf62 commit d21e7a3

File tree

2 files changed

+93
-88
lines changed

2 files changed

+93
-88
lines changed

‎src/patternfly/components/Table/table-grid.scss‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,10 @@
183183
}
184184
}
185185

186+
&.pf-m-animate-expand {
187+
--#{$table}__expandable-row--Display: block;
188+
}
189+
186190
// Remove border on tr inside non-expanded tbody in of expandable tables
187191
&.pf-m-expandable {
188192
--#{$table}__tr--BorderBlockEndWidth: 0; // nested table rows have no border
@@ -202,7 +206,7 @@
202206
// Standard table row (non-expandable)
203207
// exclude expandable rows
204208
// - Table grid tr not expandable row
205-
tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
209+
tr:where(.#{$table}__tr):not(.#{$table}__expandable-row:where(:nth-child(n+2))) {
206210
display: grid;
207211
grid-template-columns: 1fr;
208212
height: auto;
@@ -279,7 +283,7 @@
279283
position: revert;
280284
font-weight: var(--#{$table}--cell--responsive--th--FontWeight);
281285
text-align: start;
282-
content: attr(data-label);
286+
content: var(--#{$table}--cell--responsive--label, attr(data-label));
283287
}
284288
}
285289

@@ -345,7 +349,7 @@
345349
}
346350

347351
// - Table grid expandable row
348-
.#{$table}__expandable-row {
352+
.#{$table}__expandable-row:where(:nth-child(n+2)) {
349353
--#{$table}--cell--responsive--PaddingBlockStart: 0;
350354
--#{$table}--cell--responsive--PaddingInlineEnd: 0;
351355
--#{$table}--cell--responsive--PaddingBlockEnd: 0;
@@ -439,7 +443,7 @@
439443
}
440444

441445
// Set defaults
442-
tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
446+
tr:where(.#{$table}__tr):not(.#{$table}__expandable-row:where(:nth-child(n+2))) {
443447
.#{$table}__toggle,
444448
.#{$table}__check,
445449
.#{$table}__favorite,

‎src/patternfly/components/Table/table.scss‎

Lines changed: 85 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,8 @@
2727
--#{$table}__tbody--cell--PaddingBlockStart: var(--#{$table}--cell--Padding--base);
2828
--#{$table}__tbody--cell--PaddingBlockEnd: var(--#{$table}--cell--Padding--base);
2929
--#{$table}__tbody--cell--FontSize: var(--pf-t--global--font--size--body--default); // set this explicitly for input heights to calc properly
30+
--#{$table}__tbody--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
31+
--#{$table}__tbody--BorderBlockEndColor: var(--pf-t--global--border--color--default);
3032

3133
// * Table tr
3234
--#{$table}__tr--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -331,7 +333,7 @@
331333

332334
// Standard table row (non-expandable)
333335
// exclude expandable rows
334-
tr:where(.#{$table}__tr):not(.#{$table}__expandable-row) {
336+
tr:where(.#{$table}__tr):not(.#{$table}__expandable-row:where(:nth-child(n+2))) {
335337
// stylelint-disable-next-line
336338
&.pf-m-ghost-row {
337339
background-color: var(--#{$table}__tr--m-ghost-row--BackgroundColor);
@@ -569,7 +571,7 @@
569571
background-color: var(--#{$table}__tbody--m-selected--BackgroundColor);
570572
outline-offset: var(--#{$table}__tbody--m-selected--OutlineOffset);
571573

572-
.#{$table}__tr.pf-m-expanded:not(.#{$table}__expandable-row) {
574+
.#{$table}__tr.pf-m-expanded:not(.#{$table}__expandable-row:where(:nth-child(n+2))) {
573575
border: none;
574576
}
575577
}
@@ -596,8 +598,8 @@
596598
// stylelint-disable max-nesting-depth, selector-max-class
597599
&.pf-m-animate-expand {
598600
> .#{$table}__tbody {
599-
> .#{$table}__expandable-row {
600-
display: revert;
601+
> .#{$table}__expandable-row:where(:nth-child(n+2)) {
602+
display: var(--#{$table}__expandable-row--Display, revert);
601603
visibility: hidden;
602604
opacity: var(--#{$table}__expandable-row--Opacity);
603605
transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
@@ -607,7 +609,7 @@
607609
translate: 0 var(--#{$table}__expandable-row--TranslateY);
608610

609611
&[hidden] {
610-
display: revert;
612+
display: var(--#{$table}__expandable-row--Display, revert);
611613
}
612614

613615
&.pf-m-expanded {
@@ -626,6 +628,8 @@
626628

627629
&:not(.pf-m-expanded) {
628630
> :is(.#{$table}__td, .#{$table}__th) {
631+
--#{$table}--cell--responsive--label: none;
632+
629633
&,
630634
> .#{$table}__expandable-row-content {
631635
padding: 0;
@@ -641,7 +645,7 @@
641645
}
642646
}
643647

644-
> .#{$table}__control-row.pf-m-no-animate-expand ~ .#{$table}__expandable-row {
648+
> .#{$table}__control-row.pf-m-no-animate-expand ~ .#{$table}__expandable-row:where(:nth-child(n+2)) {
645649
--#{$table}__expandable-row--TransitionDuration--collapse--fade: 0s;
646650
--#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
647651
--#{$table}__expandable-row--TransitionDuration--expand--fade: 0s;
@@ -1037,71 +1041,7 @@
10371041
pointer-events: none;
10381042
}
10391043

1040-
// - Table expandable row
1041-
.#{$table}__expandable-row {
1042-
position: relative;
1043-
border-block-end: 0 solid transparent;
1044-
1045-
// Remove top padding from regular expandable
1046-
> .#{$table}__th,
1047-
> .#{$table}__td {
1048-
padding-block-start: 0;
1049-
}
1050-
1051-
// Add padding back to compound expandable
1052-
.#{$table}__control-row ~ & {
1053-
> .#{$table}__th,
1054-
> .#{$table}__td {
1055-
padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
1056-
}
1057-
}
1058-
1059-
.#{$table}__td,
1060-
.#{$table}__th {
1061-
&.pf-m-no-padding {
1062-
padding-block-start: 0;
1063-
padding-block-end: 0;
1064-
padding-inline-start: 0;
1065-
padding-inline-end: 0;
1066-
1067-
.#{$table}__expandable-row-content {
1068-
padding: 0;
1069-
border-radius: 0;
1070-
}
1071-
}
1072-
}
1073-
1074-
// - Table expandable row content
1075-
.#{$table}__expandable-row-content {
1076-
padding-block-start: var(--#{$table}__expandable-row-content--PaddingBlockStart);
1077-
padding-block-end: var(--#{$table}__expandable-row-content--PaddingBlockEnd);
1078-
padding-inline-start: var(--#{$table}__expandable-row-content--PaddingInlineStart);
1079-
padding-inline-end: var(--#{$table}__expandable-row-content--PaddingInlineEnd);
1080-
background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
1081-
border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
1082-
1083-
&.pf-m-no-background {
1084-
background-color: transparent;
1085-
}
1086-
}
1087-
1088-
// - Table expandable row content expanded
1089-
&.pf-m-expanded {
1090-
border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor);
1091-
border-block-end-width: var(--#{$table}--border-width--base);
1092-
}
1093-
1094-
&:not(.pf-m-expanded) {
1095-
display: none;
1096-
}
1097-
1098-
// - Table expandable row tr last-child
1099-
tr:last-child {
1100-
border-block-end: 0;
1101-
}
1102-
}
1103-
1104-
.#{$table}__tr:has(~ .#{$table}__expandable-row) {
1044+
.#{$table}__tr:has(~ .#{$table}__expandable-row.pf-m-expanded) {
11051045
border-block-end: 0;
11061046
}
11071047

@@ -1112,7 +1052,7 @@
11121052

11131053
// - Table compact table tr
11141054
tr:where(.#{$table}__tr) {
1115-
&:not(.#{$table}__expandable-row) {
1055+
&:not(.#{$table}__expandable-row:where(:nth-child(n+2))) {
11161056
--#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact--cell--PaddingBlockStart);
11171057
--#{$table}--cell--PaddingBlockEnd: var(--#{$table}--m-compact--cell--PaddingBlockEnd);
11181058
}
@@ -1176,21 +1116,17 @@
11761116
}
11771117
}
11781118

1179-
// Table table tbody expandable
1180-
.#{$table}.pf-m-expandable {
1181-
.#{$table}__tr.pf-m-expanded {
1182-
border-block-end: 0;
1183-
}
1119+
.#{$table}__tr.pf-m-expanded:has(~ .#{$table}__expandable-row) {
1120+
border-block-end: 0;
1121+
}
11841122

1185-
// - Table tbody
1186-
.#{$table}__tbody {
1187-
border-block-end: var(--#{$table}__tr--BorderBlockEndWidth) solid var(--#{$table}__tr--BorderBlockEndColor);
1123+
.#{$table}__tbody {
1124+
&.pf-m-expanded,
1125+
&:has(> .#{$table}__expandable-row.pf-m-expanded) {
1126+
border-block-end: var(--#{$table}__tbody--BorderBlockEndWidth) solid var(--#{$table}__tbody--BorderBlockEndColor);
11881127
}
11891128

1190-
// - Table tbody - Table tr
1191-
.#{$table}__tbody.pf-m-expanded {
1192-
border-block-end: var(--#{$table}__tr--BorderBlockEndWidth) solid var(--#{$table}__tr--BorderBlockEndColor);
1193-
1129+
&.pf-m-expanded {
11941130
// - Table tbody table control row
11951131
.#{$table}__control-row {
11961132
background-color: var(--#{$table}__control-row--BackgroundColor);
@@ -1212,6 +1148,71 @@
12121148
}
12131149
}
12141150

1151+
// - Table expandable row
1152+
// n+2 selects all children except the first because __expandable-row can go on the first row in an expandable tbody when it shouldn't. TODO - remove __expandable-body from first/control tr in breaking change.
1153+
.#{$table}__expandable-row:where(:nth-child(n+2)) {
1154+
position: relative;
1155+
border-block-end: 0 solid transparent;
1156+
1157+
// Remove top padding from regular expandable
1158+
> .#{$table}__th,
1159+
> .#{$table}__td {
1160+
padding-block-start: 0;
1161+
}
1162+
1163+
// Add padding back to compound expandable
1164+
.#{$table}__control-row ~ & {
1165+
> .#{$table}__th,
1166+
> .#{$table}__td {
1167+
padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
1168+
}
1169+
}
1170+
1171+
.#{$table}__td,
1172+
.#{$table}__th {
1173+
&.pf-m-no-padding {
1174+
padding-block-start: 0;
1175+
padding-block-end: 0;
1176+
padding-inline-start: 0;
1177+
padding-inline-end: 0;
1178+
1179+
.#{$table}__expandable-row-content {
1180+
padding: 0;
1181+
border-radius: 0;
1182+
}
1183+
}
1184+
}
1185+
1186+
// - Table expandable row content
1187+
.#{$table}__expandable-row-content {
1188+
padding-block-start: var(--#{$table}__expandable-row-content--PaddingBlockStart);
1189+
padding-block-end: var(--#{$table}__expandable-row-content--PaddingBlockEnd);
1190+
padding-inline-start: var(--#{$table}__expandable-row-content--PaddingInlineStart);
1191+
padding-inline-end: var(--#{$table}__expandable-row-content--PaddingInlineEnd);
1192+
background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
1193+
border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
1194+
1195+
&.pf-m-no-background {
1196+
background-color: transparent;
1197+
}
1198+
}
1199+
1200+
// - Table expandable row content expanded
1201+
&.pf-m-expanded {
1202+
border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor);
1203+
border-block-end-width: var(--#{$table}--border-width--base);
1204+
}
1205+
1206+
&:not(.pf-m-expanded) {
1207+
display: none;
1208+
}
1209+
1210+
// - Table expandable row tr last-child
1211+
tr:last-child {
1212+
border-block-end: 0;
1213+
}
1214+
}
1215+
12151216
// - Table icon inline
12161217
.#{$table}__icon-inline {
12171218
display: flex;

0 commit comments

Comments
 (0)