FontSizePicker: Add help prop for additional guidance

WordPress · Jan 10, 2025 · 7becc77 · 7becc77
1 parent 51e0697
commit 7becc77
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git 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
@@ -18,6 +18,7 @@ const meta: Meta< typeof FontSizePicker > = {
 	component: FontSizePicker,
 	argTypes: {
 		value: { control: false },
+		help: { control: 'text' },
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },