From e9c8e7c4e31fa69c295242eb98c9eaf8aee99088 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Sep 2022 19:51:37 +0200 Subject: [PATCH 1/2] BorderBoxControl: use new `anchor` prop for `Popover` --- .../component.tsx | 29 ++++++++++++------ .../border-box-control/component.tsx | 30 +++++++++++++------ .../src/border-box-control/stories/index.js | 1 + .../src/border-box-control/types.ts | 18 +++++++++-- 4 files changed, 58 insertions(+), 20 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx index d24c0bf2603f9..cc9172e11a19f 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx +++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx @@ -2,7 +2,7 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { useRef } from '@wordpress/element'; +import { useCallback, useState, useEffect } from '@wordpress/element'; import { useMergeRefs } from '@wordpress/compose'; /** @@ -14,7 +14,7 @@ import { Grid } from '../../grid'; import { contextConnect, WordPressComponentProps } from '../../ui/context'; import { useBorderBoxControlSplitControls } from './hook'; -import type { SplitControlsProps } from '../types'; +import type { SplitControlsProps, PopoverPartialProps } from '../types'; const BorderBoxControlSplitControls = ( props: WordPressComponentProps< SplitControlsProps, 'div' >, @@ -36,16 +36,25 @@ const BorderBoxControlSplitControls = ( __next36pxDefaultSize, ...otherProps } = useBorderBoxControlSplitControls( props ); - const containerRef = useRef(); - const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] ); - const popoverProps = popoverPlacement - ? { + const [ popoverProps, setPopoverProps ] = useState< PopoverPartialProps >(); + const [ popoverAnchor, setPopoverAnchor ] = useState< Element >(); + + const containerRef = useCallback( ( node ) => { + setPopoverAnchor( node ); + }, [] ); + + useEffect( () => { + if ( popoverPlacement ) { + setPopoverProps( { placement: popoverPlacement, offset: popoverOffset, - anchorRef: containerRef, + anchor: popoverAnchor, __unstableShift: true, - } - : undefined; + } ); + } else { + setPopoverProps( undefined ); + } + }, [ popoverPlacement, popoverOffset, popoverAnchor ] ); const sharedBorderControlProps = { colors, @@ -58,6 +67,8 @@ const BorderBoxControlSplitControls = ( __next36pxDefaultSize, }; + const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] ); + return ( { @@ -62,16 +62,28 @@ const BorderBoxControl = ( __next36pxDefaultSize = false, ...otherProps } = useBorderBoxControl( props ); - const containerRef = useRef(); - const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] ); - const popoverProps = popoverPlacement - ? { + + const [ popoverProps, setPopoverProps ] = useState< PopoverPartialProps >(); + const [ popoverAnchor, setPopoverAnchor ] = useState< Element >(); + + const containerRef = useCallback( ( node ) => { + setPopoverAnchor( node ); + }, [] ); + + useEffect( () => { + if ( popoverPlacement ) { + setPopoverProps( { placement: popoverPlacement, offset: popoverOffset, - anchorRef: containerRef, + anchor: popoverAnchor, __unstableShift: true, - } - : undefined; + } ); + } else { + setPopoverProps( undefined ); + } + }, [ popoverPlacement, popoverOffset, popoverAnchor ] ); + + const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] ); return ( diff --git a/packages/components/src/border-box-control/stories/index.js b/packages/components/src/border-box-control/stories/index.js index 1f6413fa50ab0..469d6d4d3407f 100644 --- a/packages/components/src/border-box-control/stories/index.js +++ b/packages/components/src/border-box-control/stories/index.js @@ -85,6 +85,7 @@ Default.args = { width: '1px', }, __next36pxDefaultSize: false, + popoverPlacement: 'right-start', }; const WrapperView = styled.div` diff --git a/packages/components/src/border-box-control/types.ts b/packages/components/src/border-box-control/types.ts index 08962f4dac291..f0640bb8a9c40 100644 --- a/packages/components/src/border-box-control/types.ts +++ b/packages/components/src/border-box-control/types.ts @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import type { Placement, ReferenceType } from '@floating-ui/react-dom'; + /** * Internal dependencies */ @@ -14,6 +19,15 @@ export type AnyBorder = Border | Borders | undefined; export type BorderProp = keyof Border; export type BorderSide = keyof Borders; +// TODO: replace with Popover actual props once the component +// gets converted to TypeScript +export type PopoverPartialProps = { + placement?: Placement; + offset?: number; + anchor?: ReferenceType; + __unstableShift?: boolean; +}; + export type BorderBoxControlProps = ColorProps & LabelProps & { /** @@ -29,7 +43,7 @@ export type BorderBoxControlProps = ColorProps & /** * The position of the color popovers compared to the control wrapper. */ - popoverPlacement?: string; + popoverPlacement?: Placement; /** * The space between the popover and the control wrapper. */ @@ -103,7 +117,7 @@ export type SplitControlsProps = ColorProps & { /** * The position of the color popovers compared to the control wrapper. */ - popoverPlacement?: string; + popoverPlacement?: Placement; /** * The space between the popover and the control wrapper. */ From 6eda567a042df3b1c2d4b5c9c05db49fc0095202 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 2 Sep 2022 10:39:52 +0200 Subject: [PATCH 2/2] Make sure anchor value is `undefined` instead of `null` --- .../border-box-control-split-controls/component.tsx | 2 +- .../src/border-box-control/border-box-control/component.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx index cc9172e11a19f..e52e81a4287d9 100644 --- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx +++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx @@ -40,7 +40,7 @@ const BorderBoxControlSplitControls = ( const [ popoverAnchor, setPopoverAnchor ] = useState< Element >(); const containerRef = useCallback( ( node ) => { - setPopoverAnchor( node ); + setPopoverAnchor( node ?? undefined ); }, [] ); useEffect( () => { diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx index 76452a8d7951d..4f219f6ce7031 100644 --- a/packages/components/src/border-box-control/border-box-control/component.tsx +++ b/packages/components/src/border-box-control/border-box-control/component.tsx @@ -67,7 +67,7 @@ const BorderBoxControl = ( const [ popoverAnchor, setPopoverAnchor ] = useState< Element >(); const containerRef = useCallback( ( node ) => { - setPopoverAnchor( node ); + setPopoverAnchor( node ?? undefined ); }, [] ); useEffect( () => {