From e2efe5353d8f0372de8a99473604e2c6c306d748 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 25 May 2021 14:57:47 +0200 Subject: [PATCH 01/25] Move `components/src/ui/popover` to `components/src/accessible-popover` --- .../popover => accessible-popover}/README.md | 10 +++++--- .../component.js | 8 +++---- .../popover => accessible-popover}/content.js | 10 ++++---- .../popover => accessible-popover}/context.js | 0 .../src/accessible-popover/index.js | 2 ++ .../src/accessible-popover/stories/index.js | 24 +++++++++++++++++++ .../popover => accessible-popover}/styles.js | 6 ++--- .../test/__snapshots__/index.js.snap | 0 .../test/index.js | 24 +++++++++---------- .../popover => accessible-popover}/types.ts | 0 .../popover => accessible-popover}/utils.js | 0 packages/components/src/index.js | 1 + .../src/ui/item-group/stories/index.js | 6 ++--- packages/components/src/ui/popover/index.js | 2 -- .../src/ui/popover/stories/index.js | 24 ------------------- 15 files changed, 61 insertions(+), 56 deletions(-) rename packages/components/src/{ui/popover => accessible-popover}/README.md (53%) rename packages/components/src/{ui/popover => accessible-popover}/component.js (90%) rename packages/components/src/{ui/popover => accessible-popover}/content.js (84%) rename packages/components/src/{ui/popover => accessible-popover}/context.js (100%) create mode 100644 packages/components/src/accessible-popover/index.js create mode 100644 packages/components/src/accessible-popover/stories/index.js rename packages/components/src/{ui/popover => accessible-popover}/styles.js (84%) rename packages/components/src/{ui/popover => accessible-popover}/test/__snapshots__/index.js.snap (100%) rename packages/components/src/{ui/popover => accessible-popover}/test/index.js (87%) rename packages/components/src/{ui/popover => accessible-popover}/types.ts (100%) rename packages/components/src/{ui/popover => accessible-popover}/utils.js (100%) delete mode 100644 packages/components/src/ui/popover/index.js delete mode 100644 packages/components/src/ui/popover/stories/index.js diff --git a/packages/components/src/ui/popover/README.md b/packages/components/src/accessible-popover/README.md similarity index 53% rename from packages/components/src/ui/popover/README.md rename to packages/components/src/accessible-popover/README.md index 028d093818749d..be2b68c9b4c298 100644 --- a/packages/components/src/ui/popover/README.md +++ b/packages/components/src/accessible-popover/README.md @@ -1,15 +1,15 @@ -# Popover +# AccessiblePopover
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-`Popover` 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. +`AccessiblePopover` 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, Popover, View, Text } from '@wordpress/components/ui'; +import { Button, __experimentalAccessiblePopover as Popover, View, Text } from '@wordpress/components'; function Example() { return ( @@ -21,3 +21,7 @@ function Example() { ); } ``` + +## Props + +TODO diff --git a/packages/components/src/ui/popover/component.js b/packages/components/src/accessible-popover/component.js similarity index 90% rename from packages/components/src/ui/popover/component.js rename to packages/components/src/accessible-popover/component.js index 83c01e42bdcead..171a3cd3f0611a 100644 --- a/packages/components/src/ui/popover/component.js +++ b/packages/components/src/accessible-popover/component.js @@ -13,16 +13,16 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; /** * Internal dependencies */ -import { contextConnect, useContextSystem } from '../context'; +import { contextConnect, useContextSystem } from '../ui/context'; import { PopoverContext } from './context'; import { usePopoverResizeUpdater } from './utils'; import PopoverContent from './content'; -import { useUpdateEffect } from '../../utils/hooks'; +import { useUpdateEffect } from '../utils/hooks'; /** * - * @param {import('../context').PolymorphicComponentProps} props - * @param {import('react').Ref} forwardedRef + * @param {import('../ui/context').PolymorphicComponentProps} props + * @param {import('react').Ref} forwardedRef */ function Popover( props, forwardedRef ) { const { diff --git a/packages/components/src/ui/popover/content.js b/packages/components/src/accessible-popover/content.js similarity index 84% rename from packages/components/src/ui/popover/content.js rename to packages/components/src/accessible-popover/content.js index cdb29e8c5bd582..4cedc69f8ce322 100644 --- a/packages/components/src/ui/popover/content.js +++ b/packages/components/src/accessible-popover/content.js @@ -11,16 +11,16 @@ import { Popover as ReakitPopover } from 'reakit'; /** * Internal dependencies */ -import { Card } from '../../card'; -import { View } from '../../view'; +import { Card } from '../card'; +import { View } from '../view'; import { usePopoverContext } from './context'; import * as styles from './styles'; -import { contextConnect, useContextSystem } from '../context'; +import { contextConnect, useContextSystem } from '../ui/context'; /** * - * @param {import('../context').PolymorphicComponentProps} props - * @param {import('react').Ref} forwardedRef + * @param {import('../ui/context').PolymorphicComponentProps} props + * @param {import('react').Ref} forwardedRef */ function PopoverContent( props, forwardedRef ) { const { diff --git a/packages/components/src/ui/popover/context.js b/packages/components/src/accessible-popover/context.js similarity index 100% rename from packages/components/src/ui/popover/context.js rename to packages/components/src/accessible-popover/context.js diff --git a/packages/components/src/accessible-popover/index.js b/packages/components/src/accessible-popover/index.js new file mode 100644 index 00000000000000..858abb7227506e --- /dev/null +++ b/packages/components/src/accessible-popover/index.js @@ -0,0 +1,2 @@ +export { default as AccessiblePopover } from './component'; +export * from './context'; diff --git a/packages/components/src/accessible-popover/stories/index.js b/packages/components/src/accessible-popover/stories/index.js new file mode 100644 index 00000000000000..e448781d3c7aae --- /dev/null +++ b/packages/components/src/accessible-popover/stories/index.js @@ -0,0 +1,24 @@ +/** + * Internal dependencies + */ +import { CardBody, CardHeader } from '../../card'; +import Button from '../../button'; +import { AccessiblePopover } from '..'; + +export default { + component: AccessiblePopover, + title: 'Components (Experimental)/AccessiblePopover', +}; + +export const _default = () => { + return ( + Click } + visible + placement="bottom-start" + > + Go + Stuff + + ); +}; diff --git a/packages/components/src/ui/popover/styles.js b/packages/components/src/accessible-popover/styles.js similarity index 84% rename from packages/components/src/ui/popover/styles.js rename to packages/components/src/accessible-popover/styles.js index b3bb67def80ab9..9fddcf5aacf1bb 100644 --- a/packages/components/src/ui/popover/styles.js +++ b/packages/components/src/accessible-popover/styles.js @@ -9,9 +9,9 @@ import { css } from '@emotion/css'; /** * Internal dependencies */ -import { CardBody } from '../../card'; -import * as ZIndex from '../../utils/z-index'; -import CONFIG from '../../utils/config-values'; +import { CardBody } from '../card'; +import * as ZIndex from '../utils/z-index'; +import CONFIG from '../utils/config-values'; export const PopoverContent = css` z-index: ${ ZIndex.Popover }; diff --git a/packages/components/src/ui/popover/test/__snapshots__/index.js.snap b/packages/components/src/accessible-popover/test/__snapshots__/index.js.snap similarity index 100% rename from packages/components/src/ui/popover/test/__snapshots__/index.js.snap rename to packages/components/src/accessible-popover/test/__snapshots__/index.js.snap diff --git a/packages/components/src/ui/popover/test/index.js b/packages/components/src/accessible-popover/test/index.js similarity index 87% rename from packages/components/src/ui/popover/test/index.js rename to packages/components/src/accessible-popover/test/index.js index 0daf3cb16437fa..a0ca05ad576c63 100644 --- a/packages/components/src/ui/popover/test/index.js +++ b/packages/components/src/accessible-popover/test/index.js @@ -6,21 +6,21 @@ import { render, screen } from '@testing-library/react'; /** * Internal dependencies */ -import Button from '../../../button'; -import { CardBody } from '../../../card'; -import { Popover } from '../index'; +import Button from '../../button'; +import { CardBody } from '../../card'; +import { AccessiblePopover } from '..'; describe( 'props', () => { const basePopoverId = 'base-popover'; beforeEach( () => { render( - WordPress.org } visible > Code is Poetry - + ); } ); @@ -33,13 +33,13 @@ describe( 'props', () => { const invisiblePopoverTriggerContent = 'WordPress.org - invisible popover'; render( - { invisiblePopoverTriggerContent } } visible={ false } > Code is Poetry - + ); const popovers = screen.getAllByRole( 'dialog' ); @@ -53,9 +53,9 @@ describe( 'props', () => { test( 'should render without trigger', () => { const triggerlessPopoverId = 'triggerless-popover'; render( - + Code is Poetry - + ); const popovers = screen.getAllByRole( 'dialog' ); const triggerlessPopover = popovers.find( @@ -67,7 +67,7 @@ describe( 'props', () => { test( 'should render without content', () => { const contentlessPopoverId = 'contentless-popover'; render( - WordPress.org } visible @@ -84,14 +84,14 @@ describe( 'props', () => { test( 'should render label', () => { const labelledPopoverId = 'labelled-popover'; render( - WordPress.org } visible > Code is Poetry - + ); const popovers = screen.getAllByRole( 'dialog' ); const labelledPopover = popovers.find( diff --git a/packages/components/src/ui/popover/types.ts b/packages/components/src/accessible-popover/types.ts similarity index 100% rename from packages/components/src/ui/popover/types.ts rename to packages/components/src/accessible-popover/types.ts diff --git a/packages/components/src/ui/popover/utils.js b/packages/components/src/accessible-popover/utils.js similarity index 100% rename from packages/components/src/ui/popover/utils.js rename to packages/components/src/accessible-popover/utils.js diff --git a/packages/components/src/index.js b/packages/components/src/index.js index 6a6097486e6307..ccbbec25436f77 100644 --- a/packages/components/src/index.js +++ b/packages/components/src/index.js @@ -11,6 +11,7 @@ export { } from '@wordpress/primitives'; // Components +export { AccessiblePopover as __experimentalAccessiblePopover } from './accessible-popover'; export { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control'; export { default as Animate, diff --git a/packages/components/src/ui/item-group/stories/index.js b/packages/components/src/ui/item-group/stories/index.js index db38f7489f7d5e..21adfbaff7a394 100644 --- a/packages/components/src/ui/item-group/stories/index.js +++ b/packages/components/src/ui/item-group/stories/index.js @@ -4,7 +4,7 @@ * Internal dependencies */ import { ItemGroup, Item } from '..'; -import { Popover } from '../../popover'; +import { AccessiblePopover } from '../../../accessible-popover'; import Button from '../../../button'; export default { @@ -30,7 +30,7 @@ export const _default = () => ( ); export const dropdown = () => ( - Open Popover } > @@ -48,6 +48,6 @@ export const dropdown = () => ( Code is Poetry — Click me! - + ); /* eslint-enable no-alert */ diff --git a/packages/components/src/ui/popover/index.js b/packages/components/src/ui/popover/index.js deleted file mode 100644 index fe984a96eb127e..00000000000000 --- a/packages/components/src/ui/popover/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default as Popover } from './component'; -export * from './context'; diff --git a/packages/components/src/ui/popover/stories/index.js b/packages/components/src/ui/popover/stories/index.js deleted file mode 100644 index d42bbae04e0316..00000000000000 --- a/packages/components/src/ui/popover/stories/index.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Internal dependencies - */ -import { CardBody, CardHeader } from '../../../card'; -import Button from '../../../button'; -import { Popover } from '..'; - -export default { - component: Popover, - title: 'G2 Components (Experimental)/Popover', -}; - -export const _default = () => { - return ( - Click } - visible - placement="bottom-start" - > - Go - Stuff - - ); -}; From 650deebbae64eee2499476620ee60ccedcec817d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 25 May 2021 15:02:02 +0200 Subject: [PATCH 02/25] Add to Docs manifest --- docs/manifest.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/docs/manifest.json b/docs/manifest.json index ede0e009f199fe..fbf88536b0a543 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -653,6 +653,12 @@ "markdown_source": "../packages/components/README.md", "parent": "reference-guides" }, + { + "title": "AccessiblePopover", + "slug": "accessible-popover", + "markdown_source": "../packages/components/src/accessible-popover/README.md", + "parent": "components" + }, { "title": "AlignmentMatrixControl", "slug": "alignment-matrix-control", From 777f82243bfab9b45261f2596fc2a7819850d7eb Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 25 May 2021 15:02:13 +0200 Subject: [PATCH 03/25] Add to tsconfig.json --- packages/components/tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json index 4b831d54dbaa29..ad3bd21934520d 100644 --- a/packages/components/tsconfig.json +++ b/packages/components/tsconfig.json @@ -19,6 +19,7 @@ ], "include": [ "src/__next/**/*", + "src/accessible-popover/**/*", "src/animate/**/*", "src/base-control/**/*", "src/base-field/**/*", From 83634832825432edaf405edf9a97c60818d36660 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 12:44:49 +0200 Subject: [PATCH 04/25] Rename context-related variables from Popover* to AccessiblePopover* This ensures consistency in the folder, even if the component name is going to change --- packages/components/src/accessible-popover/component.js | 6 +++--- packages/components/src/accessible-popover/content.js | 4 ++-- packages/components/src/accessible-popover/context.js | 5 +++-- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/components/src/accessible-popover/component.js b/packages/components/src/accessible-popover/component.js index 171a3cd3f0611a..24f713f93765d1 100644 --- a/packages/components/src/accessible-popover/component.js +++ b/packages/components/src/accessible-popover/component.js @@ -14,7 +14,7 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; * Internal dependencies */ import { contextConnect, useContextSystem } from '../ui/context'; -import { PopoverContext } from './context'; +import { AccessiblePopoverContext } from './context'; import { usePopoverResizeUpdater } from './utils'; import PopoverContent from './content'; import { useUpdateEffect } from '../utils/hooks'; @@ -79,7 +79,7 @@ function Popover( props, forwardedRef ) { }, [ popover.visible ] ); return ( - + { trigger && ( - + ); } diff --git a/packages/components/src/accessible-popover/content.js b/packages/components/src/accessible-popover/content.js index 4cedc69f8ce322..95f49a833cdb8e 100644 --- a/packages/components/src/accessible-popover/content.js +++ b/packages/components/src/accessible-popover/content.js @@ -13,7 +13,7 @@ import { Popover as ReakitPopover } from 'reakit'; */ import { Card } from '../card'; import { View } from '../view'; -import { usePopoverContext } from './context'; +import { useAccessiblePopoverContext } from './context'; import * as styles from './styles'; import { contextConnect, useContextSystem } from '../ui/context'; @@ -31,7 +31,7 @@ function PopoverContent( props, forwardedRef ) { ...otherProps } = useContextSystem( props, 'PopoverContent' ); - const { label, popover } = usePopoverContext(); + const { label, popover } = useAccessiblePopoverContext(); const classes = cx( styles.PopoverContent, css( { maxWidth } ), className ); if ( ! popover ) { diff --git a/packages/components/src/accessible-popover/context.js b/packages/components/src/accessible-popover/context.js index 902903260a49ab..83120f8c6bd7e1 100644 --- a/packages/components/src/accessible-popover/context.js +++ b/packages/components/src/accessible-popover/context.js @@ -6,5 +6,6 @@ import { createContext, useContext } from '@wordpress/element'; /** * @type {import('react').Context} */ -export const PopoverContext = createContext( {} ); -export const usePopoverContext = () => useContext( PopoverContext ); +export const AccessiblePopoverContext = createContext( {} ); +export const useAccessiblePopoverContext = () => + useContext( AccessiblePopoverContext ); From 8e0d236180c940926af058d81637d3fd87454d15 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 12:45:45 +0200 Subject: [PATCH 05/25] Rename `PopoverContext` type to `Context` --- packages/components/src/accessible-popover/context.js | 2 +- packages/components/src/accessible-popover/types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/accessible-popover/context.js b/packages/components/src/accessible-popover/context.js index 83120f8c6bd7e1..a803590e1f62d6 100644 --- a/packages/components/src/accessible-popover/context.js +++ b/packages/components/src/accessible-popover/context.js @@ -4,7 +4,7 @@ import { createContext, useContext } from '@wordpress/element'; /** - * @type {import('react').Context} + * @type {import('react').Context} */ export const AccessiblePopoverContext = createContext( {} ); export const useAccessiblePopoverContext = () => diff --git a/packages/components/src/accessible-popover/types.ts b/packages/components/src/accessible-popover/types.ts index 45e111bd342554..00bedef681294c 100644 --- a/packages/components/src/accessible-popover/types.ts +++ b/packages/components/src/accessible-popover/types.ts @@ -11,7 +11,7 @@ import type { CSSProperties, FunctionComponentElement } from 'react'; */ import type { PopperProps } from '../utils/types'; -export type PopoverContext = { +export type Context = { popover?: PopoverStateReturn; label?: string; }; From 59c21e408f6b0bbced9bdbbd8dfee6f68b5635cb Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 17:28:08 +0200 Subject: [PATCH 06/25] Rename `PopoverContent` to `AccessiblePopoverContent` --- .../src/accessible-popover/component.js | 6 +++--- .../src/accessible-popover/content.js | 20 +++++++++++-------- .../src/accessible-popover/styles.js | 2 +- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/packages/components/src/accessible-popover/component.js b/packages/components/src/accessible-popover/component.js index 24f713f93765d1..cffd8e830e29c4 100644 --- a/packages/components/src/accessible-popover/component.js +++ b/packages/components/src/accessible-popover/component.js @@ -16,7 +16,7 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; import { contextConnect, useContextSystem } from '../ui/context'; import { AccessiblePopoverContext } from './context'; import { usePopoverResizeUpdater } from './utils'; -import PopoverContent from './content'; +import AccessiblePopoverContent from './content'; import { useUpdateEffect } from '../utils/hooks'; /** @@ -90,7 +90,7 @@ function Popover( props, forwardedRef ) { ) } - { resizeListener } { children } - + ); diff --git a/packages/components/src/accessible-popover/content.js b/packages/components/src/accessible-popover/content.js index 95f49a833cdb8e..20cd48b7558f27 100644 --- a/packages/components/src/accessible-popover/content.js +++ b/packages/components/src/accessible-popover/content.js @@ -22,21 +22,25 @@ import { contextConnect, useContextSystem } from '../ui/context'; * @param {import('../ui/context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ -function PopoverContent( props, forwardedRef ) { +function AccessiblePopoverContent( props, forwardedRef ) { const { children, className, elevation = 5, maxWidth = 360, ...otherProps - } = useContextSystem( props, 'PopoverContent' ); + } = useContextSystem( props, 'AccessiblePopoverContent' ); const { label, popover } = useAccessiblePopoverContext(); - const classes = cx( styles.PopoverContent, css( { maxWidth } ), className ); + const classes = cx( + styles.AccessiblePopoverContent, + css( { maxWidth } ), + className + ); if ( ! popover ) { throw new Error( - '`PopoverContent` must only be used inside a `Popover`.' + '`AccessiblePopoverContent` must only be used inside a `Popover`.' ); } @@ -63,9 +67,9 @@ function PopoverContent( props, forwardedRef ) { ); } -const ConnectedPopoverContent = contextConnect( - PopoverContent, - 'PopoverContent' +const ConnectedAccessiblePopoverContent = contextConnect( + AccessiblePopoverContent, + 'AccessiblePopoverContent' ); -export default ConnectedPopoverContent; +export default ConnectedAccessiblePopoverContent; diff --git a/packages/components/src/accessible-popover/styles.js b/packages/components/src/accessible-popover/styles.js index 9fddcf5aacf1bb..60527877daa733 100644 --- a/packages/components/src/accessible-popover/styles.js +++ b/packages/components/src/accessible-popover/styles.js @@ -13,7 +13,7 @@ import { CardBody } from '../card'; import * as ZIndex from '../utils/z-index'; import CONFIG from '../utils/config-values'; -export const PopoverContent = css` +export const AccessiblePopoverContent = css` z-index: ${ ZIndex.Popover }; box-sizing: border-box; opacity: 0; From 935bc5e3ce95eb35689f8a254ab52d2b06df1e47 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 17:30:37 +0200 Subject: [PATCH 07/25] Move `component.js` to component-specific folder --- docs/manifest.json | 2 +- .../{ => accessible-popover}/README.md | 8 +++----- .../{ => accessible-popover}/component.js | 14 +++++++------- .../accessible-popover/accessible-popover/index.js | 1 + .../components/src/accessible-popover/index.js | 2 +- 5 files changed, 13 insertions(+), 14 deletions(-) rename packages/components/src/accessible-popover/{ => accessible-popover}/README.md (81%) rename packages/components/src/accessible-popover/{ => accessible-popover}/component.js (84%) create mode 100644 packages/components/src/accessible-popover/accessible-popover/index.js diff --git a/docs/manifest.json b/docs/manifest.json index fbf88536b0a543..781443aed4f887 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -656,7 +656,7 @@ { "title": "AccessiblePopover", "slug": "accessible-popover", - "markdown_source": "../packages/components/src/accessible-popover/README.md", + "markdown_source": "../packages/components/src/accessible-popover/accessible-popover/README.md", "parent": "components" }, { diff --git a/packages/components/src/accessible-popover/README.md b/packages/components/src/accessible-popover/accessible-popover/README.md similarity index 81% rename from packages/components/src/accessible-popover/README.md rename to packages/components/src/accessible-popover/accessible-popover/README.md index be2b68c9b4c298..f4ea58304d0239 100644 --- a/packages/components/src/accessible-popover/README.md +++ b/packages/components/src/accessible-popover/accessible-popover/README.md @@ -13,11 +13,9 @@ import { Button, __experimentalAccessiblePopover as Popover, View, Text } from ' function Example() { return ( - Popover }> - - Code is Poetry - - + Show/Hide content }> + Code is Poetry + ); } ``` diff --git a/packages/components/src/accessible-popover/component.js b/packages/components/src/accessible-popover/accessible-popover/component.js similarity index 84% rename from packages/components/src/accessible-popover/component.js rename to packages/components/src/accessible-popover/accessible-popover/component.js index cffd8e830e29c4..8ad4d8056bf0cf 100644 --- a/packages/components/src/accessible-popover/component.js +++ b/packages/components/src/accessible-popover/accessible-popover/component.js @@ -13,16 +13,16 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; /** * Internal dependencies */ -import { contextConnect, useContextSystem } from '../ui/context'; -import { AccessiblePopoverContext } from './context'; -import { usePopoverResizeUpdater } from './utils'; -import AccessiblePopoverContent from './content'; -import { useUpdateEffect } from '../utils/hooks'; +import { contextConnect, useContextSystem } from '../../ui/context'; +import { AccessiblePopoverContext } from '../context'; +import { usePopoverResizeUpdater } from '../utils'; +import AccessiblePopoverContent from '../content'; +import { useUpdateEffect } from '../../utils/hooks'; /** * - * @param {import('../ui/context').PolymorphicComponentProps} props - * @param {import('react').Ref} forwardedRef + * @param {import('../../ui/context').PolymorphicComponentProps} props + * @param {import('react').Ref} forwardedRef */ function Popover( props, forwardedRef ) { const { diff --git a/packages/components/src/accessible-popover/accessible-popover/index.js b/packages/components/src/accessible-popover/accessible-popover/index.js new file mode 100644 index 00000000000000..b404d7fd44a81a --- /dev/null +++ b/packages/components/src/accessible-popover/accessible-popover/index.js @@ -0,0 +1 @@ +export { default } from './component'; diff --git a/packages/components/src/accessible-popover/index.js b/packages/components/src/accessible-popover/index.js index 858abb7227506e..af090c990e5535 100644 --- a/packages/components/src/accessible-popover/index.js +++ b/packages/components/src/accessible-popover/index.js @@ -1,2 +1,2 @@ -export { default as AccessiblePopover } from './component'; +export { default as AccessiblePopover } from './accessible-popover'; export * from './context'; From ed58977983c0a660abff57d4682aa6d0a1dcf018 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 17:35:25 +0200 Subject: [PATCH 08/25] Move `AccessibilePopover` logic to separate hook --- .../accessible-popover/component.js | 46 ++++++------------- .../accessible-popover/hook.js | 45 ++++++++++++++++++ .../accessible-popover/index.js | 1 + 3 files changed, 61 insertions(+), 31 deletions(-) create mode 100644 packages/components/src/accessible-popover/accessible-popover/hook.js diff --git a/packages/components/src/accessible-popover/accessible-popover/component.js b/packages/components/src/accessible-popover/accessible-popover/component.js index 8ad4d8056bf0cf..d556934b1bc0a4 100644 --- a/packages/components/src/accessible-popover/accessible-popover/component.js +++ b/packages/components/src/accessible-popover/accessible-popover/component.js @@ -1,9 +1,8 @@ /** * External dependencies */ -import { noop } from 'lodash'; // eslint-disable-next-line no-restricted-imports -import { PopoverDisclosure, usePopoverState, Portal } from 'reakit'; +import { PopoverDisclosure, Portal } from 'reakit'; /** * WordPress dependencies @@ -13,44 +12,29 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; /** * Internal dependencies */ -import { contextConnect, useContextSystem } from '../../ui/context'; +import { contextConnect } from '../../ui/context'; import { AccessiblePopoverContext } from '../context'; import { usePopoverResizeUpdater } from '../utils'; import AccessiblePopoverContent from '../content'; import { useUpdateEffect } from '../../utils/hooks'; +import { useAccessiblePopover } from './hook'; /** * * @param {import('../../ui/context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ -function Popover( props, forwardedRef ) { +function AccessiblePopover( props, forwardedRef ) { const { - animated = true, - animationDuration = 160, - baseId, children, - elevation = 5, - id, + elevation, label, - maxWidth = 360, - onVisibleChange = noop, - placement, - state, + maxWidth, + onVisibleChange, trigger, - visible, + popover, ...otherProps - } = useContextSystem( props, 'Popover' ); - - const _popover = usePopoverState( { - animated: animated ? animationDuration : undefined, - baseId: baseId || id, - placement, - visible, - ...otherProps, - } ); - - const popover = state || _popover; + } = useAccessiblePopover( props ); const resizeListener = usePopoverResizeUpdater( { onResize: popover.unstable_update, @@ -75,7 +59,7 @@ function Popover( props, forwardedRef ) { ); useUpdateEffect( () => { - onVisibleChange( popover.visible ); + onVisibleChange?.( popover.visible ); }, [ popover.visible ] ); return ( @@ -105,21 +89,21 @@ function Popover( props, forwardedRef ) { } /** - * `Popover` is a component to render a floating content modal. + * `AccessiblePopover` 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, Popover, Text } from `@wordpress/components/ui`; + * import { Button, AccessiblePopover, Text } from `@wordpress/components`; * * function Example() { * return ( - * Popover }> + * Show/Hide content }> * Code is Poetry - * + * * ); * } * ``` */ -export default contextConnect( Popover, 'Popover' ); +export default contextConnect( AccessiblePopover, 'AccessiblePopover' ); diff --git a/packages/components/src/accessible-popover/accessible-popover/hook.js b/packages/components/src/accessible-popover/accessible-popover/hook.js new file mode 100644 index 00000000000000..51dbc275af19bd --- /dev/null +++ b/packages/components/src/accessible-popover/accessible-popover/hook.js @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import { usePopoverState } from 'reakit'; + +/** + * Internal dependencies + */ +import { useContextSystem } from '../../ui/context'; + +/** + * @param {import('../../ui/context').PolymorphicComponentProps} props + */ +export function useAccessiblePopover( props ) { + const { + animated = true, + animationDuration = 160, + baseId, + elevation = 5, + id, + maxWidth = 360, + placement, + state, + visible, + ...otherProps + } = useContextSystem( props, 'AccessiblePopover' ); + + const _popover = usePopoverState( { + animated: animated ? animationDuration : undefined, + baseId: baseId || id, + placement, + visible, + ...otherProps, + } ); + + const popover = state || _popover; + + return { + ...otherProps, + elevation, + maxWidth, + popover, + }; +} diff --git a/packages/components/src/accessible-popover/accessible-popover/index.js b/packages/components/src/accessible-popover/accessible-popover/index.js index b404d7fd44a81a..1c32133c0eb19c 100644 --- a/packages/components/src/accessible-popover/accessible-popover/index.js +++ b/packages/components/src/accessible-popover/accessible-popover/index.js @@ -1 +1,2 @@ export { default } from './component'; +export { useAccessiblePopover } from './hook'; From 083fe449ca5fc071f98dd813f7ef740565e7633c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 17:40:50 +0200 Subject: [PATCH 09/25] Move `content.js` to component-specific folder --- docs/manifest.json | 6 ++++++ .../accessible-popover-content/README.md | 15 +++++++++++++++ .../component.js} | 14 +++++++------- .../accessible-popover-content/index.js | 1 + .../accessible-popover/component.js | 2 +- .../components/src/accessible-popover/index.js | 2 ++ 6 files changed, 32 insertions(+), 8 deletions(-) create mode 100644 packages/components/src/accessible-popover/accessible-popover-content/README.md rename packages/components/src/accessible-popover/{content.js => accessible-popover-content/component.js} (79%) create mode 100644 packages/components/src/accessible-popover/accessible-popover-content/index.js diff --git a/docs/manifest.json b/docs/manifest.json index 781443aed4f887..5dda660d8d8469 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -653,6 +653,12 @@ "markdown_source": "../packages/components/README.md", "parent": "reference-guides" }, + { + "title": "AccessiblePopoverContent", + "slug": "accessible-popover-content", + "markdown_source": "../packages/components/src/accessible-popover/accessible-popover-content/README.md", + "parent": "components" + }, { "title": "AccessiblePopover", "slug": "accessible-popover", diff --git a/packages/components/src/accessible-popover/accessible-popover-content/README.md b/packages/components/src/accessible-popover/accessible-popover-content/README.md new file mode 100644 index 00000000000000..1512ba4ae66d07 --- /dev/null +++ b/packages/components/src/accessible-popover/accessible-popover-content/README.md @@ -0,0 +1,15 @@ +# AccessiblePopoverContent + +
+This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. +
+ +`AccessiblePopoverContent` is a component used by `AccessiblePopover` to render its contents. + +## Usage + +TODO + +## Props + +TODO diff --git a/packages/components/src/accessible-popover/content.js b/packages/components/src/accessible-popover/accessible-popover-content/component.js similarity index 79% rename from packages/components/src/accessible-popover/content.js rename to packages/components/src/accessible-popover/accessible-popover-content/component.js index 20cd48b7558f27..c15a70e28f2a4f 100644 --- a/packages/components/src/accessible-popover/content.js +++ b/packages/components/src/accessible-popover/accessible-popover-content/component.js @@ -11,16 +11,16 @@ import { Popover as ReakitPopover } from 'reakit'; /** * Internal dependencies */ -import { Card } from '../card'; -import { View } from '../view'; -import { useAccessiblePopoverContext } from './context'; -import * as styles from './styles'; -import { contextConnect, useContextSystem } from '../ui/context'; +import { Card } from '../../card'; +import { View } from '../../view'; +import { useAccessiblePopoverContext } from '../context'; +import * as styles from '../styles'; +import { contextConnect, useContextSystem } from '../../ui/context'; /** * - * @param {import('../ui/context').PolymorphicComponentProps} props - * @param {import('react').Ref} forwardedRef + * @param {import('../../ui/context').PolymorphicComponentProps} props + * @param {import('react').Ref} forwardedRef */ function AccessiblePopoverContent( props, forwardedRef ) { const { diff --git a/packages/components/src/accessible-popover/accessible-popover-content/index.js b/packages/components/src/accessible-popover/accessible-popover-content/index.js new file mode 100644 index 00000000000000..b404d7fd44a81a --- /dev/null +++ b/packages/components/src/accessible-popover/accessible-popover-content/index.js @@ -0,0 +1 @@ +export { default } from './component'; diff --git a/packages/components/src/accessible-popover/accessible-popover/component.js b/packages/components/src/accessible-popover/accessible-popover/component.js index d556934b1bc0a4..b416469688a47c 100644 --- a/packages/components/src/accessible-popover/accessible-popover/component.js +++ b/packages/components/src/accessible-popover/accessible-popover/component.js @@ -15,7 +15,7 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; import { contextConnect } from '../../ui/context'; import { AccessiblePopoverContext } from '../context'; import { usePopoverResizeUpdater } from '../utils'; -import AccessiblePopoverContent from '../content'; +import AccessiblePopoverContent from '../accessible-popover-content'; import { useUpdateEffect } from '../../utils/hooks'; import { useAccessiblePopover } from './hook'; diff --git a/packages/components/src/accessible-popover/index.js b/packages/components/src/accessible-popover/index.js index af090c990e5535..93f1691200a212 100644 --- a/packages/components/src/accessible-popover/index.js +++ b/packages/components/src/accessible-popover/index.js @@ -1,2 +1,4 @@ export { default as AccessiblePopover } from './accessible-popover'; +// TODO: should the Content component be exported? +export { default as AccessiblePopoverContent } from './accessible-popover-content'; export * from './context'; From 5c1531066dff503e0262b50991825c0d914c5952 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 17:55:30 +0200 Subject: [PATCH 10/25] Move `AccessibilePopoverContent` logic to separate hook --- .../accessible-popover-content/component.js | 21 +++-------- .../accessible-popover-content/hook.js | 37 +++++++++++++++++++ .../accessible-popover-content/index.js | 1 + 3 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 packages/components/src/accessible-popover/accessible-popover-content/hook.js diff --git a/packages/components/src/accessible-popover/accessible-popover-content/component.js b/packages/components/src/accessible-popover/accessible-popover-content/component.js index c15a70e28f2a4f..f4b2b012cc2fe0 100644 --- a/packages/components/src/accessible-popover/accessible-popover-content/component.js +++ b/packages/components/src/accessible-popover/accessible-popover-content/component.js @@ -1,10 +1,6 @@ /** * External dependencies */ -// Disable reason: Temporarily disable for existing usages -// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css -// eslint-disable-next-line no-restricted-imports -import { css, cx } from '@emotion/css'; // eslint-disable-next-line no-restricted-imports import { Popover as ReakitPopover } from 'reakit'; @@ -15,7 +11,8 @@ import { Card } from '../../card'; import { View } from '../../view'; import { useAccessiblePopoverContext } from '../context'; import * as styles from '../styles'; -import { contextConnect, useContextSystem } from '../../ui/context'; +import { contextConnect } from '../../ui/context'; +import { useAccessiblePopoverContent } from './hook'; /** * @@ -25,22 +22,16 @@ import { contextConnect, useContextSystem } from '../../ui/context'; function AccessiblePopoverContent( props, forwardedRef ) { const { children, - className, - elevation = 5, - maxWidth = 360, + elevation, + classes, ...otherProps - } = useContextSystem( props, 'AccessiblePopoverContent' ); + } = useAccessiblePopoverContent( props ); const { label, popover } = useAccessiblePopoverContext(); - const classes = cx( - styles.AccessiblePopoverContent, - css( { maxWidth } ), - className - ); if ( ! popover ) { throw new Error( - '`AccessiblePopoverContent` must only be used inside a `Popover`.' + '`AccessiblePopoverContent` must only be used inside a `AccessiblePopover`.' ); } diff --git a/packages/components/src/accessible-popover/accessible-popover-content/hook.js b/packages/components/src/accessible-popover/accessible-popover-content/hook.js new file mode 100644 index 00000000000000..8d21033c60a8d6 --- /dev/null +++ b/packages/components/src/accessible-popover/accessible-popover-content/hook.js @@ -0,0 +1,37 @@ +/** + * External dependencies + */ +// Disable reason: Temporarily disable for existing usages +// until we remove them as part of https://github.com/WordPress/gutenberg/issues/30503#deprecating-emotion-css +// eslint-disable-next-line no-restricted-imports +import { css, cx } from '@emotion/css'; + +/** + * Internal dependencies + */ +import { useContextSystem } from '../../ui/context'; +import * as styles from '../styles'; + +/** + * @param {import('../../ui/context').PolymorphicComponentProps} props + */ +export function useAccessiblePopoverContent( props ) { + const { + className, + elevation = 5, + maxWidth = 360, + ...otherProps + } = useContextSystem( props, 'AccessiblePopoverContent' ); + + const classes = cx( + styles.AccessiblePopoverContent, + css( { maxWidth } ), + className + ); + + return { + ...otherProps, + elevation, + classes, + }; +} diff --git a/packages/components/src/accessible-popover/accessible-popover-content/index.js b/packages/components/src/accessible-popover/accessible-popover-content/index.js index b404d7fd44a81a..fd4b25cab348be 100644 --- a/packages/components/src/accessible-popover/accessible-popover-content/index.js +++ b/packages/components/src/accessible-popover/accessible-popover-content/index.js @@ -1 +1,2 @@ export { default } from './component'; +export { useAccessiblePopoverContent } from './hook'; From 1e68e3c824c164bc50eb9cc084e50083d2a8f592 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Fri, 25 Jun 2021 18:26:47 +0200 Subject: [PATCH 11/25] Rename `AccessiblePopover` to `Flyout` --- docs/manifest.json | 24 ++-- .../accessible-popover-content/index.js | 2 - .../accessible-popover/README.md | 25 ----- .../accessible-popover/index.js | 2 - .../src/accessible-popover/index.js | 4 - .../src/accessible-popover/test/index.js | 103 ------------------ .../{accessible-popover => flyout}/context.js | 5 +- .../flyout-content}/README.md | 4 +- .../flyout-content}/component.js | 26 ++--- .../flyout-content}/hook.js | 10 +- .../src/flyout/flyout-content/index.js | 2 + .../components/src/flyout/flyout/README.md | 25 +++++ .../flyout}/component.js | 34 +++--- .../flyout}/hook.js | 4 +- .../components/src/flyout/flyout/index.js | 2 + packages/components/src/flyout/index.js | 4 + .../stories/index.js | 10 +- .../{accessible-popover => flyout}/styles.js | 2 +- .../test/__snapshots__/index.js.snap | 22 ++-- packages/components/src/flyout/test/index.js | 103 ++++++++++++++++++ .../{accessible-popover => flyout}/types.ts | 16 +-- .../{accessible-popover => flyout}/utils.js | 2 +- packages/components/src/index.js | 2 +- .../src/ui/item-group/stories/index.js | 6 +- packages/components/tsconfig.json | 2 +- 25 files changed, 215 insertions(+), 226 deletions(-) delete mode 100644 packages/components/src/accessible-popover/accessible-popover-content/index.js delete mode 100644 packages/components/src/accessible-popover/accessible-popover/README.md delete mode 100644 packages/components/src/accessible-popover/accessible-popover/index.js delete mode 100644 packages/components/src/accessible-popover/index.js delete mode 100644 packages/components/src/accessible-popover/test/index.js rename packages/components/src/{accessible-popover => flyout}/context.js (52%) rename packages/components/src/{accessible-popover/accessible-popover-content => flyout/flyout-content}/README.md (63%) rename packages/components/src/{accessible-popover/accessible-popover-content => flyout/flyout-content}/component.js (63%) rename packages/components/src/{accessible-popover/accessible-popover-content => flyout/flyout-content}/hook.js (76%) create mode 100644 packages/components/src/flyout/flyout-content/index.js create mode 100644 packages/components/src/flyout/flyout/README.md rename packages/components/src/{accessible-popover/accessible-popover => flyout/flyout}/component.js (65%) rename packages/components/src/{accessible-popover/accessible-popover => flyout/flyout}/hook.js (88%) create mode 100644 packages/components/src/flyout/flyout/index.js create mode 100644 packages/components/src/flyout/index.js rename packages/components/src/{accessible-popover => flyout}/stories/index.js (66%) rename packages/components/src/{accessible-popover => flyout}/styles.js (94%) rename packages/components/src/{accessible-popover => flyout}/test/__snapshots__/index.js.snap (89%) create mode 100644 packages/components/src/flyout/test/index.js rename packages/components/src/{accessible-popover => flyout}/types.ts (79%) rename packages/components/src/{accessible-popover => flyout}/utils.js (85%) diff --git a/docs/manifest.json b/docs/manifest.json index 5dda660d8d8469..86c969bae5b7fa 100644 --- a/docs/manifest.json +++ b/docs/manifest.json @@ -653,18 +653,6 @@ "markdown_source": "../packages/components/README.md", "parent": "reference-guides" }, - { - "title": "AccessiblePopoverContent", - "slug": "accessible-popover-content", - "markdown_source": "../packages/components/src/accessible-popover/accessible-popover-content/README.md", - "parent": "components" - }, - { - "title": "AccessiblePopover", - "slug": "accessible-popover", - "markdown_source": "../packages/components/src/accessible-popover/accessible-popover/README.md", - "parent": "components" - }, { "title": "AlignmentMatrixControl", "slug": "alignment-matrix-control", @@ -887,6 +875,18 @@ "markdown_source": "../packages/components/src/flex/flex/README.md", "parent": "components" }, + { + "title": "FlyoutContent", + "slug": "flyout-content", + "markdown_source": "../packages/components/src/flyout/flyout-content/README.md", + "parent": "components" + }, + { + "title": "Flyout", + "slug": "flyout", + "markdown_source": "../packages/components/src/flyout/flyout/README.md", + "parent": "components" + }, { "title": "FocalPointPicker", "slug": "focal-point-picker", diff --git a/packages/components/src/accessible-popover/accessible-popover-content/index.js b/packages/components/src/accessible-popover/accessible-popover-content/index.js deleted file mode 100644 index fd4b25cab348be..00000000000000 --- a/packages/components/src/accessible-popover/accessible-popover-content/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './component'; -export { useAccessiblePopoverContent } from './hook'; diff --git a/packages/components/src/accessible-popover/accessible-popover/README.md b/packages/components/src/accessible-popover/accessible-popover/README.md deleted file mode 100644 index f4ea58304d0239..00000000000000 --- a/packages/components/src/accessible-popover/accessible-popover/README.md +++ /dev/null @@ -1,25 +0,0 @@ -# AccessiblePopover - -
-This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes. -
- -`AccessiblePopover` 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, __experimentalAccessiblePopover as Popover, View, Text } from '@wordpress/components'; - -function Example() { - return ( - Show/Hide content }> - Code is Poetry - - ); -} -``` - -## Props - -TODO diff --git a/packages/components/src/accessible-popover/accessible-popover/index.js b/packages/components/src/accessible-popover/accessible-popover/index.js deleted file mode 100644 index 1c32133c0eb19c..00000000000000 --- a/packages/components/src/accessible-popover/accessible-popover/index.js +++ /dev/null @@ -1,2 +0,0 @@ -export { default } from './component'; -export { useAccessiblePopover } from './hook'; diff --git a/packages/components/src/accessible-popover/index.js b/packages/components/src/accessible-popover/index.js deleted file mode 100644 index 93f1691200a212..00000000000000 --- a/packages/components/src/accessible-popover/index.js +++ /dev/null @@ -1,4 +0,0 @@ -export { default as AccessiblePopover } from './accessible-popover'; -// TODO: should the Content component be exported? -export { default as AccessiblePopoverContent } from './accessible-popover-content'; -export * from './context'; diff --git a/packages/components/src/accessible-popover/test/index.js b/packages/components/src/accessible-popover/test/index.js deleted file mode 100644 index a0ca05ad576c63..00000000000000 --- a/packages/components/src/accessible-popover/test/index.js +++ /dev/null @@ -1,103 +0,0 @@ -/** - * External dependencies - */ -import { render, screen } from '@testing-library/react'; - -/** - * Internal dependencies - */ -import Button from '../../button'; -import { CardBody } from '../../card'; -import { AccessiblePopover } from '..'; - -describe( 'props', () => { - const basePopoverId = 'base-popover'; - beforeEach( () => { - render( - WordPress.org } - visible - > - Code is Poetry - - ); - } ); - - test( 'should render correctly', () => { - const dialog = screen.getByRole( 'dialog' ); - expect( dialog.firstChild ).toMatchSnapshot(); - } ); - - test( 'should render invisible', () => { - const invisiblePopoverTriggerContent = - 'WordPress.org - invisible popover'; - render( - { invisiblePopoverTriggerContent } } - visible={ false } - > - Code is Poetry - - ); - - const popovers = screen.getAllByRole( 'dialog' ); - const trigger = screen.getByText( invisiblePopoverTriggerContent ); - // assert only the base popover rendered - expect( popovers ).toHaveLength( 1 ); - expect( popovers[ 0 ].id ).toBe( basePopoverId ); - expect( trigger ).not.toBeUndefined(); - } ); - - test( 'should render without trigger', () => { - const triggerlessPopoverId = 'triggerless-popover'; - render( - - Code is Poetry - - ); - const popovers = screen.getAllByRole( 'dialog' ); - const triggerlessPopover = popovers.find( - ( p ) => p.id === triggerlessPopoverId - ); - expect( triggerlessPopover ).not.toBeUndefined(); - } ); - - test( 'should render without content', () => { - const contentlessPopoverId = 'contentless-popover'; - render( - WordPress.org } - visible - /> - ); - const popovers = screen.getAllByRole( 'dialog' ); - const contentlessPopover = popovers.find( - ( p ) => p.id === contentlessPopoverId - ); - const basePopover = popovers.find( ( p ) => p.id === basePopoverId ); - expect( contentlessPopover ).toMatchDiffSnapshot( basePopover ); - } ); - - test( 'should render label', () => { - const labelledPopoverId = 'labelled-popover'; - render( - WordPress.org } - visible - > - Code is Poetry - - ); - const popovers = screen.getAllByRole( 'dialog' ); - const labelledPopover = popovers.find( - ( p ) => p.id === labelledPopoverId - ); - const basePopover = popovers.find( ( p ) => p.id === basePopoverId ); - expect( labelledPopover ).toMatchDiffSnapshot( basePopover ); - } ); -} ); diff --git a/packages/components/src/accessible-popover/context.js b/packages/components/src/flyout/context.js similarity index 52% rename from packages/components/src/accessible-popover/context.js rename to packages/components/src/flyout/context.js index a803590e1f62d6..f1678c99e3efd5 100644 --- a/packages/components/src/accessible-popover/context.js +++ b/packages/components/src/flyout/context.js @@ -6,6 +6,5 @@ import { createContext, useContext } from '@wordpress/element'; /** * @type {import('react').Context} */ -export const AccessiblePopoverContext = createContext( {} ); -export const useAccessiblePopoverContext = () => - useContext( AccessiblePopoverContext ); +export const FlyoutContext = createContext( {} ); +export const useFlyoutContext = () => useContext( FlyoutContext ); diff --git a/packages/components/src/accessible-popover/accessible-popover-content/README.md b/packages/components/src/flyout/flyout-content/README.md similarity index 63% rename from packages/components/src/accessible-popover/accessible-popover-content/README.md rename to packages/components/src/flyout/flyout-content/README.md index 1512ba4ae66d07..67b3b9f759bfaa 100644 --- a/packages/components/src/accessible-popover/accessible-popover-content/README.md +++ b/packages/components/src/flyout/flyout-content/README.md @@ -1,10 +1,10 @@ -# AccessiblePopoverContent +# FlyoutContent
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
-`AccessiblePopoverContent` is a component used by `AccessiblePopover` to render its contents. +`FlyoutContent` is a component used by `Flyout` to render its contents. ## Usage diff --git a/packages/components/src/accessible-popover/accessible-popover-content/component.js b/packages/components/src/flyout/flyout-content/component.js similarity index 63% rename from packages/components/src/accessible-popover/accessible-popover-content/component.js rename to packages/components/src/flyout/flyout-content/component.js index f4b2b012cc2fe0..0ffc6044a8e863 100644 --- a/packages/components/src/accessible-popover/accessible-popover-content/component.js +++ b/packages/components/src/flyout/flyout-content/component.js @@ -9,29 +9,26 @@ import { Popover as ReakitPopover } from 'reakit'; */ import { Card } from '../../card'; import { View } from '../../view'; -import { useAccessiblePopoverContext } from '../context'; +import { useFlyoutContext } from '../context'; import * as styles from '../styles'; import { contextConnect } from '../../ui/context'; -import { useAccessiblePopoverContent } from './hook'; +import { useFlyoutContent } from './hook'; /** * * @param {import('../../ui/context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ -function AccessiblePopoverContent( props, forwardedRef ) { - const { - children, - elevation, - classes, - ...otherProps - } = useAccessiblePopoverContent( props ); +function FlyoutContent( props, forwardedRef ) { + const { children, elevation, classes, ...otherProps } = useFlyoutContent( + props + ); - const { label, popover } = useAccessiblePopoverContext(); + const { label, popover } = useFlyoutContext(); if ( ! popover ) { throw new Error( - '`AccessiblePopoverContent` must only be used inside a `AccessiblePopover`.' + '`FlyoutContent` must only be used inside a `Flyout`.' ); } @@ -58,9 +55,6 @@ function AccessiblePopoverContent( props, forwardedRef ) { ); } -const ConnectedAccessiblePopoverContent = contextConnect( - AccessiblePopoverContent, - 'AccessiblePopoverContent' -); +const ConnectedFlyoutContent = contextConnect( FlyoutContent, 'FlyoutContent' ); -export default ConnectedAccessiblePopoverContent; +export default ConnectedFlyoutContent; diff --git a/packages/components/src/accessible-popover/accessible-popover-content/hook.js b/packages/components/src/flyout/flyout-content/hook.js similarity index 76% rename from packages/components/src/accessible-popover/accessible-popover-content/hook.js rename to packages/components/src/flyout/flyout-content/hook.js index 8d21033c60a8d6..d911fa8e4ba494 100644 --- a/packages/components/src/accessible-popover/accessible-popover-content/hook.js +++ b/packages/components/src/flyout/flyout-content/hook.js @@ -15,19 +15,15 @@ import * as styles from '../styles'; /** * @param {import('../../ui/context').PolymorphicComponentProps} props */ -export function useAccessiblePopoverContent( props ) { +export function useFlyoutContent( props ) { const { className, elevation = 5, maxWidth = 360, ...otherProps - } = useContextSystem( props, 'AccessiblePopoverContent' ); + } = useContextSystem( props, 'FlyoutContent' ); - const classes = cx( - styles.AccessiblePopoverContent, - css( { maxWidth } ), - className - ); + const classes = cx( styles.FlyoutContent, css( { maxWidth } ), className ); return { ...otherProps, diff --git a/packages/components/src/flyout/flyout-content/index.js b/packages/components/src/flyout/flyout-content/index.js new file mode 100644 index 00000000000000..5ac991605fd913 --- /dev/null +++ b/packages/components/src/flyout/flyout-content/index.js @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useFlyoutContent } from './hook'; diff --git a/packages/components/src/flyout/flyout/README.md b/packages/components/src/flyout/flyout/README.md new file mode 100644 index 00000000000000..055fc9413aadf5 --- /dev/null +++ b/packages/components/src/flyout/flyout/README.md @@ -0,0 +1,25 @@ +# 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, View, Text } from '@wordpress/components'; + +function Example() { + return ( + Show/Hide content }> + Code is Poetry + + ); +} +``` + +## Props + +TODO diff --git a/packages/components/src/accessible-popover/accessible-popover/component.js b/packages/components/src/flyout/flyout/component.js similarity index 65% rename from packages/components/src/accessible-popover/accessible-popover/component.js rename to packages/components/src/flyout/flyout/component.js index b416469688a47c..94b33374aac330 100644 --- a/packages/components/src/accessible-popover/accessible-popover/component.js +++ b/packages/components/src/flyout/flyout/component.js @@ -13,18 +13,18 @@ import { useCallback, useMemo, cloneElement } from '@wordpress/element'; * Internal dependencies */ import { contextConnect } from '../../ui/context'; -import { AccessiblePopoverContext } from '../context'; -import { usePopoverResizeUpdater } from '../utils'; -import AccessiblePopoverContent from '../accessible-popover-content'; +import { FlyoutContext } from '../context'; +import { useFlyoutResizeUpdater } from '../utils'; +import FlyoutContent from '../flyout-content'; import { useUpdateEffect } from '../../utils/hooks'; -import { useAccessiblePopover } from './hook'; +import { useFlyout } from './hook'; /** * * @param {import('../../ui/context').PolymorphicComponentProps} props * @param {import('react').Ref} forwardedRef */ -function AccessiblePopover( props, forwardedRef ) { +function Flyout( props, forwardedRef ) { const { children, elevation, @@ -34,13 +34,13 @@ function AccessiblePopover( props, forwardedRef ) { trigger, popover, ...otherProps - } = useAccessiblePopover( props ); + } = useFlyout( props ); - const resizeListener = usePopoverResizeUpdater( { + const resizeListener = useFlyoutResizeUpdater( { onResize: popover.unstable_update, } ); - const uniqueId = `popover-${ popover.baseId }`; + const uniqueId = `flyout-${ popover.baseId }`; const labelId = label || uniqueId; const contextProps = useMemo( @@ -63,7 +63,7 @@ function AccessiblePopover( props, forwardedRef ) { }, [ popover.visible ] ); return ( - + { trigger && ( ) } - { resizeListener } { children } - + - + ); } /** - * `AccessiblePopover` is a component to render a floating content modal. + * `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, AccessiblePopover, Text } from `@wordpress/components`; + * import { Button, __experimentalFlyout as Flyout, View, Text } from '@wordpress/components'; * * function Example() { * return ( - * Show/Hide content }> + * Show/Hide content }> * Code is Poetry - * + * * ); * } * ``` */ -export default contextConnect( AccessiblePopover, 'AccessiblePopover' ); +export default contextConnect( Flyout, 'Flyout' ); diff --git a/packages/components/src/accessible-popover/accessible-popover/hook.js b/packages/components/src/flyout/flyout/hook.js similarity index 88% rename from packages/components/src/accessible-popover/accessible-popover/hook.js rename to packages/components/src/flyout/flyout/hook.js index 51dbc275af19bd..b7e8486a163e1c 100644 --- a/packages/components/src/accessible-popover/accessible-popover/hook.js +++ b/packages/components/src/flyout/flyout/hook.js @@ -12,7 +12,7 @@ import { useContextSystem } from '../../ui/context'; /** * @param {import('../../ui/context').PolymorphicComponentProps} props */ -export function useAccessiblePopover( props ) { +export function useFlyout( props ) { const { animated = true, animationDuration = 160, @@ -24,7 +24,7 @@ export function useAccessiblePopover( props ) { state, visible, ...otherProps - } = useContextSystem( props, 'AccessiblePopover' ); + } = useContextSystem( props, 'Flyout' ); const _popover = usePopoverState( { animated: animated ? animationDuration : undefined, diff --git a/packages/components/src/flyout/flyout/index.js b/packages/components/src/flyout/flyout/index.js new file mode 100644 index 00000000000000..ef5d7d27828f85 --- /dev/null +++ b/packages/components/src/flyout/flyout/index.js @@ -0,0 +1,2 @@ +export { default } from './component'; +export { useFlyout } from './hook'; diff --git a/packages/components/src/flyout/index.js b/packages/components/src/flyout/index.js new file mode 100644 index 00000000000000..7dc774ac53392a --- /dev/null +++ b/packages/components/src/flyout/index.js @@ -0,0 +1,4 @@ +export { default as Flyout } from './flyout'; +// TODO: should the Content component be exported? +export { default as FlyoutContent } from './flyout-content'; +export * from './context'; diff --git a/packages/components/src/accessible-popover/stories/index.js b/packages/components/src/flyout/stories/index.js similarity index 66% rename from packages/components/src/accessible-popover/stories/index.js rename to packages/components/src/flyout/stories/index.js index e448781d3c7aae..df8f41b8f279ea 100644 --- a/packages/components/src/accessible-popover/stories/index.js +++ b/packages/components/src/flyout/stories/index.js @@ -3,22 +3,22 @@ */ import { CardBody, CardHeader } from '../../card'; import Button from '../../button'; -import { AccessiblePopover } from '..'; +import { Flyout } from '..'; export default { - component: AccessiblePopover, - title: 'Components (Experimental)/AccessiblePopover', + component: Flyout, + title: 'Components (Experimental)/Flyout', }; export const _default = () => { return ( - Click } visible placement="bottom-start" > Go Stuff - + ); }; diff --git a/packages/components/src/accessible-popover/styles.js b/packages/components/src/flyout/styles.js similarity index 94% rename from packages/components/src/accessible-popover/styles.js rename to packages/components/src/flyout/styles.js index 60527877daa733..a07555d1b89d2e 100644 --- a/packages/components/src/accessible-popover/styles.js +++ b/packages/components/src/flyout/styles.js @@ -13,7 +13,7 @@ import { CardBody } from '../card'; import * as ZIndex from '../utils/z-index'; import CONFIG from '../utils/config-values'; -export const AccessiblePopoverContent = css` +export const FlyoutContent = css` z-index: ${ ZIndex.Popover }; box-sizing: border-box; opacity: 0; diff --git a/packages/components/src/accessible-popover/test/__snapshots__/index.js.snap b/packages/components/src/flyout/test/__snapshots__/index.js.snap similarity index 89% rename from packages/components/src/accessible-popover/test/__snapshots__/index.js.snap rename to packages/components/src/flyout/test/__snapshots__/index.js.snap index 2a58dfaa6aea1d..ce1cfcb11c4f28 100644 --- a/packages/components/src/accessible-popover/test/__snapshots__/index.js.snap +++ b/packages/components/src/flyout/test/__snapshots__/index.js.snap @@ -149,13 +149,13 @@ Snapshot Diff: @@ -1,12 +1,12 @@