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 )<