Fix incorrect usage of ItemGroup in the filters panel.

WordPress · Dec 2, 2024 · b34462f · b34462f
1 parent aef323a
commit b34462f
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 7 deletions.
diff --git a/packages/block-editor/src/components/global-styles/filters-panel.js b/packages/block-editor/src/components/global-styles/filters-panel.js
@@ -10,10 +10,10 @@ import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
 	__experimentalItemGroup as ItemGroup,
+	__experimentalItem as Item,
 	__experimentalHStack as HStack,
 	__experimentalZStack as ZStack,
 	__experimentalDropdownContentWrapper as DropdownContentWrapper,
-	Button,
 	MenuGroup,
 	ColorIndicator,
 	DuotonePicker,
@@ -189,15 +189,16 @@ export default function FiltersPanel( {
 
 							return (
 								<ItemGroup isBordered isSeparated>
-									<Button
+									<Item
+										as="button"
 										__next40pxDefaultSize
 										{ ...toggleProps }
 									>
 										<LabeledColorIndicator
 											indicator={ duotone }
 											label={ __( 'Duotone' ) }
 										/>
-									</Button>
+									</Item>
 								</ItemGroup>
 							);
 						} }

diff --git a/packages/components/src/item-group/item/hook.ts b/packages/components/src/item-group/item/hook.ts
@@ -20,6 +20,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 		onClick,
 		role = 'listitem',
 		size: sizeProp,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'Item' );
 
@@ -35,13 +36,13 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 		() =>
 			cx(
 				( as === 'button' || as === 'a' ) &&
-					styles.unstyledButton( as ),
+					styles.unstyledButton( as, __next40pxDefaultSize ),
 				styles.itemSizes[ size ] || styles.itemSizes.medium,
 				styles.item,
 				spacedAround && styles.spacedAround,
 				className
 			),
-		[ as, className, cx, size, spacedAround ]
+		[ as, className, cx, size, spacedAround, __next40pxDefaultSize ]
 	);
 
 	const wrapperClassName = cx( styles.itemWrapper );

diff --git a/packages/components/src/item-group/styles.ts b/packages/components/src/item-group/styles.ts
@@ -8,7 +8,10 @@ import { css } from '@emotion/react';
  */
 import { CONFIG, COLORS, font } from '../utils';
 
-export const unstyledButton = ( as: 'a' | 'button' ) => {
+export const unstyledButton = (
+	as: 'a' | 'button',
+	__next40pxDefaultSize: boolean | undefined
+) => {
 	return css`
 		font-size: ${ font( 'default.fontSize' ) };
 		font-family: inherit;
@@ -18,7 +21,9 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
 		background: none;
 		text-align: start;
 		text-decoration: ${ as === 'a' ? 'none' : undefined };
-
+		height: ${ __next40pxDefaultSize && as === 'button'
+			? '40px'
+			: undefined };
 		svg,
 		path {
 			fill: currentColor;

diff --git a/packages/components/src/item-group/types.ts b/packages/components/src/item-group/types.ts
@@ -38,6 +38,12 @@ export interface ItemProps {
 	 * @default 'medium'
 	 */
 	size?: ItemSize;
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next40pxDefaultSize?: boolean;
 	/**
 	 * The children elements.
 	 */