diff --git a/packages/block-editor/src/components/line-height-control/index.js b/packages/block-editor/src/components/line-height-control/index.js
index ea692ceb452e3a..853285ef39ab4f 100644
--- a/packages/block-editor/src/components/line-height-control/index.js
+++ b/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 (
+ *
+ * );
+ * }
+ * ```
+ *
+ * @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,
diff --git a/packages/block-editor/src/components/line-height-control/stories/index.story.js b/packages/block-editor/src/components/line-height-control/stories/index.story.js
index f9f8c7eef12554..cfa4aed7c05e6c 100644
--- a/packages/block-editor/src/components/line-height-control/stories/index.story.js
+++ b/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 (
-
- );
-};
+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 (
+ {
+ 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%',
+ },
};