Replace Tooltip on Label and checkbox controls (#43513)

* Replace wordpress Tooltip with woocommerce Tooltip

* Add nowrap to links inside tooltip

* Add margin-left to tooltip

* Move logic to handle not opening multiple popovers to inside tooltip component

* Add changelogs

* Remove unused prop

packages/js/components/changelog/update-woo-tooltip

@@ -0,0 +1,5 @@
+Significance: patch
+Type: update
+Comment: Tweak tooltip styles and logic to close
+
+

packages/js/components/src/tooltip/style.scss

@@ -3,12 +3,19 @@
 
     .woocommerce-tooltip__button {
         height: auto;
+		padding: 0;
     }
 
     &__text .components-popover__content {
         font-size: $default-font-size;
         padding: $gap;
         width: max-content;
-    }    
+    }
+
+	&__text {
+		a {
+			white-space: nowrap;
+		}
+	}
 }
 

packages/js/components/src/tooltip/tooltip.tsx

@@ -7,6 +7,7 @@ import { Button, Popover } from '@wordpress/components';
 import { createElement, Fragment, useState } from '@wordpress/element';
 import { FocusEvent, KeyboardEvent } from 'react';
 import { Icon, help } from '@wordpress/icons';
+import { useInstanceId } from '@wordpress/compose';
 
 type Position =
 	| 'top left'
@@ -36,9 +37,19 @@ export const Tooltip: React.FC< TooltipProps > = ( {
 } ) => {
 	const [ isPopoverVisible, setIsPopoverVisible ] = useState( false );
 
+	const uniqueIdentifier = useInstanceId(
+		Tooltip,
+		'product_tooltip'
+	) as string;
+
 	return (
 		<>
-			<div className="woocommerce-tooltip">
+			<div
+				className={ classnames(
+					'woocommerce-tooltip',
+					uniqueIdentifier
+				) }
+			>
 				<Button
 					className={ classnames(
 						'woocommerce-tooltip__button',
@@ -66,7 +77,7 @@ export const Tooltip: React.FC< TooltipProps > = ( {
 						onFocusOutside={ ( event: FocusEvent ) => {
 							if (
 								event.relatedTarget?.classList.contains(
-									className
+									uniqueIdentifier
 								)
 							) {
 								return;

packages/js/product-editor/changelog/update-woo-tooltip

@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Use woocommerce's Tooltip component for Label and checkbox instead of wordpress Tooltip

packages/js/product-editor/src/blocks/generic/section/edit.tsx

@@ -37,7 +37,7 @@ export function SectionBlockEdit( {
 	);
 	const SectionTagName = title ? 'fieldset' : 'div';
 	const HeadingTagName = SectionTagName === 'fieldset' ? 'legend' : 'div';
-	const tooltipClassName = `wp-block-woocommerce-product-section__heading-tooltip-${ clientId }`;
+	const tooltipClassName = `wp-block-woocommerce-product-section__heading-tooltip`;
 
 	return (
 		<SectionTagName { ...blockProps }>

packages/js/product-editor/src/blocks/generic/section/editor.scss

@@ -64,3 +64,7 @@
 		max-width: 300px;
 	}
 }
+
+.woocommerce-tooltip > .wp-block-woocommerce-product-section__heading-tooltip {
+	margin-left: $gap-small;
+}

packages/js/product-editor/src/components/checkbox-control/checkbox-control.tsx

@@ -2,7 +2,8 @@
  * External dependencies
  */
 import { createElement } from '@wordpress/element';
-import { CheckboxControl, Tooltip } from '@wordpress/components';
+import { CheckboxControl } from '@wordpress/components';
+import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
 import { Icon, help } from '@wordpress/icons';
 
 /**
@@ -65,12 +66,9 @@ export const Checkbox: React.FC< CheckboxProps > = ( {
 							></span>
 						}
 						position="top center"
-						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-						// @ts-ignore Incorrect types.
 						className={
 							'woocommerce-product-form__checkbox-tooltip'
 						}
-						delay={ 0 }
 					>
 						<span className="woocommerce-product-form__checkbox-tooltip-icon">
 							<Icon icon={ help } size={ 21.94 } fill="#949494" />

packages/js/product-editor/src/components/label/label.tsx

@@ -4,7 +4,7 @@
 import { createElement, createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, help as helpIcon } from '@wordpress/icons';
-import { Tooltip } from '@wordpress/components';
+import { __experimentalTooltip as Tooltip } from '@woocommerce/components';
 
 /**
  * Internal dependencies
@@ -47,10 +47,7 @@ export const Label: React.FC< LabelProps > = ( {
 						></span>
 					}
 					position="top center"
-					// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-					// @ts-ignore Incorrect types.
 					className={ 'woocommerce-product-form-label__tooltip' }
-					delay={ 0 }
 				>
 					<span className="woocommerce-product-form-label__icon">
 						<Icon icon={ helpIcon } size={ 18 } fill="#949494" />