Button: Replace ButtonGroup usage with ToggleGroupControl

Author: Mamaduka

packages/block-library/src/button/edit.js

@@ -16,13 +16,13 @@ import removeAnchorTag from '../utils/remove-anchor-tag';
 import { __ } from '@wordpress/i18n';
 import { useEffect, useState, useRef, useMemo } from '@wordpress/element';
 import {
-	Button,
-	ButtonGroup,
 	TextControl,
 	ToolbarButton,
 	Popover,
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components';
 import {
 	AlignmentControl,
@@ -115,46 +115,38 @@ function useEnter( props ) {
 }
 
 function WidthPanel( { selectedWidth, setAttributes } ) {
-	function handleChange( newWidth ) {
-		// Check if we are toggling the width off
-		const width = selectedWidth === newWidth ? undefined : newWidth;
-
-		// Update attributes.
-		setAttributes( { width } );
-	}
-
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
-			resetAll={ () => {
-				handleChange( undefined );
-			} }
+			resetAll={ () => setAttributes( { width: undefined } ) }
 		>
 			<ToolsPanelItem
 				label={ __( 'Button width' ) }
-				__nextHasNoMarginBottom
 				isShownByDefault
 				hasValue={ () => !! selectedWidth }
-				onDeselect={ () => handleChange( undefined ) }
+				onDeselect={ () => setAttributes( { width: undefined } ) }
+				__nextHasNoMarginBottom
 			>
-				<ButtonGroup aria-label={ __( 'Button width' ) }>
+				<ToggleGroupControl
+					label={ __( 'Button width' ) }
+					value={ selectedWidth }
+					onChange={ ( newWidth ) =>
+						setAttributes( { width: newWidth } )
+					}
+					isBlock
+					__next40pxDefaultSize
+					__nextHasNoMarginBottom
+				>
 					{ [ 25, 50, 75, 100 ].map( ( widthValue ) => {
 						return (
-							<Button
+							<ToggleGroupControlOption
 								key={ widthValue }
-								size="small"
-								variant={
-									widthValue === selectedWidth
-										? 'primary'
-										: undefined
-								}
-								onClick={ () => handleChange( widthValue ) }
-							>
-								{ widthValue }%
-							</Button>
+								value={ widthValue }
+								label={ `${ widthValue }%` }
+							/>
 						);
 					} ) }
-				</ButtonGroup>
+				</ToggleGroupControl>
 			</ToolsPanelItem>
 		</ToolsPanel>
 	);