diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index 37fb597d790b9..f68a7532f58b8 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -186,7 +186,8 @@ function BlockPopoverInbetween( { 'block-editor-block-popover__inbetween', props.className ) } - __unstableForcePosition + resize={ false } + flip={ false } >
{ children }
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 15be18b0a8c82..06b878e618be1 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -66,7 +66,8 @@ function BlockPopover( // Render in the old slot if needed for backward compatibility, // otherwise render in place (not in the default popover slot). __unstableSlotName={ __unstablePopoverSlot || null } - __unstableForcePosition + resize={ false } + flip={ false } __unstableShift { ...props } className={ classnames( diff --git a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js index 3d42e994f5943..fdbf5831ae98a 100644 --- a/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js +++ b/packages/block-editor/src/components/block-tools/use-block-toolbar-popover-props.js @@ -14,14 +14,19 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use- // By default the toolbar sets the `shift` prop. If the user scrolls the page // down the toolbar will stay on screen by adopting a sticky position at the // top of the viewport. -const DEFAULT_PROPS = { __unstableForcePosition: true, __unstableShift: true }; +const DEFAULT_PROPS = { + resize: false, + flip: false, + __unstableShift: true, +}; // When there isn't enough height between the top of the block and the editor // canvas, the `shift` prop is set to `false`, as it will cause the block to be -// obscured. The `flip` behavior is enabled (by setting `forcePosition` to -// `false`), which positions the toolbar below the block. +// obscured. The `flip` behavior is enabled, which positions the toolbar below +// the block. const RESTRICTED_HEIGHT_PROPS = { - __unstableForcePosition: false, + resize: false, + flip: true, __unstableShift: false, }; diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index ca4cc66bc63f5..5459fa35d806a 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -43,6 +43,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 @@ -83,6 +84,7 @@ ### Experimental - `FormTokenField`: add `__experimentalAutoSelectFirstMatch` prop to auto select the first matching suggestion on typing ([#42527](https://github.com/WordPress/gutenberg/pull/42527/)). +- `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) diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md index 3031798a5af9c..6dfd1f6bdd724 100644 --- a/packages/components/src/popover/README.md +++ b/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. diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index 67e7c0abc89e9..269c15d946df3 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -5,7 +5,7 @@ import classnames from 'classnames'; import { useFloating, - flip, + flip as flipMiddleware, shift, autoUpdate, arrow, @@ -143,8 +143,10 @@ const Popover = ( expandOnMobile, onFocusOutside, __unstableSlotName = SLOT_NAME, - __unstableForcePosition = false, + flip = true, + resize = true, __unstableShift = false, + __unstableForcePosition, ...contentProps }, forwardedRef @@ -156,6 +158,19 @@ const Popover = ( } ); } + if ( __unstableForcePosition !== undefined ) { + deprecated( '__unstableForcePosition prop in Popover component', { + since: '6.1', + version: '6.3', + alternative: '`flip={ false }` and `resize={ false }`', + } ); + + // Back-compat, set the `flip` and `resize` props + // to `false` to replicate `__unstableForcePosition`. + flip = ! __unstableForcePosition; + resize = ! __unstableForcePosition; + } + const arrowRef = useRef( null ); const anchorRefFallback = useRef( null ); @@ -232,10 +247,9 @@ const Popover = ( crossAxis: frameOffsetRef.current[ crossAxis ], }; } ), - __unstableForcePosition ? undefined : flip(), - __unstableForcePosition - ? undefined - : size( { + flip ? flipMiddleware() : undefined, + resize + ? size( { apply( sizeProps ) { const { availableHeight } = sizeProps; if ( ! refs.floating.current ) return; @@ -245,7 +259,8 @@ const Popover = ( overflow: 'auto', } ); }, - } ), + } ) + : undefined, __unstableShift ? shift( { crossAxis: true, diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index cc9b3a8e85ed4..ee2991105b130 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -73,7 +73,8 @@ export default { options: AVAILABLE_POSITIONS, }, __unstableSlotName: { control: { type: null } }, - __unstableForcePosition: { control: { type: 'boolean' } }, + resize: { control: { type: 'boolean' } }, + flip: { control: { type: 'boolean' } }, __unstableShift: { control: { type: 'boolean' } }, }, }; @@ -180,7 +181,8 @@ AllPlacements.args = { ), noArrow: false, offset: 10, - __unstableForcePosition: true, + resize: false, + flip: false, }; export const DynamicHeight = ( { children, ...args } ) => { diff --git a/packages/widgets/src/blocks/legacy-widget/edit/form.js b/packages/widgets/src/blocks/legacy-widget/edit/form.js index dd0fcb57baebc..0498587f2a3cc 100644 --- a/packages/widgets/src/blocks/legacy-widget/edit/form.js +++ b/packages/widgets/src/blocks/legacy-widget/edit/form.js @@ -105,7 +105,8 @@ export default function Form( { focusOnMount={ false } placement="right" offset={ 32 } - __unstableForcePosition + resize={ false } + flip={ false } __unstableShift >