Only display expanded content when expanded is true (https://github.com/woocommerce/woocommerce-admin/pull/7611)

* Only display expanded content when expanded is true

* Add changelogs

* Fix test

plugins/woocommerce-admin/changelogs/fix-7609_task_item_content_logic

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Fix
+
+Update task-item logic to only display content when expanded is true. #7611

plugins/woocommerce-admin/client/task-list/test/index.js

@@ -705,11 +705,12 @@ describe( 'TaskDashboard and TaskList', () => {
 		} ) );
 		act( () => {
 			const { queryByText } = render( <TaskDashboard query={ {} } /> );
-			expect(
-				queryByText( 'This is the optional task content' )
-			).not.toHaveClass(
+			expect( queryByText( 'This task is optional' ) ).not.toHaveClass(
 				'woocommerce-task-list__item-expandable-content-appear'
 			);
+			expect(
+				queryByText( 'This is the optional task content' )
+			).not.toBeInTheDocument();
 		} );
 	} );
 

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

@@ -1,6 +1,7 @@
 # Unreleased
 
 -   Adjust task-item css class to prevent css conflicts. #7593
+-   Update task-item logic to only display content when expanded is true. #7611
 
 # 1.5.1
 

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

@@ -80,7 +80,7 @@ const OptionalExpansionWrapper: React.FC< {
 	expanded: boolean;
 } > = ( { children, expandable, expanded } ) => {
 	if ( ! expandable ) {
-		return <>{ children }</>;
+		return expanded ? <>{ children }</> : null;
 	}
 	return (
 		<VerticalCSSTransition