Use Text component

WordPress · Aug 28, 2024 · 64f597c · 64f597c
1 parent ad75757
commit 64f597c
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git 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 (
 		<Styled.DropdownMenuGroupLabel
 			ref={ ref }
+			render={
+				// @ts-expect-error The `children` prop is passed
+				<Text upperCase variant="muted" />
+			}
 			{ ...props }
 			store={ dropdownMenuContext?.store }
 		/>

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