From 0ea691cb1d9c20ab04a56fbfc968649092c074d2 Mon Sep 17 00:00:00 2001
From: brookewp <brooke.kaminski@automattic.com>
Date: Wed, 13 Sep 2023 13:14:03 -0700
Subject: [PATCH] Replace internal Tooltip usage of `position` with `placement`

---
 .../components/border-radius-control/input-controls.js |  2 +-
 .../src/components/media-replace-flow/index.js         |  2 +-
 packages/components/src/box-control/unit-control.tsx   |  2 +-
 packages/components/src/button/index.tsx               | 10 +++++++++-
 packages/components/src/date-time/time/timezone.tsx    |  2 +-
 .../toggle-group-control-option-base/component.tsx     |  2 +-
 .../src/components/page-patterns/grid-item.js          |  4 ++--
 .../sidebar-navigation-screen-patterns/index.js        |  2 +-
 8 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/block-editor/src/components/border-radius-control/input-controls.js b/packages/block-editor/src/components/border-radius-control/input-controls.js
index b33b79a482435..c0c5c672d6364 100644
--- a/packages/block-editor/src/components/border-radius-control/input-controls.js
+++ b/packages/block-editor/src/components/border-radius-control/input-controls.js
@@ -68,7 +68,7 @@ export default function BoxInputControls( {
 					: selectedUnits[ corner ] || selectedUnits.flat;
 
 				return (
-					<Tooltip text={ label } position="top" key={ corner }>
+					<Tooltip text={ label } placement="top" key={ corner }>
 						<div className="components-border-radius-control__tooltip-wrapper">
 							<UnitControl
 								{ ...props }
diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js
index 9010e0a1a9004..c331761af5852 100644
--- a/packages/block-editor/src/components/media-replace-flow/index.js
+++ b/packages/block-editor/src/components/media-replace-flow/index.js
@@ -220,7 +220,7 @@ const MediaReplaceFlow = ( {
 								{ __( 'Current media URL:' ) }
 							</span>
 
-							<Tooltip text={ mediaURL } position="bottom">
+							<Tooltip text={ mediaURL }>
 								<div>
 									<LinkControl
 										value={ { url: mediaURL } }
diff --git a/packages/components/src/box-control/unit-control.tsx b/packages/components/src/box-control/unit-control.tsx
index ea724e9a82a19..24d71cf0d6cd3 100644
--- a/packages/components/src/box-control/unit-control.tsx
+++ b/packages/components/src/box-control/unit-control.tsx
@@ -67,7 +67,7 @@ function Tooltip( {
 	 * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	 */
 	return (
-		<BaseTooltip text={ text } position="top">
+		<BaseTooltip text={ text } placement="top">
 			<div>{ children }</div>
 		</BaseTooltip>
 	);
diff --git a/packages/components/src/button/index.tsx b/packages/components/src/button/index.tsx
index cc91cf4642586..e0fd8e7c91a13 100644
--- a/packages/components/src/button/index.tsx
+++ b/packages/components/src/button/index.tsx
@@ -24,6 +24,7 @@ import Tooltip from '../tooltip';
 import Icon from '../icon';
 import { VisuallyHidden } from '../visually-hidden';
 import type { ButtonProps, DeprecatedButtonProps } from './types';
+import { positionToPlacement } from '../popover/utils';
 
 const disabledEventsOnDisabledButton = [ 'onMouseDown', 'onClick' ] as const;
 
@@ -225,6 +226,13 @@ export function UnforwardedButton(
 			</button>
 		);
 
+	// use floating-ui's `placement` instead of legacy `position`
+	let computedPlacement;
+	// if `tooltipPosition` is defined, compute value to `placement`
+	if ( tooltipPosition !== undefined ) {
+		computedPlacement = positionToPlacement( tooltipPosition );
+	}
+
 	if ( ! shouldShowTooltip ) {
 		return (
 			<>
@@ -248,7 +256,7 @@ export function UnforwardedButton(
 						: label
 				}
 				shortcut={ shortcut }
-				position={ tooltipPosition }
+				placement={ computedPlacement }
 			>
 				{ element }
 			</Tooltip>
diff --git a/packages/components/src/date-time/time/timezone.tsx b/packages/components/src/date-time/time/timezone.tsx
index f878deddaa782..9fac1ec094ed8 100644
--- a/packages/components/src/date-time/time/timezone.tsx
+++ b/packages/components/src/date-time/time/timezone.tsx
@@ -38,7 +38,7 @@ const TimeZone = () => {
 			: `(${ zoneAbbr }) ${ timezone.string.replace( '_', ' ' ) }`;
 
 	return (
-		<Tooltip position="top center" text={ timezoneDetail }>
+		<Tooltip placement="top" text={ timezoneDetail }>
 			<StyledComponent className="components-datetime__timezone">
 				{ zoneAbbr }
 			</StyledComponent>
diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
index 572a4b70785eb..3682aa3a5f1f6 100644
--- a/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
+++ b/packages/components/src/toggle-group-control/toggle-group-control-option-base/component.tsx
@@ -38,7 +38,7 @@ const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id';
 const WithToolTip = ( { showTooltip, text, children }: WithToolTipProps ) => {
 	if ( showTooltip && text ) {
 		return (
-			<Tooltip text={ text } position="top center">
+			<Tooltip text={ text } placement="top">
 				{ children }
 			</Tooltip>
 		);
diff --git a/packages/edit-site/src/components/page-patterns/grid-item.js b/packages/edit-site/src/components/page-patterns/grid-item.js
index a4797b7af4c7d..d1d01e4367edf 100644
--- a/packages/edit-site/src/components/page-patterns/grid-item.js
+++ b/packages/edit-site/src/components/page-patterns/grid-item.js
@@ -179,7 +179,7 @@ function GridItem( { categoryId, item, ...props } ) {
 				>
 					{ itemIcon && ! isNonUserPattern && (
 						<Tooltip
-							position="top center"
+							placement="top"
 							text={ __(
 								'Editing this pattern will also update anywhere it is used'
 							) }
@@ -210,7 +210,7 @@ function GridItem( { categoryId, item, ...props } ) {
 						) }
 						{ item.type === PATTERNS && (
 							<Tooltip
-								position="top center"
+								placement="top"
 								text={ __( 'This pattern cannot be edited.' ) }
 							>
 								<span className="edit-site-patterns__pattern-lock-icon">
diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
index 3b6a6a8110f56..5bea2ef3e7acf 100644
--- a/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
+++ b/packages/edit-site/src/components/sidebar-navigation-screen-patterns/index.js
@@ -68,7 +68,7 @@ function ThemePatternsGroup( { categories, currentCategory, currentType } ) {
 							<Flex justify="left" align="center" gap={ 0 }>
 								{ category.label }
 								<Tooltip
-									position="top center"
+									placement="top"
 									text={ sprintf(
 										// translators: %s: The pattern category name.
 										'"%s" patterns cannot be edited.',