ImageSizeControls: Replace ButtonGroup with ToggleGroupControl

packages/block-editor/src/components/image-size-control/index.js

@@ -2,11 +2,11 @@
  * WordPress dependencies
  */
 import {
-	Button,
-	ButtonGroup,
 	SelectControl,
 	__experimentalNumberControl as NumberControl,
 	__experimentalHStack as HStack,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -18,6 +18,25 @@ import useDimensionHandler from './use-dimension-handler';
 const IMAGE_SIZE_PRESETS = [ 25, 50, 75, 100 ];
 const noop = () => {};
 
+/**
+ * Get scaled width and height for the given scale.
+ *
+ * @param {number} scale       The scale to get the scaled width and height for.
+ * @param {number} imageWidth  The image width.
+ * @param {number} imageHeight The image height.
+ *
+ * @return {Object} The scaled width and height.
+ */
+function getScaledWidthAndHeight( scale, imageWidth, imageHeight ) {
+	const scaledWidth = Math.round( imageWidth * ( scale / 100 ) );
+	const scaledHeight = Math.round( imageHeight * ( scale / 100 ) );
+
+	return {
+		scaledWidth,
+		scaledHeight,
+	};
+}
+
 export default function ImageSizeControl( {
 	imageSizeHelp,
 	imageWidth,
@@ -33,6 +52,40 @@ export default function ImageSizeControl( {
 	const { currentHeight, currentWidth, updateDimension, updateDimensions } =
 		useDimensionHandler( height, width, imageHeight, imageWidth, onChange );
 
+	/**
+	 * Updates the dimensions for the given scale.
+	 * Handler for toggle group control change.
+	 *
+	 * @param {number} scale The scale to update the dimensions for.
+	 */
+	const handleUpdateDimensions = ( scale ) => {
+		if ( undefined === scale ) {
+			updateDimensions();
+			return;
+		}
+
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+
+		updateDimensions( scaledHeight, scaledWidth );
+	};
+
+	/**
+	 * Add the stored image preset value to toggle group control.
+	 */
+	const selectedValue = IMAGE_SIZE_PRESETS.find( ( scale ) => {
+		const { scaledWidth, scaledHeight } = getScaledWidthAndHeight(
+			scale,
+			imageWidth,
+			imageHeight
+		);
+
+		return currentWidth === scaledWidth && currentHeight === scaledHeight;
+	} );
+
 	return (
 		<>
 			{ imageSizeOptions && imageSizeOptions.length > 0 && (
@@ -70,47 +123,25 @@ export default function ImageSizeControl( {
 							size="__unstable-large"
 						/>
 					</HStack>
-					<HStack>
-						<ButtonGroup aria-label={ __( 'Image size presets' ) }>
-							{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
-								const scaledWidth = Math.round(
-									imageWidth * ( scale / 100 )
-								);
-								const scaledHeight = Math.round(
-									imageHeight * ( scale / 100 )
-								);
-
-								const isCurrent =
-									currentWidth === scaledWidth &&
-									currentHeight === scaledHeight;
-
-								return (
-									<Button
-										key={ scale }
-										size="small"
-										variant={
-											isCurrent ? 'primary' : undefined
-										}
-										isPressed={ isCurrent }
-										onClick={ () =>
-											updateDimensions(
-												scaledHeight,
-												scaledWidth
-											)
-										}
-									>
-										{ scale }%
-									</Button>
-								);
-							} ) }
-						</ButtonGroup>
-						<Button
-							size="small"
-							onClick={ () => updateDimensions() }
-						>
-							{ __( 'Reset' ) }
-						</Button>
-					</HStack>
+					<ToggleGroupControl
+						label={ __( 'Image size presets' ) }
+						hideLabelFromVision
+						onChange={ handleUpdateDimensions }
+						value={ selectedValue }
+						isBlock
+						__next40pxDefaultSize
+						__nextHasNoMarginBottom
+					>
+						{ IMAGE_SIZE_PRESETS.map( ( scale ) => {
+							return (
+								<ToggleGroupControlOption
+									key={ scale }
+									value={ scale }
+									label={ `${ scale }%` }
+								/>
+							);
+						} ) }
+					</ToggleGroupControl>
 				</div>
 			) }
 		</>

packages/block-editor/src/components/image-size-control/test/index.js

@@ -221,47 +221,8 @@ describe( 'ImageSizeControl', () => {
 		} );
 	} );
 
-	describe( 'reset button', () => {
-		it( 'resets both height and width to default values', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="200"
-					height="300"
-					width="400"
-					onChange={ mockOnChange }
-				/>
-			);
-
-			const heightInput = screen.getByRole( 'spinbutton', {
-				name: 'Height',
-			} );
-			const widthInput = screen.getByRole( 'spinbutton', {
-				name: 'Width',
-			} );
-
-			// The initial dimension values display first.
-			expect( heightInput ).toHaveValue( 300 );
-			expect( widthInput ).toHaveValue( 400 );
-
-			await user.click( screen.getByRole( 'button', { name: 'Reset' } ) );
-
-			// Both attributes are set to undefined to clear custom values.
-			expect( mockOnChange ).toHaveBeenLastCalledWith( {
-				height: undefined,
-				width: undefined,
-			} );
-
-			// The inputs display the default values once more.
-			expect( heightInput ).toHaveValue( 100 );
-			expect( widthInput ).toHaveValue( 200 );
-		} );
-	} );
-
 	describe( 'image size percentage presets', () => {
-		it( 'updates height and width attributes on selection', async () => {
+		it( 'updates height and width on selection', async () => {
 			const user = userEvent.setup();
 
 			render(
@@ -272,44 +233,25 @@ describe( 'ImageSizeControl', () => {
 				/>
 			);
 
-			const button = screen.getByRole( 'button', {
+			const button = screen.getByRole( 'radio', {
 				name: '50%',
-				pressed: false,
+				checked: false,
 			} );
 
 			await user.click( button );
 
-			expect( button ).toHaveClass( 'is-pressed' );
+			expect( button ).toBeChecked();
 
 			// Both attributes are set to the rounded scaled value.
 			expect( mockOnChange ).toHaveBeenLastCalledWith( {
 				height: 50,
 				width: 101,
 			} );
-		} );
-
-		it( 'updates height and width inputs on selection', async () => {
-			const user = userEvent.setup();
-
-			render(
-				<ImageSizeControl
-					imageHeight="100"
-					imageWidth="201"
-					onChange={ mockOnChange }
-				/>
-			);
-
-			const button = screen.getByRole( 'button', {
-				name: '50%',
-				pressed: false,
-			} );
-
-			await user.click( button );
 
-			// Both attributes are set to the rounded scaled value.
 			expect(
 				screen.getByRole( 'spinbutton', { name: 'Height' } )
 			).toHaveValue( 50 );
+
 			expect(
 				screen.getByRole( 'spinbutton', { name: 'Width' } )
 			).toHaveValue( 101 );