Forms: fix Single and Multiple Choice fields view styles (#39473)

Automattic · Sep 24, 2024 · f103fa7 · f103fa7
1 parent 920c82c
commit f103fa7
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/projects/packages/forms/changelog/fix-choice-fields-styles b/projects/packages/forms/changelog/fix-choice-fields-styles
@@ -0,0 +1,5 @@
+Significance: patch
+Type: fixed
+Comment: Single and Multiple Choice fields: fix view styles
+
+
diff --git a/projects/packages/forms/src/blocks/contact-form/editor.scss b/projects/packages/forms/src/blocks/contact-form/editor.scss
@@ -399,6 +399,7 @@
 				border-radius: var(--jetpack--contact-form--button-outline--border-radius);
 				padding: var(--jetpack--contact-form--button-outline--padding);
 				line-height: var(--jetpack--contact-form--button-outline--line-height);
+				align-items: center;
 
 				&.field-option-radio {
 					position: relative;
@@ -470,8 +471,9 @@
 		}
 	}
 
-	.jetpack-field-option {
-		&.field-option-radio .jetpack-option__type {
+	.jetpack-field-option.field-option-radio,
+	.wp-block-jetpack-field-option-radio {
+		.jetpack-option__type {
 			transform: translateY(15%); /* Small offset to compensate the slightly odd perceived alignment that's due to the circular shape */
 		}
 	}

diff --git a/projects/packages/forms/src/contact-form/css/grunion.css b/projects/packages/forms/src/contact-form/css/grunion.css
@@ -72,6 +72,7 @@
 .contact-form input[type='checkbox'] {
 	top: 0;
 	margin-left: 0;
+	border-radius: 4px;
 }
 
 .contact-form label {
@@ -580,7 +581,7 @@ on production builds, the attributes are being reordered, causing side-effects
 	padding: 0;
 
 	appearance: none;
-	border: solid 1px var(--jetpack--contact-form--text-color);
+	border: solid 1px currentColor;
 
 	outline-offset: 4px;
 }