Use the Text component for the help text

WordPress · Jul 19, 2024 · 27eafab · 27eafab
1 parent 988d90f
commit 27eafab
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 8 deletions.
diff --git a/packages/components/src/radio-control/index.tsx b/packages/components/src/radio-control/index.tsx
@@ -16,6 +16,7 @@ import BaseControl from '../base-control';
 import type { WordPressComponentProps } from '../context';
 import type { RadioControlProps } from './types';
 import { VStack } from '../v-stack';
+import { Text } from '../text';
 
 /**
  * Render a user interface to select the user type using radio inputs.
@@ -105,12 +106,14 @@ export function RadioControl(
 							{ option.label }
 						</label>
 						{ !! option.helpText ? (
-							<span
+							<Text
+								variant="muted"
+								size={ 12 }
 								id={ `${ id }-${ index }-help` }
 								className="components-radio-control__help-text"
 							>
 								{ option.helpText }
-							</span>
+							</Text>
 						) : null }
 					</div>
 				) ) }

diff --git a/packages/components/src/radio-control/style.scss b/packages/components/src/radio-control/style.scss
@@ -44,10 +44,4 @@
 .components-radio-control__help-text {
 	grid-column: 2;
 	grid-row: 2;
-
-	font-size: $helptext-font-size;
-	font-style: normal;
-	font-weight: normal;
-	line-height: $default-line-height;
-	color: $components-color-gray-700;
 }