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

Provide better copy and improve styling of radio button

This commit is contained in:
Karol Manijak 2024-09-05 16:09:45 +02:00
parent e6d3079f22
commit 1df76efcff
2 changed files with 38 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/editor.scss
View File

@ -176,6 +176,11 @@ $max-button-width: calc(100% / #{$max-button-columns});
}
}
// Product to Show Radio Control
.wc-block-product-collection-product-reference-radio {
width: 100%;
}
// Linked Product Control
.wc-block-product-collection-linked-product-control {
width: 100%;

44
plugins/woocommerce-blocks/assets/js/blocks/product-collection/edit/inspector-controls/linked-product-control.tsx
View File

@ -122,10 +122,12 @@ const LinkedProductControl = ( {
usesReference: string[] | undefined;
} ) => {
const [ isDropdownOpen, setIsDropdownOpen ] = useState< boolean >( false );
const [ isCurrentProductReference, setIsCurrentProductReference ] =
useState< PRODUCT_REF >( PRODUCT_REF.CURRENT_PRODUCT );
const [ productReference, setProductReference ] = useState< PRODUCT_REF >(
PRODUCT_REF.CURRENT_PRODUCT
);
const { product, isLoading } = useGetProduct( query.productReference );
const showDropdown = productReference === PRODUCT_REF.SPECIFIC_PRODUCT;
const showLinkedProductControl = useMemo( () => {
const isInRequiredLocation = usesReference?.includes( location.type );
const isProductContextRequired = usesReference?.includes( 'product' );
@ -141,26 +143,46 @@ const LinkedProductControl = ( {
if ( ! showLinkedProductControl ) return null;
const radioControlHelp =
productReference === PRODUCT_REF.CURRENT_PRODUCT
? __(
'Related products will be pulled from the product a shopper is currently viewing',
'woocommerce'
)
: __(
'Select a product to pull the related products from',
'woocommerce'
);
return (
<PanelBody title={ __( 'Linked Product', 'woocommerce' ) }>
<PanelRow>
<RadioControl
label="Products to show"
help="The type of the current user"
selected={ isCurrentProductReference }
className="wc-block-product-collection-product-reference-radio"
label={ __( 'Products to show', 'woocommerce' ) }
help={ radioControlHelp }
selected={ productReference }
options={ [
{
label: 'From the current product',
label: __(
'From the current product',
'woocommerce'
),
value: PRODUCT_REF.CURRENT_PRODUCT,
},
{
label: 'From a specific product',
label: __(
'From a specific product',
'woocommerce'
),
value: PRODUCT_REF.SPECIFIC_PRODUCT,
},
] }
onChange={ setIsCurrentProductReference }
onChange={ setProductReference }
/>
{ ! isCurrentProductReference && (
</PanelRow>
{ showDropdown && (
<PanelRow>
<Dropdown
className="wc-block-product-collection-linked-product-control"
contentClassName="wc-block-product-collection-linked-product__popover-content"
@ -183,8 +205,8 @@ const LinkedProductControl = ( {
open={ isDropdownOpen }
onToggle={ () => setIsDropdownOpen( ! isDropdownOpen ) }
/>
) }
</PanelRow>
</PanelRow>
) }
</PanelBody>
);
};