From 2974d55f527fcfe98cda02c7b2382ca3622636bb Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 17:20:56 +0200 Subject: [PATCH 01/12] Popover: switch to controls, remove old stories --- .../components/src/popover/stories/index.js | 224 ++++++------------ 1 file changed, 71 insertions(+), 153 deletions(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 0025e66fe0f4e1..6ee41f363c1653 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -1,167 +1,85 @@ -/** - * External dependencies - */ -import { boolean, select, text } from '@storybook/addon-knobs'; - -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element'; - /** * Internal dependencies */ -import { DraggableWrapper } from './_utils'; import Popover from '../'; -import Button from '../../button'; + +// Format: "[yAxis] [xAxis]" +// Valid yAxis values: 'top', 'middle', 'bottom' +// Valid xAxis values: 'left', 'center', 'right' +const AVAILABLE_POSITIONS = [ + 'top left', + 'top center', + 'top right', + 'middle left', + 'middle center', + 'middle right', + 'bottom left', + 'bottom center', + 'bottom right', + 'bottom left', + 'bottom center', + 'bottom right', +]; + +// Follows floating UI's conventions +// See https://floating-ui.com/docs/computePosition#placement +const AVAILABLE_PLACEMENTS = [ + 'top', + 'top-start', + 'top-end', + 'right', + 'right-start', + 'right-end', + 'bottom', + 'bottom-start', + 'bottom-end', + 'left', + 'left-start', + 'left-end', +]; export default { title: 'Components/Popover', component: Popover, + argTypes: { + anchorRef: { control: { type: null } }, + anchorRect: { control: { type: null } }, + animate: { control: { type: 'boolean' } }, + children: { control: { type: null } }, + className: { control: { type: 'text' } }, + expandOnMobile: { control: { type: 'boolean' } }, + focusOnMount: { + control: { type: 'select' }, + options: [ 'firstElement', 'container' ], + }, + getAnchorRect: { control: { type: null } }, + headerTitle: { control: { type: 'text' } }, + isAlternate: { control: { type: 'boolean' } }, + noArrow: { control: { type: 'boolean' } }, + onClose: { control: { type: null } }, + offset: { control: { type: 'number' } }, + onFocusOutside: { control: { type: null } }, + placement: { + control: { type: 'select' }, + options: AVAILABLE_PLACEMENTS, + }, + position: { + control: { type: 'select' }, + options: AVAILABLE_POSITIONS, + }, + __unstableSlotName: { control: { type: null } }, + __unstableObserveElement: { control: { type: null } }, + __unstableForcePosition: { control: { type: 'boolean' } }, + __unstableShift: { control: { type: 'boolean' } }, + }, parameters: { - knobs: { disable: false }, + docs: { source: { state: 'open' } }, }, }; -export const _default = () => { - const show = boolean( 'Example: Show', true ); - const children = text( 'children', 'Popover Content' ); - const animate = boolean( 'animate', false ); - const expandOnMobile = boolean( 'expandOnMobile', false ); - const focusOnMount = select( - 'focusOnMount', - { - firstElement: 'firstElement', - container: 'container', - }, - 'firstElement' - ); - const noArrow = boolean( 'noArrow', false ); - const isAlternate = boolean( 'isAlternate', false ); - - const props = { - animate, - children, - expandOnMobile, - focusOnMount, - noArrow, - isAlternate, - }; - - if ( ! show ) { - return null; - } - - return ; -}; - -const DragExample = ( props ) => { - const { label, content, ...restProps } = props; - - return ( -
-
-

Move the gray box around.

-

- The{ ' ' } - - pink bordered - { ' ' } - element is a parent. -

-

- The{ ' ' } - - cyan bordered - { ' ' } - element is a sibling to Popover. -

-

- Popover aligns to the content within - parent. -

-
-
- -
{ label }
- { content } - -
-
- ); -}; - -export const positioning = () => { - const label = text( 'Example: Label', 'Drag Me!' ); - const content = text( 'Example: Content', 'Popover' ); - const noArrow = boolean( 'noArrow', false ); - - return ( - - ); -}; - -function DynamicHeightPopover() { - const [ height, setHeight ] = useState( 200 ); - const increase = () => setHeight( height + 100 ); - const decrease = () => setHeight( height - 100 ); - - return ( -
-
- - - -
- -

- When the height of the popover exceeds the available space in - the canvas, a scrollbar inside the popover should appear. -

- -
- -
- Content with dynamic height -
- -
-
- ); -} +const SimplePopover = ( args ) => ; -export const dynamicHeight = () => { - return ; +export const Default = SimplePopover.bind( {} ); +Default.args = { + children: 'Popover content', }; From 53f11cbbe191fdb274a5e68a294e84cda018a3a8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 17:49:02 +0200 Subject: [PATCH 02/12] Fix small popover arrow glitch --- packages/components/src/popover/style.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/popover/style.scss b/packages/components/src/popover/style.scss index 00639f67216781..13649142c2caec 100644 --- a/packages/components/src/popover/style.scss +++ b/packages/components/src/popover/style.scss @@ -73,9 +73,9 @@ $arrow-triangle-base-size: 14px; content: ""; position: absolute; top: -1px; - left: 0; + left: 1px; height: 2px; - width: 100%; + right: 1px; background-color: $white; } From f665eba88f1309b483422c1f923bc237c4d0f7d5 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 17:55:05 +0200 Subject: [PATCH 03/12] Add AllPlacements Storybook example --- .../components/src/popover/stories/index.js | 71 ++++++++++++++++++- 1 file changed, 70 insertions(+), 1 deletion(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 6ee41f363c1653..fa1f0c57f305c5 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -1,3 +1,8 @@ +/** + * WordPress dependencies + */ +import { useRef } from '@wordpress/element'; + /** * Internal dependencies */ @@ -81,5 +86,69 @@ const SimplePopover = ( args ) => ; export const Default = SimplePopover.bind( {} ); Default.args = { - children: 'Popover content', + children: <>Popover's content, +}; + +const PopoverWithAnchor = ( args ) => { + const anchorRef = useRef( null ); + + return ( +
+

+ Popover's anchor +

+ +
+ ); +}; + +/** + * Resize / scroll the viewport to test the behavior of the popovers when they + * reach the viewport boundaries. + */ +export const AllPlacements = ( { children, ...args } ) => ( +
+

+ Resize / scroll the viewport to test the behavior of the popovers + when they reach the viewport boundaries. +

+
+ { AVAILABLE_PLACEMENTS.map( ( p ) => ( + + { children } +
+ (placement: { p }) +
+ + ) ) } +
+
+); +// Excluding placement and position since they all possible values +// are passed directly in code. +AllPlacements.parameters = { + controls: { + exclude: [ 'placement', 'position' ], + }, +}; +AllPlacements.args = { + ...Default.args, + noArrow: false, + offset: 10, }; From d5244620a885f9e3d0b10bb3aed999a9331a3f21 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 18:34:33 +0200 Subject: [PATCH 04/12] Refactor default example to be the same as README --- .../components/src/popover/stories/index.js | 37 +++++++++++++++---- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index fa1f0c57f305c5..4e32f6e80b72e8 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -1,11 +1,12 @@ /** * WordPress dependencies */ -import { useRef } from '@wordpress/element'; +import { useState, useRef } from '@wordpress/element'; /** * Internal dependencies */ +import Button from '../../button'; import Popover from '../'; // Format: "[yAxis] [xAxis]" @@ -82,13 +83,6 @@ export default { }, }; -const SimplePopover = ( args ) => ; - -export const Default = SimplePopover.bind( {} ); -Default.args = { - children: <>Popover's content, -}; - const PopoverWithAnchor = ( args ) => { const anchorRef = useRef( null ); @@ -112,6 +106,33 @@ const PopoverWithAnchor = ( args ) => { ); }; +export const Default = ( args ) => { + const [ isVisible, setIsVisible ] = useState( false ); + const toggleVisible = () => { + setIsVisible( ( state ) => ! state ); + }; + + return ( +
+ +
+ ); +}; +Default.args = { + children: <>Popover's content, +}; + /** * Resize / scroll the viewport to test the behavior of the popovers when they * reach the viewport boundaries. From 7792693e16b1756570ca86df8ed43c54de72dc9f Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 18:34:53 +0200 Subject: [PATCH 05/12] Add dynamic height example back --- .../components/src/popover/stories/index.js | 51 +++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 4e32f6e80b72e8..71a325447a5ece 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -106,6 +106,51 @@ const PopoverWithAnchor = ( args ) => { ); }; +const PopoverWithDynamicHeight = ( { children, ...args } ) => { + const [ height, setHeight ] = useState( 200 ); + const increase = () => setHeight( height + 100 ); + const decrease = () => setHeight( height - 100 ); + + return ( +
+
+ + + +
+ +

+ When the height of the popover exceeds the available space in + the canvas, a scrollbar inside the popover should appear. +

+ +
+ +
+ { children } +
+ +
+
+ ); +}; + export const Default = ( args ) => { const [ isVisible, setIsVisible ] = useState( false ); const toggleVisible = () => { @@ -173,3 +218,9 @@ AllPlacements.args = { noArrow: false, offset: 10, }; + +export const DynamicHeight = PopoverWithDynamicHeight.bind( {} ); +DynamicHeight.args = { + ...Default.args, + children: 'Content with dynamic height', +}; From 532411d15b6f2fd8ba9caa194420cdb1c62a8fff Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 18:51:54 +0200 Subject: [PATCH 06/12] Move dynamic height example inline --- .../components/src/popover/stories/index.js | 90 +++++++++---------- 1 file changed, 44 insertions(+), 46 deletions(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 71a325447a5ece..2386eeab013dd0 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -106,51 +106,6 @@ const PopoverWithAnchor = ( args ) => { ); }; -const PopoverWithDynamicHeight = ( { children, ...args } ) => { - const [ height, setHeight ] = useState( 200 ); - const increase = () => setHeight( height + 100 ); - const decrease = () => setHeight( height - 100 ); - - return ( -
-
- - - -
- -

- When the height of the popover exceeds the available space in - the canvas, a scrollbar inside the popover should appear. -

- -
- -
- { children } -
- -
-
- ); -}; - export const Default = ( args ) => { const [ isVisible, setIsVisible ] = useState( false ); const toggleVisible = () => { @@ -219,7 +174,50 @@ AllPlacements.args = { offset: 10, }; -export const DynamicHeight = PopoverWithDynamicHeight.bind( {} ); +export const DynamicHeight = ( { children, ...args } ) => { + const [ height, setHeight ] = useState( 200 ); + const increase = () => setHeight( height + 100 ); + const decrease = () => setHeight( height - 100 ); + + return ( +
+
+ + + +
+ +

+ When the height of the popover exceeds the available space in + the canvas, a scrollbar inside the popover should appear. +

+ +
+ +
+ { children } +
+ +
+
+ ); +}; DynamicHeight.args = { ...Default.args, children: 'Content with dynamic height', From 6d0d0b19fefd5ec8840ab8020d5ed3f8493f52d4 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 19:27:28 +0200 Subject: [PATCH 07/12] Add iframe Storybook example --- .../components/src/popover/stories/index.js | 50 +++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 2386eeab013dd0..6b89ca18512654 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -2,11 +2,13 @@ * WordPress dependencies */ import { useState, useRef } from '@wordpress/element'; +import { __unstableIframe as Iframe } from '@wordpress/block-editor'; /** * Internal dependencies */ import Button from '../../button'; +import { Provider as SlotFillProvider } from '../../slot-fill'; import Popover from '../'; // Format: "[yAxis] [xAxis]" @@ -222,3 +224,51 @@ DynamicHeight.args = { ...Default.args, children: 'Content with dynamic height', }; + +export const WithSlotOutsideIframe = ( args ) => { + const anchorRef = useRef( null ); + const slotName = 'popover-with-slot-outside-iframe'; + + return ( + +
+ + +
+ + ); +}; +WithSlotOutsideIframe.args = { + ...Default.args, +}; From 7ba412c97334ea46244283d5a4d52dec167a7f1c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 19:29:54 +0200 Subject: [PATCH 08/12] Add "false" option for focusOnMount prop --- packages/components/src/popover/stories/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 6b89ca18512654..5795a9bec11fbe 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -58,7 +58,7 @@ export default { expandOnMobile: { control: { type: 'boolean' } }, focusOnMount: { control: { type: 'select' }, - options: [ 'firstElement', 'container' ], + options: [ 'firstElement', 'container', false ], }, getAnchorRect: { control: { type: null } }, headerTitle: { control: { type: 'text' } }, From b96a1e449d5e0059c85a809b221cdad3d3bbfd72 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 2 Aug 2022 19:39:32 +0200 Subject: [PATCH 09/12] Delete unnecessary file --- .../components/src/popover/stories/_utils.js | 64 ------------------- 1 file changed, 64 deletions(-) delete mode 100644 packages/components/src/popover/stories/_utils.js diff --git a/packages/components/src/popover/stories/_utils.js b/packages/components/src/popover/stories/_utils.js deleted file mode 100644 index c99c23190e3603..00000000000000 --- a/packages/components/src/popover/stories/_utils.js +++ /dev/null @@ -1,64 +0,0 @@ -/** - * WordPress dependencies - */ -import { useCallback, useEffect, useState } from '@wordpress/element'; - -export const DraggableWrapper = ( - props = { role: 'presentation', style: {} } -) => { - const { role, style, ...restProps } = props; - const [ position, setPosition ] = useState( { x: 0, y: 0 } ); - const [ isDragging, setDragging ] = useState( false ); - - const updatePosition = useCallback( - ( event ) => { - if ( ! isDragging ) { - return false; - } - const { movementX, movementY } = event; - setPosition( { - ...position, - x: position.x + movementX, - y: position.y + movementY, - } ); - }, - [ isDragging, position ] - ); - - const startDragging = useCallback( () => setDragging( true ), [] ); - const stopDragging = useCallback( () => setDragging( false ), [] ); - - useEffect( () => { - document.addEventListener( 'mousemove', updatePosition ); - document.addEventListener( 'mouseup', stopDragging ); - return () => { - document.removeEventListener( 'mousemove', updatePosition ); - document.removeEventListener( 'mouseup', stopDragging ); - }; - }, [ updatePosition, stopDragging ] ); - - const { x, y } = position; - - /** - * Ideally, the x and y coordinates would be applied transform: translate. - * However, using transform is causing layout rendering issues when - * combined with components like Popover (due to their positioning - * strategy). - */ - const componentStyle = { - ...style, - position: 'relative', - top: y, - left: x, - }; - - return ( -
- ); -}; From 34b598dbe2ffc09086846e92c7c9a87481ed1c91 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 3 Aug 2022 15:12:44 +0200 Subject: [PATCH 10/12] Remove open docs option --- packages/components/src/popover/stories/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 5795a9bec11fbe..7e02af5f39cf28 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -80,9 +80,6 @@ export default { __unstableForcePosition: { control: { type: 'boolean' } }, __unstableShift: { control: { type: 'boolean' } }, }, - parameters: { - docs: { source: { state: 'open' } }, - }, }; const PopoverWithAnchor = ( args ) => { From 2e752f1fea4c87e72bdced0d8b45b2888904e970 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 3 Aug 2022 18:13:07 +0200 Subject: [PATCH 11/12] Remove reduntant positions --- packages/components/src/popover/stories/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/components/src/popover/stories/index.js b/packages/components/src/popover/stories/index.js index 7e02af5f39cf28..32bcb6463d677e 100644 --- a/packages/components/src/popover/stories/index.js +++ b/packages/components/src/popover/stories/index.js @@ -24,9 +24,6 @@ const AVAILABLE_POSITIONS = [ 'bottom left', 'bottom center', 'bottom right', - 'bottom left', - 'bottom center', - 'bottom right', ]; // Follows floating UI's conventions From 3612384b4ade976a5d5ff8e20d56e824c161137c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 3 Aug 2022 18:14:54 +0200 Subject: [PATCH 12/12] CHANGELOG --- packages/components/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index facbc86f3122e2..7ea421e53d9084 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,7 @@ - `Tooltip (Experimental)`, `CustomSelectControl`, `TimePicker`: Add missing font-size styles which were necessary in non-WordPress contexts ([#42844](https://github.com/WordPress/gutenberg/pull/42844/)). - `TextControl`, `TextareaControl`, `ToggleGroupControl`: Add `box-sizing` reset style ([#42889](https://github.com/WordPress/gutenberg/pull/42889)). - `Popover`: fix arrow placement and design ([#42874](https://github.com/WordPress/gutenberg/pull/42874/)). +- `Popover`: fix minor glitch in arrow [#42903](https://github.com/WordPress/gutenberg/pull/42903)). ### Enhancements @@ -23,6 +24,7 @@ - `Flex`, `FlexItem`, `FlexBlock`: Convert to TypeScript ([#42537](https://github.com/WordPress/gutenberg/pull/42537)). - `InputControl`: Fix incorrect `size` prop passing ([#42793](https://github.com/WordPress/gutenberg/pull/42793)). +- `Popover`: rewrite Storybook examples using controls [#42903](https://github.com/WordPress/gutenberg/pull/42903)). ## 19.16.0 (2022-07-27)