diff --git a/assets/js/base/components/checkbox-list/index.tsx b/assets/js/base/components/checkbox-list/index.tsx index 198dc614608..8b4c0506817 100644 --- a/assets/js/base/components/checkbox-list/index.tsx +++ b/assets/js/base/components/checkbox-list/index.tsx @@ -4,6 +4,7 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import { Fragment, useMemo, useState } from '@wordpress/element'; import classNames from 'classnames'; +import { CheckboxControl } from '@woocommerce/blocks-checkout'; /** * Internal dependencies @@ -132,19 +133,15 @@ const CheckboxList = ( { ! showExpanded && index >= limit && { hidden: true } ) } > - { - onChange( event.target.value ); - } } + className="wc-block-checkbox-list__checkbox" + label={ option.label } checked={ checked.includes( option.value ) } - disabled={ isDisabled } + onChange={ () => { + onChange( option.value ); + } } /> - { shouldTruncateOptions && index === limit - 1 && diff --git a/assets/js/base/components/filter-element-label/style.scss b/assets/js/base/components/filter-element-label/style.scss index 5c5428c4309..eb9b9784f8d 100644 --- a/assets/js/base/components/filter-element-label/style.scss +++ b/assets/js/base/components/filter-element-label/style.scss @@ -5,5 +5,4 @@ &::after { content: ")"; } - opacity: 0.6; } diff --git a/assets/js/base/components/price-slider/style.scss b/assets/js/base/components/price-slider/style.scss index 11960131c13..becb6dd49d0 100644 --- a/assets/js/base/components/price-slider/style.scss +++ b/assets/js/base/components/price-slider/style.scss @@ -128,7 +128,9 @@ gap: $gap; justify-content: flex-end; - .wc-block-components-filter-submit-button { + // The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop. + button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button { + margin-top: 0; margin-left: 0; } } diff --git a/assets/js/blocks/stock-filter/block.json b/assets/js/blocks/stock-filter/block.json index 5969f42c446..7b70971d80a 100644 --- a/assets/js/blocks/stock-filter/block.json +++ b/assets/js/blocks/stock-filter/block.json @@ -1,13 +1,19 @@ { "name": "woocommerce/stock-filter", "version": "1.0.0", - "title": "Filter Products by Stock", - "description": "Allow customers to filter the grid by products stock status. Works in combination with the All Products block.", + "title": "Filter by Stock", + "description": "Allow customers to filter the grid by products stock status.", "category": "woocommerce", "keywords": [ "WooCommerce" ], "supports": { "html": false, - "multiple": false + "multiple": false, + "color": { + "link": true, + "__experimentalDefaultControls": { + "text": true + } + } }, "example": { "attributes": { diff --git a/assets/js/blocks/stock-filter/block.tsx b/assets/js/blocks/stock-filter/block.tsx index c21abf60584..54a3975863c 100644 --- a/assets/js/blocks/stock-filter/block.tsx +++ b/assets/js/blocks/stock-filter/block.tsx @@ -19,6 +19,7 @@ import { } from '@wordpress/element'; import CheckboxList from '@woocommerce/base-components/checkbox-list'; import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button'; +import FilterResetButton from '@woocommerce/base-components/filter-reset-button'; import Label from '@woocommerce/base-components/filter-element-label'; import isShallowEqual from '@wordpress/is-shallow-equal'; import { decodeEntities } from '@wordpress/html-entities'; @@ -211,15 +212,15 @@ const StockStatusFilterBlock = ( { }; const onSubmit = useCallback( - ( isChecked ) => { + ( checkedOptions ) => { if ( isEditor ) { return; } - if ( isChecked && ! filteringForPhpTemplate ) { - setProductStockStatusQuery( checked ); + if ( checkedOptions && ! filteringForPhpTemplate ) { + setProductStockStatusQuery( checkedOptions ); } - updateFilterUrl( checked ); + updateFilterUrl( checkedOptions ); }, [ isEditor, @@ -374,13 +375,27 @@ const StockStatusFilterBlock = ( { isLoading={ isLoading } isDisabled={ isDisabled } /> - { blockAttributes.showFilterButton && ( - onSubmit( checked ) } - /> - ) } +
+ { checked.length > 0 && ( + { + setChecked( [] ); + onSubmit( [] ); + } } + screenReaderLabel={ __( + 'Reset stock filter', + 'woo-gutenberg-products-block' + ) } + /> + ) } + { blockAttributes.showFilterButton && ( + onSubmit( checked ) } + /> + ) } +
); diff --git a/assets/js/blocks/stock-filter/edit.tsx b/assets/js/blocks/stock-filter/edit.tsx index 05bdf6dd6b1..d3f079471b1 100644 --- a/assets/js/blocks/stock-filter/edit.tsx +++ b/assets/js/blocks/stock-filter/edit.tsx @@ -61,31 +61,13 @@ const Edit = ( { } ) } /> -

- { __( - 'Heading Level', - 'woo-gutenberg-products-block' - ) } -

- - setAttributes( { headingLevel: newLevel } ) - } - /> + +

{ __( 'Size', 'woo-gutenberg-products-block' ) }

+ + setAttributes( { headingLevel: newLevel } ) + } + /> + ); }; diff --git a/assets/js/blocks/stock-filter/style.scss b/assets/js/blocks/stock-filter/style.scss index 60d9609e0db..705aad8ebae 100644 --- a/assets/js/blocks/stock-filter/style.scss +++ b/assets/js/blocks/stock-filter/style.scss @@ -24,4 +24,18 @@ .wc-block-stock-filter__button { margin-top: $gap-smaller; } + + .wc-block-stock-filter__actions { + align-items: center; + display: flex; + gap: $gap; + justify-content: flex-end; + margin-top: $gap-large; + + // The specificity here is needed to overwrite the margin-top that is inherited on WC block template pages such as Shop. + button[type="submit"]:not(.wp-block-search__button).wc-block-components-filter-submit-button { + margin-left: 0; + margin-top: 0; + } + } } diff --git a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap index cff704e558c..d6187701133 100644 --- a/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap +++ b/assets/js/blocks/stock-filter/test/__snapshots__/block.js.snap @@ -9,42 +9,102 @@ exports[`Testing stock filter renders the stock filter block 1`] = ` class="wc-block-checkbox-list wc-block-components-checkbox-list wc-block-stock-filter-list" >
  • - - + +
  • - - + +
  • - - + +
    • +
    `; @@ -58,57 +118,118 @@ exports[`Testing stock filter renders the stock filter block with the filter but class="wc-block-checkbox-list wc-block-components-checkbox-list wc-block-stock-filter-list" >
  • - - + +
  • - - + +
  • - - + +
    • - + + + Apply filter + + + `; @@ -122,84 +243,144 @@ exports[`Testing stock filter renders the stock filter block with the product co class="wc-block-checkbox-list wc-block-components-checkbox-list wc-block-stock-filter-list" >
  • - - + +
  • - - + +
  • - - + +
    • +
    `; diff --git a/packages/checkout/components/checkbox-control/index.tsx b/packages/checkout/components/checkbox-control/index.tsx index 063dd22460d..bbce84858e0 100644 --- a/packages/checkout/components/checkbox-control/index.tsx +++ b/packages/checkout/components/checkbox-control/index.tsx @@ -11,12 +11,13 @@ import './style.scss'; export type CheckboxControlProps = { className?: string; - label?: string; + label?: string | React.ReactNode; id?: string; onChange: ( value: boolean ) => void; children?: React.ReactChildren; hasError?: boolean; checked?: boolean; + disabled?: boolean; }; /** @@ -30,6 +31,7 @@ export const CheckboxControl = ( { children, hasError = false, checked = false, + disabled = false, ...rest }: CheckboxControlProps ): JSX.Element => { const instanceId = useInstanceId( CheckboxControl ); @@ -53,6 +55,7 @@ export const CheckboxControl = ( { onChange={ ( event ) => onChange( event.target.checked ) } aria-invalid={ hasError === true } checked={ checked } + disabled={ disabled } { ...rest } /> { } ); it( 'filter button can be toggled', async () => { - const toggleLabel = await findLabelWithText( 'Filter button' ); + const toggleLabel = await findLabelWithText( 'Apply filters' ); await expect( toggleLabel ).toToggleElement( `${ block.class } .wc-block-filter-submit-button` ); diff --git a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts index a6c5726c0ab..9fd562de66f 100644 --- a/tests/e2e/specs/shopper/filter-products-by-stock.test.ts +++ b/tests/e2e/specs/shopper/filter-products-by-stock.test.ts @@ -29,7 +29,8 @@ const block = { class: '.wc-block-stock-filter', selectors: { editor: { - filterButtonToggle: "//label[text()='Filter button']", + filterButtonToggle: + '//label[text()="Show \'Apply filters\' button"]', }, frontend: { productsList: '.wc-block-grid__products > li',