Add and style Reset and Apply buttons

woocommerce · Aug 19, 2022 · 3c04abe · 3c04abe
1 parent d524f43
commit 3c04abe
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/assets/js/blocks/attribute-filter/block.tsx b/assets/js/blocks/attribute-filter/block.tsx
@@ -16,6 +16,7 @@ import {
 import { useCallback, useEffect, useState, useMemo } from '@wordpress/element';
 import CheckboxList from '@woocommerce/base-components/checkbox-list';
 import Label from '@woocommerce/base-components/filter-element-label';
+import FilterResetButton from '@woocommerce/base-components/filter-reset-button';
 import FilterSubmitButton from '@woocommerce/base-components/filter-submit-button';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 import { decodeEntities } from '@wordpress/html-entities';
@@ -610,13 +611,24 @@ const AttributeFilterBlock = ( {
 						isDisabled={ isDisabled }
 					/>
 				) }
-				{ blockAttributes.showFilterButton && (
-					<FilterSubmitButton
-						className="wc-block-attribute-filter__button"
-						disabled={ isLoading || isDisabled }
-						onClick={ () => onSubmit( checked ) }
-					/>
-				) }
+				<div className="wc-block-attribute-filter__actions">
+					{ checked.length > 0 && (
+						<FilterResetButton
+							onClick={ () => setChecked( [] ) }
+							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>
 		</>
 	);

diff --git a/assets/js/blocks/attribute-filter/style.scss b/assets/js/blocks/attribute-filter/style.scss
@@ -67,3 +67,14 @@
 		}
 	}
 }
+
+.wc-block-attribute-filter__actions {
+	align-items: center;
+	display: flex;
+	gap: $gap;
+	justify-content: flex-end;
+
+	.wc-block-components-filter-submit-button {
+		margin-left: 0;
+	}
+}