From 7becc777ee9cd11e8c1ba6f68374a8cf0961f142 Mon Sep 17 00:00:00 2001
From: Sainath Poojary <spoojary614@gmail.com>
Date: Fri, 10 Jan 2025 14:33:43 +0530
Subject: [PATCH] FontSizePicker: Add help prop for additional guidance

---
 packages/components/src/font-size-picker/index.tsx | 14 +++++++++++++-
 .../src/font-size-picker/stories/index.story.tsx   |  1 +
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/font-size-picker/index.tsx b/packages/components/src/font-size-picker/index.tsx
index 582044f3757f7..c3ada21024d95 100644
--- a/packages/components/src/font-size-picker/index.tsx
+++ b/packages/components/src/font-size-picker/index.tsx
@@ -58,6 +58,7 @@ const UnforwardedFontSizePicker = (
 		withSlider = false,
 		withReset = true,
 		label = 'Size',
+		help,
 	} = props;
 
 	const units = useCustomUnits( {
@@ -132,8 +133,19 @@ const UnforwardedFontSizePicker = (
 		size,
 	} );
 
+	let helpLabel;
+	if ( help ) {
+		if ( typeof help === 'function' ) {
+			if ( value !== undefined ) {
+				helpLabel = help( value );
+			}
+		} else {
+			helpLabel = help;
+		}
+	}
+
 	return (
-		<BaseControl>
+		<BaseControl help={ helpLabel }>
 			<Container ref={ ref } className="components-font-size-picker">
 				<VisuallyHidden as="legend">
 					{ __( 'Font size' ) }
diff --git a/packages/components/src/font-size-picker/stories/index.story.tsx b/packages/components/src/font-size-picker/stories/index.story.tsx
index f6502fcfd537c..85fb62fad94a1 100644
--- a/packages/components/src/font-size-picker/stories/index.story.tsx
+++ b/packages/components/src/font-size-picker/stories/index.story.tsx
@@ -18,6 +18,7 @@ const meta: Meta< typeof FontSizePicker > = {
 	component: FontSizePicker,
 	argTypes: {
 		value: { control: false },
+		help: { control: 'text' },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },