From f71d17e458da4610599e89c0073c068e24834190 Mon Sep 17 00:00:00 2001
From: arthur <arthur.chu@automattic.com>
Date: Thu, 12 Dec 2024 17:32:16 +0800
Subject: [PATCH] Design Picker: Update filter styles

---
 .../design-picker-category-filter/index.tsx   |   5 +-
 .../design-picker-category-filter/style.scss  | 168 +++++++++---------
 .../design-picker/src/components/style.scss   |  78 --------
 .../src/components/unified-design-picker.tsx  |   2 -
 4 files changed, 90 insertions(+), 163 deletions(-)

diff --git a/packages/design-picker/src/components/design-picker-category-filter/index.tsx b/packages/design-picker/src/components/design-picker-category-filter/index.tsx
index 1af0b1d717f74..66d52a1c914a8 100644
--- a/packages/design-picker/src/components/design-picker-category-filter/index.tsx
+++ b/packages/design-picker/src/components/design-picker-category-filter/index.tsx
@@ -1,9 +1,10 @@
 import { ResponsiveToolbarGroup } from '@automattic/components';
+import clsx from 'clsx';
 import type { Category } from '../../types';
 import './style.scss';
 
 interface Props {
-	className: string;
+	className?: string;
 	categories: Category[];
 	selectedSlugs: string[];
 	isMultiSelection?: boolean;
@@ -33,7 +34,7 @@ export default function DesignPickerCategoryFilter( {
 		.filter( ( index ) => index >= 0 );
 	return (
 		<ResponsiveToolbarGroup
-			className={ className }
+			className={ clsx( 'design-picker__category-filter', className ) }
 			initialActiveIndex={ initialActiveIndex !== -1 ? initialActiveIndex : 0 }
 			initialActiveIndexes={ initialActiveIndexes }
 			isMultiSelection={ isMultiSelection }
diff --git a/packages/design-picker/src/components/design-picker-category-filter/style.scss b/packages/design-picker/src/components/design-picker-category-filter/style.scss
index acadc91b5bd2b..3c2a1ae2fb8a5 100644
--- a/packages/design-picker/src/components/design-picker-category-filter/style.scss
+++ b/packages/design-picker/src/components/design-picker-category-filter/style.scss
@@ -2,113 +2,119 @@
 @import "@automattic/onboarding/styles/variables";
 @import "@automattic/typography/styles/fonts";
 
-$design-picker-category-filter-text-color: #3c434a;
-$design-picker-category-filter-text-color-active: var(--studio-gray-100);
+.design-picker__filters {
+	display: flex;
+	justify-content: space-between;
+	flex-direction: column;
+	gap: 10px;
+	margin-bottom: 24px;
 
-.design-picker-category-filter {
 	@include break-small {
-		flex: 0 245px;
-		padding-right: 1rem;
+		flex-direction: row;
+		align-items: flex-end;
+		gap: 30px;
 	}
 
-	button.components-button.design-picker-category-filter__menu-item {
-		padding: 0;
-		color: $design-picker-category-filter-text-color;
-		display: block;
-		width: auto;
-		font-size: 1rem;
-
-		&:hover:not(:disabled),
-		&:active:not(:disabled) {
-			box-shadow: none;
-			background: transparent;
-			.design-picker-category-filter__item-name {
-				text-decoration: underline;
-				color: $design-picker-category-filter-text-color-active;
-			}
+	button.components-button.responsive-toolbar-group__button-item,
+	button.components-button.responsive-toolbar-group__swipe-item {
+		font-size: rem(13px);
+
+		&::before {
+			left: 4px;
+			right: 4px;
+			height: 20px;
+			padding: 8px 12px;
+			border-radius: 4px;
+			line-height: 20px;
+			background-color: var(--studio-gray-0);
 		}
 
 		&.is-pressed {
-			.design-picker-category-filter__item-name {
-				text-decoration: underline;
-				font-weight: 500;
-				color: $design-picker-category-filter-text-color-active;
-
-				&:hover:not(:disabled) {
-					color: $design-picker-category-filter-text-color-active;
-				}
+			&::before {
+				background-color: var(--studio-wordpress-blue);
 			}
-			background: transparent;
 
-			&:focus:not(:disabled),
-			&:focus-visible:not(:disabled) {
-				box-shadow:
-					inset 0 0 0 1px #fff,
-					0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+			&:hover {
+				opacity: 0.95;
 			}
 
-			&:focus:not(:disabled):not(:focus-visible) {
-				box-shadow: none;
+			&:active {
+				opacity: 0.9;
 			}
 		}
+	}
 
-		.design-picker-category-filter__recommended-badge {
-			display: inline-block;
-			font-size: 0.75rem;
-			padding: 0 10px;
-			line-height: 20px;
-			margin-left: 12px;
-			background-color: #b8e6bf;
-			color: #00450c;
-			border-radius: 4px;
+	button.components-button.responsive-toolbar-group__menu-item {
+		height: 36px;
+		padding: 8px 12px;
+		border-radius: 4px;
+		line-height: 20px;
+		background-color: var(--studio-gray-0);
+		font-size: rem(13px);
+
+		&.is-selected {
+			background-color: var(--studio-wordpress-blue);
+
+			&:hover {
+				opacity: 0.95;
+			}
+
+			&:active {
+				opacity: 0.9;
+			}
 		}
+	}
 
-		.components-menu-item__item {
-			min-width: auto;
+	.design-picker__category-group {
+		display: flex;
+		flex-direction: column;
+		&.grow {
+			flex-grow: 1;
+		}
+
+		.design-picker__category-group-content {
+			display: flex;
+			align-items: center;
+			flex-wrap: wrap;
+			gap: 8px 16px;
 		}
 	}
-}
 
-.design-picker-category-filter__sidebar {
-	display: none;
+	.design-picker__category-group-label {
+		text-transform: uppercase;
+		font-size: rem(13px);
+		font-weight: 500;
+	}
 
-	@include break-small {
-		display: block;
+	.design-picker__tier-filter {
+		height: 40px; // match button height
+		margin-bottom: 6px;
 	}
-}
 
-.design-picker-category-filter__dropdown {
-	@include break-small {
+	.design-picker__design-your-own-button {
+		flex-shrink: 0;
+		margin-bottom: 6px;
+	}
+
+	.design-picker__design-with-ai {
 		display: none;
+		
+		@include break-small {
+			display: block;
+		}
 	}
 
-	font-family: $sans;
-	font-size: $font-body-small;
-	line-height: 24px;
-	font-weight: 500;
-	border-radius: 4px;
-	border: 1px solid #c3c4c7;
-	padding: 0 35px 0 10px;
-	margin-bottom: 32px;
-	min-height: 44px;
-	height: 44px;
-	width: 100%;
-	-webkit-appearance: none;
-	appearance: none;
-	background:
-		transparent
-		url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMCIgZmlsbD0ibm9uZSIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ii8+PGc+PHBhdGggZmlsbD0iI2MzYzRjNyIgZD0iTTIwIDlsLTggOC04LTggMS40MTQtMS40MTRMMTIgMTQuMTcybDYuNTg2LTYuNTg2eiIvPjwvZz48L3N2Zz4=)
-		no-repeat right 12px top 50%;
-	background-size: 20px;
-
-	&:focus,
-	&:focus-visible {
-		outline: none;
-		box-shadow: 0 0 0 2px var(--color-primary-light);
+	.design-picker__design-your-own-button-without-categories {
+		margin-left: auto;
+		margin-top: -60px;
 	}
 
-	&:focus:not(:focus-visible) {
-		outline: none;
-		box-shadow: none;
+	.design-picker__category-filter.responsive-toolbar-group__dropdown {
+		width: 100%;
+		padding-bottom: 0;
+
+		.responsive-toolbar-group__grouped-list {
+			justify-content: flex-start;
+		}
 	}
 }
diff --git a/packages/design-picker/src/components/style.scss b/packages/design-picker/src/components/style.scss
index 85bf2918fcebf..1fe3b9b9879f5 100644
--- a/packages/design-picker/src/components/style.scss
+++ b/packages/design-picker/src/components/style.scss
@@ -22,80 +22,6 @@
 		flex-grow: 1;
 	}
 
-	.design-picker__filters {
-		display: flex;
-		justify-content: space-between;
-		flex-direction: column;
-		gap: 10px;
-		margin-bottom: 24px;
-
-		@include break-small {
-			flex-direction: row;
-			align-items: flex-end;
-			gap: 30px;
-		}
-
-		button.responsive-toolbar-group__button-item,
-		button.responsive-toolbar-group__swipe-item {
-			&:not(.is-pressed)::before {
-				background-color: var(--studio-gray-0);
-			}
-		}
-
-		.design-picker__category-group {
-			display: flex;
-			flex-direction: column;
-			&.grow {
-				flex-grow: 1;
-			}
-
-			.design-picker__category-group-content {
-				display: flex;
-				align-items: center;
-				flex-wrap: wrap;
-				gap: 8px 16px;
-			}
-		}
-
-		.design-picker__category-group-label {
-			text-transform: uppercase;
-			font-size: rem(13px);
-			font-weight: 500;
-		}
-
-		.design-picker__tier-filter {
-			height: 40px; // match button height
-			margin-bottom: 6px;
-		}
-
-		.design-picker__design-your-own-button {
-			flex-shrink: 0;
-			margin-bottom: 6px;
-		}
-
-		.design-picker__design-with-ai {
-			display: none;
-			
-			@include break-small {
-				display: block;
-			}
-		}
-
-		.design-picker__design-your-own-button-without-categories {
-			margin-left: auto;
-			margin-top: -60px;
-		}
-
-		.design-picker__category-filter.responsive-toolbar-group__dropdown {
-			width: 100%;
-			padding-bottom: 0;
-
-			.responsive-toolbar-group__grouped-list {
-				justify-content: flex-start;
-			}
-		}
-	}
-
 	.design-picker__design-card-group {
 		.design-picker__design-card-title {
 			position: sticky;
@@ -495,10 +421,6 @@
 		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 	}
 
-	.components-button.is-pressed:active:hover {
-		color: var(--theme-base-color);
-	}
-
 	.unified-design-picker__designs {
 		min-height: 100vh;
 	}
diff --git a/packages/design-picker/src/components/unified-design-picker.tsx b/packages/design-picker/src/components/unified-design-picker.tsx
index fd227d9583cac..77b1e2eca7472 100644
--- a/packages/design-picker/src/components/unified-design-picker.tsx
+++ b/packages/design-picker/src/components/unified-design-picker.tsx
@@ -356,7 +356,6 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 				{ categorization && categoryTypes.length && isMultiFilterEnabled && (
 					<DesignPickerFilterGroup title={ translate( 'Type' ) }>
 						<DesignPickerCategoryFilter
-							className="design-picker__category-filter"
 							categories={ categoryTypes }
 							onSelect={ categorization.onSelect }
 							selectedSlugs={ categorization.selections }
@@ -368,7 +367,6 @@ const DesignPicker: React.FC< DesignPickerProps > = ( {
 				{ categorization && categoryTopics.length && (
 					<DesignPickerFilterGroup title={ isMultiFilterEnabled ? translate( 'Topic' ) : '' } grow>
 						<DesignPickerCategoryFilter
-							className="design-picker__category-filter"
 							categories={ isMultiFilterEnabled ? categoryTopics : categorization.categories }
 							onSelect={ categorization.onSelect }
 							selectedSlugs={ categorization.selections }