Stabilize flip and resize

Author: talldan

packages/block-editor/src/components/block-popover/inbetween.js

@@ -186,8 +186,8 @@ function BlockPopoverInbetween( {
 				'block-editor-block-popover__inbetween',
 				props.className
 			) }
-			__unstableResize={ false }
-			__unstableFlip={ false }
+			resize={ false }
+			flip={ false }
 		>
 			<div style={ style }>{ children }</div>
 		</Popover>

packages/block-editor/src/components/block-popover/index.js

@@ -68,8 +68,8 @@ function BlockPopover(
 			__unstableSlotName={ __unstablePopoverSlot || null }
 			// Observe movement for block animations (especially horizontal).
 			__unstableObserveElement={ selectedElement }
-			__unstableResize={ false }
-			__unstableFlip={ false }
+			resize={ false }
+			flip={ false }
 			__unstableShift
 			{ ...props }
 			className={ classnames(

packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js

@@ -15,8 +15,8 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use-
 // down the toolbar will stay on screen by adopting a sticky position at the
 // top of the viewport.
 const DEFAULT_PROPS = {
-	__unstableResize: false,
-	__unstableFlip: false,
+	resize: false,
+	flip: false,
 	__unstableShift: true,
 };
 
@@ -25,8 +25,8 @@ const DEFAULT_PROPS = {
 // obscured. The `flip` behavior is enabled, which positions the toolbar below
 // the block.
 const RESTRICTED_HEIGHT_PROPS = {
-	__unstableResize: false,
-	__unstableFlip: true,
+	resize: false,
+	flip: true,
 	__unstableShift: false,
 };
 

packages/components/CHANGELOG.md

@@ -27,6 +27,7 @@
 -   `FormTokenField`: Refactor away from `_.difference()` ([#43224](https://github.com/WordPress/gutenberg/pull/43224/)).
 -   `Autocomplete`: use `KeyboardEvent.code` instead of `KeyboardEvent.keyCode` ([#43432](https://github.com/WordPress/gutenberg/pull/43432/)).
 -   `ConfirmDialog`: replace (almost) every usage of `fireEvent` with `@testing-library/user-event`  ([#43429](https://github.com/WordPress/gutenberg/pull/43429/)).
+-   `Popover`: Introduce new `flip` and `resize` props ([#43546](https://github.com/WordPress/gutenberg/pull/43546/)).
 
 ### Internal
 
@@ -62,7 +63,7 @@
 ### Experimental
 
 -   `FormTokenField`: add `__experimentalAutoSelectFirstMatch` prop to auto select the first matching suggestion on typing ([#42527](https://github.com/WordPress/gutenberg/pull/42527/)).
--   `Popover`: Refactor `__unstableForcePosition` to separate `__unstableFlip` and `__unstableResize` props ([#43546](https://github.com/WordPress/gutenberg/pull/43546/)).
+-   `Popover`: Deprecate `__unstableForcePosition`, now replaced by new `flip` and `resize` props ([#43546](https://github.com/WordPress/gutenberg/pull/43546/)).
 
 ## 19.17.0 (2022-08-10)
 

packages/components/src/popover/README.md

@@ -71,6 +71,26 @@ Each of these base placements has an alignment in the form -start and -end. For
 -   Required: No
 -   Default: `"bottom-start"`
 
+### flip
+
+Specifies whether the `Popover` should flip across its axis if there isn't space for it in the normal placement.
+
+When the using a 'top' placement, the `Popover` will switch to a 'bottom' placement. When using a 'left' placement, the popover will switch to a 'right' placement.
+
+The `Popover` will retain its alignment of 'start' or 'end' when flipping.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
+### resize
+
+Adjusts the height of the `Popover` to prevent overflow.
+
+-   Type: `Boolean`
+-   Required: No
+-   Default: `true`
+
 ### offset
 
 The distance (in pixels) between the anchor and popover.

packages/components/src/popover/index.js

@@ -5,7 +5,7 @@
 import classnames from 'classnames';
 import {
 	useFloating,
-	flip,
+	flip as flipMiddleware,
 	shift,
 	autoUpdate,
 	arrow,
@@ -144,8 +144,8 @@ const Popover = (
 		onFocusOutside,
 		__unstableSlotName = SLOT_NAME,
 		__unstableObserveElement,
-		__unstableFlip = true,
-		__unstableResize = true,
+		flip = true,
+		resize = true,
 		__unstableShift = false,
 		__unstableForcePosition = false,
 		...contentProps
@@ -163,14 +163,13 @@ const Popover = (
 		deprecated( '__unstableForcePosition prop in Popover component', {
 			since: '6.1',
 			version: '6.3',
-			alternative:
-				'`__unstableFlip={ false }` and  `__unstableResize={ false }`',
+			alternative: '`flip={ false }` and  `resize={ false }`',
 		} );
 
-		// Back-compat, set the `__unstableFlip` and `__unstableResize` props
+		// Back-compat, set the `flip` and `resize` props
 		// to `false` to replicate `__unstableForcePosition`.
-		__unstableFlip = false;
-		__unstableResize = false;
+		flip = false;
+		resize = false;
 	}
 
 	const arrowRef = useRef( null );
@@ -249,8 +248,8 @@ const Popover = (
 				crossAxis: frameOffsetRef.current[ crossAxis ],
 			};
 		} ),
-		__unstableFlip ? flip() : undefined,
-		__unstableResize
+		flip ? flipMiddleware() : undefined,
+		resize
 			? size( {
 					apply( sizeProps ) {
 						const { availableHeight } = sizeProps;

packages/components/src/popover/stories/index.js

@@ -74,8 +74,8 @@ export default {
 		},
 		__unstableSlotName: { control: { type: null } },
 		__unstableObserveElement: { control: { type: null } },
-		__unstableResize: { control: { type: 'boolean' } },
-		__unstableFlip: { control: { type: 'boolean' } },
+		resize: { control: { type: 'boolean' } },
+		flip: { control: { type: 'boolean' } },
 		__unstableShift: { control: { type: 'boolean' } },
 	},
 };
@@ -182,8 +182,8 @@ AllPlacements.args = {
 	),
 	noArrow: false,
 	offset: 10,
-	__unstableResize: false,
-	__unstableFlip: false,
+	resize: false,
+	flip: false,
 };
 
 export const DynamicHeight = ( { children, ...args } ) => {

packages/widgets/src/blocks/legacy-widget/edit/form.js

@@ -105,8 +105,8 @@ export default function Form( {
 					focusOnMount={ false }
 					placement="right"
 					offset={ 32 }
-					__unstableResize={ false }
-					__unstableFlip={ false }
+					resize={ false }
+					flip={ false }
 					__unstableShift
 				>
 					<div