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

Featured Product: Fix variable product Selection dropdown (#50633) 

* Add hook to SearchListItem

* Add changelog

* Invert is-expanded chevron

* Fix expanded setting

* Fix e2e test

* Add hasChildren and isSelected as dependency
This commit is contained in:
Fernando Marichal 2024-08-20 12:42:35 -03:00 committed by GitHub
parent a883856171
commit 771fd00e5d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/item.tsx
View File

@ -3,7 +3,7 @@
*/
import clsx from 'clsx';
import { CheckboxControl } from '@wordpress/components';
import { useCallback } from '@wordpress/element';
import { useCallback, useEffect } from '@wordpress/element';
import { arrayDifferenceBy, arrayUnionBy } from '@woocommerce/utils';
import { decodeEntities } from '@wordpress/html-entities';
@ -74,6 +74,12 @@ export const SearchListItem = < T extends object = object >( {
}
);
useEffect( () => {
if ( hasChildren && isSelected ) {
setExpandedPanelId( item.id as number );
}
}, [ item, hasChildren, isSelected ] );
const name = props.name || `search-list-item-${ controlId }`;
const id = `${ name }-${ item.id }`;

6
plugins/woocommerce-blocks/assets/js/editor-components/search-list-control/style.scss
View File

@ -177,7 +177,6 @@
cursor: pointer;
&::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
@ -186,6 +185,9 @@
margin-left: $gap-smaller;
width: $gap-large;
}
&:not(.is-expanded)::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
}
&[disabled]::after {
background: none;
@ -194,7 +196,7 @@
}
&.is-expanded::after {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" fill="#{encode-color($gray-700)}" /></svg>');
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z" fill="#{encode-color($gray-700)}" /></svg>');
}
}

2
plugins/woocommerce-blocks/tests/e2e/tests/reviews-by-category/reviews-by-category.block_theme.spec.ts
View File

@ -30,7 +30,7 @@ test.describe( `${ BLOCK_NAME } Block`, () => {
page,
editor,
} ) => {
const categoryCheckbox = editor.canvas.getByLabel( 'Clothing' );
const categoryCheckbox = editor.canvas.getByLabel( 'Clothing' ).first();
await categoryCheckbox.check();
await expect( categoryCheckbox ).toBeChecked();
const doneButton = editor.canvas.getByRole( 'button', {

4
plugins/woocommerce/changelog/fix-42276_featured_product_selection_dropdown Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
Featured Product: Fix variable product Selection dropdown #50633