From 07cc37309fa6c923f99b57b3ad0fb4d496efb5f5 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 29 Apr 2022 18:12:47 +0100 Subject: [PATCH 01/41] Refactor the Popover component to use the floatingUI library --- package-lock.json | 26 +- .../src/components/block-popover/inbetween.js | 1 - .../src/components/block-popover/index.js | 6 +- .../src/components/block-popover/style.scss | 1 + .../components/list-view/drop-indicator.js | 1 - .../rich-text/format-toolbar-container.js | 1 - .../src/components/url-input/index.js | 2 +- packages/components/package.json | 1 + packages/components/src/dropdown/index.js | 1 + packages/components/src/flyout/context.js | 10 - .../src/flyout/flyout-content/component.js | 53 -- .../src/flyout/flyout-content/index.js | 1 - .../components/src/flyout/flyout/README.md | 98 ---- .../components/src/flyout/flyout/component.js | 111 ---- packages/components/src/flyout/flyout/hook.js | 45 -- .../components/src/flyout/flyout/index.js | 2 - packages/components/src/flyout/index.js | 1 - .../components/src/flyout/stories/index.js | 24 - packages/components/src/flyout/styles.ts | 41 -- .../flyout/test/__snapshots__/index.js.snap | 183 ------ packages/components/src/flyout/test/index.js | 103 ---- packages/components/src/flyout/types.ts | 84 --- packages/components/src/flyout/utils.js | 21 - packages/components/src/index.js | 1 - packages/components/src/popover/index.js | 542 +++++------------- packages/components/src/popover/style.scss | 209 +------ packages/components/src/popover/test/utils.js | 304 ---------- packages/components/src/popover/utils.js | 396 ------------- packages/components/src/tooltip/index.js | 1 - packages/nux/src/components/dot-tip/index.js | 1 - .../dot-tip/test/__snapshots__/index.js.snap | 1 - .../src/blocks/legacy-widget/edit/form.js | 2 +- 32 files changed, 196 insertions(+), 2078 deletions(-) delete mode 100644 packages/components/src/flyout/context.js delete mode 100644 packages/components/src/flyout/flyout-content/component.js delete mode 100644 packages/components/src/flyout/flyout-content/index.js delete mode 100644 packages/components/src/flyout/flyout/README.md delete mode 100644 packages/components/src/flyout/flyout/component.js delete mode 100644 packages/components/src/flyout/flyout/hook.js delete mode 100644 packages/components/src/flyout/flyout/index.js delete mode 100644 packages/components/src/flyout/index.js delete mode 100644 packages/components/src/flyout/stories/index.js delete mode 100644 packages/components/src/flyout/styles.ts delete mode 100644 packages/components/src/flyout/test/__snapshots__/index.js.snap delete mode 100644 packages/components/src/flyout/test/index.js delete mode 100644 packages/components/src/flyout/types.ts delete mode 100644 packages/components/src/flyout/utils.js delete mode 100644 packages/components/src/popover/test/utils.js delete mode 100644 packages/components/src/popover/utils.js diff --git a/package-lock.json b/package-lock.json index 7d6071eadea2f..22ffe2813d5ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2724,6 +2724,28 @@ } } }, + "@floating-ui/core": { + "version": "0.6.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-0.6.2.tgz", + "integrity": "sha512-jktYRmZwmau63adUG3GKOAVCofBXkk55S/zQ94XOorAHhwqFIOFAy1rSp2N0Wp6/tGbe9V3u/ExlGZypyY17rg==" + }, + "@floating-ui/dom": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-0.4.5.tgz", + "integrity": "sha512-b+prvQgJt8pieaKYMSJBXHxX/DYwdLsAWxKYqnO5dO2V4oo/TYBZJAUQCVNjTWWsrs6o4VDrNcP9+E70HAhJdw==", + "requires": { + "@floating-ui/core": "^0.6.2" + } + }, + "@floating-ui/react-dom": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-0.6.3.tgz", + "integrity": "sha512-hC+pS5D6AgS2wWjbmSQ6UR6Kpy+drvWGJIri6e1EDGADTPsCaa4KzCgmCczHrQeInx9tqs81EyDmbKJYY2swKg==", + "requires": { + "@floating-ui/dom": "^0.4.5", + "use-isomorphic-layout-effect": "^1.1.1" + } + }, "@gar/promisify": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.2.tgz", @@ -17266,6 +17288,7 @@ "@emotion/serialize": "^1.0.2", "@emotion/styled": "^11.6.0", "@emotion/utils": "1.0.0", + "@floating-ui/react-dom": "0.6.3", "@use-gesture/react": "^10.2.6", "@wordpress/a11y": "file:packages/a11y", "@wordpress/compose": "file:packages/compose", @@ -57866,8 +57889,7 @@ "use-isomorphic-layout-effect": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz", - "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==", - "dev": true + "integrity": "sha512-L7Evj8FGcwo/wpbv/qvSfrkHFtOpCzvM5yl2KVyDJoylVuSvzphiiasmjgQPttIGBAy2WKiBNR98q8w7PiNgKQ==" }, "use-latest": { "version": "1.2.0", diff --git a/packages/block-editor/src/components/block-popover/inbetween.js b/packages/block-editor/src/components/block-popover/inbetween.js index 68fdc8955ee8e..8f686a8a8d302 100644 --- a/packages/block-editor/src/components/block-popover/inbetween.js +++ b/packages/block-editor/src/components/block-popover/inbetween.js @@ -155,7 +155,6 @@ function BlockPopoverInbetween( { return ( { // Render in popover. return ( +
{ renderContent( args ) } diff --git a/packages/components/src/flyout/context.js b/packages/components/src/flyout/context.js deleted file mode 100644 index f1678c99e3efd..0000000000000 --- a/packages/components/src/flyout/context.js +++ /dev/null @@ -1,10 +0,0 @@ -/** - * WordPress dependencies - */ -import { createContext, useContext } from '@wordpress/element'; - -/** - * @type {import('react').Context} - */ -export const FlyoutContext = createContext( {} ); -export const useFlyoutContext = () => useContext( FlyoutContext ); diff --git a/packages/components/src/flyout/flyout-content/component.js b/packages/components/src/flyout/flyout-content/component.js deleted file mode 100644 index e1f415e2dda1b..0000000000000 --- a/packages/components/src/flyout/flyout-content/component.js +++ /dev/null @@ -1,53 +0,0 @@ -/** - * Internal dependencies - */ -import { useFlyoutContext } from '../context'; -import { FlyoutContentView, CardView } from '../styles'; -import { contextConnect, useContextSystem } from '../../ui/context'; - -/** - * - * @param {import('../../ui/context').WordPressComponentProps} props - * @param {import('react').ForwardedRef} forwardedRef forwardedRef - */ -function FlyoutContent( props, forwardedRef ) { - const { - children, - elevation, - maxWidth, - style = {}, - ...otherProps - } = useContextSystem( props, 'FlyoutContent' ); - - const { label, flyoutState } = useFlyoutContext(); - - if ( ! flyoutState ) { - throw new Error( - '`FlyoutContent` must only be used inside a `Flyout`.' - ); - } - - const showContent = flyoutState.visible || flyoutState.animating; - - return ( - - { showContent && ( - - { children } - - ) } - - ); -} - -const ConnectedFlyoutContent = contextConnect( FlyoutContent, 'FlyoutContent' ); - -export default ConnectedFlyoutContent; diff --git a/packages/components/src/flyout/flyout-content/index.js b/packages/components/src/flyout/flyout-content/index.js deleted file mode 100644 index b404d7fd44a81..0000000000000 --- a/packages/components/src/flyout/flyout-content/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './component'; diff --git a/packages/components/src/flyout/flyout/README.md b/packages/components/src/flyout/flyout/README.md deleted file mode 100644 index 49aa328bd6b1f..0000000000000 --- a/packages/components/src/flyout/flyout/README.md +++ /dev/null @@ -1,98 +0,0 @@ -# Flyout - -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- -`Flyout` is a component to render a floating content modal. It is similar in purpose to a tooltip, but renders content of any sort, not only simple text. - -## Usage - -```jsx -import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components'; - -function Example() { - return ( - Show/Hide content }> - Code is Poetry - - ); -} -``` - -## Props - -### `state`: `PopoverStateReturn` - -- Required: No - -### `label`: `string` - -- Required: No - -### `animated`: `boolean` - -Determines if `Flyout` has animations. - -- Required: No -- Default: `true` - -### `animationDuration`: `boolean` - -The duration of `Flyout` animations. - -- Required: No -- Default: `160` - -### `baseId`: `string` - -ID that will serve as a base for all the items IDs. See https://reakit.io/docs/popover/#usepopoverstate - -- Required: No -- Default: `160` - -### `elevation`: `number` - -Size of the elevation shadow. For more information, check out [`Card`](/packages/components/src/card/card/README.md#props). - -- Required: No -- Default: `5` - -### `maxWidth`: `CSSProperties[ 'maxWidth' ]` - -Max-width for the `Flyout` element. - -- Required: No -- Default: `360` - -### `onVisibleChange`: `( ...args: any ) => void` - -Callback for when the `visible` state changes. - -- Required: No - -### `trigger`: `FunctionComponentElement< any >` - -Element that triggers the `visible` state of `Flyout` when clicked. - -```jsx -Greet}> - Hi! I'm Olaf! - -``` - -- Required: Yes - -### `visible`: `boolean` - -Whether `Flyout` is visible. See [the `Reakit` docs](https://reakit.io/docs/popover/#usepopoverstate) for more information. - -- Required: No -- Default: `false` - -### `placement`: `PopperPlacement` - -Position of the popover element. See [the `popper` docs](https://popper.js.org/docs/v1/#popperplacements--codeenumcode) for more information. - -- Required: No -- Default: `auto` diff --git a/packages/components/src/flyout/flyout/component.js b/packages/components/src/flyout/flyout/component.js deleted file mode 100644 index 1ad283d0ab1d6..0000000000000 --- a/packages/components/src/flyout/flyout/component.js +++ /dev/null @@ -1,111 +0,0 @@ -/** - * External dependencies - */ -// eslint-disable-next-line no-restricted-imports -import { PopoverDisclosure, Portal } from 'reakit'; - -/** - * WordPress dependencies - */ -import { useCallback, useMemo, cloneElement } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import { contextConnect } from '../../ui/context'; -import { FlyoutContext } from '../context'; -import { useFlyoutResizeUpdater } from '../utils'; -import FlyoutContent from '../flyout-content'; -import { useUpdateEffect } from '../../utils/hooks'; -import { useFlyout } from './hook'; - -/** - * - * @param {import('../../ui/context').WordPressComponentProps} props - * @param {import('react').ForwardedRef} forwardedRef - */ -function Flyout( props, forwardedRef ) { - const { - children, - elevation, - label, - maxWidth, - onVisibleChange, - trigger, - flyoutState, - ...otherProps - } = useFlyout( props ); - - const resizeListener = useFlyoutResizeUpdater( { - onResize: flyoutState.unstable_update, - } ); - - const uniqueId = `flyout-${ flyoutState.baseId }`; - const labelId = label || uniqueId; - - const contextProps = useMemo( - () => ( { - label: labelId, - flyoutState, - } ), - [ labelId, flyoutState ] - ); - - const triggerContent = useCallback( - ( triggerProps ) => { - return cloneElement( trigger, triggerProps ); - }, - [ trigger ] - ); - - useUpdateEffect( () => { - onVisibleChange?.( flyoutState.visible ); - }, [ flyoutState.visible ] ); - - return ( - - { trigger && ( - - { triggerContent } - - ) } - - - { resizeListener } - { children } - - - - ); -} - -/** - * `Flyout` is a component to render a floating content modal. - * It is similar in purpose to a tooltip, but renders content of any sort, - * not only simple text. - * - * @example - * ```jsx - * import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components'; - * - * function Example() { - * return ( - * Show/Hide content }> - * Code is Poetry - * - * ); - * } - * ``` - */ -const ConnectedFlyout = contextConnect( Flyout, 'Flyout' ); - -export default ConnectedFlyout; diff --git a/packages/components/src/flyout/flyout/hook.js b/packages/components/src/flyout/flyout/hook.js deleted file mode 100644 index d917c1011f4b9..0000000000000 --- a/packages/components/src/flyout/flyout/hook.js +++ /dev/null @@ -1,45 +0,0 @@ -/** - * External dependencies - */ -// eslint-disable-next-line no-restricted-imports -import { usePopoverState } from 'reakit'; - -/** - * Internal dependencies - */ -import { useContextSystem } from '../../ui/context'; - -/** - * @param {import('../../ui/context').WordPressComponentProps} props - */ -export function useFlyout( props ) { - const { - animated = true, - animationDuration = 160, - baseId, - elevation = 5, - id, - maxWidth = 360, - placement, - state, - visible, - ...otherProps - } = useContextSystem( props, 'Flyout' ); - - const _flyoutState = usePopoverState( { - animated: animated ? animationDuration : undefined, - baseId: baseId || id, - placement, - visible, - ...otherProps, - } ); - - const flyoutState = state || _flyoutState; - - return { - ...otherProps, - elevation, - maxWidth, - flyoutState, - }; -} diff --git a/packages/components/src/flyout/flyout/index.js b/packages/components/src/flyout/flyout/index.js deleted file mode 100644 index ef5d7d27828f8..0000000000000 --- a/packages/components/src/flyout/flyout/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './component'; -export { useFlyout } from './hook'; diff --git a/packages/components/src/flyout/index.js b/packages/components/src/flyout/index.js deleted file mode 100644 index 28e34de445ba0..0000000000000 --- a/packages/components/src/flyout/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Flyout } from './flyout'; diff --git a/packages/components/src/flyout/stories/index.js b/packages/components/src/flyout/stories/index.js deleted file mode 100644 index df8f41b8f279e..0000000000000 --- a/packages/components/src/flyout/stories/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Internal dependencies - */ -import { CardBody, CardHeader } from '../../card'; -import Button from '../../button'; -import { Flyout } from '..'; - -export default { - component: Flyout, - title: 'Components (Experimental)/Flyout', -}; - -export const _default = () => { - return ( - Click } - visible - placement="bottom-start" - > - Go - Stuff - - ); -}; diff --git a/packages/components/src/flyout/styles.ts b/packages/components/src/flyout/styles.ts deleted file mode 100644 index 3ac211d808ffd..0000000000000 --- a/packages/components/src/flyout/styles.ts +++ /dev/null @@ -1,41 +0,0 @@ -/** - * External dependencies - */ -import styled, { StyledComponent } from '@emotion/styled'; -// eslint-disable-next-line no-restricted-imports -import { Popover as ReakitPopover } from 'reakit'; - -/** - * Internal dependencies - */ -import { Card, CardBody } from '../card'; -import * as ZIndex from '../utils/z-index'; -import CONFIG from '../utils/config-values'; - -export const FlyoutContentView: StyledComponent< - React.ComponentPropsWithoutRef< typeof ReakitPopover > -> = styled( ReakitPopover )` - z-index: ${ ZIndex.Flyout }; - box-sizing: border-box; - opacity: 0; - outline: none; - position: relative; - transform-origin: center center; - transition: opacity ${ CONFIG.transitionDurationFastest } linear; - width: 100%; - - &[data-enter] { - opacity: 1; - } - - &::before, - &::after { - display: none; - } -`; - -export const CardView = styled( Card )` - ${ CardBody.selector } { - max-height: 80vh; - } -`; diff --git a/packages/components/src/flyout/test/__snapshots__/index.js.snap b/packages/components/src/flyout/test/__snapshots__/index.js.snap deleted file mode 100644 index 60c6d3fe10500..0000000000000 --- a/packages/components/src/flyout/test/__snapshots__/index.js.snap +++ /dev/null @@ -1,183 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`props should render correctly 1`] = ` -.emotion-1 { - background-color: #fff; - color: #1e1e1e; - position: relative; - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); - outline: none; - border-radius: calc(2px - 1px); -} - -.emotion-1 .components-card-body { - max-height: 80vh; -} - -.emotion-3 { - height: 100%; -} - -.emotion-5 { - box-sizing: border-box; - height: auto; - max-height: 100%; - padding: calc(4px * 4) calc(4px * 6); -} - -.emotion-5:first-of-type { - border-top-left-radius: calc(2px - 1px); - border-top-right-radius: calc(2px - 1px); -} - -.emotion-5:last-of-type { - border-bottom-left-radius: calc(2px - 1px); - border-bottom-right-radius: calc(2px - 1px); -} - -.emotion-7 { - background: transparent; - display: block; - margin: 0!important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: 0; - box-shadow: 0 1px 2px 0 rgba(0 ,0, 0, 0.05); - opacity: 1; - left: 0; - right: 0; - top: 0; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - border-radius: 2px; -} - -@media ( prefers-reduced-motion: reduce ) { - .emotion-7 { - transition-duration: 0ms; - } -} - -.emotion-9 { - background: transparent; - display: block; - margin: 0!important; - pointer-events: none; - position: absolute; - will-change: box-shadow; - border-radius: inherit; - bottom: 0; - box-shadow: 0 5px 10px 0 rgba(0 ,0, 0, 0.25); - opacity: 1; - left: 0; - right: 0; - top: 0; - -webkit-transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - transition: box-shadow 200ms cubic-bezier(0.08, 0.52, 0.52, 1); - border-radius: 2px; -} - -@media ( prefers-reduced-motion: reduce ) { - .emotion-9 { - transition-duration: 0ms; - } -} - -
-
- -