Update Active Filters "remove filter" icon to use Icon component (woo…

…commerce#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

@@ -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,18 +155,26 @@
 	}
 
 	.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;
 		padding: 0;
 		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 {

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 }