Button: Replace ButtonGroup usage with ToggleGroupControl (#65346)

Mamaduka · ciampo · mirka · web-flow · commit d0d1045056c3 · 2024-12-13T14:33:40.000Z
Co-authored-by: Mamaduka &lt;mamaduka@git.wordpress.org&gt;
Co-authored-by: ciampo &lt;mciampini@git.wordpress.org&gt;
Co-authored-by: mirka &lt;0mirka00@git.wordpress.org&gt;
Co-authored-by: t-hamano &lt;wildworks@git.wordpress.org&gt;
Co-authored-by: tyxla &lt;tyxla@git.wordpress.org&gt;
Co-authored-by: andreawetzel &lt;awetz583@git.wordpress.org&gt;
diff --git a/packages/block-library/src/button/edit.js b/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>
 	);
diff --git a/test/e2e/specs/editor/blocks/buttons.spec.js b/test/e2e/specs/editor/blocks/buttons.spec.js
@@ -263,12 +263,14 @@ test.describe( 'Buttons', () => {
 		await editor.insertBlock( { name: 'core/buttons' } );
 		await page.keyboard.type( 'Content' );
 		await editor.openDocumentSettingsSidebar();
-		await page.click(
-			`role=region[name="Editor settings"i] >> role=tab[name="Settings"i]`
-		);
-		await page.click(
-			'role=group[name="Button width"i] >> role=button[name="25%"i]'
-		);
+		await page
+			.getByRole( 'region', { name: 'Editor settings' } )
+			.getByRole( 'tab', { name: 'Settings' } )
+			.click();
+		await page
+			.getByRole( 'radiogroup', { name: 'Button width' } )
+			.getByRole( 'radio', { name: '25%' } )
+			.click();
 
 		// Check the content.
 		const content = await editor.getEditedPostContent();
