Use styled span for help text

WordPress · Apr 18, 2024 · 8f08d50 · 8f08d50
1 parent 8a7f550
commit 8f08d50
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 5 deletions.
diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
@@ -96,7 +96,11 @@ export function CheckboxControl(
 			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
 			label={ heading }
 			id={ id }
-			help={ help }
+			help={
+				<span className="components-checkbox-control__help">
+					{ help }
+				</span>
+			}
 			className={ classnames( 'components-checkbox-control', className ) }
 		>
 			<HStack spacing={ 0 } justify="start" alignment="top">

diff --git a/packages/components/src/checkbox-control/style.scss b/packages/components/src/checkbox-control/style.scss
@@ -5,10 +5,6 @@
 	@include break-small() {
 		--checkbox-input-size: 20px;
 	}
-
-	.components-base-control__help {
-		margin-left: calc(var(--checkbox-input-size) + #{$grid-unit-15});
-	}
 }
 
 .components-checkbox-control__label {
@@ -85,3 +81,8 @@ svg.components-checkbox-control__indeterminate {
 		--checkmark-size: calc(var(--checkbox-input-size) + 4px);
 	}
 }
+
+.components-checkbox-control__help {
+	display: inline-block;
+	margin-inline-start: calc(var(--checkbox-input-size) + #{$grid-unit-15});
+}