Tweak spacing

WordPress · Jul 24, 2024 · 5ecc65e · 5ecc65e
1 parent b0b2283
commit 5ecc65e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
@@ -83,7 +83,14 @@ export function RadioControl(
 			help={ help }
 			className={ clsx( className, 'components-radio-control' ) }
 		>
-			<VStack spacing={ 2 }>
+			<VStack
+				spacing={ 3 }
+				className={ clsx(
+					'components-radio-control__group-wrapper',
+					!! help &&
+						'components-radio-control__group-wrapper--with-help'
+				) }
+			>
 				{ options.map( ( option, index ) => (
 					<div
 						key={ `${ id }-${ index }` }

diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
@@ -1,8 +1,12 @@
+.components-radio-control__group-wrapper--with-help {
+	margin-block-end: $grid-unit-15;
+}
+
 .components-radio-control__option {
 	display: grid;
 	grid-template-columns: auto 1fr;
 	grid-template-rows: auto minmax(0, max-content);
-	column-gap: $grid-unit-15;
+	column-gap: $grid-unit-10;
 	align-items: center;
 }
 
@@ -49,7 +53,7 @@
 	grid-column: 2;
 	grid-row: 2;
 
-	padding-block-start: $grid-unit-10;
+	padding-block-start: $grid-unit-05;
 
 	// Override the top margin of the StyledHelp component from BaseControl.
 	// TODO: we should tweak the StyledHelp component to not have a top margin.