GradientPicker: always render popover below control point, memoize po…

…poverProps
WordPress · Aug 9, 2022 · 1d30a2a · 1d30a2a
1 parent 16568ea
commit 1d30a2a
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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 }