From e469265c2a6d84158d4e06f62257a6570ca936cb Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 17 Dec 2024 14:01:28 +0530 Subject: [PATCH 1/4] init: Initial commit --- .../src/components/line-height-control/stories/index.story.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f9f8c7eef1255..eb9a9f535c060 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 @@ -23,7 +23,7 @@ const Template = ( props ) => { export const Default = Template.bind( {} ); Default.args = { __next40pxDefaultSize: true, - __unstableInputWidth: '100px', + __unstableInputWidth: '10px', }; export const UnconstrainedWidth = Template.bind( {} ); From 69cd17db3b8d8fe7a825a3ec424e4a48e70fcc57 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Thu, 19 Dec 2024 12:24:46 +0530 Subject: [PATCH 2/4] Add meta for line height control story --- .../stories/index.story.js | 82 +++++++++++++++---- 1 file changed, 64 insertions(+), 18 deletions(-) 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 eb9a9f535c060..5817505c4222d 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,72 @@ 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 const Default = Template.bind( {} ); -Default.args = { - __next40pxDefaultSize: true, - __unstableInputWidth: '10px', -}; +export default meta; -export const UnconstrainedWidth = Template.bind( {} ); -UnconstrainedWidth.args = { - ...Default.args, - __unstableInputWidth: '100%', +export const Default = { + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); + return ( + { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } + value={ value } + /> + ); + }, + args: { + __next40pxDefaultSize: true, + __unstableInputWidth: '100px', + }, }; From 3ef9aed4b668c89de6f76b26f2b0adb662e9d705 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Fri, 20 Dec 2024 09:45:30 +0530 Subject: [PATCH 3/4] Docs: Add JSDoc for LineHeightControl component --- .../components/line-height-control/index.js | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) 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 ea692ceb452e3..853285ef39ab4 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, From c8bfd602ebe09ae9a0f83ee8ba77562a93b39b55 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Mon, 23 Dec 2024 08:22:31 +0530 Subject: [PATCH 4/4] Convert LineHeightControl UnconstrainedWidth story to CSF3 --- .../components/line-height-control/stories/index.story.js | 8 ++++++++ 1 file changed, 8 insertions(+) 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 5817505c4222d..cfa4aed7c05e6 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 @@ -77,3 +77,11 @@ export const Default = { __unstableInputWidth: '100px', }, }; + +export const UnconstrainedWidth = { + ...Default, + args: { + ...Default.args, + __unstableInputWidth: '100%', + }, +};