feat: Add tootlip tu shadow button.

WordPress · Sep 20, 2024 · 9d3d8ac · 9d3d8ac
1 parent 00da47a
commit 9d3d8ac
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 26 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
@@ -11,6 +11,7 @@ import {
 	FlexItem,
 	Dropdown,
 	Composite,
+	Tooltip,
 } from '@wordpress/components';
 import { useMemo } from '@wordpress/element';
 import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
@@ -79,32 +80,31 @@ export function ShadowPresets( { presets, activeShadow, onSelect } ) {
 
 export function ShadowIndicator( { type, label, isActive, onSelect, shadow } ) {
 	return (
-		<Composite.Item
-			role="option"
-			aria-label={ label }
-			aria-selected={ isActive }
-			className={ clsx( 'block-editor-global-styles__shadow__item', {
-				'is-active': isActive,
-			} ) }
-			render={
-				<button
-					__next40pxDefaultSize
-					className={ clsx(
-						'block-editor-global-styles__shadow-indicator',
-						{
-							unset: type === 'unset',
-						}
-					) }
-					onClick={ onSelect }
-					label={ label }
-					style={ { boxShadow: shadow } }
-					title={ label }
-					aria-label={ label }
-				>
-					{ isActive && <Icon icon={ check } /> }
-				</button>
-			}
-		/>
+		<Tooltip text={ label }>
+			<Composite.Item
+				role="option"
+				aria-label={ label }
+				aria-selected={ isActive }
+				className={ clsx( 'block-editor-global-styles__shadow__item', {
+					'is-active': isActive,
+				} ) }
+				render={
+					<button
+						className={ clsx(
+							'block-editor-global-styles__shadow-indicator',
+							{
+								unset: type === 'unset',
+							}
+						) }
+						onClick={ onSelect }
+						style={ { boxShadow: shadow } }
+						aria-label={ label }
+					>
+						{ isActive && <Icon icon={ check } /> }
+					</button>
+				}
+			/>
+		</Tooltip>
 	);
 }
 

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
@@ -37,10 +37,15 @@
 
 // These styles are similar to the color palette.
 .block-editor-global-styles__shadow-indicator {
+	appearance: none;
+	background: none;
 	color: $gray-800;
 	border: $gray-200 $border-width solid;
 	border-radius: $radius-small;
 	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
 	padding: 0;
 
 	height: $button-size-small + 2 * $border-width;