From 9c389c93a4de5811843349642bd2b3f05f54c264 Mon Sep 17 00:00:00 2001 From: sarayourfriend <24264157+sarayourfriend@users.noreply.github.com> Date: Tue, 27 Apr 2021 05:16:19 -0700 Subject: [PATCH] components: Remove G2 portal and refactor Popover to no longer use G2 (#31209) * components: Remove G2 portal * components: Update popover to no longer use g2 * components: Update Card snapshots for popover --- .../ui/card/test/__snapshots__/index.js.snap | 24 ++++++------ .../components/src/ui/popover/component.js | 10 ++--- packages/components/src/ui/popover/content.js | 6 +-- .../src/ui/popover/stories/index.js | 6 +-- packages/components/src/ui/popover/styles.js | 9 +++-- .../popover/test/__snapshots__/index.js.snap | 28 +++++++------- .../components/src/ui/popover/test/index.js | 2 +- packages/components/src/ui/portal/README.md | 17 --------- .../components/src/ui/portal/component.js | 37 ------------------- packages/components/src/ui/portal/index.js | 1 - .../components/src/ui/portal/test/index.js | 33 ----------------- packages/components/src/ui/utils/space.ts | 5 ++- .../components/src/utils/config-values.js | 10 ++++- packages/components/src/utils/z-index.js | 1 + 14 files changed, 55 insertions(+), 134 deletions(-) delete mode 100644 packages/components/src/ui/portal/README.md delete mode 100644 packages/components/src/ui/portal/component.js delete mode 100644 packages/components/src/ui/portal/index.js delete mode 100644 packages/components/src/ui/portal/test/index.js create mode 100644 packages/components/src/utils/z-index.js diff --git a/packages/components/src/ui/card/test/__snapshots__/index.js.snap b/packages/components/src/ui/card/test/__snapshots__/index.js.snap index 67e1c030f33b34..f050cf1213e1dc 100644 --- a/packages/components/src/ui/card/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/card/test/__snapshots__/index.js.snap @@ -11,8 +11,8 @@ Snapshot Diff: title="WordPress.org" />
* + *:not(marquee) { @@ -168,7 +168,7 @@ exports[`props should render correctly 1`] = ` .emotion-3 { height: auto; max-height: 100%; - padding: 24px,24px; + padding: calc(4px * 3) calc(4px * 3); } .emotion-3:first-of-type { @@ -200,10 +200,10 @@ exports[`props should render correctly 1`] = ` width: 100%; border-color: rgba(0,0,0,0.1); min-height: 44px; - padding-bottom: 8px; - padding-left: 24px; - padding-right: 24px; - padding-top: 8px; + padding-bottom: calc(4px * 1); + padding-left: calc(4px * 3); + padding-right: calc(4px * 3); + padding-top: calc(4px * 1); } .emotion-7 > * + *:not(marquee) { diff --git a/packages/components/src/ui/popover/component.js b/packages/components/src/ui/popover/component.js index 1b802b7c037d7b..bf69f4196dd4ed 100644 --- a/packages/components/src/ui/popover/component.js +++ b/packages/components/src/ui/popover/component.js @@ -1,10 +1,9 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; -import { noop, useUpdateEffect } from '@wp-g2/utils'; +import { noop } from 'lodash'; // eslint-disable-next-line no-restricted-imports -import { PopoverDisclosure, usePopoverState } from 'reakit'; +import { PopoverDisclosure, usePopoverState, Portal } from 'reakit'; /** * WordPress dependencies @@ -14,14 +13,15 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; /** * Internal dependencies */ -import { Portal } from '../portal'; +import { contextConnect, useContextSystem } from '../context'; import { PopoverContext } from './context'; import { usePopoverResizeUpdater } from './utils'; import PopoverContent from './content'; +import { useUpdateEffect } from '../../utils/hooks'; /** * - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function Popover( props, forwardedRef ) { diff --git a/packages/components/src/ui/popover/content.js b/packages/components/src/ui/popover/content.js index f05f66d7ddafdd..06713ecc01bb06 100644 --- a/packages/components/src/ui/popover/content.js +++ b/packages/components/src/ui/popover/content.js @@ -1,8 +1,7 @@ /** * External dependencies */ -import { contextConnect, useContextSystem } from '@wp-g2/context'; -import { css, cx } from '@wp-g2/styles'; +import { css, cx } from 'emotion'; // eslint-disable-next-line no-restricted-imports import { Popover as ReakitPopover } from 'reakit'; @@ -13,10 +12,11 @@ import { Card } from '../card'; import { View } from '../view'; import { usePopoverContext } from './context'; import * as styles from './styles'; +import { contextConnect, useContextSystem } from '../context'; /** * - * @param {import('@wp-g2/create-styles').ViewOwnProps} props + * @param {import('../context').ViewOwnProps} props * @param {import('react').Ref} forwardedRef */ function PopoverContent( props, forwardedRef ) { diff --git a/packages/components/src/ui/popover/stories/index.js b/packages/components/src/ui/popover/stories/index.js index 6151d21e3c0219..68a5dde9add305 100644 --- a/packages/components/src/ui/popover/stories/index.js +++ b/packages/components/src/ui/popover/stories/index.js @@ -1,10 +1,8 @@ /** * Internal dependencies */ -/** - * External dependencies - */ -import { Button, CardBody, CardHeader } from '@wp-g2/components'; +import { CardBody, CardHeader } from '../../card'; +import Button from '../../../button'; import { Popover } from '..'; export default { diff --git a/packages/components/src/ui/popover/styles.js b/packages/components/src/ui/popover/styles.js index 4eefa0fdb3efc3..8618e684056baf 100644 --- a/packages/components/src/ui/popover/styles.js +++ b/packages/components/src/ui/popover/styles.js @@ -1,20 +1,23 @@ /** * External dependencies */ -import { css, ui } from '@wp-g2/styles'; +import { css } from 'emotion'; + /** * Internal dependencies */ import { CardBody } from '../card'; +import * as ZIndex from '../../utils/z-index'; +import CONFIG from '../../utils/config-values'; export const PopoverContent = css` - ${ ui.zIndex( 'Popover', 10000 ) }; + z-index: ${ ZIndex.Popover }; box-sizing: border-box; opacity: 0; outline: none; position: relative; transform-origin: center center; - transition: opacity ${ ui.get( 'transitionDurationFastest' ) } linear; + transition: opacity ${ CONFIG.transitionDurationFastest } linear; width: 100%; &[data-enter] { diff --git a/packages/components/src/ui/popover/test/__snapshots__/index.js.snap b/packages/components/src/ui/popover/test/__snapshots__/index.js.snap index 50afe6f2219237..ed81e30a217ff3 100644 --- a/packages/components/src/ui/popover/test/__snapshots__/index.js.snap +++ b/packages/components/src/ui/popover/test/__snapshots__/index.js.snap @@ -11,10 +11,6 @@ exports[`props should render correctly 1`] = ` --wp-g2-surface-background-size-dotted: 11px; } -.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17.emotion-17 .components-card-body { - max-height: 80vh; -} - .emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1.emotion-1 { height: 100%; overflow-x: hidden; @@ -96,6 +92,10 @@ exports[`props should render correctly 1`] = ` border-radius: 2px; } +.emotion-16 .components-card-body { + max-height: 80vh; +} + .emotion-8 { border-radius: 2px; } @@ -103,7 +103,7 @@ exports[`props should render correctly 1`] = ` .emotion-0 { height: auto; max-height: 100%; - padding: 24px,24px; + padding: calc(4px * 3) calc(4px * 3); } .emotion-0:first-of-type { @@ -165,17 +165,17 @@ Snapshot Diff: