Merge pull request #32704 from woocommerce/fix/task-list-style-conflict

Fix setup task list style conflict

packages/js/experimental/CHANGELOG.md

@@ -1,7 +1,9 @@
 # Unreleased
 
+-   Fix setup task list style conflict #32704
 -   Update dependency `@wordpress/icons` to ^8.1.0
 -   Added Typescript type declarations. #32615
+
 # 3.0.1
 
 -   Update all js packages with minor/patch version changes. #8392
@@ -14,6 +16,7 @@
 -   Drop support for IE11. #8305
 
 # 2.2.0
+
 -   Make the Inbox note title clickable. #7975
 -   Fix incorrectly displayed note created date. #8179
 -   Fix inbox note css #7983

packages/js/experimental/src/experimental-list/style.scss

@@ -134,7 +134,7 @@ a.woocommerce-experimental-list__item {
 		fill: $chevron-color;
 	}
 
-	&.is-complete {
+	&.complete {
 		.woocommerce-task__icon {
 			background-color: var(--wp-admin-theme-color);
 		}

packages/js/experimental/src/experimental-list/task-item/index.tsx

@@ -130,7 +130,7 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
 	}, [ expanded ] );
 
 	const className = classnames( 'woocommerce-task-list__item', {
-		'is-complete': completed,
+		complete: completed,
 		expanded: isTaskExpanded,
 		'level-2': level === 2 && ! completed,
 		'level-1': level === 1 && ! completed,

packages/js/experimental/src/experimental-list/task-item/style.scss

@@ -121,7 +121,7 @@ $task-alert-yellow: #f0b849;
 		left: 5px;
 	}
 
-	&.is-complete {
+	&.complete {
 		.woocommerce-task__icon {
 			background-color: var(--wp-admin-theme-color);
 		}
@@ -136,7 +136,7 @@ $task-alert-yellow: #f0b849;
 		}
 	}
 
-	&:not(.is-complete) {
+	&:not(.complete) {
 		.woocommerce-task__icon {
 			border: 1px solid $gray-100;
 			background: $white;

plugins/woocommerce-admin/client/tasks/tasks.scss

@@ -236,7 +236,7 @@
 }
 
 .woocommerce-task-list__setup_experiment_1 {
-	.woocommerce-experimental-list .woocommerce-experimental-list__item.is-complete {
+	.woocommerce-experimental-list .woocommerce-experimental-list__item.complete {
 		text-decoration: line-through;
 
 		.woocommerce-task-list__item-title {

plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss

@@ -63,14 +63,14 @@
 			pointer-events: none;
 		}
 
-		&:not(.is-complete)
+		&:not(.complete)
 		.woocommerce-task-list__item-before
 		.woocommerce-task__icon {
 			border-color: $gray-300;
 		}
 	}
 
-	.woocommerce-task-list__item.is-complete .woocommerce-task__icon {
+	.woocommerce-task-list__item.complete .woocommerce-task__icon {
 		background-color: $alert-green;
 	}
 

plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx

@@ -233,8 +233,7 @@ export const SectionedTaskList: React.FC< TaskListProps > = ( {
 											const className = classnames(
 												'woocommerce-task-list__item',
 												{
-													'is-complete':
-														task.isComplete,
+													complete: task.isComplete,
 													'is-disabled':
 														task.isDisabled,
 												}

plugins/woocommerce-admin/client/two-column-tasks/style.scss

@@ -103,7 +103,7 @@
 	margin: 0 auto;
 	justify-content: space-between;
 
-	ul li.is-complete .woocommerce-task-list__item-title {
+	ul li.complete .woocommerce-task-list__item-title {
 		font-weight: 600;
 		color: $gray-600;
 	}
@@ -178,11 +178,11 @@
 			height: 100%;
 		}
 	}
-	.woocommerce-task-list__item:not(.is-complete) .woocommerce-task__icon {
+	.woocommerce-task-list__item:not(.complete) .woocommerce-task__icon {
 		border: 1px solid var(--wp-admin-theme-color);
 		background: transparent;
 	}
-	.woocommerce-task-list__item.is-complete:not(.complete) .woocommerce-task__icon {
+	.woocommerce-task-list__item.complete:not(.complete) .woocommerce-task__icon {
 		border: none;
 	}
 
@@ -206,7 +206,7 @@
 	}
 
 	@for $i from 1 through 10 {
-		.woocommerce-task-list__item:not(.is-complete).index-#{$i} .woocommerce-task__icon::after {
+		.woocommerce-task-list__item:not(.complete).index-#{$i} .woocommerce-task__icon::after {
 			content: '#{$i}';
 			@extend .numbered-circle;
 			color: var(--wp-admin-theme-color);

plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx

@@ -302,7 +302,7 @@ export const TaskList: React.FC< TaskListProps > = ( {
 							const className = classnames(
 								'woocommerce-task-list__item index-' + index,
 								{
-									'is-complete': task.isComplete,
+									complete: task.isComplete,
 									'is-active': task.id === activeTaskId,
 								}
 							);

plugins/woocommerce/changelog/fix-task-list-style-conflict

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix setup task list style conflict #32704