Skip to content

Commit a8e2447

Browse files
mcokermcoker
authored
fix(table): updated expandable to animate visibility (#7537)
1 parent 82be849 commit a8e2447

File tree

11 files changed

+473
-72
lines changed

11 files changed

+473
-72
lines changed

‎src/patternfly/components/Accordion/accordion.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@
232232
}
233233

234234
.#{$accordion}__item.pf-m-expanded & {
235-
max-height: 9999px;
235+
max-height: 99999px;
236236
margin-block-end: var(--#{$accordion}__expandable-content--MarginBlockEnd);
237237
visibility: revert;
238238
transition-delay: 0s;

‎src/patternfly/components/DualListSelector/dual-list-selector.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
238238

239239
> .#{$dual-list-selector}__list {
240240
.#{$dual-list-selector}.pf-m-animate-expand & {
241-
max-height: 9999px;
241+
max-height: 99999px;
242242
visibility: revert;
243243
opacity: var(--#{$dual-list-selector}--m-expanded__list--Opacity);
244244
transition-delay: 0s;

‎src/patternfly/components/ExpandableSection/expandable-section.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@
7575
--#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
7676
--#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
7777
--#{$expandable-section}__content--Visibility: auto;
78-
--#{$expandable-section}__content--MaxHeight: 9999px;
78+
--#{$expandable-section}__content--MaxHeight: 99999px;
7979
--#{$expandable-section}__content--TransitionDelay--hide: 0s;
8080

8181
gap: var(--pf-v6-c-expandable-section--Gap);

‎src/patternfly/components/Form/form.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -405,7 +405,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
405405
}
406406

407407
&.pf-m-expandable > .#{$form}__field-group-body { // TODO - remove .pf-m-expandable in a breaking change, it shouldn't be needed. Only needed now so that these styles are an opt-in behind .pf-m-expandable
408-
max-height: 9999px;
408+
max-height: 99999px;
409409
padding-block-start: var(--#{$form}__field-group-body--PaddingBlockStart);
410410
padding-block-end: var(--#{$form}__field-group-body--PaddingBlockEnd);
411411
visibility: visible;

‎src/patternfly/components/Nav/nav.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -209,7 +209,7 @@
209209
.#{$nav}__subnav {
210210
--#{$nav}__list--RowGap: var(--#{$nav}__subnav--RowGap); // this value is passed to --#{$nav}__item--RowGap--row-offset and updates clickable area based on value passed
211211

212-
max-height: 9999px;
212+
max-height: 99999px;
213213
padding-block-start: var(--#{$nav}__subnav--PaddingBlockStart);
214214
padding-block-end: var(--#{$nav}__subnav--PaddingBlockEnd);
215215
padding-inline-start: var(--#{$nav}__subnav--PaddingInlineStart); // indent nested lists

‎src/patternfly/components/Table/examples/Table.md‎

Lines changed: 380 additions & 37 deletions
Large diffs are not rendered by default.

‎src/patternfly/components/Table/table--expandable.hbs‎

Whitespace-only changes.

‎src/patternfly/components/Table/table-expandable-row-content.hbs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
<div class="{{pfv}}table__expandable-row-content{{#if table-expandable-row-content--modifier}} {{table-expandable-row-content--modifier}}{{/if}}"
1+
<div class="{{pfv}}table__expandable-row-content
2+
{{setModifiers
3+
table-expandable-row-content--HasNoBackground="pf-m-no-background"
4+
table-expandable-row-content--modifier=table-expandable-row-content--modifier
5+
}}"
26
{{#if table-expandable-row-content--attribute}}
37
{{{table-expandable-row-content--attribute}}}
48
{{/if}}>

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

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
<table class="{{pfv}}table
2-
{{#if table--IsExpandable}} pf-m-expandable{{/if}}
3-
{{#if table--IsTree-view}} pf-m-tree-view{{/if}}
4-
{{#if tree-view--HasCheckboxes}} pf-m-tree-view-checkboxes{{/if}}
5-
{{#if table--HasNoPosinset}} pf-m-no-inset{{/if}}
6-
{{#if table--IsCompact}} pf-m-compact{{/if}}
7-
{{#if table--modifier}} {{table--modifier}}{{/if}}"
2+
{{setModifiers
3+
table--IsExpandable='pf-m-expandable'
4+
table--IsTree-view='pf-m-tree-view'
5+
tree-view--HasCheckboxes='pf-m-tree-view-checkboxes'
6+
table--HasNoPosinset='pf-m-no-inset'
7+
table--IsCompact='pf-m-compact'
8+
table--IsAnimateExpand='pf-m-animate-expand'
9+
table--modifier=table--modifier
10+
}}"
811
{{#if table--IsGrid}}
912
role="grid"
1013
{{/if}}

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

Lines changed: 73 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -123,8 +123,6 @@
123123
--#{$table}__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
124124
--#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
125125
--#{$table}__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
126-
--#{$table}__expandable-row--TransitionDuration--slide: var(--#{$table}__expandable-row--TransitionDuration--collapse--slide);
127-
--#{$table}__expandable-row--TransitionDuration--fade: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
128126
--#{$table}__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
129127
--#{$table}__expandable-row--Opacity: 0;
130128
--#{$table}__tbody--m-expanded__expandable-row--Opacity: 1;
@@ -581,6 +579,57 @@
581579
.#{$button} .#{$table}__sort-indicator {
582580
--#{$table}__sort-indicator--MarginInlineStart: 0;
583581
}
582+
583+
// stylelint-disable max-nesting-depth, selector-max-class
584+
&.pf-m-animate-expand {
585+
> .#{$table}__tbody {
586+
> .#{$table}__expandable-row {
587+
display: revert;
588+
visibility: hidden;
589+
opacity: var(--#{$table}__expandable-row--Opacity);
590+
transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
591+
transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
592+
transition-duration: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--slide), 0s;
593+
transition-property: opacity, translate, visibility;
594+
translate: 0 var(--#{$table}__expandable-row--TranslateY);
595+
596+
&[hidden] {
597+
display: revert;
598+
}
599+
600+
&.pf-m-expanded {
601+
visibility: visible;
602+
opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
603+
transition-delay: 0s;
604+
transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), 0s, 0s;
605+
translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
606+
607+
> :is(.#{$table}__td, .#{$table}__th) {
608+
> .#{$table}__expandable-row-content {
609+
max-height: 99999px;
610+
}
611+
}
612+
}
613+
614+
&:not(.pf-m-expanded) {
615+
> :is(.#{$table}__td, .#{$table}__th) {
616+
&,
617+
> .#{$table}__expandable-row-content {
618+
padding: 0;
619+
overflow: hidden;
620+
transition-delay: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
621+
transition-property: padding, max-height, overflow;
622+
}
623+
624+
> .#{$table}__expandable-row-content {
625+
max-height: 0;
626+
}
627+
}
628+
}
629+
}
630+
}
631+
}
632+
// stylelint-enable max-nesting-depth, selector-max-class
584633
}
585634

586635
// - Table truncate - Table wrap - Table nowrap - Table fit content - Table wrap - Table break word
@@ -972,22 +1021,23 @@
9721021
.#{$table}__expandable-row {
9731022
position: relative;
9741023
border-block-end: 0 solid transparent;
975-
opacity: var(--#{$table}__expandable-row--Opacity);
976-
transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
977-
transition-duration: var(--#{$table}__expandable-row--TransitionDuration--fade), var(--#{$table}__expandable-row--TransitionDuration--slide), var(--#{$table}__expandable-row--TransitionDuration--fade);
978-
transition-property: opacity, translate, display;
979-
transition-behavior: allow-discrete;
980-
translate: 0 var(--#{$table}__expandable-row--TranslateY);
981-
982-
@at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
1024+
1025+
// Remove top padding from regular expandable
1026+
> .#{$table}__th,
1027+
> .#{$table}__td {
1028+
padding-block-start: 0;
1029+
}
1030+
1031+
// Add padding back to compound expandable
1032+
.#{$table}__control-row ~ & {
9831033
> .#{$table}__th,
9841034
> .#{$table}__td {
985-
padding-block-start: 0;
1035+
padding-block-start: var(--#{$table}--cell--PaddingBlockStart);
9861036
}
9871037
}
9881038

989-
td:where(.#{$table}__td),
990-
th:where(.#{$table}__th) {
1039+
.#{$table}__td,
1040+
.#{$table}__th {
9911041
&.pf-m-no-padding {
9921042
padding-block-start: 0;
9931043
padding-block-end: 0;
@@ -996,6 +1046,7 @@
9961046

9971047
.#{$table}__expandable-row-content {
9981048
padding: 0;
1049+
border-radius: 0;
9991050
}
10001051
}
10011052
}
@@ -1008,20 +1059,16 @@
10081059
padding-inline-end: var(--#{$table}__expandable-row-content--PaddingInlineEnd);
10091060
background-color: var(--#{$table}__expandable-row-content--BackgroundColor);
10101061
border-radius: var(--#{$table}__expandable-row-content--BorderRadius);
1062+
1063+
&.pf-m-no-background {
1064+
background-color: transparent;
1065+
}
10111066
}
10121067

10131068
// - Table expandable row content expanded
10141069
&.pf-m-expanded {
10151070
border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor);
10161071
border-block-end-width: var(--#{$table}--border-width--base);
1017-
opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
1018-
transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), var(--#{$table}__expandable-row--TransitionDuration--expand--fade);
1019-
translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
1020-
1021-
@starting-style {
1022-
opacity: var(--#{$table}__expandable-row--Opacity);
1023-
translate: 0 var(--#{$table}__expandable-row--TranslateY);
1024-
}
10251072
}
10261073

10271074
&:not(.pf-m-expanded) {
@@ -1034,6 +1081,10 @@
10341081
}
10351082
}
10361083

1084+
.#{$table}__tr:has(~ .#{$table}__expandable-row) {
1085+
border-block-end: 0;
1086+
}
1087+
10371088
// - Table compact
10381089
.#{$table}.pf-m-compact {
10391090
--#{$table}--cell--PaddingBlockStart: var(--#{$table}--m-compact--cell--PaddingBlockStart);
@@ -1118,7 +1169,7 @@
11181169
// - Table tbody table control row
11191170
.#{$table}__control-row {
11201171
background-color: var(--#{$table}__control-row--BackgroundColor);
1121-
border-block-end: var(--#{$table}__control-row--BorderBlockEndWidth) solid var(--#{$table}__control-row__tbody--BorderBlockEndColor);
1172+
border-block-end: 0;
11221173
}
11231174
}
11241175
}

0 commit comments

Comments
 (0)