From 7ed83d90103f9a6b7be6f551bfe16272dee18542 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 5 Sep 2022 09:47:48 +0200 Subject: [PATCH 1/7] Popover: add shift prop, deprecate __unstableShift prop --- packages/components/src/popover/index.js | 21 +++++++++++++++++---- 1 file changed, 17 insertions(+), 4 deletions(-) diff --git a/packages/components/src/popover/index.js b/packages/components/src/popover/index.js index eb3607e5b305c..16d47aeddb601 100644 --- a/packages/components/src/popover/index.js +++ b/packages/components/src/popover/index.js @@ -6,7 +6,7 @@ import classnames from 'classnames'; import { useFloating, flip as flipMiddleware, - shift, + shift as shiftMiddleware, autoUpdate, arrow, offset as offsetMiddleware, @@ -162,7 +162,8 @@ const Popover = ( __unstableSlotName = SLOT_NAME, flip = true, resize = true, - __unstableShift = false, + shift = false, + __unstableShift, __unstableForcePosition, ...contentProps }, @@ -188,6 +189,18 @@ const Popover = ( resize = ! __unstableForcePosition; } + let shouldShift = shift; + if ( __unstableShift !== undefined ) { + deprecated( '`__unstableShift` prop in Popover component', { + since: '6.1', + version: '6.3', + alternative: '`shift` prop`', + } ); + + // Back-compat. + shouldShift = __unstableShift; + } + const arrowRef = useRef( null ); const [ fallbackReferenceElement, setFallbackReferenceElement ] = @@ -262,8 +275,8 @@ const Popover = ( }, } ) : undefined, - __unstableShift - ? shift( { + shouldShift + ? shiftMiddleware( { crossAxis: true, limiter: limitShift(), padding: 1, // Necessary to avoid flickering at the edge of the viewport. From 4cbdcc398cc844181fdec80e4102c75305e042ea Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 5 Sep 2022 09:47:59 +0200 Subject: [PATCH 2/7] Update storybook --- packages/components/src/popover/stories/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 68c0488e92ffc..e4f9c90a9c2e4 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -75,7 +75,7 @@ export default { __unstableSlotName: { control: { type: null } }, resize: { control: { type: 'boolean' } }, flip: { control: { type: 'boolean' } }, - __unstableShift: { control: { type: 'boolean' } }, + shift: { control: { type: 'boolean' } }, }, }; From 5b9892adbaf1a4ecc9cac4282a9e762ce06f0d6c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 5 Sep 2022 10:04:44 +0200 Subject: [PATCH 3/7] Refactor __unstableShift to shift prop across the repo --- packages/block-editor/src/components/block-popover/index.js | 2 +- .../components/block-tools/use-block-toolbar-popover-props.js | 4 ++-- .../block-editor/src/components/colors-gradients/dropdown.js | 2 +- packages/block-editor/src/components/url-popover/index.js | 2 +- packages/block-library/src/button/edit.js | 2 +- packages/block-library/src/navigation-submenu/edit.js | 2 +- .../border-box-control-split-controls/component.tsx | 2 +- .../src/border-box-control/border-box-control/component.tsx | 2 +- packages/components/src/color-palette/index.js | 2 +- packages/components/src/tooltip/index.js | 2 +- packages/format-library/src/link/inline.js | 2 +- packages/widgets/src/blocks/legacy-widget/edit/form.js | 2 +- 12 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-popover/index.js b/packages/block-editor/src/components/block-popover/index.js index 06b878e618be1..2a66623e2fbd6 100644 --- a/packages/block-editor/src/components/block-popover/index.js +++ b/packages/block-editor/src/components/block-popover/index.js @@ -68,7 +68,7 @@ function BlockPopover( __unstableSlotName={ __unstablePopoverSlot || null } resize={ false } flip={ false } - __unstableShift + shift { ...props } className={ classnames( 'block-editor-block-popover', 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 36a17506508a2..bea9487e48ca1 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 @@ -16,7 +16,7 @@ import { __unstableUseBlockElement as useBlockElement } from '../block-list/use- // top of the viewport. const DEFAULT_PROPS = { flip: false, - __unstableShift: true, + shift: true, }; // When there isn't enough height between the top of the block and the editor @@ -26,7 +26,7 @@ const DEFAULT_PROPS = { // otherwise the toolbar will be off-screen. const RESTRICTED_HEIGHT_PROPS = { flip: true, - __unstableShift: false, + shift: false, }; /** diff --git a/packages/block-editor/src/components/colors-gradients/dropdown.js b/packages/block-editor/src/components/colors-gradients/dropdown.js index 4de8891a97be9..9c13efba03cdb 100644 --- a/packages/block-editor/src/components/colors-gradients/dropdown.js +++ b/packages/block-editor/src/components/colors-gradients/dropdown.js @@ -120,7 +120,7 @@ export default function ColorGradientSettingsDropdown( { popoverProps = { placement: 'left-start', offset: 36, - __unstableShift: true, + shift: true, }; } diff --git a/packages/block-editor/src/components/url-popover/index.js b/packages/block-editor/src/components/url-popover/index.js index de5760fea5694..38d5e06015ec3 100644 --- a/packages/block-editor/src/components/url-popover/index.js +++ b/packages/block-editor/src/components/url-popover/index.js @@ -33,7 +33,7 @@ function URLPopover( { className="block-editor-url-popover" focusOnMount={ focusOnMount } position={ position } - __unstableShift + shift { ...popoverProps } >
diff --git a/packages/block-library/src/button/edit.js b/packages/block-library/src/button/edit.js index 61e3bfa557e81..97775bc0bcd10 100644 --- a/packages/block-library/src/button/edit.js +++ b/packages/block-library/src/button/edit.js @@ -221,7 +221,7 @@ function ButtonEdit( props ) { anchorRef={ ref?.current } focusOnMount={ isEditingURL ? 'firstElement' : false } __unstableSlotName={ '__unstable-block-tools-after' } - __unstableShift + shift > setIsLinkOpen( false ) } anchorRef={ listItemRef.current } - __unstableShift + shift > ( { - __unstableShift: true, + shift: true, ...( isRenderedInSidebar ? { // When in the sidebar: open to the left (stacking), diff --git a/packages/components/src/tooltip/index.js b/packages/components/src/tooltip/index.js index bef68a9363a21..75508d7a78b78 100644 --- a/packages/components/src/tooltip/index.js +++ b/packages/components/src/tooltip/index.js @@ -79,7 +79,7 @@ const addPopoverToGrandchildren = ( { animate={ false } offset={ offset } anchorRef={ anchorRef } - __unstableShift + shift > { text }
Date: Mon, 5 Sep 2022 10:20:28 +0200 Subject: [PATCH 4/7] snapshots --- .../components/url-popover/test/__snapshots__/index.js.snap | 6 +++--- .../src/color-palette/test/__snapshots__/index.js.snap | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap index f957ca01f4163..fe0b49ae57415 100644 --- a/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap +++ b/packages/block-editor/src/components/url-popover/test/__snapshots__/index.js.snap @@ -2,10 +2,10 @@ exports[`URLPopover matches the snapshot in its default state 1`] = `
Date: Mon, 5 Sep 2022 10:28:49 +0200 Subject: [PATCH 5/7] README --- packages/components/src/popover/README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md index 6dfd1f6bdd724..b200e213846ff 100644 --- a/packages/components/src/popover/README.md +++ b/packages/components/src/popover/README.md @@ -91,6 +91,14 @@ Adjusts the height of the `Popover` to prevent overflow. - Required: No - Default: `true` +### shift + +Enables the `Popover` to shift in order to stay in view when meeting the viewport edges. + +- Type: `Boolean` +- Required: No +- Default: `false` + ### offset The distance (in pixels) between the anchor and popover. From f9a11ed960308dfb5f5d9e0d8ffbcf28fa1b2911 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 5 Sep 2022 10:33:51 +0200 Subject: [PATCH 6/7] CHANGELOG --- packages/components/CHANGELOG.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 47159ec62d079..1e545e0d6c77f 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,13 +9,14 @@ ### Enhancements -- `ToggleControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43717](https://github.com/WordPress/gutenberg/pull/43717)). +- `ToggleControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43717](https://github.com/WordPress/gutenberg/pull/43717)). - `CheckboxControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43720](https://github.com/WordPress/gutenberg/pull/43720)). - `TextControl`, `TextareaControl`: Add `__nextHasNoMargin` prop for opting into the new margin-free styles ([#43782](https://github.com/WordPress/gutenberg/pull/43782)). - `RangeControl`: Tweak dark gray marking color to be consistent with the grays in `@wordpress/base-styles` ([#43773](https://github.com/WordPress/gutenberg/pull/43773)). - `UnitControl`: Tweak unit dropdown color to be consistent with the grays in `@wordpress/base-styles` ([#43773](https://github.com/WordPress/gutenberg/pull/43773)). - `CardHeader`, `CardBody`, `CardFooter`: Tweak `isShady` background colors to be consistent with the grays in `@wordpress/base-styles` ([#43719](https://github.com/WordPress/gutenberg/pull/43719)). - `InputControl`, `SelectControl`: Tweak `disabled` colors to be consistent with the grays in `@wordpress/base-styles` ([#43719](https://github.com/WordPress/gutenberg/pull/43719)). +- `Popover`: stabilize `__unstableShift` to `shift` ([#43845](https://github.com/WordPress/gutenberg/pull/43845)). ### Internal @@ -23,7 +24,7 @@ - `ToggleGroupControl`: Rename `__experimentalIsIconGroup` prop to `__experimentalIsBorderless` ([#43771](https://github.com/WordPress/gutenberg/pull/43771/)). - Refactor `FocalPointPicker` to function component ([#39168](https://github.com/WordPress/gutenberg/pull/39168)). - `Guide`: use `code` instead of `keyCode` for keyboard events ([#43604](https://github.com/WordPress/gutenberg/pull/43604/)). -- `ToggleControl`: Convert to TypeScript and streamline CSS ([#43717](https://github.com/WordPress/gutenberg/pull/43717)). +- `ToggleControl`: Convert to TypeScript and streamline CSS ([#43717](https://github.com/WordPress/gutenberg/pull/43717)). - `Navigation`: use `code` instead of `keyCode` for keyboard events ([#43644](https://github.com/WordPress/gutenberg/pull/43644/)). - `ComboboxControl`: Add unit tests ([#42403](https://github.com/WordPress/gutenberg/pull/42403)). - `NavigableContainer`: use `code` instead of `keyCode` for keyboard events, rewrite tests using RTL and `user-event` ([#43606](https://github.com/WordPress/gutenberg/pull/43606/)). From a8421c519795ef2b496ac9f2387f56a58e8d5148 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 5 Sep 2022 11:46:13 +0200 Subject: [PATCH 7/7] Refactor missed-out instance --- packages/block-library/src/navigation-link/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 57cea79ac78ef..c208d83c1a45e 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -845,7 +845,7 @@ export default function NavigationLinkEdit( { position="bottom center" onClose={ () => setIsLinkOpen( false ) } anchorRef={ listItemRef.current } - __unstableShift + shift >