Fix/7427 collapsible list transition (https://github.com/woocommerce/woocommerce-admin/pull/7429)

* Add transition group wrapper to collapsed CSS

* Revert changed class name

* Add changelog

plugins/woocommerce-admin/packages/experimental/CHANGELOG.md

@@ -1,3 +1,7 @@
+# Unreleased
+
+-   Fix animations for collapsible list. #7429
+
 # 1.5.0
 
 -   Fix commonjs module build, allow package to be built in isolation. #7286

plugins/woocommerce-admin/packages/experimental/src/experimental-list/collapsible-list/index.tsx

@@ -10,8 +10,13 @@ import {
 	Children,
 	useRef,
 	isValidElement,
+	cloneElement,
 } from '@wordpress/element';
-import { Transition } from 'react-transition-group';
+import {
+	Transition,
+	CSSTransition,
+	TransitionGroup,
+} from 'react-transition-group';
 import classnames from 'classnames';
 
 /**
@@ -242,7 +247,39 @@ export const ExperimentalCollapsibleList: React.FC< CollapsibleListProps > = ( {
 								ref={ collapseContainerRef }
 								style={ transitionStyles }
 							>
-								{ displayedChildren.hidden }
+								<TransitionGroup className="woocommerce-experimental-list">
+									{ Children.map(
+										displayedChildren.hidden,
+										( child ) => {
+											const {
+												onExited,
+												in: inTransition,
+												enter,
+												exit,
+												...remainingProps
+											} = child.props;
+											const animationProp =
+												remainingProps.animation ||
+												listProps.animation;
+											return (
+												<CSSTransition
+													key={ child.key }
+													timeout={ 500 }
+													onExited={ onExited }
+													in={ inTransition }
+													enter={ enter }
+													exit={ exit }
+													classNames="woocommerce-list__item"
+												>
+													{ cloneElement( child, {
+														animation: animationProp,
+														...remainingProps,
+													} ) }
+												</CSSTransition>
+											);
+										}
+									) }
+								</TransitionGroup>
 							</div>
 						);
 					} }

plugins/woocommerce-admin/packages/experimental/src/experimental-list/task-item.tsx

@@ -112,6 +112,7 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
 	level = 3,
 	action,
 	actionLabel,
+	...listItemProps
 } ) => {
 	const className = classnames( 'woocommerce-task-list__item', {
 		complete: completed,
@@ -128,7 +129,12 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
 		( onDelete && completed );
 
 	return (
-		<ListItem disableGutters className={ className } onClick={ onClick }>
+		<ListItem
+			disableGutters
+			className={ className }
+			onClick={ onClick }
+			{ ...listItemProps }
+		>
 			<OptionalTaskTooltip level={ level } completed={ completed }>
 				<div className="woocommerce-task-list__item-before">
 					{ level === 1 && ! completed ? (