Border Controls/Color Palette: Ensure popovers remain within small vi…

…ewports (#41930)
WordPress · Jun 29, 2022 · 69f64df · 69f64df
1 parent 0a5bbb4
commit 69f64df
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 2 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -10,7 +10,8 @@
 
 -   Wrapped `ColorIndicator` in a `forwardRef` call ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
 -   `BorderControl`: Improve TypeScript support. ([#41843](https://github.com/WordPress/gutenberg/pull/41843)).
--   `DatePicer`: highlight today's date. ([#41647](https://github.com/WordPress/gutenberg/pull/41647/)).
+-   `DatePicker`: highlight today's date. ([#41647](https://github.com/WordPress/gutenberg/pull/41647/)).
+-   Allow automatic repositioning of `BorderBoxControl` and `ColorPalette` popovers within smaller viewports ([#41930](https://github.com/WordPress/gutenberg/pull/41930)).
 
 ### Internal
 

diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -43,6 +43,7 @@ const BorderBoxControlSplitControls = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 

diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -69,6 +69,7 @@ const BorderBoxControl = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 

diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
@@ -118,7 +118,11 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 			contentClassName="components-color-palette__custom-color-dropdown-content"
 			popoverProps={
 				isRenderedInSidebar
-					? { placement: 'left-start', offset: 20 }
+					? {
+							placement: 'left-start',
+							offset: 20,
+							__unstableShift: true,
+					  }
 					: undefined
 			}
 			{ ...props }