From a11b1ceeb9ed13d39931013bbcc77b3d4550c412 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 31 May 2023 15:10:52 +0200 Subject: [PATCH 01/19] DropdownMenu: read variant from context --- .../components/src/dropdown-menu/index.tsx | 177 ++++++++++-------- 1 file changed, 94 insertions(+), 83 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index 805bcd0661179..18dd630ad3f76 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -38,88 +38,7 @@ function isFunction( maybeFunc: unknown ): maybeFunc is () => void { return typeof maybeFunc === 'function'; } -/** - * - * The DropdownMenu displays a list of actions (each contained in a MenuItem, - * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover - * after the user has interacted with an element (a button or icon) or when - * they perform a specific action. - * - * Render a Dropdown Menu with a set of controls: - * - * ```jsx - * import { DropdownMenu } from '@wordpress/components'; - * import { - * more, - * arrowLeft, - * arrowRight, - * arrowUp, - * arrowDown, - * } from '@wordpress/icons'; - * - * const MyDropdownMenu = () => ( - * console.log( 'up' ), - * }, - * { - * title: 'Right', - * icon: arrowRight, - * onClick: () => console.log( 'right' ), - * }, - * { - * title: 'Down', - * icon: arrowDown, - * onClick: () => console.log( 'down' ), - * }, - * { - * title: 'Left', - * icon: arrowLeft, - * onClick: () => console.log( 'left' ), - * }, - * ] } - * /> - * ); - * ``` - * - * Alternatively, specify a `children` function which returns elements valid for - * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. - * - * ```jsx - * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; - * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons'; - * - * const MyDropdownMenu = () => ( - * - * { ( { onClose } ) => ( - * <> - * - * - * Move Up - * - * - * Move Down - * - * - * - * - * Remove - * - * - * - * ) } - * - * ); - * ``` - * - */ - -function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) { +function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { const { children, className, @@ -132,7 +51,13 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) { disableOpenOnArrowDown = false, text, noIcons, - } = dropdownMenuProps; + + // Context + variant, + } = useContextSystem< DropdownMenuProps & { variant?: 'toolbar' } >( + dropdownMenuProps, + 'DropdownMenu' + ); if ( ! controls?.length && ! isFunction( children ) ) { return null; @@ -154,6 +79,7 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) { const mergedPopoverProps = mergeProps( { className: 'components-dropdown-menu__popover', + variant, }, popoverProps ); @@ -284,4 +210,89 @@ function DropdownMenu( dropdownMenuProps: DropdownMenuProps ) { ); } +/** + * + * The DropdownMenu displays a list of actions (each contained in a MenuItem, + * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover + * after the user has interacted with an element (a button or icon) or when + * they perform a specific action. + * + * Render a Dropdown Menu with a set of controls: + * + * ```jsx + * import { DropdownMenu } from '@wordpress/components'; + * import { + * more, + * arrowLeft, + * arrowRight, + * arrowUp, + * arrowDown, + * } from '@wordpress/icons'; + * + * const MyDropdownMenu = () => ( + * console.log( 'up' ), + * }, + * { + * title: 'Right', + * icon: arrowRight, + * onClick: () => console.log( 'right' ), + * }, + * { + * title: 'Down', + * icon: arrowDown, + * onClick: () => console.log( 'down' ), + * }, + * { + * title: 'Left', + * icon: arrowLeft, + * onClick: () => console.log( 'left' ), + * }, + * ] } + * /> + * ); + * ``` + * + * Alternatively, specify a `children` function which returns elements valid for + * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. + * + * ```jsx + * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; + * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons'; + * + * const MyDropdownMenu = () => ( + * + * { ( { onClose } ) => ( + * <> + * + * + * Move Up + * + * + * Move Down + * + * + * + * + * Remove + * + * + * + * ) } + * + * ); + * ``` + * + */ +export const DropdownMenu = contextConnectWithoutRef( + UnconnectedDropdownMenu, + 'DropdownMenu' +); + export default DropdownMenu; From 2e4d8204b86b604631fca415997bb9f8055a9711 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 31 May 2023 15:12:00 +0200 Subject: [PATCH 02/19] Toolbar: do not set `variant` prop on popover (rely on context system instead) --- packages/components/src/dropdown-menu/index.tsx | 1 + .../components/src/toolbar/toolbar-dropdown-menu/index.js | 1 - packages/components/src/toolbar/toolbar/index.tsx | 8 ++------ 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index 18dd630ad3f76..a04a16154d37a 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -11,6 +11,7 @@ import { menu } from '@wordpress/icons'; /** * Internal dependencies */ +import { contextConnectWithoutRef, useContextSystem } from '../ui/context'; import Button from '../button'; import Dropdown from '../dropdown'; import { NavigableMenu } from '../navigable-container'; diff --git a/packages/components/src/toolbar/toolbar-dropdown-menu/index.js b/packages/components/src/toolbar/toolbar-dropdown-menu/index.js index 5185b61b16d86..5a99fe00a6d50 100644 --- a/packages/components/src/toolbar/toolbar-dropdown-menu/index.js +++ b/packages/components/src/toolbar/toolbar-dropdown-menu/index.js @@ -28,7 +28,6 @@ function ToolbarDropdownMenu( props, ref ) { Date: Wed, 31 May 2023 15:17:04 +0200 Subject: [PATCH 03/19] Use named export for better storybook doc generation --- packages/components/src/dropdown-menu/stories/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/dropdown-menu/stories/index.tsx b/packages/components/src/dropdown-menu/stories/index.tsx index 8bc652269422e..5e210edeb71de 100644 --- a/packages/components/src/dropdown-menu/stories/index.tsx +++ b/packages/components/src/dropdown-menu/stories/index.tsx @@ -5,7 +5,7 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react'; /** * Internal dependencies */ -import DropdownMenu from '..'; +import { DropdownMenu } from '..'; import MenuItem from '../../menu-item'; import MenuGroup from '../../menu-group'; From ea25c4257bd93b6834e521014af0262f82fbf2a2 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 10:28:26 +0200 Subject: [PATCH 04/19] Provide context value in more toolbar components --- packages/components/src/toolbar/constants.ts | 5 ++ .../src/toolbar/toolbar-group/index.js | 52 +++++++++++-------- .../src/toolbar/toolbar-item/index.tsx | 18 ++++--- .../components/src/toolbar/toolbar/index.tsx | 9 +--- 4 files changed, 46 insertions(+), 38 deletions(-) create mode 100644 packages/components/src/toolbar/constants.ts diff --git a/packages/components/src/toolbar/constants.ts b/packages/components/src/toolbar/constants.ts new file mode 100644 index 0000000000000..ce0b3cba8ab0f --- /dev/null +++ b/packages/components/src/toolbar/constants.ts @@ -0,0 +1,5 @@ +export const CONTEXT_SYSTEM_VALUE = { + DropdownMenu: { + variant: 'toolbar', + }, +}; diff --git a/packages/components/src/toolbar/toolbar-group/index.js b/packages/components/src/toolbar/toolbar-group/index.js index c86954e04929a..168829755499c 100644 --- a/packages/components/src/toolbar/toolbar-group/index.js +++ b/packages/components/src/toolbar/toolbar-group/index.js @@ -13,10 +13,12 @@ import { useContext } from '@wordpress/element'; /** * Internal dependencies */ +import { ContextSystemProvider } from '../../ui/context'; import ToolbarButton from '../toolbar-button'; import ToolbarGroupContainer from './toolbar-group-container'; import ToolbarGroupCollapsed from './toolbar-group-collapsed'; import ToolbarContext from '../toolbar-context'; +import { CONTEXT_SYSTEM_VALUE } from '../constants'; /** * Renders a collapsible group of controls @@ -81,33 +83,37 @@ function ToolbarGroup( { if ( isCollapsed ) { return ( - + + + ); } return ( - - { controlSets?.flatMap( ( controlSet, indexOfSet ) => - controlSet.map( ( control, indexOfControl ) => ( - 0 && indexOfControl === 0 - ? 'has-left-divider' - : null - } - { ...control } - /> - ) ) - ) } - { children } - + + + { controlSets?.flatMap( ( controlSet, indexOfSet ) => + controlSet.map( ( control, indexOfControl ) => ( + 0 && indexOfControl === 0 + ? 'has-left-divider' + : null + } + { ...control } + /> + ) ) + ) } + { children } + + ); } diff --git a/packages/components/src/toolbar/toolbar-item/index.tsx b/packages/components/src/toolbar/toolbar-item/index.tsx index 6fc9bf0100967..e7675782f8219 100644 --- a/packages/components/src/toolbar/toolbar-item/index.tsx +++ b/packages/components/src/toolbar/toolbar-item/index.tsx @@ -13,7 +13,9 @@ import warning from '@wordpress/warning'; /** * Internal dependencies */ +import { ContextSystemProvider } from '../../ui/context'; import ToolbarContext from '../toolbar-context'; +import { CONTEXT_SYSTEM_VALUE } from '../constants'; function ToolbarItem( { @@ -46,13 +48,15 @@ function ToolbarItem( } return ( - - { children } - + + + { children } + + ); } diff --git a/packages/components/src/toolbar/toolbar/index.tsx b/packages/components/src/toolbar/toolbar/index.tsx index 58fb3b5dba20b..9dcd9940fc4db 100644 --- a/packages/components/src/toolbar/toolbar/index.tsx +++ b/packages/components/src/toolbar/toolbar/index.tsx @@ -20,14 +20,7 @@ import { WordPressComponentProps, ContextSystemProvider, } from '../../ui/context'; - -// TODO: swap the legacy `DropdownMenu` with the new version of the component -// once it's stable -const CONTEXT_SYSTEM_VALUE = { - DropdownMenu: { - variant: 'toolbar', - }, -}; +import { CONTEXT_SYSTEM_VALUE } from '../constants'; function UnforwardedToolbar( { From 69576a00182377e21cfe44bfb237dd795c0dd7ae Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 10:30:07 +0200 Subject: [PATCH 05/19] Hook Dropdown into context system, update DropdownMenu and CircularOptionPicker --- .../src/circular-option-picker/types.ts | 7 ++--- .../components/src/dropdown-menu/index.tsx | 5 +++- packages/components/src/dropdown/index.tsx | 27 +++++++++++++------ 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/packages/components/src/circular-option-picker/types.ts b/packages/components/src/circular-option-picker/types.ts index cd966681c55f7..a72ad44356dcd 100644 --- a/packages/components/src/circular-option-picker/types.ts +++ b/packages/components/src/circular-option-picker/types.ts @@ -12,7 +12,7 @@ import type { Icon } from '@wordpress/icons'; * Internal dependencies */ import type { ButtonAsButtonProps } from '../button/types'; -import type Dropdown from '../dropdown'; +import type { DropdownProps } from '../dropdown/types'; import type { WordPressComponentProps } from '../ui/context'; export type CircularOptionPickerProps = { @@ -44,10 +44,7 @@ export type DropdownLinkActionProps = { 'children' >; linkText: string; - dropdownProps: Omit< - React.ComponentProps< typeof Dropdown >, - 'className' | 'renderToggle' - >; + dropdownProps: Omit< DropdownProps, 'className' | 'renderToggle' >; className?: string; }; diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index a04a16154d37a..ae2c48138c7c7 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -55,6 +55,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { // Context variant, + // TODO: unify type with v2, consider adding unstyled? } = useContextSystem< DropdownMenuProps & { variant?: 'toolbar' } >( dropdownMenuProps, 'DropdownMenu' @@ -80,7 +81,9 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { const mergedPopoverProps = mergeProps( { className: 'components-dropdown-menu__popover', - variant, + // Do not add a `variant` prop if it's not defined, to avoid overriding + // values from internal context system. + ...( !! variant ? { variant } : {} ), }, popoverProps ); diff --git a/packages/components/src/dropdown/index.tsx b/packages/components/src/dropdown/index.tsx index 06499be7f9c30..16d4a116963ef 100644 --- a/packages/components/src/dropdown/index.tsx +++ b/packages/components/src/dropdown/index.tsx @@ -7,13 +7,14 @@ import type { ForwardedRef } from 'react'; /** * WordPress dependencies */ -import { forwardRef, useEffect, useRef, useState } from '@wordpress/element'; +import { useEffect, useRef, useState } from '@wordpress/element'; import { useMergeRefs } from '@wordpress/compose'; import deprecated from '@wordpress/deprecated'; /** * Internal dependencies */ +import { contextConnect, useContextSystem } from '../ui/context'; import Popover from '../popover'; import type { DropdownProps } from './types'; @@ -33,8 +34,11 @@ function useObservableState( ] as const; } -function UnforwardedDropdown( - { +const UnconnectedDropdown = ( + props: DropdownProps, + forwardedRef: ForwardedRef< any > +) => { + const { renderContent, renderToggle, className, @@ -49,9 +53,15 @@ function UnforwardedDropdown( // Deprecated props position, - }: DropdownProps, - forwardedRef: ForwardedRef< any > -) { + + // From context system + variant, + // TODO: unify type with v2, consider adding unstyled? + } = useContextSystem< DropdownProps & { variant?: 'toolbar' } >( + props, + 'Dropdown' + ); + if ( position !== undefined ) { deprecated( '`position` prop in wp.components.Dropdown', { since: '6.2', @@ -149,6 +159,7 @@ function UnforwardedDropdown( ? fallbackPopoverAnchor : undefined } + variant={ variant } { ...popoverProps } className={ classnames( 'components-dropdown__content', @@ -161,7 +172,7 @@ function UnforwardedDropdown( ) } ); -} +}; /** * Renders a button that opens a floating content modal when clicked. @@ -188,6 +199,6 @@ function UnforwardedDropdown( * ); * ``` */ -export const Dropdown = forwardRef( UnforwardedDropdown ); +export const Dropdown = contextConnect( UnconnectedDropdown, 'Dropdown' ); export default Dropdown; From 46d70de99739b10bd6e697a8c92bcc478e6c5a60 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 10:31:52 +0200 Subject: [PATCH 06/19] Remove toolbar variant popover prop where the context system can be used instead --- .../block-editor/src/components/alignment-control/ui.js | 1 - .../src/components/block-alignment-control/constants.js | 4 ---- .../src/components/block-alignment-control/ui.js | 7 +------ .../block-settings-menu/block-settings-dropdown.js | 1 - .../block-editor/src/components/block-switcher/index.js | 1 - .../src/components/block-vertical-alignment-control/ui.js | 4 +--- .../block-editor/src/components/image-editor/constants.js | 1 - .../src/components/rich-text/format-toolbar/index.js | 1 - packages/block-editor/src/layouts/flex.js | 1 - packages/block-library/src/buttons/edit.native.js | 1 - .../block-library/src/navigation/edit/leaf-more-menu.js | 1 - .../leaf-more-menu.js | 1 - 12 files changed, 2 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js index 4602f875273b0..bcf9ff55edcf0 100644 --- a/packages/block-editor/src/components/alignment-control/ui.js +++ b/packages/block-editor/src/components/alignment-control/ui.js @@ -25,7 +25,6 @@ const DEFAULT_ALIGNMENT_CONTROLS = [ const POPOVER_PROPS = { position: 'bottom right', - variant: 'toolbar', }; function AlignmentUI( { diff --git a/packages/block-editor/src/components/block-alignment-control/constants.js b/packages/block-editor/src/components/block-alignment-control/constants.js index 2fa133740a4cf..44505d0475d99 100644 --- a/packages/block-editor/src/components/block-alignment-control/constants.js +++ b/packages/block-editor/src/components/block-alignment-control/constants.js @@ -39,7 +39,3 @@ export const BLOCK_ALIGNMENTS_CONTROLS = { }; export const DEFAULT_CONTROL = 'none'; - -export const POPOVER_PROPS = { - variant: 'toolbar', -}; diff --git a/packages/block-editor/src/components/block-alignment-control/ui.js b/packages/block-editor/src/components/block-alignment-control/ui.js index 597b0beca80ff..9356e59ef465a 100644 --- a/packages/block-editor/src/components/block-alignment-control/ui.js +++ b/packages/block-editor/src/components/block-alignment-control/ui.js @@ -18,11 +18,7 @@ import { * Internal dependencies */ import useAvailableAlignments from './use-available-alignments'; -import { - BLOCK_ALIGNMENTS_CONTROLS, - DEFAULT_CONTROL, - POPOVER_PROPS, -} from './constants'; +import { BLOCK_ALIGNMENTS_CONTROLS, DEFAULT_CONTROL } from './constants'; function BlockAlignmentUI( { value, @@ -69,7 +65,6 @@ function BlockAlignmentUI( { } : { toggleProps: { describedBy: __( 'Change alignment' ) }, - popoverProps: POPOVER_PROPS, children: ( { onClose } ) => { return ( <> diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index a4087ed84cee3..80bd32dfb1e64 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -36,7 +36,6 @@ import { useShowMoversGestures } from '../block-toolbar/utils'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', position: 'bottom right', - variant: 'toolbar', }; function CopyMenuItem( { blocks, onCopy, label } ) { diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index a4c15a9e17062..98a894bf8694b 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -197,7 +197,6 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { label={ blockSwitcherLabel } popoverProps={ { position: 'bottom right', - variant: 'toolbar', className: 'block-editor-block-switcher__popover', } } icon={ diff --git a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js index b25e401966180..d1cacadf0cc49 100644 --- a/packages/block-editor/src/components/block-vertical-alignment-control/ui.js +++ b/packages/block-editor/src/components/block-vertical-alignment-control/ui.js @@ -57,9 +57,7 @@ function BlockVerticalAlignmentUI( { BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ]; const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu; - const extraProps = isToolbar - ? { isCollapsed } - : { popoverProps: { variant: 'toolbar' } }; + const extraProps = isToolbar ? { isCollapsed } : {}; return ( { diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index fd6f377ea591d..8aef6514151d4 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -284,7 +284,6 @@ function FlexLayoutJustifyContentControl( { onChange={ onJustificationChange } popoverProps={ { position: 'bottom right', - variant: 'toolbar', } } /> ); diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 6424626e27b71..0b35a86e4c5fe 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -139,7 +139,6 @@ export default function ButtonsEdit( { } popoverProps={ { position: 'bottom right', - variant: 'toolbar', } } /> diff --git a/packages/block-library/src/navigation/edit/leaf-more-menu.js b/packages/block-library/src/navigation/edit/leaf-more-menu.js index 4fe45ac5def83..1338222aea524 100644 --- a/packages/block-library/src/navigation/edit/leaf-more-menu.js +++ b/packages/block-library/src/navigation/edit/leaf-more-menu.js @@ -16,7 +16,6 @@ import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', position: 'bottom right', - variant: 'toolbar', }; const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [ diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index 7b7472c8e30bf..5532fc34cac5c 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -11,7 +11,6 @@ import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', position: 'bottom right', - variant: 'toolbar', }; export default function LeafMoreMenu( props ) { From fa9892cf91b5f59245e995e6b28cbc662ff7d15a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 10:32:25 +0200 Subject: [PATCH 07/19] Add comment where the context system currently doesn't work --- .../src/components/block-alignment-matrix-control/index.js | 3 +++ packages/block-editor/src/components/duotone-control/index.js | 3 +++ .../block-editor/src/components/media-replace-flow/index.js | 3 +++ 3 files changed, 9 insertions(+) diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js index 8acb125a1ad93..cee46830317c1 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/index.js +++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js @@ -23,6 +23,9 @@ function BlockAlignmentMatrixControl( props ) { return ( { const openOnArrowDown = ( event ) => { diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js index d27e6863fe0df..6b83ebdfea94d 100644 --- a/packages/block-editor/src/components/duotone-control/index.js +++ b/packages/block-editor/src/components/duotone-control/index.js @@ -36,6 +36,9 @@ function DuotoneControl( { popoverProps={ { className: 'block-editor-duotone-control__popover', headerTitle: __( 'Duotone' ), + // Note: currently we can't remove `variant` from `popoverProps` because + // the `Dropdown` component is not able to read the same variant data + // from context. variant: 'toolbar', } } renderToggle={ ( { isOpen, onToggle } ) => { diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index ec6ef82bb53f9..0e1e8cf20a877 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -60,6 +60,9 @@ const MediaReplaceFlow = ( { addToGallery, handleUpload = true, popoverProps = { + // Note: currently we can't remove `variant` from `popoverProps` because + // the `Dropdown` component is not able to read the same variant data + // from context. variant: 'toolbar', }, } ) => { From 1937f3125e49e8d934d287488f89d38bf80ac964 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 10:33:23 +0200 Subject: [PATCH 08/19] Use placement prop instead of legacy "position" prop --- .../block-editor/src/components/alignment-control/ui.js | 2 +- .../block-settings-menu/block-settings-dropdown.js | 2 +- .../block-editor/src/components/block-switcher/index.js | 2 +- .../block-editor/src/components/preview-options/index.js | 2 +- .../src/components/rich-text/format-toolbar/index.js | 2 +- packages/block-editor/src/layouts/flex.js | 8 +++++--- packages/block-library/src/buttons/edit.native.js | 8 +++++--- .../block-library/src/navigation/edit/leaf-more-menu.js | 2 +- .../leaf-more-menu.js | 2 +- 9 files changed, 17 insertions(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/alignment-control/ui.js b/packages/block-editor/src/components/alignment-control/ui.js index bcf9ff55edcf0..b41cb4b0d2520 100644 --- a/packages/block-editor/src/components/alignment-control/ui.js +++ b/packages/block-editor/src/components/alignment-control/ui.js @@ -24,7 +24,7 @@ const DEFAULT_ALIGNMENT_CONTROLS = [ ]; const POPOVER_PROPS = { - position: 'bottom right', + placement: 'bottom-start', }; function AlignmentUI( { diff --git a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js index 80bd32dfb1e64..2f16210822be5 100644 --- a/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js +++ b/packages/block-editor/src/components/block-settings-menu/block-settings-dropdown.js @@ -35,7 +35,7 @@ import { useShowMoversGestures } from '../block-toolbar/utils'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', - position: 'bottom right', + placement: 'bottom-start', }; function CopyMenuItem( { blocks, onCopy, label } ) { diff --git a/packages/block-editor/src/components/block-switcher/index.js b/packages/block-editor/src/components/block-switcher/index.js index 98a894bf8694b..51346e14b1003 100644 --- a/packages/block-editor/src/components/block-switcher/index.js +++ b/packages/block-editor/src/components/block-switcher/index.js @@ -196,7 +196,7 @@ export const BlockSwitcherDropdownMenu = ( { clientIds, blocks } ) => { className="block-editor-block-switcher" label={ blockSwitcherLabel } popoverProps={ { - position: 'bottom right', + placement: 'bottom-start', className: 'block-editor-block-switcher__popover', } } icon={ diff --git a/packages/block-editor/src/components/preview-options/index.js b/packages/block-editor/src/components/preview-options/index.js index d173542e02570..2495d7f3ab0d5 100644 --- a/packages/block-editor/src/components/preview-options/index.js +++ b/packages/block-editor/src/components/preview-options/index.js @@ -27,7 +27,7 @@ export default function PreviewOptions( { className, 'block-editor-post-preview__dropdown-content' ), - position: 'bottom left', + placement: 'bottom-end', }; const toggleProps = { variant: 'tertiary', diff --git a/packages/block-editor/src/components/rich-text/format-toolbar/index.js b/packages/block-editor/src/components/rich-text/format-toolbar/index.js index dc292f24926fc..2a8a7a753211f 100644 --- a/packages/block-editor/src/components/rich-text/format-toolbar/index.js +++ b/packages/block-editor/src/components/rich-text/format-toolbar/index.js @@ -16,7 +16,7 @@ import { chevronDown } from '@wordpress/icons'; import { orderBy } from '../../../utils/sorting'; const POPOVER_PROPS = { - position: 'bottom right', + placement: 'bottom-start', }; const FormatToolbar = () => { diff --git a/packages/block-editor/src/layouts/flex.js b/packages/block-editor/src/layouts/flex.js index 8aef6514151d4..fe45cda624b1b 100644 --- a/packages/block-editor/src/layouts/flex.js +++ b/packages/block-editor/src/layouts/flex.js @@ -258,6 +258,10 @@ function FlexLayoutVerticalAlignmentControl( { ); } +const POPOVER_PROPS = { + placement: 'bottom-start', +}; + function FlexLayoutJustifyContentControl( { layout, onChange, @@ -282,9 +286,7 @@ function FlexLayoutJustifyContentControl( { allowedControls={ allowedControls } value={ justifyContent } onChange={ onJustificationChange } - popoverProps={ { - position: 'bottom right', - } } + popoverProps={ POPOVER_PROPS } /> ); } diff --git a/packages/block-library/src/buttons/edit.native.js b/packages/block-library/src/buttons/edit.native.js index 0b35a86e4c5fe..54b0e10a631b3 100644 --- a/packages/block-library/src/buttons/edit.native.js +++ b/packages/block-library/src/buttons/edit.native.js @@ -28,6 +28,10 @@ const ALLOWED_BLOCKS = [ buttonBlockName ]; const layoutProp = { type: 'default', alignments: [] }; +const POPOVER_PROPS = { + placement: 'bottom-start', +}; + export default function ButtonsEdit( { attributes: { layout, align }, clientId, @@ -137,9 +141,7 @@ export default function ButtonsEdit( { }, } ) } - popoverProps={ { - position: 'bottom right', - } } + popoverProps={ POPOVER_PROPS } /> ) } diff --git a/packages/block-library/src/navigation/edit/leaf-more-menu.js b/packages/block-library/src/navigation/edit/leaf-more-menu.js index 1338222aea524..2d35754779ab9 100644 --- a/packages/block-library/src/navigation/edit/leaf-more-menu.js +++ b/packages/block-library/src/navigation/edit/leaf-more-menu.js @@ -15,7 +15,7 @@ import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', - position: 'bottom right', + placement: 'bottom-start', }; const BLOCKS_THAT_CAN_BE_CONVERTED_TO_SUBMENU = [ diff --git a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js index 5532fc34cac5c..83921df8fae0b 100644 --- a/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js +++ b/packages/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js @@ -10,7 +10,7 @@ import { BlockTitle, store as blockEditorStore } from '@wordpress/block-editor'; const POPOVER_PROPS = { className: 'block-editor-block-settings-menu__popover', - position: 'bottom right', + placement: 'bottom-start', }; export default function LeafMoreMenu( props ) { From a1b00c72b647e561678dd944ed6034a50288b92e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 10:33:41 +0200 Subject: [PATCH 09/19] Add some temporary TODO comments --- packages/components/src/popover/stories/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/components/src/popover/stories/index.tsx b/packages/components/src/popover/stories/index.tsx index 15723becf12f3..fc8a346b08ea9 100644 --- a/packages/components/src/popover/stories/index.tsx +++ b/packages/components/src/popover/stories/index.tsx @@ -138,6 +138,7 @@ Toolbar.args = { aliquip ex ea commodo consequat. ), + // TODO: should we deprecate prop? Should we modify example? variant: 'toolbar', }; @@ -151,6 +152,7 @@ Unstyled.args = { aliquip ex ea commodo consequat. ), + // Where is unstyled used? variant: 'unstyled', }; From 1cecd36059e9c21718641dd58078194d1ac09aae Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 15:03:12 +0200 Subject: [PATCH 10/19] Set toolbar variant for Dropdown in the context system --- packages/components/src/toolbar/constants.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/components/src/toolbar/constants.ts b/packages/components/src/toolbar/constants.ts index ce0b3cba8ab0f..9f862161955fd 100644 --- a/packages/components/src/toolbar/constants.ts +++ b/packages/components/src/toolbar/constants.ts @@ -2,4 +2,7 @@ export const CONTEXT_SYSTEM_VALUE = { DropdownMenu: { variant: 'toolbar', }, + Dropdown: { + variant: 'toolbar', + }, }; From b40411e9820c9e547689d24800f0f3b825c520a2 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 1 Jun 2023 15:03:34 +0200 Subject: [PATCH 11/19] Remove explicit variant prop from block alignment matrix control --- .../src/components/block-alignment-matrix-control/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js index cee46830317c1..c8d1e19008565 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/index.js +++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js @@ -26,7 +26,7 @@ function BlockAlignmentMatrixControl( props ) { // Note: currently we can't remove `variant` from `popoverProps` because // the `Dropdown` component is not able to read the same variant data // from context. - popoverProps={ { variant: 'toolbar', placement: 'bottom-start' } } + popoverProps={ { placement: 'bottom-start' } } renderToggle={ ( { onToggle, isOpen } ) => { const openOnArrowDown = ( event ) => { if ( ! isOpen && event.keyCode === DOWN ) { From adcd28cc9aa50c56f6afa2add8202df799117260 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 13:27:17 +0200 Subject: [PATCH 12/19] Toolbar: Only set context in the top-level component --- packages/components/src/toolbar/constants.ts | 8 --- .../src/toolbar/toolbar-group/index.js | 52 ++++++++----------- .../src/toolbar/toolbar-item/index.tsx | 18 +++---- .../components/src/toolbar/toolbar/index.tsx | 10 +++- 4 files changed, 39 insertions(+), 49 deletions(-) delete mode 100644 packages/components/src/toolbar/constants.ts diff --git a/packages/components/src/toolbar/constants.ts b/packages/components/src/toolbar/constants.ts deleted file mode 100644 index 9f862161955fd..0000000000000 --- a/packages/components/src/toolbar/constants.ts +++ /dev/null @@ -1,8 +0,0 @@ -export const CONTEXT_SYSTEM_VALUE = { - DropdownMenu: { - variant: 'toolbar', - }, - Dropdown: { - variant: 'toolbar', - }, -}; diff --git a/packages/components/src/toolbar/toolbar-group/index.js b/packages/components/src/toolbar/toolbar-group/index.js index 168829755499c..c86954e04929a 100644 --- a/packages/components/src/toolbar/toolbar-group/index.js +++ b/packages/components/src/toolbar/toolbar-group/index.js @@ -13,12 +13,10 @@ import { useContext } from '@wordpress/element'; /** * Internal dependencies */ -import { ContextSystemProvider } from '../../ui/context'; import ToolbarButton from '../toolbar-button'; import ToolbarGroupContainer from './toolbar-group-container'; import ToolbarGroupCollapsed from './toolbar-group-collapsed'; import ToolbarContext from '../toolbar-context'; -import { CONTEXT_SYSTEM_VALUE } from '../constants'; /** * Renders a collapsible group of controls @@ -83,37 +81,33 @@ function ToolbarGroup( { if ( isCollapsed ) { return ( - - - + ); } return ( - - - { controlSets?.flatMap( ( controlSet, indexOfSet ) => - controlSet.map( ( control, indexOfControl ) => ( - 0 && indexOfControl === 0 - ? 'has-left-divider' - : null - } - { ...control } - /> - ) ) - ) } - { children } - - + + { controlSets?.flatMap( ( controlSet, indexOfSet ) => + controlSet.map( ( control, indexOfControl ) => ( + 0 && indexOfControl === 0 + ? 'has-left-divider' + : null + } + { ...control } + /> + ) ) + ) } + { children } + ); } diff --git a/packages/components/src/toolbar/toolbar-item/index.tsx b/packages/components/src/toolbar/toolbar-item/index.tsx index e7675782f8219..6fc9bf0100967 100644 --- a/packages/components/src/toolbar/toolbar-item/index.tsx +++ b/packages/components/src/toolbar/toolbar-item/index.tsx @@ -13,9 +13,7 @@ import warning from '@wordpress/warning'; /** * Internal dependencies */ -import { ContextSystemProvider } from '../../ui/context'; import ToolbarContext from '../toolbar-context'; -import { CONTEXT_SYSTEM_VALUE } from '../constants'; function ToolbarItem( { @@ -48,15 +46,13 @@ function ToolbarItem( } return ( - - - { children } - - + + { children } + ); } diff --git a/packages/components/src/toolbar/toolbar/index.tsx b/packages/components/src/toolbar/toolbar/index.tsx index 9dcd9940fc4db..275836c938540 100644 --- a/packages/components/src/toolbar/toolbar/index.tsx +++ b/packages/components/src/toolbar/toolbar/index.tsx @@ -20,7 +20,15 @@ import { WordPressComponentProps, ContextSystemProvider, } from '../../ui/context'; -import { CONTEXT_SYSTEM_VALUE } from '../constants'; + +const CONTEXT_SYSTEM_VALUE = { + DropdownMenu: { + variant: 'toolbar', + }, + Dropdown: { + variant: 'toolbar', + }, +}; function UnforwardedToolbar( { From d3b23ce4b1a06d0f56b14073cfb6b868f905daea Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 13:27:57 +0200 Subject: [PATCH 13/19] Remove `toolbar` variant from instances using `Dropdown` --- .../src/components/block-alignment-matrix-control/index.js | 3 --- .../block-editor/src/components/duotone-control/index.js | 4 ---- .../src/components/media-replace-flow/index.js | 7 +------ 3 files changed, 1 insertion(+), 13 deletions(-) diff --git a/packages/block-editor/src/components/block-alignment-matrix-control/index.js b/packages/block-editor/src/components/block-alignment-matrix-control/index.js index c8d1e19008565..53baa97421e6c 100644 --- a/packages/block-editor/src/components/block-alignment-matrix-control/index.js +++ b/packages/block-editor/src/components/block-alignment-matrix-control/index.js @@ -23,9 +23,6 @@ function BlockAlignmentMatrixControl( props ) { return ( { const openOnArrowDown = ( event ) => { diff --git a/packages/block-editor/src/components/duotone-control/index.js b/packages/block-editor/src/components/duotone-control/index.js index 6b83ebdfea94d..7682e7ee157e8 100644 --- a/packages/block-editor/src/components/duotone-control/index.js +++ b/packages/block-editor/src/components/duotone-control/index.js @@ -36,10 +36,6 @@ function DuotoneControl( { popoverProps={ { className: 'block-editor-duotone-control__popover', headerTitle: __( 'Duotone' ), - // Note: currently we can't remove `variant` from `popoverProps` because - // the `Dropdown` component is not able to read the same variant data - // from context. - variant: 'toolbar', } } renderToggle={ ( { isOpen, onToggle } ) => { const openOnArrowDown = ( event ) => { diff --git a/packages/block-editor/src/components/media-replace-flow/index.js b/packages/block-editor/src/components/media-replace-flow/index.js index 0e1e8cf20a877..9aa36b1b88c85 100644 --- a/packages/block-editor/src/components/media-replace-flow/index.js +++ b/packages/block-editor/src/components/media-replace-flow/index.js @@ -59,12 +59,7 @@ const MediaReplaceFlow = ( { multiple = false, addToGallery, handleUpload = true, - popoverProps = { - // Note: currently we can't remove `variant` from `popoverProps` because - // the `Dropdown` component is not able to read the same variant data - // from context. - variant: 'toolbar', - }, + popoverProps, } ) => { const mediaUpload = useSelect( ( select ) => { return select( blockEditorStore ).getSettings().mediaUpload; From 1863132d5cdaad1b442760db2affc62d463de58a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 13:31:36 +0200 Subject: [PATCH 14/19] Simplify Dropdown implementation --- packages/components/src/dropdown-menu/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index ae2c48138c7c7..a9f90575590fa 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -81,9 +81,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { const mergedPopoverProps = mergeProps( { className: 'components-dropdown-menu__popover', - // Do not add a `variant` prop if it's not defined, to avoid overriding - // values from internal context system. - ...( !! variant ? { variant } : {} ), + variant, }, popoverProps ); From 599f846c9f148383054e50af3bc27770a89fbc45 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 16:37:33 +0200 Subject: [PATCH 15/19] Tidy up types --- packages/components/src/dropdown-menu-v2/index.tsx | 4 ++-- packages/components/src/dropdown-menu-v2/types.ts | 4 ++-- packages/components/src/dropdown-menu/index.tsx | 9 ++++++--- packages/components/src/dropdown-menu/types.ts | 8 ++++++++ packages/components/src/dropdown/index.tsx | 5 ++--- packages/components/src/dropdown/types.ts | 8 ++++++++ 6 files changed, 28 insertions(+), 10 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index 28d825b8934ec..02f8322aa6a52 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -35,7 +35,7 @@ import type { DropdownMenuRadioItemProps, DropdownMenuSeparatorProps, DropdownSubMenuTriggerProps, - DropdownMenuContext, + DropdownMenuInternalContext, DropdownMenuPrivateContext as DropdownMenuPrivateContextType, } from './types'; @@ -70,7 +70,7 @@ const UnconnectedDropdownMenu = ( props: DropdownMenuProps ) => { variant, } = useContextSystem< // Adding `className` to the context type to avoid a TS error - DropdownMenuProps & DropdownMenuContext & { className?: string } + DropdownMenuProps & DropdownMenuInternalContext & { className?: string } >( props, 'DropdownMenu' ); // Render the portal in the default slot used by the legacy Popover component. diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts index 4ea3543167025..5c7d6469b656c 100644 --- a/packages/components/src/dropdown-menu-v2/types.ts +++ b/packages/components/src/dropdown-menu-v2/types.ts @@ -249,7 +249,7 @@ export type DropdownMenuGroupProps = { export type DropdownMenuSeparatorProps = {}; -export type DropdownMenuContext = { +export type DropdownMenuInternalContext = { /** * This variant can be used to change the appearance of the component in * specific contexts, ie. when rendered inside the `Toolbar` component. @@ -258,7 +258,7 @@ export type DropdownMenuContext = { }; export type DropdownMenuPrivateContext = Pick< - DropdownMenuContext, + DropdownMenuInternalContext, 'variant' > & { portalContainer: HTMLElement | null; diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index a9f90575590fa..8c9f702f6bd33 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -15,7 +15,11 @@ import { contextConnectWithoutRef, useContextSystem } from '../ui/context'; import Button from '../button'; import Dropdown from '../dropdown'; import { NavigableMenu } from '../navigable-container'; -import type { DropdownMenuProps, DropdownOption } from './types'; +import type { + DropdownMenuProps, + DropdownOption, + DropdownMenuInternalContext, +} from './types'; function mergeProps< T extends { className?: string; [ key: string ]: unknown } @@ -55,8 +59,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { // Context variant, - // TODO: unify type with v2, consider adding unstyled? - } = useContextSystem< DropdownMenuProps & { variant?: 'toolbar' } >( + } = useContextSystem< DropdownMenuProps & DropdownMenuInternalContext >( dropdownMenuProps, 'DropdownMenu' ); diff --git a/packages/components/src/dropdown-menu/types.ts b/packages/components/src/dropdown-menu/types.ts index badfcb54d6072..1063631c65113 100644 --- a/packages/components/src/dropdown-menu/types.ts +++ b/packages/components/src/dropdown-menu/types.ts @@ -141,3 +141,11 @@ export type DropdownMenuProps = { */ controls?: DropdownOption[] | DropdownOption[][]; }; + +export type DropdownMenuInternalContext = { + /** + * This variant can be used to change the appearance of the component in + * specific contexts, ie. when rendered inside the `Toolbar` component. + */ + variant?: 'toolbar'; +}; diff --git a/packages/components/src/dropdown/index.tsx b/packages/components/src/dropdown/index.tsx index 16d4a116963ef..fa3c61fd365d3 100644 --- a/packages/components/src/dropdown/index.tsx +++ b/packages/components/src/dropdown/index.tsx @@ -16,7 +16,7 @@ import deprecated from '@wordpress/deprecated'; */ import { contextConnect, useContextSystem } from '../ui/context'; import Popover from '../popover'; -import type { DropdownProps } from './types'; +import type { DropdownProps, DropdownInternalContext } from './types'; function useObservableState( initialState: boolean, @@ -56,8 +56,7 @@ const UnconnectedDropdown = ( // From context system variant, - // TODO: unify type with v2, consider adding unstyled? - } = useContextSystem< DropdownProps & { variant?: 'toolbar' } >( + } = useContextSystem< DropdownProps & DropdownInternalContext >( props, 'Dropdown' ); diff --git a/packages/components/src/dropdown/types.ts b/packages/components/src/dropdown/types.ts index 4842dc7d0a362..c95953f37b1fb 100644 --- a/packages/components/src/dropdown/types.ts +++ b/packages/components/src/dropdown/types.ts @@ -112,3 +112,11 @@ export type DropdownProps = { */ position?: PopoverProps[ 'position' ]; }; + +export type DropdownInternalContext = { + /** + * This variant can be used to change the appearance of the component in + * specific contexts, ie. when rendered inside the `Toolbar` component. + */ + variant?: 'toolbar'; +}; From 40adcd633e60e0d5431f98f5a5e25b9ec35c3178 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 16:42:30 +0200 Subject: [PATCH 16/19] Remove toolbar variant storybook example for Popover --- packages/components/src/popover/stories/index.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/packages/components/src/popover/stories/index.tsx b/packages/components/src/popover/stories/index.tsx index fc8a346b08ea9..dc916af180558 100644 --- a/packages/components/src/popover/stories/index.tsx +++ b/packages/components/src/popover/stories/index.tsx @@ -128,20 +128,6 @@ Default.args = { ), }; -export const Toolbar: ComponentStory< typeof Popover > = Template.bind( {} ); -Toolbar.args = { - children: ( -
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim - ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut - aliquip ex ea commodo consequat. -
- ), - // TODO: should we deprecate prop? Should we modify example? - variant: 'toolbar', -}; - export const Unstyled: ComponentStory< typeof Popover > = Template.bind( {} ); Unstyled.args = { children: ( @@ -152,7 +138,6 @@ Unstyled.args = { aliquip ex ea commodo consequat. ), - // Where is unstyled used? variant: 'unstyled', }; From 9ca65894247ff7aa6eed683d019efdc65486c155 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 17:14:12 +0200 Subject: [PATCH 17/19] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0b0784f496efa..76f6e596658f6 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -5,6 +5,7 @@ ### Enhancements - `BorderControl`: Improve color code readability in aria-label ([#51197](https://github.com/WordPress/gutenberg/pull/51197)). +- `Dropdown` and `DropdownMenu`: use internal context system to automatically pick the toolbar popover variant when rendered inside the `Toolbar` component ([#51154](https://github.com/WordPress/gutenberg/pull/51154)). ### Bug Fix From 59d21e0808a68fd2764d6638efc9976d9f4e3791 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 17:16:36 +0200 Subject: [PATCH 18/19] Complete renaming internal type --- packages/components/src/dropdown-menu-v2/styles.ts | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index d3ed206b5f731..eb1aec2d8a2d7 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -11,7 +11,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import { COLORS, font, rtl, CONFIG } from '../utils'; import { space } from '../ui/utils/space'; import Icon from '../icon'; -import type { DropdownMenuContext } from './types'; +import type { DropdownMenuInternalContext } from './types'; const ANIMATION_PARAMS = { SLIDE_AMOUNT: '2px', @@ -62,7 +62,9 @@ const slideLeftAndFade = keyframes( { '100%': { opacity: 1, transform: 'translateX(0)' }, } ); -const baseContent = ( variant: DropdownMenuContext[ 'variant' ] ) => css` +const baseContent = ( + variant: DropdownMenuInternalContext[ 'variant' ] +) => css` min-width: 220px; background-color: ${ COLORS.ui.background }; border-radius: ${ CONFIG.radiusBlockUi }; @@ -200,12 +202,12 @@ const baseItem = css` `; export const Content = styled( DropdownMenu.Content )< - Pick< DropdownMenuContext, 'variant' > + Pick< DropdownMenuInternalContext, 'variant' > >` ${ ( props ) => baseContent( props.variant ) } `; export const SubContent = styled( DropdownMenu.SubContent )< - Pick< DropdownMenuContext, 'variant' > + Pick< DropdownMenuInternalContext, 'variant' > >` ${ ( props ) => baseContent( props.variant ) } `; @@ -246,7 +248,7 @@ export const Label = styled( DropdownMenu.Label )` `; export const Separator = styled( DropdownMenu.Separator )< - Pick< DropdownMenuContext, 'variant' > + Pick< DropdownMenuInternalContext, 'variant' > >` height: ${ CONFIG.borderWidth }; /* TODO: doesn't match border color from variables */ From af98989a6008f421d6bfb8e46bcae717a42e408a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 6 Jun 2023 17:44:52 +0200 Subject: [PATCH 19/19] Remove duplicate hardcoded classnames(already added by context connexct) --- packages/components/src/dropdown-menu/index.tsx | 2 +- packages/components/src/dropdown/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dropdown-menu/index.tsx b/packages/components/src/dropdown-menu/index.tsx index 8c9f702f6bd33..b5b7533e52bc4 100644 --- a/packages/components/src/dropdown-menu/index.tsx +++ b/packages/components/src/dropdown-menu/index.tsx @@ -91,7 +91,7 @@ function UnconnectedDropdownMenu( dropdownMenuProps: DropdownMenuProps ) { return ( { const openOnArrowDown = ( event: React.KeyboardEvent ) => { diff --git a/packages/components/src/dropdown/index.tsx b/packages/components/src/dropdown/index.tsx index fa3c61fd365d3..2060254fa73c1 100644 --- a/packages/components/src/dropdown/index.tsx +++ b/packages/components/src/dropdown/index.tsx @@ -129,7 +129,7 @@ const UnconnectedDropdown = ( return (