Storybook: Refactor line height storybook to CSF3

packages/block-editor/src/components/line-height-control/index.js

@@ -16,6 +16,34 @@ import {
 	isLineHeightDefined,
 } from './utils';
 
+/**
+ * Line Height Control component that provides a number input control for adjusting line height values.
+ * The component handles both defined and undefined line height states, with special handling for
+ * initial spin up/down actions from an undefined state.
+ *
+ * @see https://github.com/WordPress/gutenberg/tree/HEAD/packages/block-editor/src/components/line-height-control/README.md
+ *
+ * @example
+ * ```jsx
+ * function MyBlockEdit() {
+ *   const [ lineHeight, setLineHeight ] = useState();
+ *   return (
+ *     <LineHeightControl
+ *       value={ lineHeight }
+ *       onChange={ setLineHeight }
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param {Object}   props                       Component props.
+ * @param {boolean}  props.__next40pxDefaultSize Whether to opt into the larger 40px default size that
+ *                                               will become the default in a future version.
+ * @param {string}   props.value                 The line height value. Can be undefined for default line height.
+ * @param {Function} props.onChange              Callback function when the line height value changes.
+ * @param {string}   props.__unstableInputWidth  Custom width for the number input control. Defaults to '60px'.
+ * @return {Element}                           The LineHeightControl component.
+ */
 const LineHeightControl = ( {
 	/** Start opting into the larger default height that will become the default size in a future version. */
 	__next40pxDefaultSize = false,

packages/block-editor/src/components/line-height-control/stories/index.story.js

@@ -8,26 +8,80 @@ import { useState } from '@wordpress/element';
  */
 import LineHeightControl from '../';
 
-export default {
-	component: LineHeightControl,
+const meta = {
 	title: 'BlockEditor/LineHeightControl',
+	component: LineHeightControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to manage line height settings.',
+			},
+		},
+	},
+	argTypes: {
+		value: {
+			control: { type: null },
+			description: 'Currently selected line height value.',
+			table: {
+				type: {
+					summary: 'string | number | undefined',
+				},
+			},
+		},
+		onChange: {
+			action: 'onChange',
+			control: { type: null },
+			description: 'Handles change in line height selection.',
+			table: {
+				type: {
+					summary: 'function',
+				},
+			},
+		},
+		__next40pxDefaultSize: {
+			control: 'boolean',
+			description: 'Whether to use the 40px default size.',
+			table: {
+				type: { summary: 'boolean' },
+			},
+		},
+		__unstableInputWidth: {
+			control: 'text',
+			description: 'Width of the input field.',
+			table: {
+				type: { summary: 'string' },
+			},
+		},
+	},
 };
 
-const Template = ( props ) => {
-	const [ value, setValue ] = useState();
-	return (
-		<LineHeightControl onChange={ setValue } value={ value } { ...props } />
-	);
-};
+export default meta;
 
-export const Default = Template.bind( {} );
-Default.args = {
-	__next40pxDefaultSize: true,
-	__unstableInputWidth: '100px',
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ value, setValue ] = useState();
+		return (
+			<LineHeightControl
+				{ ...args }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
+				value={ value }
+			/>
+		);
+	},
+	args: {
+		__next40pxDefaultSize: true,
+		__unstableInputWidth: '100px',
+	},
 };
 
-export const UnconstrainedWidth = Template.bind( {} );
-UnconstrainedWidth.args = {
-	...Default.args,
-	__unstableInputWidth: '100%',
+export const UnconstrainedWidth = {
+	...Default,
+	args: {
+		...Default.args,
+		__unstableInputWidth: '100%',
+	},
 };