From 7b0137479aafe0e40c4086bf43720543cb6c2ea3 Mon Sep 17 00:00:00 2001
From: "Daniel W. Robert" <danielwrobert@users.noreply.github.com>
Date: Fri, 9 Sep 2022 11:06:42 -0400
Subject: [PATCH] Update Active Filters "remove filter" icon to use Icon
 component (#7035)

* Update "remove filter" icon to use Icon component.

To be consistent with the button icon used on the Chips view, this
replaces the native svg element used in the List view with the same
Icon component from core.

* Add proper margin to active filters by price list.

There is currently no top margin when the active filters contain a price
filter in the list view. This is because the filters only contain a
range and do not render a child list.

This update will target that price filter item and add a top margin that
is consistent with the other active filters.
---
 assets/js/blocks/active-filters/style.scss | 18 ++++++++--
 assets/js/blocks/active-filters/utils.tsx  | 39 ++++------------------
 2 files changed, 21 insertions(+), 36 deletions(-)

diff --git a/assets/js/blocks/active-filters/style.scss b/assets/js/blocks/active-filters/style.scss
index f28e2091ff3..30adf7fd4ef 100644
--- a/assets/js/blocks/active-filters/style.scss
+++ b/assets/js/blocks/active-filters/style.scss
@@ -127,6 +127,10 @@
 				max-width: 200px;
 			}
 		}
+
+		> .wc-block-active-filters__list-item .wc-block-active-filters__list-item-name {
+			margin: 9px 0 0;
+		}
 	}
 
 	.wc-block-active-filters__list-item-type {
@@ -151,9 +155,12 @@
 	}
 
 	.wc-block-active-filters__list-item-remove {
-		background: transparent;
+		@include font-size(smaller);
+		background: $gray-200;
 		border: 0;
+		border-radius: 25px;
 		appearance: none;
+		padding: 0;
 		height: 16px;
 		width: 16px;
 		line-height: 16px;
@@ -161,8 +168,13 @@
 		margin: 0 0.5em 0 0;
 		color: currentColor;
 
-		&:hover {
-			color: $gray-600;
+		&:hover,
+		&:focus {
+			background: $gray-600;
+
+			.wc-block-components-chip__remove-icon {
+				fill: #fff;
+			}
 		}
 
 		&:disabled {
diff --git a/assets/js/blocks/active-filters/utils.tsx b/assets/js/blocks/active-filters/utils.tsx
index e99059b7637..7786ebae0b9 100644
--- a/assets/js/blocks/active-filters/utils.tsx
+++ b/assets/js/blocks/active-filters/utils.tsx
@@ -7,6 +7,7 @@ import { RemovableChip } from '@woocommerce/base-components/chip';
 import Label from '@woocommerce/base-components/label';
 import { getQueryArgs, addQueryArgs, removeQueryArgs } from '@wordpress/url';
 import { changeUrl } from '@woocommerce/utils';
+import { Icon, closeSmall } from '@wordpress/icons';
 
 /**
  * Format a min/max price range to display.
@@ -108,39 +109,11 @@ export const renderRemovableListItem = ( {
 						className="wc-block-active-filters__list-item-remove"
 						onClick={ removeCallback }
 					>
-						<svg
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<ellipse
-								cx="8"
-								cy="8"
-								rx="8"
-								ry="8"
-								transform="rotate(-180 8 8)"
-								fill="currentColor"
-								fillOpacity="0.7"
-							/>
-							<rect
-								x="10.636"
-								y="3.94983"
-								width="2"
-								height="9.9466"
-								transform="rotate(45 10.636 3.94983)"
-								fill="white"
-							/>
-							<rect
-								x="12.0503"
-								y="11.0209"
-								width="2"
-								height="9.9466"
-								transform="rotate(135 12.0503 11.0209)"
-								fill="white"
-							/>
-						</svg>
+						<Icon
+							className="wc-block-components-chip__remove-icon"
+							icon={ closeSmall }
+							size={ 16 }
+						/>
 						<Label screenReaderLabel={ removeText } />
 					</button>
 					{ prefixedName }