From 15b211aa923efc7e28b074402e2fe6e2ad35bda6 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 11 May 2022 15:20:27 +1000
Subject: [PATCH] Add tooltips to split border radius controls (#40983)

---
 .../border-radius-control/input-controls.js   | 24 ++++++++++++-------
 .../border-radius-control/style.scss          |  2 +-
 2 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 db294c7f8bd1b6..c3136ba562a0e9 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
@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUnitControl as UnitControl } from '@wordpress/components';
+import {
+	__experimentalUnitControl as UnitControl,
+	Tooltip,
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 const CORNERS = {
@@ -39,16 +42,21 @@ export default function BoxInputControls( {
 			  };
 
 	// Controls are wrapped in tooltips as visible labels aren't desired here.
+	// Tooltip rendering also requires the UnitControl to be wrapped. See:
+	// https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026
 	return (
 		<div className="components-border-radius-control__input-controls-wrapper">
 			{ Object.entries( CORNERS ).map( ( [ key, label ] ) => (
-				<UnitControl
-					{ ...props }
-					key={ key }
-					aria-label={ label }
-					value={ values[ key ] }
-					onChange={ createHandleOnChange( key ) }
-				/>
+				<Tooltip text={ label } position="top" key={ key }>
+					<div className="components-border-radius-control__tooltip-wrapper">
+						<UnitControl
+							{ ...props }
+							aria-label={ label }
+							value={ values[ key ] }
+							onChange={ createHandleOnChange( key ) }
+						/>
+					</div>
+				</Tooltip>
 			) ) }
 		</div>
 	);
diff --git a/packages/block-editor/src/components/border-radius-control/style.scss b/packages/block-editor/src/components/border-radius-control/style.scss
index cdb78f37b56de2..7e4f220709924c 100644
--- a/packages/block-editor/src/components/border-radius-control/style.scss
+++ b/packages/block-editor/src/components/border-radius-control/style.scss
@@ -41,7 +41,7 @@
 		width: 70%;
 		flex-wrap: wrap;
 
-		.components-unit-control-wrapper {
+		.components-border-radius-control__tooltip-wrapper {
 			width: calc(50% - #{ $grid-unit-10 });
 			margin-bottom: $grid-unit-10;
 			margin-right: $grid-unit-10;