From e37d4ea4bc290681be08efcc192521c438c41e61 Mon Sep 17 00:00:00 2001
From: Mikael Korpela <mikael@ihminen.org>
Date: Fri, 17 Jan 2025 00:48:29 +0200
Subject: [PATCH] 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 <enej.bajgoric@automattic.com>
---
 .../packages/forms/changelog/fix-forms-sidebar-spacing |  4 ++++
 .../contact-form/components/jetpack-field-checkbox.js  |  1 -
 .../contact-form/components/jetpack-field-controls.js  |  5 +----
 .../components/jetpack-field-datepicker.js             |  1 +
 .../packages/forms/src/blocks/contact-form/editor.scss | 10 ----------
 5 files changed, 6 insertions(+), 15 deletions(-)
 create mode 100644 projects/packages/forms/changelog/fix-forms-sidebar-spacing

diff --git a/projects/packages/forms/changelog/fix-forms-sidebar-spacing b/projects/packages/forms/changelog/fix-forms-sidebar-spacing
new file mode 100644
index 0000000000000..74b5abcdd328a
--- /dev/null
+++ 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
index d6d18dc61379f..54608cb294afb 100644
--- 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
index 793ec274e196e..f9cefdd0bed6c 100644
--- 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
index ce84377e71240..e77688714dd1e 100644
--- 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
index 825c8dfd91a5e..d8279a34e42bb 100644
--- 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 {