From 8fc1b13b016e22d3bf5c0b2f666f52c3f574431e Mon Sep 17 00:00:00 2001
From: yogeshbhutkar <yogesh.bhutkar@rtcamp.com>
Date: Mon, 3 Feb 2025 09:49:59 +0530
Subject: [PATCH] refactor: revert `toggle` markup and use consistent wording

---
 .../global-styles/shadow-panel-components.js  | 19 ++++++++++++-------
 .../src/components/global-styles/style.scss   | 15 +++++++--------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/shadow-panel-components.js b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
index 12ea2551dd7bc..6891b4e9ef273 100644
--- a/packages/block-editor/src/components/global-styles/shadow-panel-components.js
+++ b/packages/block-editor/src/components/global-styles/shadow-panel-components.js
@@ -5,8 +5,10 @@ import { __ } from '@wordpress/i18n';
 import {
 	__experimentalVStack as VStack,
 	__experimentalHeading as Heading,
+	__experimentalHStack as HStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
 	Button,
+	FlexItem,
 	Dropdown,
 	Composite,
 	Tooltip,
@@ -150,17 +152,20 @@ function renderShadowToggle( shadow, onShadowChange ) {
 				'block-editor-global-styles__shadow-editor__remove-button',
 				{ 'is-open': isOpen }
 			),
-			label: __( 'Remove shadow' ),
+			label: __( 'Remove' ),
 		};
 
 		return (
 			<>
-				<Button
-					__next40pxDefaultSize
-					icon={ shadowIcon }
-					{ ...toggleProps }
-				>
-					{ __( 'Drop shadow' ) }
+				<Button __next40pxDefaultSize { ...toggleProps }>
+					<HStack justify="flex-start">
+						<Icon
+							className="block-editor-global-styles__toggle-icon"
+							icon={ shadowIcon }
+							size={ 24 }
+						/>
+						<FlexItem>{ __( 'Drop shadow' ) }</FlexItem>
+					</HStack>
 				</Button>
 				{ !! shadow && (
 					<Button
diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index 6a488ed355ca2..5684cf9c0d303 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -1,3 +1,7 @@
+.block-editor-global-styles__toggle-icon {
+	fill: currentColor;
+}
+
 // @todo Ideally, popover, swatch size, and gap values should be CSS variables
 // to apply precise grid layouts.
 // https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
@@ -32,20 +36,15 @@
 	}
 }
 
-.block-editor-global-styles__shadow-dropdown {
-	> .components-button.has-icon.has-text:first-child {
-		gap: $grid-unit-10;
-	}
-}
-
 .block-editor-global-styles__shadow-editor__remove-button {
 	position: absolute;
 	right: 0;
 	top: $grid-unit;
 	margin: auto $grid-unit auto;
 	opacity: 0;
-	transition: opacity 0.1s ease-in-out;
-	@include reduce-motion("transition");
+	@media not (prefers-reduced-motion) {
+		transition: opacity 0.1s ease-in-out;
+	}
 
 	.block-editor-global-styles__shadow-dropdown:hover &,
 	&:focus,