From 37c329794662e7baa580f256f41beaad6ad28f1b Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 25 Aug 2022 10:45:01 +0800 Subject: [PATCH] Stabilize flip and resize --- .../src/components/block-popover/inbetween.js | 4 ++-- .../src/components/block-popover/index.js | 4 ++-- .../use-block-toolbar-popover-props.js | 8 ++++---- packages/components/CHANGELOG.md | 3 ++- packages/components/src/popover/README.md | 20 +++++++++++++++++++ packages/components/src/popover/index.js | 19 +++++++++--------- .../components/src/popover/stories/index.js | 8 ++++---- .../src/blocks/legacy-widget/edit/form.js | 4 ++-- 8 files changed, 45 insertions(+), 25 deletions(-) diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index a658cc5d07705..f68a7532f58b8 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/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 } >
{ children }
diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 059e377ad693f..4196f4b584370 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/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( 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 7b63951fc628e..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 @@ -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, }; diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 9756a21cc4d90..56f2c28c58116 100644 --- a/packages/components/CHANGELOG.md +++ b/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) 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 d39434926df3f..f00bc294d8588 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, @@ -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; diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index d070b0bd0e649..f7c9abcdaa075 100644 --- a/packages/components/src/popover/stories/index.js +++ b/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 } ) => { diff --git a/packages/widgets/src/blocks/legacy-widget/edit/form.js b/packages/widgets/src/blocks/legacy-widget/edit/form.js index 1e4d5688c81b5..0498587f2a3cc 100644 --- a/packages/widgets/src/blocks/legacy-widget/edit/form.js +++ b/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 >