From 8f08d50b7941fda13aeaf65f5c70921d1bae4659 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Thu, 18 Apr 2024 23:05:51 +0900
Subject: [PATCH] Use styled span for help text

---
 packages/components/src/checkbox-control/index.tsx  | 6 +++++-
 packages/components/src/checkbox-control/style.scss | 9 +++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/checkbox-control/index.tsx b/packages/components/src/checkbox-control/index.tsx
index 0ca7b3ba62946e..e3c76c600c0373 100644
--- 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
index df8ac48f684175..8f214d461c7a85 100644
--- 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});
+}