fix(table): fix comp exp jump, background fade on collapse (#7578)

mcoker · web-flow · commit 0d556bdef646 · 2025-06-18T13:47:50.000-05:00
diff --git a/src/patternfly/components/Table/examples/Table.md b/src/patternfly/components/Table/examples/Table.md
@@ -1676,6 +1676,7 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 | `.pf-m-animate-expand` | `.pf-v6-c-table` | Modifies the table to animate expansion. |
 | `.pf-m-expanded` | `.pf-v6-c-table__tbody`, `.pf-v6-c-table__control-row`, `.pf-v6-c-table__compound-expansion-toggle` | Modifies a `<tbody>`, control row, and item in a control row for the expanded state. |
 | `.pf-m-no-background` | `.pf-v6-c-table__expandable-row-content` | Modifies the expandable row content to have a transparent background. For in compound expandable when the parent expandable row has no padding with `.pf-m-no-padding`. |
+| `.pf-m-no-animate-expand` | `.pf-v6-c-table__control-row.pf-m-expanded` | Disables animation on a compound expandable row. **Note:** Used to disable the animation when clicking between compound expandable items. |
 
 
 ## Compact variant
diff --git a/src/patternfly/components/Table/table.scss b/src/patternfly/components/Table/table.scss
@@ -587,10 +587,10 @@
         display: revert;
         visibility: hidden;
         opacity: var(--#{$table}__expandable-row--Opacity);
-        transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
+        transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
         transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
-        transition-duration: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--slide), 0s;
-        transition-property: opacity, translate, visibility;
+        transition-duration: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;
+        transition-property: opacity, translate, visibility, background-color;
         translate: 0 var(--#{$table}__expandable-row--TranslateY);
 
         &[hidden] {
@@ -627,6 +627,13 @@
           }
         }
       }
+
+      > .#{$table}__control-row.pf-m-no-animate-expand ~ .#{$table}__expandable-row {
+        --#{$table}__expandable-row--TransitionDuration--collapse--fade: 0s;
+        --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
+        --#{$table}__expandable-row--TransitionDuration--expand--fade: 0s;
+        --#{$table}__expandable-row--TransitionDuration--expand--slide: 0s;
+      }
     }
   }
   // stylelint-enable max-nesting-depth, selector-max-class

Original file line number	Diff line number	Diff line change
`@@ -587,10 +587,10 @@`
`587`	`587`	`display: revert;`
`588`	`588`	`visibility: hidden;`
`589`	`589`	`opacity: var(--#{$table}__expandable-row--Opacity);`
`590`		`- transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);`
	`590`	`+ transition-delay: 0s, 0s, var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);`
`591`	`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;`
	`592`	`+ transition-duration: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade), var(--#{$table}__expandable-row--TransitionDuration--collapse--slide), 0s, 0s;`
	`593`	`+ transition-property: opacity, translate, visibility, background-color;`
`594`	`594`	`translate: 0 var(--#{$table}__expandable-row--TranslateY);`
`595`	`595`
`596`	`596`	`&[hidden] {`
`@@ -627,6 +627,13 @@`
`627`	`627`	`}`
`628`	`628`	`}`
`629`	`629`	`}`
	`630`	`+`
	`631`	`+ > .#{$table}__control-row.pf-m-no-animate-expand ~ .#{$table}__expandable-row {`
	`632`	`+ --#{$table}__expandable-row--TransitionDuration--collapse--fade: 0s;`
	`633`	`+ --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;`
	`634`	`+ --#{$table}__expandable-row--TransitionDuration--expand--fade: 0s;`
	`635`	`+ --#{$table}__expandable-row--TransitionDuration--expand--slide: 0s;`
	`636`	`+ }`
`630`	`637`	`}`
`631`	`638`	`}`
`632`	`639`	`// stylelint-enable max-nesting-depth, selector-max-class`