Visual Refactor: Add Chevron Icon for Shadows in Global Styles (WordP…

…ress#67720) Co-authored-by: yogeshbhutkar <[email protected]> Co-authored-by: Mamaduka <[email protected]> Co-authored-by: afercia <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: jameskoster <[email protected]>
carstingaxion · Dec 12, 2024 · 7eba688 · 7eba688
1 parent 1168fa5
commit 7eba688
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 19 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js b/packages/edit-site/src/components/global-styles/font-sizes/font-sizes.js
@@ -11,7 +11,6 @@ import {
 	__experimentalVStack as VStack,
 	__experimentalHStack as HStack,
 	FlexItem,
-	FlexBlock,
 	Button,
 } from '@wordpress/components';
 import {
@@ -111,23 +110,18 @@ function FontSizeGroup( {
 								key={ size.slug }
 								path={ `/typography/font-sizes/${ origin }/${ size.slug }` }
 							>
-								<HStack direction="row">
+								<HStack>
 									<FlexItem className="edit-site-font-size__item">
 										{ size.name }
 									</FlexItem>
-									<FlexItem>
-										<HStack justify="flex-end">
-											<FlexBlock className="edit-site-font-size__item edit-site-font-size__item-value">
-												{ size.size }
-											</FlexBlock>
-											<Icon
-												icon={
-													isRTL()
-														? chevronLeft
-														: chevronRight
-												}
-											/>
-										</HStack>
+									<FlexItem display="flex">
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
 									</FlexItem>
 								</HStack>
 							</NavigationButtonAsItem>

diff --git a/packages/edit-site/src/components/global-styles/shadows-panel.js b/packages/edit-site/src/components/global-styles/shadows-panel.js
@@ -9,9 +9,9 @@ import {
 	Flex,
 	FlexItem,
 } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { plus, shadow as shadowIcon } from '@wordpress/icons';
+import { plus, Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -135,9 +135,13 @@ function ShadowItem( { shadow, category } ) {
 	return (
 		<NavigationButtonAsItem
 			path={ `/shadows/edit/${ category }/${ shadow.slug }` }
-			icon={ shadowIcon }
 		>
-			{ shadow.name }
+			<HStack>
+				<FlexItem>{ shadow.name }</FlexItem>
+				<FlexItem display="flex">
+					<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+				</FlexItem>
+			</HStack>
 		</NavigationButtonAsItem>
 	);
 }