Forms: update width control to use more modern togglecontrol (#41130)

* Forms: update width selector to use ToggleGroupControl * changelog * Fix onClick/onChange Co-authored-by: Lena Morita <[email protected]> * Simplyfy the code * Update the label to match block editor --------- Co-authored-by: Lena Morita <[email protected]> Co-authored-by: Enej Bajgoric <[email protected]>
Automattic · Jan 17, 2025 · 0ec29c1 · 0ec29c1
1 parent e37d4ea
commit 0ec29c1
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/projects/packages/forms/changelog/update-forms-width-togglecontrol b/projects/packages/forms/changelog/update-forms-width-togglecontrol
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: update width control to use more modern ToggleGroupControl
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-width.js
@@ -1,31 +1,40 @@
-import { BaseControl, Button, ButtonGroup } from '@wordpress/components';
+import {
+	BaseControl,
+	__experimentalToggleGroupControl as ToggleGroupControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
+const PERCENTAGE_WIDTHS = [ 25, 50, 75, 100 ];
+
 export default function JetpackFieldWidth( { setAttributes, width } ) {
 	return (
 		<BaseControl
 			help={ __(
 				'Adjust the width of the field to include multiple fields on a single line.',
 				'jetpack-forms'
 			) }
-			className="jetpack-field-label__width"
 			__nextHasNoMarginBottom={ true }
 		>
-			<BaseControl.VisualLabel>{ __( 'Field Width', 'jetpack-forms' ) }</BaseControl.VisualLabel>
-			<ButtonGroup aria-label={ __( 'Field Width', 'jetpack-forms' ) }>
-				{ [ 25, 50, 75, 100 ].map( widthValue => {
+			<ToggleGroupControl
+				__next40pxDefaultSize
+				__nextHasNoMarginBottom
+				aria-label={ __( 'Width', 'jetpack-forms' ) }
+				isBlock
+				label={ __( 'Width', 'jetpack-forms' ) }
+				onChange={ value => setAttributes( { width: value } ) }
+				value={ width }
+			>
+				{ PERCENTAGE_WIDTHS.map( widthValue => {
 					return (
-						<Button
+						<ToggleGroupControlOption
 							key={ widthValue }
-							isSmall
-							variant={ widthValue === width ? 'primary' : undefined }
-							onClick={ () => setAttributes( { width: widthValue } ) }
-						>
-							{ widthValue }%
-						</Button>
+							label={ `${ widthValue }%` }
+							value={ widthValue }
+						/>
 					);
 				} ) }
-			</ButtonGroup>
+			</ToggleGroupControl>
 		</BaseControl>
 	);
 }
diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -480,16 +480,6 @@
 	}
 }
 
-.jetpack-field-label__width {
-	.components-button-group {
-		display: block;
-	}
-
-	.components-base-control__field {
-		margin-bottom: 12px;
-	}
-}
-
 // Duplicated to elevate specificity in order to overwrite core styles
 .jetpack-field-multiple__list.jetpack-field-multiple__list {
 	list-style-type: none;