Iterate on the popover behavior

WordPress · Aug 11, 2022 · ecf677b · ecf677b
1 parent e107ec9
commit ecf677b
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
@@ -117,15 +117,24 @@ export function CustomColorPickerDropdown( {
 	popoverProps: receivedPopoverProps,
 	...props
 } ) {
-	// Open below the control point (centered aligned).
 	const popoverProps = useMemo(
 		() => ( {
 			__unstableShift: true,
-			placement: 'bottom',
-			offset: 8,
+			...( isRenderedInSidebar
+				? {
+						// When in the sidebar: open to the left (stacking)
+						placement: 'left-start',
+						offset: 20,
+						// anchor?
+				  }
+				: {
+						// Default behavior: open below the anchor
+						placement: 'bottom',
+						offset: 8,
+				  } ),
 			...receivedPopoverProps,
 		} ),
-		[ receivedPopoverProps ]
+		[ isRenderedInSidebar, receivedPopoverProps ]
 	);
 
 	return (

diff --git a/packages/components/src/custom-gradient-bar/control-points.js b/packages/components/src/custom-gradient-bar/control-points.js
@@ -75,9 +75,19 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 }
 
 function GradientColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
+	// Open the popover below the gradient control/insertion point
+	const popoverProps = useMemo(
+		() => ( {
+			placement: 'bottom',
+			offset: 8,
+		} ),
+		[]
+	);
+
 	return (
 		<CustomColorPickerDropdown
 			isRenderedInSidebar={ isRenderedInSidebar }
+			popoverProps={ popoverProps }
 			{ ...props }
 		/>
 	);