Layout Updates to Active Filters Block

assets/js/base/components/chip/style.scss

@@ -3,7 +3,7 @@
 	align-items: center;
 	border: 0;
 	display: inline-flex;
-	padding: em($gap-smallest * 0.5) 0.5em em($gap-smallest);
+	padding: em($gap-smallest) 0.5em;
 	margin: 0 0.365em 0.365em 0;
 	border-radius: 0;
 	line-height: 1;
@@ -14,8 +14,9 @@
 	&:hover,
 	&:focus,
 	&:active {
-		background: $gray-200;
-		color: $gray-900;
+		background: transparent;
+		color: inherit;
+		border: 1px solid;
 	}
 
 	&.wc-block-components-chip--radius-small {
@@ -30,24 +31,27 @@
 		padding-right: 0.75em;
 	}
 	.wc-block-components-chip__text {
+		@include font-size(smaller);
 		flex-grow: 1;
 	}
-	&.is-removable {
-		padding-right: 0.5em;
-	}
 	&.is-removable .wc-block-components-chip__text {
 		padding-right: 0.25em;
 	}
 	.wc-block-components-chip__remove {
 		@include font-size(smaller);
-		background: transparent;
+		background: $gray-200;
 		border: 0;
+		border-radius: 25px;
 		appearance: none;
 		padding: 0;
+		height: 16px;
+		width: 16px;
+		margin: 0;
 	}
 
 	.wc-block-components-chip__remove-icon {
 		vertical-align: middle;
+		fill: $gray-900;
 	}
 }
 
@@ -67,11 +71,15 @@ button.wc-block-components-chip:hover > .wc-block-components-chip__remove,
 button.wc-block-components-chip:focus > .wc-block-components-chip__remove,
 .wc-block-components-chip__remove:hover,
 .wc-block-components-chip__remove:focus {
-	fill: $alert-red;
+	background: $gray-600;
+
+	.wc-block-components-chip__remove-icon {
+		fill: #fff;
+	}
 }
 
 button.wc-block-components-chip:disabled > .wc-block-components-chip__remove,
 .wc-block-components-chip__remove:disabled {
-	fill: $gray-600;
+	fill: #fff;
 	cursor: not-allowed;
 }

assets/js/blocks/active-filters/edit.tsx

@@ -21,6 +21,7 @@ import {
  */
 import Block from './block';
 import type { Attributes } from './types';
+import './editor.scss';
 
 const Edit = ( {
 	attributes,
@@ -37,7 +38,7 @@ const Edit = ( {
 			<InspectorControls key="inspector">
 				<PanelBody
 					title={ __(
-						'Block Settings',
+						'Display Settings',
 						'woo-gutenberg-products-block'
 					) }
 				>
@@ -52,6 +53,7 @@ const Edit = ( {
 								displayStyle: value,
 							} )
 						}
+						className="wc-block-active-filter__style-toggle"
 					>
 						<ToggleGroupControlOption
 							value="list"

assets/js/blocks/active-filters/editor.scss

@@ -0,0 +1,9 @@
+.wc-block-active-filters {
+	.wc-block-active-filters__list-item-name {
+		margin-top: 9px;
+	}
+}
+
+.wc-block-active-filter__style-toggle {
+	width: 100%;
+}

assets/js/blocks/active-filters/style.scss

@@ -14,9 +14,9 @@
 	overflow: hidden;
 
 	.wc-block-active-filters__clear-all {
-		@include font-size(regular);
-		float: right;
+		@include font-size(smaller);
 		border: none;
+		margin-top: 15px;
 		padding: 0;
 		text-decoration: underline;
 		cursor: pointer;
@@ -37,10 +37,9 @@
 		clear: both;
 
 		li {
-			margin: 0;
+			margin: 9px 0 0;
 			padding: 0;
 			list-style: none outside;
-			clear: both;
 
 			ul {
 				margin: 0;
@@ -54,10 +53,14 @@
 				}
 			}
 		}
+		> li:first-child {
+			margin: 0;
+		}
 	}
 
 	.wc-block-active-filters__list-item-type {
 		@include font-size(smaller);
+		font-weight: bold;
 		text-transform: uppercase;
 		letter-spacing: 0.1em;
 		margin: $gap 0 0;
@@ -70,10 +73,11 @@
 	}
 
 	.wc-block-active-filters__list-item-name {
-		font-weight: bold;
-		display: block;
+		@include font-size(smaller);
+		display: flex;
+		align-items: center;
 		position: relative;
-		padding: 0 16px 0 0;
+		padding: 0;
 	}
 
 	.wc-block-active-filters__list-item-remove {
@@ -83,11 +87,17 @@
 		height: 16px;
 		width: 16px;
 		padding: 0;
-		position: absolute;
-		right: 0;
-		top: 50%;
-		margin: -8px 0 0 0;
+		margin: 0 16px 0 0;
 		color: currentColor;
+
+		&:hover {
+			color: $gray-600;
+		}
+
+		&:disabled {
+			color: $gray-200;
+			cursor: not-allowed;
+		}
 	}
 
 	.wc-block-active-filters__list--chips {

assets/js/blocks/active-filters/utils.tsx

@@ -103,7 +103,6 @@ export const renderRemovableListItem = ( {
 				/>
 			) : (
 				<span className="wc-block-active-filters__list-item-name">
-					{ prefixedName }
 					<button
 						className="wc-block-active-filters__list-item-remove"
 						onClick={ removeCallback }
@@ -141,9 +140,9 @@ export const renderRemovableListItem = ( {
 								fill="white"
 							/>
 						</svg>
-
 						<Label screenReaderLabel={ removeText } />
 					</button>
+					{ prefixedName }
 				</span>
 			) }
 		</li>

tests/e2e/specs/shopper/active-filters.test.ts

@@ -84,7 +84,7 @@ const getActiveFilterTypeText = () =>
 const getActiveFilterNameText = () =>
 	page.$eval(
 		selectors.frontend.activeFilterName,
-		( el ) => ( el as HTMLElement ).childNodes[ 0 ].textContent
+		( el ) => ( el as HTMLElement ).childNodes[ 1 ].textContent
 	);
 
 describe( 'Shopper → Active Filters Block', () => {