Layout Updates to Active Filters Block (#6905)

* Reverse ordter of filter item name and close btn.

* Update layout & typography styles for block items

* Update chip ui view styles.

Additionally, add editor styles to have the editor match the rendered
frontend.

* Update additional remove button styles.

- Add hover state to remove button on chip layout.
- Update disabled styles to remove button in both layouts (mainly relevant
to the editor view).

* Adjust remove button colors.

Set hover states to shades of grey. Also set chip color and text to
match selected text color of the block.

* Update e2e test to account for new element order.

Since we're moving the remove button in the list view from the last
child node to the first child node, we need to adjust the expected order
of the active filter item text.

* Design and copy updates on the block settings

Co-authored-by: Alba Rincón <[email protected]>
Co-authored-by: Alba Rincón <[email protected]>

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', () => {