Skip to content

Commit

Permalink
Stabilize flip and resize
Browse files Browse the repository at this point in the history
  • Loading branch information
talldan committed Aug 30, 2022
1 parent 436ca08 commit 811c026
Show file tree
Hide file tree
Showing 8 changed files with 45 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/block-popover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -66,8 +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 }
__unstableResize={ false }
__unstableFlip={ false }
resize={ false }
flip={ false }
__unstableShift
{ ...props }
className={ classnames(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
};

Expand All @@ -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,
};

Expand Down
3 changes: 2 additions & 1 deletion packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -83,7 +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`: 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)

Expand Down
20 changes: 20 additions & 0 deletions packages/components/src/popover/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
19 changes: 9 additions & 10 deletions packages/components/src/popover/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
import classnames from 'classnames';
import {
useFloating,
flip,
flip as flipMiddleware,
shift,
autoUpdate,
arrow,
Expand Down Expand Up @@ -143,8 +143,8 @@ const Popover = (
expandOnMobile,
onFocusOutside,
__unstableSlotName = SLOT_NAME,
__unstableFlip = true,
__unstableResize = true,
flip = true,
resize = true,
__unstableShift = false,
__unstableForcePosition = false,
...contentProps
Expand All @@ -162,14 +162,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 );
Expand Down Expand Up @@ -248,8 +247,8 @@ const Popover = (
crossAxis: frameOffsetRef.current[ crossAxis ],
};
} ),
__unstableFlip ? flip() : undefined,
__unstableResize
flip ? flipMiddleware() : undefined,
resize
? size( {
apply( sizeProps ) {
const { availableHeight } = sizeProps;
Expand Down
8 changes: 4 additions & 4 deletions packages/components/src/popover/stories/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,8 @@ export default {
options: AVAILABLE_POSITIONS,
},
__unstableSlotName: { control: { type: null } },
__unstableResize: { control: { type: 'boolean' } },
__unstableFlip: { control: { type: 'boolean' } },
resize: { control: { type: 'boolean' } },
flip: { control: { type: 'boolean' } },
__unstableShift: { control: { type: 'boolean' } },
},
};
Expand Down Expand Up @@ -181,8 +181,8 @@ AllPlacements.args = {
),
noArrow: false,
offset: 10,
__unstableResize: false,
__unstableFlip: false,
resize: false,
flip: false,
};

export const DynamicHeight = ( { children, ...args } ) => {
Expand Down
4 changes: 2 additions & 2 deletions packages/widgets/src/blocks/legacy-widget/edit/form.js
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ export default function Form( {
focusOnMount={ false }
placement="right"
offset={ 32 }
__unstableResize={ false }
__unstableFlip={ false }
resize={ false }
flip={ false }
__unstableShift
>
<div
Expand Down

0 comments on commit 811c026

Please sign in to comment.