Skip to content

Commit

Permalink
Add tooltip on hover of color and typography presets (#62201)
Browse files Browse the repository at this point in the history
* Add tooltip to color presets

* Adds inline comment for the extra div

Co-authored-by: Ben Dwyer <ben@scruffian.com>

* Add tooltip to variation

---------

Co-authored-by: Ben Dwyer <ben@scruffian.com>

Unlinked contributors: sahiladit.

Co-authored-by: amitraj2203 <amitraj2203@git.wordpress.org>
Co-authored-by: scruffian <scruffian@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
  • Loading branch information
5 people authored Jun 25, 2024
1 parent 1e57017 commit 1ee2e3c
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 22 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 );

Expand Down Expand Up @@ -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>
);
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ export default function ColorVariations( { title, gap = 2 } ) {
variation={ variation }
isPill
property="color"
showTooltip
>
{ () => <StylesPreviewColors /> }
</Variation>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export default function TypographyVariations( { title, gap = 2 } ) {
key={ index }
variation={ variation }
property="typography"
showTooltip
>
{ ( isFocused ) => (
<PreviewIframe
Expand Down

0 comments on commit 1ee2e3c

Please sign in to comment.