Forms: fix sidebar spacing (#41133)

* Forms: fix spacing in sidebar * changelog * Fixes the form so that we ship less code but still end up with the same result * Add key to the Select control --------- Co-authored-by: Enej Bajgoric <[email protected]>
Automattic · Jan 17, 2025 · e37d4ea · e37d4ea
1 parent facae61
commit e37d4ea
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 15 deletions.
diff --git a/projects/packages/forms/changelog/fix-forms-sidebar-spacing b/projects/packages/forms/changelog/fix-forms-sidebar-spacing
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: fix spacing issue in sidebar settings
diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-checkbox.js
@@ -74,7 +74,6 @@ function JetpackFieldCheckbox( props ) {
 					<PanelBody title={ __( 'Field Settings', 'jetpack-forms' ) }>
 						<ToggleControl
 							label={ __( 'Field is required', 'jetpack-forms' ) }
-							className="jetpack-field-label__required"
 							checked={ required }
 							onChange={ value => setAttributes( { required: value } ) }
 							help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) }

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-controls.js
@@ -109,7 +109,6 @@ const JetpackFieldControls = ( {
 		<ToggleControl
 			key="required"
 			label={ __( 'Field is required', 'jetpack-forms' ) }
-			className="jetpack-field-label__required"
 			checked={ required }
 			onChange={ value => setAttributes( { required: value } ) }
 			help={ __( 'You can edit the "required" label in the editor', 'jetpack-forms' ) }
@@ -170,9 +169,7 @@ const JetpackFieldControls = ( {
 					<JetpackManageResponsesSettings isChildBlock />
 				</PanelBody>
 				<PanelBody title={ __( 'Field Settings', 'jetpack-forms' ) }>
-					{ fieldSettings.filter( Boolean ).map( ( elt, index ) => (
-						<div key={ index }>{ elt }</div>
-					) ) }
+					<>{ fieldSettings }</>
 				</PanelBody>
 				<PanelColorSettings
 					title={ __( 'Color', 'jetpack-forms' ) }

diff --git a/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js b/projects/packages/forms/src/blocks/contact-form/components/jetpack-field-datepicker.js
@@ -82,6 +82,7 @@ const JetpackDatePicker = props => {
 						index: 1,
 						element: (
 							<SelectControl
+								key="date-format"
 								label={ __( 'Date Format', 'jetpack-forms' ) }
 								options={ DATE_FORMATS.map( ( { value, label: optionLabel, example } ) => ( {
 									value,

diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -267,16 +267,6 @@
 	.components-base-control {
 		margin-top: -1px;
 		margin-bottom: -3px;
-
-		&.jetpack-field-label__required {
-			.components-form-toggle {
-				margin: 2px 8px 0 16px;
-			}
-
-			.components-toggle-control__label {
-				word-break: normal;
-			}
-		}
 	}
 
 	.rich-text.jetpack-field-label__input {