Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

URLPopover: use new placement prop instead of legacy position prop #44391

Merged
merged 4 commits into from
Nov 3, 2022
Merged

URLPopover: use new placement prop instead of legacy position prop #44391

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4530bc1
URLPopover: use new placement prop instead of legacy position prop
ciampo Sep 22, 2022
4a172e6
Restore (and deprecate) position prop, while still introducing `place…
ciampo Nov 1, 2022
50794f7
Remove `position`s default value
ciampo Nov 1, 2022
e149eef
Give priority to `placement` when both `placement` and `position` are…
ciampo Nov 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions packages/block-editor/src/components/url-popover/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,13 +94,13 @@ class MyURLPopover extends Component {

The component accepts the following props. Any other props are passed through to the underlying `Popover` component ([refer to props documentation](/packages/components/src/popover/README.md)).

### position
### placement

Where the Popover should be positioned relative to its parent. Defaults to "bottom center".
Where the Popover should be positioned relative to its parent. Defaults to "bottom".

- Type: `String`
- Required: No
- Default: "bottom center"
- Default: "bottom"

### focusOnMount

Expand Down Expand Up @@ -194,3 +194,12 @@ Reference passed to the auto complete element of the ([URLInput component](/pack

- Type: `Object`
- Required: no

### position

_Note: this prop is deprecated. Please use the `placement` prop instead._

Where the Popover should be positioned relative to its parent.

- Type: `String`
- Required: No
36 changes: 33 additions & 3 deletions packages/block-editor/src/components/url-popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,53 @@
*/
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { Button, Popover } from '@wordpress/components';
import {
Button,
Popover,
__experimentalPopoverPositionToPlacement as positionToPlacement,
} from '@wordpress/components';
import { chevronDown } from '@wordpress/icons';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
*/
import LinkViewer from './link-viewer';
import LinkEditor from './link-editor';

const DEFAULT_PLACEMENT = 'bottom';

function URLPopover( {
additionalControls,
children,
renderSettings,
position = 'bottom center',
// The DEFAULT_PLACEMENT value is assigned inside the function's body
placement,
focusOnMount = 'firstElement',
// Deprecated
position,
// Rest
...popoverProps
} ) {
if ( position !== undefined ) {
deprecated( '`position` prop in wp.blockEditor.URLPopover', {
since: '6.2',
alternative: '`placement` prop',
} );
}

// Compute popover's placement:
// - give priority to `placement` prop, if defined
// - otherwise, compute it from the legacy `position` prop (if defined)
// - finally, fallback to the DEFAULT_PLACEMENT.
let computedPlacement;
if ( placement !== undefined ) {
computedPlacement = placement;
} else if ( position !== undefined ) {
computedPlacement = positionToPlacement( position );
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Extreme nit, but with that order of logic, if someone passes both position and placement, the deprecated prop will take precedence. Should we do this only if placement is not specified?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since I moved the default value from position to placement, the placement prop can't really be undefined in the function's body. Therefore, in order to maintain backwards compat, I decided to implement the current logic.

I could refactor the logic and:

  • move the default value assignment of placement from the prop destructuring to later in the function body
  • make it so that when both placement and position are defined, placement takes the precedence

Let me know if this sounds like a good idea to you! If so, I'll go ahead and implement it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What you suggested sounds good! I'll leave it to your judgment whether to implement it before merging.

Copy link
Contributor Author

@ciampo ciampo Nov 3, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pushed e149eef with those changes, let me know if it looks good to you!

}
computedPlacement = computedPlacement || DEFAULT_PLACEMENT;

const [ isSettingsExpanded, setIsSettingsExpanded ] = useState( false );

const showSettings = !! renderSettings && isSettingsExpanded;
Expand All @@ -32,7 +62,7 @@ function URLPopover( {
<Popover
className="block-editor-url-popover"
focusOnMount={ focusOnMount }
position={ position }
placement={ computedPlacement }
shift
{ ...popoverProps }
>
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,7 @@ export { default as PanelHeader } from './panel/header';
export { default as PanelRow } from './panel/row';
export { default as Placeholder } from './placeholder';
export { default as Popover } from './popover';
export { positionToPlacement as __experimentalPopoverPositionToPlacement } from './popover/utils';
export { default as QueryControls } from './query-controls';
export { default as __experimentalRadio } from './radio-group/radio';
export { default as __experimentalRadioGroup } from './radio-group';
Expand Down