ToggleGroupControl: Update large button size to 32px (WordPress#57338)

* ToggleGroupControl: Update large button size to 32px * Update snapshots * Update changelog * Use `aspect-ratio` Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com> --------- Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
bph · Dec 25, 2023 · 583d533 · 583d533
1 parent ed68c36
commit 583d533
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 29 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -22,6 +22,7 @@
 -   `DropdownMenuV2`: do not collapse suffix width ([#57238](https://github.com/WordPress/gutenberg/pull/57238)).
 -   `DateTimePicker`: Adjustment of the dot position on DayButton and expansion of the button area. ([#55502](https://github.com/WordPress/gutenberg/pull/55502)).
 -   `Modal`: Improve application of body class names ([#55430](https://github.com/WordPress/gutenberg/pull/55430)).
+-   `ToggleGroupControl`: Update button size in large variant to be 32px ([#57338](https://github.com/WordPress/gutenberg/pull/57338)).
 
 ### Experimental
 

diff --git a/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap b/packages/components/src/toggle-group-control/test/__snapshots__/index.tsx.snap
@@ -47,9 +47,9 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -117,6 +117,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -199,6 +200,7 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
 }
@@ -372,9 +374,9 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -592,9 +594,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {
@@ -662,6 +664,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
   color: #fff;
@@ -744,6 +747,7 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   z-index: 2;
   color: #1e1e1e;
   width: 30px;
+  height: 30px;
   padding-left: 0;
   padding-right: 0;
 }
@@ -911,9 +915,9 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   display: -ms-inline-flexbox;
   display: inline-flex;
   min-width: 0;
-  padding: 2px;
   position: relative;
   min-height: 36px;
+  padding: 2px;
 }
 
 .emotion-8:hover {

diff --git a/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control-option-base/styles.ts
@@ -102,12 +102,13 @@ const isIconStyles = ( {
 }: Pick< ToggleGroupControlProps, 'size' > ) => {
 	const iconButtonSizes = {
 		default: '30px',
-		'__unstable-large': '34px',
+		'__unstable-large': '32px',
 	};
 
 	return css`
 		color: ${ COLORS.gray[ 900 ] };
-		width: ${ iconButtonSizes[ size ] };
+		height: ${ iconButtonSizes[ size ] };
+		aspect-ratio: 1;
 		padding-left: 0;
 		padding-right: 0;
 	`;

diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx
@@ -47,6 +47,8 @@ function UnconnectedToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 
 	const baseId = useInstanceId( ToggleGroupControl, 'toggle-group-control' );
+	const normalizedSize =
+		__next40pxDefaultSize && size === 'default' ? '__unstable-large' : size;
 
 	const cx = useCx();
 
@@ -56,13 +58,12 @@ function UnconnectedToggleGroupControl(
 				styles.toggleGroupControl( {
 					isBlock,
 					isDeselectable,
-					size,
-					__next40pxDefaultSize,
+					size: normalizedSize,
 				} ),
 				isBlock && styles.block,
 				className
 			),
-		[ className, cx, isBlock, isDeselectable, size, __next40pxDefaultSize ]
+		[ className, cx, isBlock, isDeselectable, normalizedSize ]
 	);
 
 	const MainControl = isDeselectable
@@ -86,7 +87,7 @@ function UnconnectedToggleGroupControl(
 				label={ label }
 				onChange={ onChange }
 				ref={ forwardedRef }
-				size={ size }
+				size={ normalizedSize }
 				value={ value }
 			>
 				<LayoutGroup id={ baseId }>{ children }</LayoutGroup>

diff --git a/packages/components/src/toggle-group-control/toggle-group-control/styles.ts b/packages/components/src/toggle-group-control/toggle-group-control/styles.ts
@@ -14,22 +14,17 @@ export const toggleGroupControl = ( {
 	isBlock,
 	isDeselectable,
 	size,
-	__next40pxDefaultSize,
-}: Pick<
-	ToggleGroupControlProps,
-	'isBlock' | 'isDeselectable' | '__next40pxDefaultSize'
-> & {
+}: Pick< ToggleGroupControlProps, 'isBlock' | 'isDeselectable' > & {
 	size: NonNullable< ToggleGroupControlProps[ 'size' ] >;
 } ) => css`
 	background: ${ COLORS.ui.background };
 	border: 1px solid transparent;
 	border-radius: ${ CONFIG.controlBorderRadius };
 	display: inline-flex;
 	min-width: 0;
-	padding: 2px;
 	position: relative;
 
-	${ toggleGroupControlSize( size, __next40pxDefaultSize ) }
+	${ toggleGroupControlSize( size ) }
 	${ ! isDeselectable && enclosingBorders( isBlock ) }
 `;
 
@@ -57,21 +52,20 @@ const enclosingBorders = ( isBlock: ToggleGroupControlProps[ 'isBlock' ] ) => {
 };
 
 export const toggleGroupControlSize = (
-	size: NonNullable< ToggleGroupControlProps[ 'size' ] >,
-	__next40pxDefaultSize: ToggleGroupControlProps[ '__next40pxDefaultSize' ]
+	size: NonNullable< ToggleGroupControlProps[ 'size' ] >
 ) => {
-	const heights = {
-		default: '40px',
-		'__unstable-large': '40px',
+	const styles = {
+		default: css`
+			min-height: 36px;
+			padding: 2px;
+		`,
+		'__unstable-large': css`
+			min-height: 40px;
+			padding: 3px;
+		`,
 	};
 
-	if ( ! __next40pxDefaultSize ) {
-		heights.default = '36px';
-	}
-
-	return css`
-		min-height: ${ heights[ size ] };
-	`;
+	return styles[ size ];
 };
 
 export const block = css`