Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Commit

Permalink
Update Filter by Stock block (#6883)
Browse files Browse the repository at this point in the history
* Update Filter by Stock controls and UI to include custom checkbox and settings.

* Include and style Filter by Stock reset button

* Make checkbox accessible via keyboard

* Update snapshot tests for Filter Products by Stock component

* Update E2E tests with new label value

* Update label test for Apply Filters in E2E tests

* Specify checkbox type so styles are not overridden in the editor

* Update E2E test label for filter button

* Update label selector to search for containing text rather than exact match

* Escape quotation marks for label query in E2E shopper tests for Filter by Stock

* Correct typo on Filter by Stock controls

* Replace custom checkbox with CheckboxControl component from the checkout package.

* Remove opacity on product count for checkbox label so its the same color as the label.

* Update snapshot tests with new component usage for filter by stock

* Update block title from Filter Products by Stock to Filter by Stock

* Update reset button behaviour to clear selections immediately regardless of whether the Apply Filters button is active or not.

* Pass option value as ID to satisfy E2E tests

* Update snapshot tests for stock filter

* Reset checked state on reset for when they have filters checked but not applied.
  • Loading branch information
tjcafferkey authored Aug 19, 2022
1 parent 446b59e commit d524f43
Show file tree
Hide file tree
Showing 11 changed files with 381 additions and 167 deletions.
17 changes: 7 additions & 10 deletions assets/js/base/components/checkbox-list/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -132,19 +133,15 @@ const CheckboxList = ( {
! showExpanded &&
index >= limit && { hidden: true } ) }
>
<input
type="checkbox"
<CheckboxControl
id={ option.value }
value={ option.value }
onChange={ ( event ) => {
onChange( event.target.value );
} }
className="wc-block-checkbox-list__checkbox"
label={ option.label }
checked={ checked.includes( option.value ) }
disabled={ isDisabled }
onChange={ () => {
onChange( option.value );
} }
/>
<label htmlFor={ option.value }>
{ option.label }
</label>
</li>
{ shouldTruncateOptions &&
index === limit - 1 &&
Expand Down
1 change: 0 additions & 1 deletion assets/js/base/components/filter-element-label/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,4 @@
&::after {
content: ")";
}
opacity: 0.6;
}
4 changes: 3 additions & 1 deletion assets/js/base/components/price-slider/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down
12 changes: 9 additions & 3 deletions assets/js/blocks/stock-filter/block.json
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
37 changes: 26 additions & 11 deletions assets/js/blocks/stock-filter/block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -374,13 +375,27 @@ const StockStatusFilterBlock = ( {
isLoading={ isLoading }
isDisabled={ isDisabled }
/>
{ blockAttributes.showFilterButton && (
<FilterSubmitButton
className="wc-block-stock-filter__button"
disabled={ isLoading || isDisabled }
onClick={ () => onSubmit( checked ) }
/>
) }
<div className="wc-block-stock-filter__actions">
{ checked.length > 0 && (
<FilterResetButton
onClick={ () => {
setChecked( [] );
onSubmit( [] );
} }
screenReaderLabel={ __(
'Reset stock filter',
'woo-gutenberg-products-block'
) }
/>
) }
{ blockAttributes.showFilterButton && (
<FilterSubmitButton
className="wc-block-stock-filter__button"
disabled={ isLoading || isDisabled }
onClick={ () => onSubmit( checked ) }
/>
) }
</div>
</div>
</>
);
Expand Down
36 changes: 16 additions & 20 deletions assets/js/blocks/stock-filter/edit.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -61,31 +61,13 @@ const Edit = ( {
} )
}
/>
<p>
{ __(
'Heading Level',
'woo-gutenberg-products-block'
) }
</p>
<HeadingToolbar
isCollapsed={ false }
minLevel={ 2 }
maxLevel={ 7 }
selectedLevel={ headingLevel }
onChange={ ( newLevel: number ) =>
setAttributes( { headingLevel: newLevel } )
}
/>
</PanelBody>
<PanelBody
title={ __(
'Block Settings',
'woo-gutenberg-products-block'
) }
title={ __( 'Settings', 'woo-gutenberg-products-block' ) }
>
<ToggleControl
label={ __(
'Filter button',
"Show 'Apply filters' button",
'woo-gutenberg-products-block'
) }
help={
Expand All @@ -107,6 +89,20 @@ const Edit = ( {
}
/>
</PanelBody>
<PanelBody
title={ __( 'Typography', 'woo-gutenberg-products-block' ) }
>
<p> { __( 'Size', 'woo-gutenberg-products-block' ) } </p>
<HeadingToolbar
isCollapsed={ false }
minLevel={ 2 }
maxLevel={ 7 }
selectedLevel={ headingLevel }
onChange={ ( newLevel: number ) =>
setAttributes( { headingLevel: newLevel } )
}
/>
</PanelBody>
</InspectorControls>
);
};
Expand Down
14 changes: 14 additions & 0 deletions assets/js/blocks/stock-filter/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Loading

0 comments on commit d524f43

Please sign in to comment.