Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adjust task item class name to prevent conflicts with older versions (https://github.com/woocommerce/woocommerce-admin/pull/7593) 

* Adjust task item class name to prevent conflicts with older versions

* Fix styling lint errors

* Add changelog

* Fix more lint errors
This commit is contained in:
louwie17 2021-08-31 12:16:19 -03:00 committed by GitHub
parent f136b770d6
commit b8fc676b48
6 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
plugins/woocommerce-admin/client/task-list/style.scss
View File

@ -34,13 +34,13 @@
.woocommerce-task__additional-info,
.woocommerce-task__estimated-time,
.woocommerce-task-list__item-content {
.woocommerce-task-list__item-expandable-content {
color: $gray-700;
font-weight: 400;
font-size: 12px;
}
.woocommerce-task-list__item-content {
.woocommerce-task-list__item-expandable-content {
font-size: 13px;
}

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

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

2
plugins/woocommerce-admin/packages/experimental/CHANGELOG.md
View File

@ -1,5 +1,7 @@
# Unreleased
- Adjust task-item css class to prevent css conflicts. #7593
# 1.5.1
- Fix animations for collapsible list. #7429

6
plugins/woocommerce-admin/packages/experimental/src/experimental-list/style.scss
View File

@ -76,7 +76,7 @@ a.woocommerce-experimental-list__item {
color: $studio-gray-90;
}
.woocommerce-list__item-content {
.woocommerce-list__item-expandable-content {
margin-top: $gap-smallest;
display: block;
font-size: 14px;
@ -143,7 +143,7 @@ a.woocommerce-experimental-list__item {
color: $gray-700;
}
.woocommerce-list__item-content {
.woocommerce-list__item-expandable-content {
display: none;
}
}
@ -153,6 +153,6 @@ a.woocommerce-experimental-list__item {
color: $studio-gray-80;
}
.woocommerce-experimental-list__item-content {
.woocommerce-experimental-list__item-expandable-content {
color: $studio-gray-50;
}

16
plugins/woocommerce-admin/packages/experimental/src/experimental-list/task-item.scss
View File

@ -42,7 +42,7 @@ $task-alert-yellow: #f0b849;
}
.woocommerce-task__additional-info,
.woocommerce-task-list__item-content,
.woocommerce-task-list__item-expandable-content,
.woocommerce-task__estimated-time {
color: $gray-700;
font-weight: 400;
@ -68,27 +68,27 @@ $task-alert-yellow: #f0b849;
}
}
.woocommerce-task-list__item-content {
.woocommerce-task-list__item-expandable-content {
margin-top: $gap-smallest;
overflow: hidden;
&.woocommerce-task-list__item-content-enter {
&.woocommerce-task-list__item-expandable-content-enter {
opacity: 0;
}
&.woocommerce-task-list__item-content-enter-active {
&.woocommerce-task-list__item-expandable-content-enter-active {
opacity: 1;
}
&.woocommerce-task-list__item-content-enter-done {
&.woocommerce-task-list__item-expandable-content-enter-done {
opacity: 1;
}
&.woocommerce-task-list__item-content-exit {
&.woocommerce-task-list__item-expandable-content-exit {
opacity: 1;
}
&.woocommerce-task-list__item-content-exit-active {
&.woocommerce-task-list__item-expandable-content-exit-active {
opacity: 0;
}
@ -130,7 +130,7 @@ $task-alert-yellow: #f0b849;
color: $gray-700;
}
.woocommerce-task-list__item-content,
.woocommerce-task-list__item-expandable-content,
.woocommerce-task__estimated-time {
display: none;
}

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

@ -86,7 +86,7 @@ const OptionalExpansionWrapper: React.FC< {
<VerticalCSSTransition
timeout={ 500 }
in={ expanded }
classNames="woocommerce-task-list__item-content"
classNames="woocommerce-task-list__item-expandable-content"
defaultStyle={ {
transitionProperty: 'max-height, opacity',
} }
@ -161,7 +161,7 @@ export const TaskItem: React.FC< TaskItemProps > = ( {
expandable={ expandable }
expanded={ expanded }
>
<div className="woocommerce-task-list__item-content">
<div className="woocommerce-task-list__item-expandable-content">
{ content }
{ expandable && ! completed && additionalInfo && (
<div