From 3c04abeb4b66fe1f29e57e9a9a04a139d79c94a4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alba=20Rinc=C3=B3n?= <alba.rincon@automattic.com>
Date: Thu, 18 Aug 2022 11:00:29 +0200
Subject: [PATCH] Add and style Reset and Apply buttons

---
 assets/js/blocks/attribute-filter/block.tsx  | 26 ++++++++++++++------
 assets/js/blocks/attribute-filter/style.scss | 11 +++++++++
 2 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/assets/js/blocks/attribute-filter/block.tsx b/assets/js/blocks/attribute-filter/block.tsx
index 3e42739a18c..bb1048b8f56 100644
--- 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
index 73375727ed7..cae4051f562 100644
--- 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;
+	}
+}