From 1d30a2a52808ba02ce90780cde8132419dec7c40 Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Tue, 9 Aug 2022 16:17:24 +0200
Subject: [PATCH] GradientPicker: always render popover below control point,
 memoize popoverProps

---
 .../components/src/color-palette/index.js     | 21 +++++++++----------
 .../test/__snapshots__/index.js.snap          |  4 ++++
 .../src/custom-gradient-bar/control-points.js | 13 +++++-------
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index 3fb294bdf68f55..765382232a6a38 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -117,17 +117,16 @@ export function CustomColorPickerDropdown( {
 	popoverProps: receivedPopoverProps,
 	...props
 } ) {
-	const popoverProps = {
-		__unstableShift: true,
-		// Open below the control point (centered aligned) when in the sidebar.
-		...( isRenderedInSidebar
-			? {
-					placement: 'bottom',
-					offset: 10,
-			  }
-			: {} ),
-		...receivedPopoverProps,
-	};
+	// Open below the control point (centered aligned).
+	const popoverProps = useMemo(
+		() => ( {
+			__unstableShift: true,
+			placement: 'bottom',
+			offset: 8,
+			...receivedPopoverProps,
+		} ),
+		[ receivedPopoverProps ]
+	);
 
 	return (
 		<Dropdown
diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 2118f2b9a1bfea..f229e98a0278fa 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -360,6 +360,8 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
   popoverProps={
     Object {
       "__unstableShift": true,
+      "offset": 8,
+      "placement": "bottom",
     }
   }
   renderContent={[Function]}
@@ -736,6 +738,8 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
             popoverProps={
               Object {
                 "__unstableShift": true,
+                "offset": 8,
+                "placement": "bottom",
               }
             }
             renderContent={[Function]}
diff --git a/packages/components/src/custom-gradient-bar/control-points.js b/packages/components/src/custom-gradient-bar/control-points.js
index 79499a2085009e..da83839be23d93 100644
--- a/packages/components/src/custom-gradient-bar/control-points.js
+++ b/packages/components/src/custom-gradient-bar/control-points.js
@@ -74,16 +74,13 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 }
 
 function GradientColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
-	const popoverProps = useMemo( () => {
-		const result = {
+	const popoverProps = useMemo(
+		() => ( {
 			className:
 				'components-custom-gradient-picker__color-picker-popover',
-		};
-		if ( ! isRenderedInSidebar ) {
-			result.placement = 'top';
-		}
-		return result;
-	}, [ isRenderedInSidebar ] );
+		} ),
+		[]
+	);
 	return (
 		<CustomColorPickerDropdown
 			isRenderedInSidebar={ isRenderedInSidebar }