From 5dbc39478423ce64130e66c6c0612b8cb440aa6c Mon Sep 17 00:00:00 2001 From: Fernando Marichal Date: Wed, 20 Apr 2022 10:12:08 -0300 Subject: [PATCH] Fix task list style conflict --- packages/js/experimental/src/experimental-list/style.scss | 2 +- .../src/experimental-list/task-item/index.tsx | 2 +- .../src/experimental-list/task-item/style.scss | 4 ++-- plugins/woocommerce-admin/client/tasks/tasks.scss | 2 +- .../client/two-column-tasks/sectioned-task-list.scss | 4 ++-- .../client/two-column-tasks/sectioned-task-list.tsx | 3 +-- .../woocommerce-admin/client/two-column-tasks/style.scss | 8 ++++---- .../client/two-column-tasks/task-list.tsx | 2 +- 8 files changed, 13 insertions(+), 14 deletions(-) diff --git a/packages/js/experimental/src/experimental-list/style.scss b/packages/js/experimental/src/experimental-list/style.scss index b8e5ea3886d..638a22174ef 100644 --- a/packages/js/experimental/src/experimental-list/style.scss +++ b/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); } diff --git a/packages/js/experimental/src/experimental-list/task-item/index.tsx b/packages/js/experimental/src/experimental-list/task-item/index.tsx index 59b8ecd2ffd..8aa2864d296 100644 --- a/packages/js/experimental/src/experimental-list/task-item/index.tsx +++ b/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, diff --git a/packages/js/experimental/src/experimental-list/task-item/style.scss b/packages/js/experimental/src/experimental-list/task-item/style.scss index 7a95dc775f0..f7fb5eb81df 100644 --- a/packages/js/experimental/src/experimental-list/task-item/style.scss +++ b/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; diff --git a/plugins/woocommerce-admin/client/tasks/tasks.scss b/plugins/woocommerce-admin/client/tasks/tasks.scss index 1ba8c76f427..07719e15b8a 100644 --- a/plugins/woocommerce-admin/client/tasks/tasks.scss +++ b/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 { diff --git a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss index d9e379ad043..a52ee0bdbfc 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.scss +++ b/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; } diff --git a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx index 2703c84d0cf..ca00ac65c2c 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/sectioned-task-list.tsx @@ -220,8 +220,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, } diff --git a/plugins/woocommerce-admin/client/two-column-tasks/style.scss b/plugins/woocommerce-admin/client/two-column-tasks/style.scss index 16aa121bdcd..b0f3420fd3e 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/style.scss +++ b/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); diff --git a/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx b/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx index 9f9c4f468e2..a0ed8cdd85d 100644 --- a/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx +++ b/plugins/woocommerce-admin/client/two-column-tasks/task-list.tsx @@ -291,7 +291,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, } );