Patterns: use wordpress icons (#88429)

Automattic · Mar 15, 2024 · 24796fe · 24796fe
1 parent 3372ace
commit 24796fe
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 52 deletions.
diff --git a/client/components/category-pill-navigation/images/arrow.svg b/client/components/category-pill-navigation/images/arrow.svg
diff --git a/client/components/category-pill-navigation/index.tsx b/client/components/category-pill-navigation/index.tsx
@@ -1,13 +1,14 @@
 import { Button } from '@wordpress/components';
 import { useEffect, useState, useRef } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
 import classnames from 'classnames';
 import { LocalizedLink } from 'calypso/my-sites/patterns/components/localized-link';
 
 import './style.scss';
 
 type CategoryPillNavigationProps = {
 	buttons?: {
-		icon: string;
+		icon: React.ReactElement< typeof Icon >;
 		label: string;
 		link: string;
 	}[];
@@ -60,16 +61,17 @@ export const CategoryPillNavigation = ( {
 		<div className="category-pill-navigation">
 			<div className="category-pill-navigation__list">
 				{ showLeftArrow && (
-					<Button
-						className="category-pill-navigation__arrow"
-						onClick={ () => scrollTo( 'left' ) }
-					/>
+					<Button className="category-pill-navigation__arrow" onClick={ () => scrollTo( 'left' ) }>
+						<Icon icon={ chevronRight } size={ 28 } />
+					</Button>
 				) }
 				{ showRightArrow && (
 					<Button
 						className="category-pill-navigation__arrow right"
 						onClick={ () => scrollTo( 'right' ) }
-					/>
+					>
+						<Icon icon={ chevronRight } size={ 28 } />
+					</Button>
 				) }
 				<div
 					className="category-pill-navigation__list-inner"
@@ -84,7 +86,7 @@ export const CategoryPillNavigation = ( {
 									href={ button.link }
 									className="category-pill-navigation__button"
 								>
-									{ button.icon && <img src={ button.icon } alt={ button.label } /> }
+									{ button.icon }
 									{ button.label }
 								</LocalizedLink>
 							) ) }

diff --git a/client/components/category-pill-navigation/style.scss b/client/components/category-pill-navigation/style.scss
@@ -31,13 +31,14 @@
 	}
 
 	.category-pill-navigation__arrow {
+		display: block;
 		width: 44px;
 		height: 44px;
 		position: absolute;
 		left: 0;
 		top: 0;
 		z-index: 2;
-		background: var(--studio-white) url(./images/arrow.svg) no-repeat center center;
+		background: var(--studio-white);
 		transform: rotate(180deg);
 		cursor: pointer;
 

diff --git a/client/my-sites/patterns/pages/category/images/grid.svg b/client/my-sites/patterns/pages/category/images/grid.svg
diff --git a/client/my-sites/patterns/pages/category/images/list.svg b/client/my-sites/patterns/pages/category/images/list.svg
diff --git a/client/my-sites/patterns/pages/category/images/star.svg b/client/my-sites/patterns/pages/category/images/star.svg
diff --git a/client/my-sites/patterns/pages/category/index.tsx b/client/my-sites/patterns/pages/category/index.tsx
@@ -5,6 +5,12 @@ import {
 	__experimentalToggleGroupControl as ToggleGroupControl,
 	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
+import {
+	Icon,
+	starEmpty as iconStar,
+	category as iconCategory,
+	menu as iconMenu,
+} from '@wordpress/icons';
 import { useEffect, useRef, useState } from 'react';
 import { CategoryPillNavigation } from 'calypso/components/category-pill-navigation';
 import DocumentHead from 'calypso/components/data/document-head';
@@ -22,8 +28,6 @@ import {
 	type Pattern,
 	type PatternGalleryFC,
 } from 'calypso/my-sites/patterns/types';
-import ImgGrid from './images/grid.svg';
-import ImgStar from './images/star.svg';
 
 import './style.scss';
 
@@ -111,12 +115,12 @@ export const PatternsCategoryPage = ( {
 						selectedCategory={ category }
 						buttons={ [
 							{
-								icon: ImgStar,
+								icon: <Icon icon={ iconStar } size={ 30 } />,
 								label: 'Discover',
 								link: addLocaleToPathLocaleInFront( '/patterns' ),
 							},
 							{
-								icon: ImgGrid,
+								icon: <Icon icon={ iconCategory } size={ 26 } />,
 								label: 'All Categories',
 								link: '/222',
 							},
@@ -161,12 +165,12 @@ export const PatternsCategoryPage = ( {
 					>
 						<ToggleGroupControlOption
 							className="patterns-page-category__toggle-option--list-view"
-							label="List view"
+							label={ ( <Icon icon={ iconMenu } size={ 20 } /> ) as unknown as string }
 							value="list"
 						/>
 						<ToggleGroupControlOption
 							className="patterns-page-category__toggle-option--grid-view"
-							label="Grid view"
+							label={ ( <Icon icon={ iconCategory } size={ 20 } /> ) as unknown as string }
 							value="grid"
 						/>
 					</ToggleGroupControl>

diff --git a/client/my-sites/patterns/pages/category/style.scss b/client/my-sites/patterns/pages/category/style.scss
@@ -71,25 +71,14 @@
 
 	.patterns-page-category__toggle-option--list-view,
 	.patterns-page-category__toggle-option--grid-view {
-		min-width: 34px;
-
-		div {
-			font-size: 0;
-		}
+		padding: 0 8px;
+		color: var(--studio-black);
 
 		&[aria-checked="true"] {
-			filter: invert(100%);
+			color: var(--studio-white);
 		}
 	}
 
-	.patterns-page-category__toggle-option--list-view {
-		background: url(./images/list.svg) no-repeat center center;
-	}
-
-	.patterns-page-category__toggle-option--grid-view {
-		background: url(./images/grid.svg) no-repeat center center;
-	}
-
 	@media ( max-width: $break-medium ) {
 		.patterns-page-category__title {
 			display: none;