Add tooltip to variation

amitraj2203 · Jun 21, 2024 · 55f3afa · 55f3afa
1 parent 0dcbf97
commit 55f3afa
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 35 deletions.
diff --git a/packages/edit-site/src/components/global-styles/variations/variation.js b/packages/edit-site/src/components/global-styles/variations/variation.js
@@ -6,6 +6,7 @@ import clsx from 'clsx';
 /**
  * WordPress dependencies
  */
+import { Tooltip } from '@wordpress/components';
 import { useMemo, useContext, useState } from '@wordpress/element';
 import { ENTER } from '@wordpress/keycodes';
 import { __, sprintf } from '@wordpress/i18n';
@@ -23,7 +24,13 @@ const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
 	blockEditorPrivateApis
 );
 
-export default function Variation( { variation, children, isPill, property } ) {
+export default function Variation( {
+	variation,
+	children,
+	isPill,
+	property,
+	showTooltip,
+} ) {
 	const [ isFocused, setIsFocused ] = useState( false );
 	const { base, user, setUserConfig } = useContext( GlobalStylesContext );
 
@@ -64,30 +71,38 @@ export default function Variation( { variation, children, isPill, property } ) {
 		);
 	}
 
-	return (
-		<GlobalStylesContext.Provider value={ context }>
+	const content = (
+		<div
+			className={ clsx( 'edit-site-global-styles-variations_item', {
+				'is-active': isActive,
+			} ) }
+			role="button"
+			onClick={ selectVariation }
+			onKeyDown={ selectOnEnter }
+			tabIndex="0"
+			aria-label={ label }
+			aria-current={ isActive }
+			onFocus={ () => setIsFocused( true ) }
+			onBlur={ () => setIsFocused( false ) }
+		>
 			<div
-				className={ clsx( 'edit-site-global-styles-variations_item', {
-					'is-active': isActive,
-				} ) }
-				role="button"
-				onClick={ selectVariation }
-				onKeyDown={ selectOnEnter }
-				tabIndex="0"
-				aria-label={ label }
-				aria-current={ isActive }
-				onFocus={ () => setIsFocused( true ) }
-				onBlur={ () => setIsFocused( false ) }
+				className={ clsx(
+					'edit-site-global-styles-variations_item-preview',
+					{ 'is-pill': isPill }
+				) }
 			>
-				<div
-					className={ clsx(
-						'edit-site-global-styles-variations_item-preview',
-						{ 'is-pill': isPill }
-					) }
-				>
-					{ children( isFocused ) }
-				</div>
+				{ children( isFocused ) }
 			</div>
+		</div>
+	);
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ showTooltip ? (
+				<Tooltip text={ variation?.title }>{ content }</Tooltip>
+			) : (
+				content
+			) }
 		</GlobalStylesContext.Provider>
 	);
 }
diff --git a/packages/edit-site/src/components/global-styles/variations/variations-color.js b/packages/edit-site/src/components/global-styles/variations/variations-color.js
@@ -4,7 +4,6 @@
 import {
 	__experimentalVStack as VStack,
 	__experimentalGrid as Grid,
-	Tooltip,
 } from '@wordpress/components';
 
 /**
@@ -28,18 +27,15 @@ export default function ColorVariations( { title, gap = 2 } ) {
 			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
 			<Grid spacing={ gap }>
 				{ colorVariations.map( ( variation, index ) => (
-					<Tooltip key={ index } text={ variation?.title }>
-						{ /* This div is needed for Tooltips to work */ }
-						<div>
-							<Variation
-								variation={ variation }
-								isPill
-								property="color"
-							>
-								{ () => <StylesPreviewColors /> }
-							</Variation>
-						</div>
-					</Tooltip>
+					<Variation
+						key={ index }
+						variation={ variation }
+						isPill
+						property="color"
+						showTooltip
+					>
+						{ () => <StylesPreviewColors /> }
+					</Variation>
 				) ) }
 			</Grid>
 		</VStack>

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -39,6 +39,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
 							key={ index }
 							variation={ variation }
 							property="typography"
+							showTooltip
 						>
 							{ ( isFocused ) => (
 								<PreviewIframe