From 387083456a6de5d8ebc4e6a7818e55ef77972dca Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 28 Aug 2024 00:10:41 +0200 Subject: [PATCH 1/9] DropdownMenuV2: add GroupLabel subcomponent --- .../src/dropdown-menu-v2/group-label.tsx | 26 +++++++++++++++++++ .../components/src/dropdown-menu-v2/index.tsx | 4 +++ .../components/src/dropdown-menu-v2/styles.ts | 13 ++++++++++ 3 files changed, 43 insertions(+) create mode 100644 packages/components/src/dropdown-menu-v2/group-label.tsx diff --git a/packages/components/src/dropdown-menu-v2/group-label.tsx b/packages/components/src/dropdown-menu-v2/group-label.tsx new file mode 100644 index 0000000000000..1d81fbc8c06fd --- /dev/null +++ b/packages/components/src/dropdown-menu-v2/group-label.tsx @@ -0,0 +1,26 @@ +/** + * WordPress dependencies + */ +import { forwardRef, useContext } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import type { WordPressComponentProps } from '../context'; +import { DropdownMenuContext } from './context'; +import type { DropdownMenuGroupProps } from './types'; +import * as Styled from './styles'; + +export const DropdownMenuGroupLabel = forwardRef< + HTMLDivElement, + WordPressComponentProps< DropdownMenuGroupProps, 'div', false > +>( function DropdownMenuGroup( props, ref ) { + const dropdownMenuContext = useContext( DropdownMenuContext ); + return ( + + ); +} ); diff --git a/packages/components/src/dropdown-menu-v2/index.tsx b/packages/components/src/dropdown-menu-v2/index.tsx index 96d335f7b38bb..34805d2d3e268 100644 --- a/packages/components/src/dropdown-menu-v2/index.tsx +++ b/packages/components/src/dropdown-menu-v2/index.tsx @@ -32,6 +32,7 @@ import { DropdownMenuItem } from './item'; import { DropdownMenuCheckboxItem } from './checkbox-item'; import { DropdownMenuRadioItem } from './radio-item'; import { DropdownMenuGroup } from './group'; +import { DropdownMenuGroupLabel } from './group-label'; import { DropdownMenuSeparator } from './separator'; import { DropdownMenuItemLabel } from './item-label'; import { DropdownMenuItemHelpText } from './item-help-text'; @@ -215,6 +216,9 @@ export const DropdownMenuV2 = Object.assign( Group: Object.assign( DropdownMenuGroup, { displayName: 'DropdownMenuV2.Group', } ), + GroupLabel: Object.assign( DropdownMenuGroupLabel, { + displayName: 'DropdownMenuV2.GroupLabel', + } ), Separator: Object.assign( DropdownMenuSeparator, { displayName: 'DropdownMenuV2.Separator', } ), diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index 9e71316b6b9dc..cb23e2a755e9a 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -304,6 +304,19 @@ export const DropdownMenuGroup = styled( Ariakit.MenuGroup )` display: contents; `; +export const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )` + /* Occupy the width of all grid columns (ie. full width) */ + grid-column: 1 / -1; + + padding-block: ${ ITEM_PADDING_BLOCK }; + padding-inline: ${ ITEM_PADDING_INLINE }; + + font-size: 11px; + font-weight: 500; + line-height: 1.4; + text-transform: uppercase; +`; + export const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )< Pick< DropdownMenuContext, 'variant' > >` From 1193edff64c01332b9df79cac821e2ff739cd6df Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 28 Aug 2024 00:10:49 +0200 Subject: [PATCH 2/9] Use in Storybook examples --- .../dropdown-menu-v2/stories/index.story.tsx | 45 ++++++++++++++----- 1 file changed, 33 insertions(+), 12 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx index fd14bb68b1d6a..90d15ca2ea6c1 100644 --- a/packages/components/src/dropdown-menu-v2/stories/index.story.tsx +++ b/packages/components/src/dropdown-menu-v2/stories/index.story.tsx @@ -32,6 +32,8 @@ const meta: Meta< typeof DropdownMenuV2 > = { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 Group: DropdownMenuV2.Group, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 + GroupLabel: DropdownMenuV2.GroupLabel, + // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 Separator: DropdownMenuV2.Separator, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 Context: DropdownMenuV2.Context, @@ -83,6 +85,7 @@ export const Default: StoryFn< typeof DropdownMenuV2 > = ( props ) => ( Disabled item + Group label } > @@ -182,6 +185,9 @@ export const WithCheckboxes: StoryFn< typeof DropdownMenuV2 > = ( props ) => { return ( + + Single selection, uncontrolled + = ( props ) => { Checkbox item A - Uncontrolled + Initially unchecked = ( props ) => { Checkbox item B - Uncontrolled, initially checked + Initially checked + + Single selection, controlled + = ( props ) => { Checkbox item A - Controlled + Initially unchecked = ( props ) => { Checkbox item B - Controlled, initially checked + Initially checked + + Multiple selection, uncontrolled + = ( props ) => { Checkbox item A - Uncontrolled, multiple selection + Initially unchecked = ( props ) => { Checkbox item B - Uncontrolled, multiple selection, initially checked + Initially checked + + Multiple selection, controlled + = ( props ) => { Checkbox item A - Controlled, multiple selection + Initially unchecked = ( props ) => { Checkbox item B - Controlled, multiple selection, initially checked + Initially checked @@ -307,12 +322,15 @@ export const WithRadios: StoryFn< typeof DropdownMenuV2 > = ( props ) => { return ( + + Uncontrolled + Radio item 1 - Uncontrolled + Initially unchecked = ( props ) => { Radio item 2 - Uncontrolled, initially checked + Initially checked + + Controlled + = ( props ) => { Radio item 1 - Controlled + Initially unchecked = ( props ) => { Radio item 2 - Controlled, initially checked + Initially checked From a5bbf8d741bbb1a9d5c09f7f38219f115e482a46 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 28 Aug 2024 09:21:22 +0200 Subject: [PATCH 3/9] Use Text component --- packages/components/src/dropdown-menu-v2/group-label.tsx | 5 +++++ packages/components/src/dropdown-menu-v2/styles.ts | 9 ++------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/group-label.tsx b/packages/components/src/dropdown-menu-v2/group-label.tsx index 1d81fbc8c06fd..b1edc5995ca5f 100644 --- a/packages/components/src/dropdown-menu-v2/group-label.tsx +++ b/packages/components/src/dropdown-menu-v2/group-label.tsx @@ -8,6 +8,7 @@ import { forwardRef, useContext } from '@wordpress/element'; */ import type { WordPressComponentProps } from '../context'; import { DropdownMenuContext } from './context'; +import { Text } from '../text'; import type { DropdownMenuGroupProps } from './types'; import * as Styled from './styles'; @@ -19,6 +20,10 @@ export const DropdownMenuGroupLabel = forwardRef< return ( + } { ...props } store={ dropdownMenuContext?.store } /> diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index cb23e2a755e9a..d08186db60f58 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -306,15 +306,10 @@ export const DropdownMenuGroup = styled( Ariakit.MenuGroup )` export const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )` /* Occupy the width of all grid columns (ie. full width) */ - grid-column: 1 / -1; + grid-column: 2 / -1; padding-block: ${ ITEM_PADDING_BLOCK }; - padding-inline: ${ ITEM_PADDING_INLINE }; - - font-size: 11px; - font-weight: 500; - line-height: 1.4; - text-transform: uppercase; + padding-inline-end: ${ ITEM_PADDING_INLINE }; `; export const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )< From f8d68dd0869f7da2df130c02f955fda7474d401a Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 28 Aug 2024 09:28:39 +0200 Subject: [PATCH 4/9] Use the first-party group label in the block bindings dropdown menu --- packages/block-editor/src/hooks/block-bindings.js | 9 ++------- packages/block-editor/src/hooks/block-bindings.scss | 8 -------- 2 files changed, 2 insertions(+), 15 deletions(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 961a34f6f858f..7ac681c4a9c8c 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -55,14 +55,9 @@ function BlockBindingsPanelDropdown( { fieldsList, attribute, binding } ) { { Object.keys( fieldsList ).length > 1 && ( - + { registeredSources[ name ].label } - + ) } { Object.entries( fields ).map( ( [ key, value ] ) => ( Date: Wed, 28 Aug 2024 18:50:29 +0200 Subject: [PATCH 5/9] Apply design feedback --- packages/components/src/dropdown-menu-v2/group-label.tsx | 8 +++++++- packages/components/src/dropdown-menu-v2/styles.ts | 7 ++++--- 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/group-label.tsx b/packages/components/src/dropdown-menu-v2/group-label.tsx index b1edc5995ca5f..9f0e11651d905 100644 --- a/packages/components/src/dropdown-menu-v2/group-label.tsx +++ b/packages/components/src/dropdown-menu-v2/group-label.tsx @@ -22,7 +22,13 @@ export const DropdownMenuGroupLabel = forwardRef< ref={ ref } render={ // @ts-expect-error The `children` prop is passed - + } { ...props } store={ dropdownMenuContext?.store } diff --git a/packages/components/src/dropdown-menu-v2/styles.ts b/packages/components/src/dropdown-menu-v2/styles.ts index d08186db60f58..00a22d91dd359 100644 --- a/packages/components/src/dropdown-menu-v2/styles.ts +++ b/packages/components/src/dropdown-menu-v2/styles.ts @@ -306,10 +306,11 @@ export const DropdownMenuGroup = styled( Ariakit.MenuGroup )` export const DropdownMenuGroupLabel = styled( Ariakit.MenuGroupLabel )` /* Occupy the width of all grid columns (ie. full width) */ - grid-column: 2 / -1; + grid-column: 1 / -1; - padding-block: ${ ITEM_PADDING_BLOCK }; - padding-inline-end: ${ ITEM_PADDING_INLINE }; + padding-block-start: ${ space( 3 ) }; + padding-block-end: ${ space( 2 ) }; + padding-inline: ${ ITEM_PADDING_INLINE }; `; export const DropdownMenuSeparator = styled( Ariakit.MenuSeparator )< From 5df67686e0f228509b5b7cc307ca94d4a4a03e5b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 28 Aug 2024 20:06:06 +0200 Subject: [PATCH 6/9] Remove unneeded block-editor-bindings__popover classname --- packages/block-editor/src/hooks/block-bindings.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 7ac681c4a9c8c..3b90ecc1a0c17 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -155,7 +155,6 @@ function EditableBlockBindingsPanelItems( { isMobile ? 'bottom-start' : 'left-start' } gutter={ isMobile ? 8 : 36 } - className="block-editor-bindings__popover" trigger={ Date: Wed, 28 Aug 2024 20:09:26 +0200 Subject: [PATCH 7/9] Add dedicated DropdownMenuGroupLabelProps type --- packages/components/src/dropdown-menu-v2/group-label.tsx | 4 ++-- packages/components/src/dropdown-menu-v2/types.ts | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/group-label.tsx b/packages/components/src/dropdown-menu-v2/group-label.tsx index 9f0e11651d905..7d838ef9fa620 100644 --- a/packages/components/src/dropdown-menu-v2/group-label.tsx +++ b/packages/components/src/dropdown-menu-v2/group-label.tsx @@ -9,12 +9,12 @@ import { forwardRef, useContext } from '@wordpress/element'; import type { WordPressComponentProps } from '../context'; import { DropdownMenuContext } from './context'; import { Text } from '../text'; -import type { DropdownMenuGroupProps } from './types'; +import type { DropdownMenuGroupLabelProps } from './types'; import * as Styled from './styles'; export const DropdownMenuGroupLabel = forwardRef< HTMLDivElement, - WordPressComponentProps< DropdownMenuGroupProps, 'div', false > + WordPressComponentProps< DropdownMenuGroupLabelProps, 'div', false > >( function DropdownMenuGroup( props, ref ) { const dropdownMenuContext = useContext( DropdownMenuContext ); return ( diff --git a/packages/components/src/dropdown-menu-v2/types.ts b/packages/components/src/dropdown-menu-v2/types.ts index f49f026b78793..795cd9ac76ff5 100644 --- a/packages/components/src/dropdown-menu-v2/types.ts +++ b/packages/components/src/dropdown-menu-v2/types.ts @@ -87,6 +87,13 @@ export interface DropdownMenuGroupProps { children: React.ReactNode; } +export interface DropdownMenuGroupLabelProps { + /** + * The contents of the dropdown menu group. + */ + children: React.ReactNode; +} + export interface DropdownMenuItemProps { /** * The contents of the menu item. From e148e81d282c2fa7b54ec473352d8d5612dfe2b8 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 28 Aug 2024 20:10:11 +0200 Subject: [PATCH 8/9] Fix README --- .../components/src/dropdown-menu-v2/README.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/packages/components/src/dropdown-menu-v2/README.md b/packages/components/src/dropdown-menu-v2/README.md index d0547f1f14260..771b5b74b24bf 100644 --- a/packages/components/src/dropdown-menu-v2/README.md +++ b/packages/components/src/dropdown-menu-v2/README.md @@ -311,7 +311,7 @@ The help text contents. - Required: yes -### `DropdownMenuGroup` +### `DropdownMenuV2.Group` Used to group menu items. @@ -325,6 +325,20 @@ The contents of the group. - Required: yes -### `DropdownMenuSeparatorProps` +### `DropdownMenuV2.GroupLabel` + +Used to render a group label. The label text should be kept as short as possible. + +#### Props + +The component accepts the following props: + +##### `children`: `React.ReactNode` + +The contents of the group label. + +- Required: yes + +### `DropdownMenuV2.Separator` Used to render a visual separator. From 2e18b863562bd0a851752b7bb9d26aabcf55c45d Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 28 Aug 2024 20:12:33 +0200 Subject: [PATCH 9/9] CHANGELOG --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index f3c851344b976..e039da66001f3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -52,6 +52,7 @@ ### Internal - `DropdownMenu` v2: refactor to overloaded naming convention ([#64654](https://github.com/WordPress/gutenberg/pull/64654)). +- `DropdownMenu` v2: add `GroupLabel` subcomponent ([#64854](https://github.com/WordPress/gutenberg/pull/64854)). - `Composite` V2: fix Storybook docgen ([#64682](https://github.com/WordPress/gutenberg/pull/64682)). ## 28.6.0 (2024-08-21)