Automattic · kangzj · Sep 27, 2022 · Sep 26, 2022 · Sep 26, 2022 · Sep 26, 2022
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/projects/js-packages/components/changelog/update-icon-tooltip-component b/projects/js-packages/components/changelog/update-icon-tooltip-component
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+IconTooltip: Use click instead of mouseover for summoning
diff --git a/projects/js-packages/components/components/icon-tooltip/index.tsx b/projects/js-packages/components/components/icon-tooltip/index.tsx
@@ -1,7 +1,7 @@
 import { Popover } from '@wordpress/components';
-import { useDebounce } from '@wordpress/compose';
 import classNames from 'classnames';
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
+import Button from '../button';
 import Gridicon from '../gridicon/index';
 import { IconTooltipProps, Placement, Position } from './types';
 
@@ -37,27 +37,10 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 	title,
 	children,
 } ) => {
-	const delay = 300;
 	const POPOVER_HELPER_WIDTH = 124;
 	const [ isVisible, setIsVisible ] = useState( false );
-	const delayedSetIsOver = useDebounce( setIsVisible, delay );
-
-	const createToggleIsOver = ( eventName, isDelayed = false ) => {
-		return event => {
-			event.stopPropagation();
-			event.preventDefault();
-			const _isVisible = [ 'focus', 'mouseenter' ].includes( event.type );
-			if ( _isVisible === isVisible ) {
-				return;
-			}
-
-			if ( isDelayed ) {
-				delayedSetIsOver( _isVisible );
-			} else {
-				setIsVisible( _isVisible );
-			}
-		};
-	};
+	const showTooltip = useCallback( () => setIsVisible( true ), [ setIsVisible ] );
+	const hideTooltip = useCallback( () => setIsVisible( false ), [ setIsVisible ] );
 
 	const args = {
 		// To be compatible with deprecating prop `position`.
@@ -68,6 +51,9 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 		resize: false,
 		flip: false,
 		offset, // The distance (in px) between the anchor and the popover.
+		focusOnMount: 'container' as const,
+		onClose: hideTooltip,
+		className: 'icon-tooltip-container',
 	};
 
 	const wrapperClassNames = classNames( 'icon-tooltip-wrapper', className );
@@ -77,13 +63,9 @@ const IconTooltip: React.FC< IconTooltipProps > = ( {
 
 	return (
 		<div className={ wrapperClassNames } data-testid="icon-tooltip_wrapper">
-			<span
-				style={ { cursor: 'pointer' } }
-				onMouseEnter={ createToggleIsOver( 'onMouseEnter', true ) }
-				onMouseLeave={ createToggleIsOver( 'onMouseLeave' ) }
-			>
+			<Button variant="link" onClick={ showTooltip }>
 				<Gridicon className={ iconClassName } icon={ iconCode } size={ iconSize } />
-			</span>
+			</Button>
 
 			<div className="icon-tooltip-helper" style={ iconShiftBySize }>
 				{ isVisible && (

diff --git a/projects/js-packages/components/components/icon-tooltip/style.scss b/projects/js-packages/components/components/icon-tooltip/style.scss
@@ -64,19 +64,28 @@ $arrow-color: var( --jp-gray );
 	display: inline-block;
 	position: relative;
 	color: var( --jp-black );
+
+	.components-button.is-link:focus:not(:disabled) {
+		box-shadow: none;
+	}
 }
 
 .icon-tooltip-helper {
 	// POPOVER_HELPER_WIDTH
 	width: 124px;
-    height: 18px;
-    position: absolute;
-    top: 0;
+	height: 18px;
+	position: absolute;
+	top: 0;
 	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
-    left: -53px;
+	left: -53px;
 	pointer-events: none;
 }
 
+.icon-tooltip-container {
+	// Recover events
+	pointer-events: all;
+}
+
 .icon-tooltip-title {
 	font-weight: 600;
 	font-size: 16px;
@@ -91,6 +100,4 @@ $arrow-color: var( --jp-gray );
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 24px;
-	// Recover events
-	pointer-events: all;
 }
diff --git a/projects/js-packages/components/components/pricing-table/styles.module.scss b/projects/js-packages/components/components/pricing-table/styles.module.scss
@@ -125,7 +125,7 @@
 	}
 }
 
-.popover-icon {
+.item .popover-icon {
 	fill: var( --jp-gray-20 );
 	flex-shrink: 0;
 }

diff --git a/projects/js-packages/components/package.json b/projects/js-packages/components/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.21.1-alpha",
+	"version": "0.22.0-alpha",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",

diff --git a/projects/js-packages/connection/changelog/update-icon-tooltip-component b/projects/js-packages/connection/changelog/update-icon-tooltip-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/connection/package.json b/projects/js-packages/connection/package.json
@@ -1,13 +1,13 @@
 {
 	"name": "@automattic/jetpack-connection",
-	"version": "0.21.0",
+	"version": "0.21.1-alpha",
 	"description": "Jetpack Connection Component",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
 	"dependencies": {
 		"@automattic/jetpack-analytics": "workspace:* || ^0.1",
 		"@automattic/jetpack-config": "workspace:* || ^0.1",
-		"@automattic/jetpack-components": "workspace:* || ^0.21",
+		"@automattic/jetpack-components": "workspace:* || ^0.22",
 		"@automattic/jetpack-api": "workspace:* || ^0.14",
 		"@wordpress/base-styles": "4.7.0",
 		"@wordpress/browserslist-config": "5.0.0",

diff --git a/projects/js-packages/idc/changelog/update-icon-tooltip-component b/projects/js-packages/idc/changelog/update-icon-tooltip-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/idc/package.json b/projects/js-packages/idc/package.json
@@ -8,7 +8,7 @@
 		"@automattic/jetpack-analytics": "workspace:* || ^0.1",
 		"@automattic/jetpack-api": "workspace:* || ^0.14",
 		"@automattic/jetpack-base-styles": "workspace:* || ^0.3",
-		"@automattic/jetpack-components": "workspace:* || ^0.21",
+		"@automattic/jetpack-components": "workspace:* || ^0.22",
 		"@wordpress/base-styles": "4.7.0",
 		"@wordpress/components": "20.0.0",
 		"@wordpress/compose": "5.14.0",

diff --git a/projects/js-packages/licensing/changelog/update-icon-tooltip-component b/projects/js-packages/licensing/changelog/update-icon-tooltip-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/licensing/package.json b/projects/js-packages/licensing/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-licensing",
-	"version": "0.5.14",
+	"version": "0.5.15-alpha",
 	"description": "Jetpack licensing flow",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/licensing/#readme",
 	"bugs": {
@@ -21,7 +21,7 @@
 	},
 	"dependencies": {
 		"@automattic/jetpack-api": "workspace:* || ^0.14",
-		"@automattic/jetpack-components": "workspace:* || ^0.21",
+		"@automattic/jetpack-components": "workspace:* || ^0.22",
 		"@wordpress/components": "20.0.0",
 		"@wordpress/element": "4.14.0",
 		"@wordpress/i18n": "4.16.0",

diff --git a/projects/js-packages/partner-coupon/changelog/update-icon-tooltip-component b/projects/js-packages/partner-coupon/changelog/update-icon-tooltip-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/partner-coupon/package.json b/projects/js-packages/partner-coupon/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-partner-coupon",
-	"version": "0.2.27",
+	"version": "0.2.28-alpha",
 	"description": "This package aims to add components to make it easier to redeem partner coupons",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/partner-coupon/#readme",
 	"bugs": {
@@ -42,7 +42,7 @@
 		"react-dom": "17.0.2"
 	},
 	"dependencies": {
-		"@automattic/jetpack-components": "workspace:* || ^0.21",
+		"@automattic/jetpack-components": "workspace:* || ^0.22",
 		"@automattic/jetpack-connection": "workspace:* || ^0.21",
 		"@wordpress/i18n": "4.16.0",
 		"classnames": "2.3.1",

diff --git a/projects/js-packages/publicize-components/changelog/update-icon-tooltip-component b/projects/js-packages/publicize-components/changelog/update-icon-tooltip-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/publicize-components/package.json b/projects/js-packages/publicize-components/package.json
@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.7.0",
+	"version": "0.7.1-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {
@@ -19,7 +19,7 @@
 		"test-coverage": "pnpm run test --coverageDirectory=\"$COVERAGE_DIR\" --coverage --coverageReporters=clover"
 	},
 	"dependencies": {
-		"@automattic/jetpack-components": "workspace:* || ^0.21",
+		"@automattic/jetpack-components": "workspace:* || ^0.22",
 		"@automattic/jetpack-shared-extension-utils": "workspace:* || ^0.6",
 		"@automattic/social-previews": "1.1.5",
 		"@wordpress/annotations": "2.16.0",

diff --git a/projects/js-packages/storybook/changelog/update-icon-tooltip-component b/projects/js-packages/storybook/changelog/update-icon-tooltip-component
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/storybook/package.json b/projects/js-packages/storybook/package.json
@@ -22,7 +22,7 @@
 		"test-coverage": "jest tests/ --coverage --collectCoverageFrom='src/**/*.js' --coverageDirectory=\"$COVERAGE_DIR\" --coverageReporters=clover"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-components": "workspace:* || ^0.21",
+		"@automattic/jetpack-components": "workspace:* || ^0.22",
 		"@babel/core": "7.18.13",
 		"@babel/plugin-syntax-jsx": "7.18.6",
 		"@babel/preset-react": "7.18.6",