From da9cedfb1f14a040b7a5b04545f13dbded49fb1f Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Wed, 27 Nov 2024 16:52:33 +0530 Subject: [PATCH 1/4] Storybook: Add UnitControl story --- .../unit-control/stories/index.story.js | 136 ++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 packages/block-editor/src/components/unit-control/stories/index.story.js diff --git a/packages/block-editor/src/components/unit-control/stories/index.story.js b/packages/block-editor/src/components/unit-control/stories/index.story.js new file mode 100644 index 00000000000000..981ab99dd8026d --- /dev/null +++ b/packages/block-editor/src/components/unit-control/stories/index.story.js @@ -0,0 +1,136 @@ +/** + * WordPress dependencies + */ +import { useState, useEffect } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import UnitControl from '../'; + +const CUSTOM_UNITS = [ + { value: 'px', label: 'px', default: 0 }, + { value: 'em', label: 'em', default: 0 }, + { value: 'rem', label: 'rem', default: 0 }, +]; + +/** + * UnitControl Properties + */ +export default { + title: 'BlockEditor/UnitControl', + component: UnitControl, + argTypes: { + onChange: { + action: 'onChange', + description: 'Callback function when the value changes.', + table: { + type: { summary: 'function' }, + }, + }, + onUnitChange: { + action: 'onUnitChange', + description: 'Callback function when the unit changes.', + table: { + type: { summary: 'function' }, + }, + }, + labelPosition: { + control: 'select', + options: [ 'top', 'side', 'bottom' ], + description: 'The position of the label.', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'top' }, + }, + }, + label: { + control: 'text', + description: 'The label for the control.', + table: { + type: { summary: 'string' }, + }, + }, + value: { + control: 'text', + description: 'The value of the control.', + table: { + type: { summary: 'string' }, + }, + }, + size: { + control: 'select', + options: [ 'small', 'medium' ], + description: 'The size of the control.', + table: { + type: { summary: 'string' }, + defaultValue: { summary: 'medium' }, + }, + }, + disabled: { + control: 'boolean', + description: 'Whether the control is disabled.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + }, + }, + render: function Render( { onChange, onUnitChange, value, ...args } ) { + const [ componentValue, setComponentValue ] = useState( value || '' ); + + useEffect( () => { + setComponentValue( value ); + }, [ value ] ); + + const handleValueChange = ( newValue ) => { + setComponentValue( newValue ); + if ( onChange ) { + onChange( newValue ); + } + }; + + return ( + + ); + }, +}; + +/** + * Story demonstrating UnitControl with default settings + */ +export const Default = { + args: { + label: 'Default Unit Control', + value: '10', + size: 'medium', + labelPosition: 'top', + }, +}; + +/** + * Story demonstrating UnitControl with custom units + */ +export const CustomUnits = { + args: { + ...Default.args, + label: 'Custom Units', + units: CUSTOM_UNITS, + }, +}; + +/** + * Story demonstrating UnitControl in disabled state + */ +export const Disabled = { + args: { + ...Default.args, + label: 'Disabled Unit Control', + disabled: true, + }, +}; From f79dd0a077dc49fab29ce733cb60b97e5c71c841 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Mon, 23 Dec 2024 14:41:01 +0530 Subject: [PATCH 2/4] fix: Removed extra stories and addedparameters in meta --- .../unit-control/stories/index.story.js | 69 ++++++------------- 1 file changed, 20 insertions(+), 49 deletions(-) diff --git a/packages/block-editor/src/components/unit-control/stories/index.story.js b/packages/block-editor/src/components/unit-control/stories/index.story.js index 981ab99dd8026d..a6c51d02703a2c 100644 --- a/packages/block-editor/src/components/unit-control/stories/index.story.js +++ b/packages/block-editor/src/components/unit-control/stories/index.story.js @@ -8,18 +8,18 @@ import { useState, useEffect } from '@wordpress/element'; */ import UnitControl from '../'; -const CUSTOM_UNITS = [ - { value: 'px', label: 'px', default: 0 }, - { value: 'em', label: 'em', default: 0 }, - { value: 'rem', label: 'rem', default: 0 }, -]; - -/** - * UnitControl Properties - */ -export default { +const meta = { title: 'BlockEditor/UnitControl', component: UnitControl, + parameters: { + docs: { + canvas: { sourceState: 'shown' }, + description: { + component: + 'UnitControl allows the user to set a numeric quantity as well as a unit ', + }, + }, + }, argTypes: { onChange: { action: 'onChange', @@ -36,7 +36,7 @@ export default { }, }, labelPosition: { - control: 'select', + control: 'radio', options: [ 'top', 'side', 'bottom' ], description: 'The position of the label.', table: { @@ -59,12 +59,12 @@ export default { }, }, size: { - control: 'select', - options: [ 'small', 'medium' ], + control: 'radio', + options: [ 'default', 'small' ], description: 'The size of the control.', table: { type: { summary: 'string' }, - defaultValue: { summary: 'medium' }, + defaultValue: { summary: 'default' }, }, }, disabled: { @@ -76,7 +76,12 @@ export default { }, }, }, - render: function Render( { onChange, onUnitChange, value, ...args } ) { +}; + +export default meta; + +export const Default = { + render: function Template( { onChange, onUnitChange, value, ...args } ) { const [ componentValue, setComponentValue ] = useState( value || '' ); useEffect( () => { @@ -100,37 +105,3 @@ export default { ); }, }; - -/** - * Story demonstrating UnitControl with default settings - */ -export const Default = { - args: { - label: 'Default Unit Control', - value: '10', - size: 'medium', - labelPosition: 'top', - }, -}; - -/** - * Story demonstrating UnitControl with custom units - */ -export const CustomUnits = { - args: { - ...Default.args, - label: 'Custom Units', - units: CUSTOM_UNITS, - }, -}; - -/** - * Story demonstrating UnitControl in disabled state - */ -export const Disabled = { - args: { - ...Default.args, - label: 'Disabled Unit Control', - disabled: true, - }, -}; From b36ff1ae18b69ade7defbda14974109a6fa971d5 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Fri, 3 Jan 2025 17:15:33 +0530 Subject: [PATCH 3/4] refactor: Component code and add props in argTypes --- .../unit-control/stories/index.story.js | 61 ++++++++++++------- 1 file changed, 39 insertions(+), 22 deletions(-) diff --git a/packages/block-editor/src/components/unit-control/stories/index.story.js b/packages/block-editor/src/components/unit-control/stories/index.story.js index a6c51d02703a2c..3e0b37ba16ba90 100644 --- a/packages/block-editor/src/components/unit-control/stories/index.story.js +++ b/packages/block-editor/src/components/unit-control/stories/index.story.js @@ -1,7 +1,7 @@ /** * WordPress dependencies */ -import { useState, useEffect } from '@wordpress/element'; +import { useState } from '@wordpress/element'; /** * Internal dependencies @@ -16,7 +16,7 @@ const meta = { canvas: { sourceState: 'shown' }, description: { component: - 'UnitControl allows the user to set a numeric quantity as well as a unit ', + 'UnitControl allows the user to set a numeric quantity as well as a unit.', }, }, }, @@ -37,11 +37,10 @@ const meta = { }, labelPosition: { control: 'radio', - options: [ 'top', 'side', 'bottom' ], + options: [ 'top', 'side', 'bottom', 'edge' ], description: 'The position of the label.', table: { type: { summary: 'string' }, - defaultValue: { summary: 'top' }, }, }, label: { @@ -52,7 +51,7 @@ const meta = { }, }, value: { - control: 'text', + control: { type: null }, description: 'The value of the control.', table: { type: { summary: 'string' }, @@ -75,33 +74,51 @@ const meta = { defaultValue: { summary: false }, }, }, + disabledUnits: { + control: 'boolean', + description: 'If true, the unit select is hidden.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + }, + isPressEnterToChange: { + control: 'boolean', + description: + 'If true, the ENTER key press is required to trigger onChange. Change is also triggered on blur.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: false }, + }, + }, + isUnitSelectTabbable: { + control: 'boolean', + description: 'Determines if the unit select is tabbable.', + table: { + type: { summary: 'boolean' }, + defaultValue: { summary: true }, + }, + }, }, }; export default meta; export const Default = { - render: function Template( { onChange, onUnitChange, value, ...args } ) { - const [ componentValue, setComponentValue ] = useState( value || '' ); - - useEffect( () => { - setComponentValue( value ); - }, [ value ] ); - - const handleValueChange = ( newValue ) => { - setComponentValue( newValue ); - if ( onChange ) { - onChange( newValue ); - } - }; - + render: function Template( { onChange, ...args } ) { + const [ value, setValue ] = useState(); return ( { + onChange( ...changeArgs ); + setValue( ...changeArgs ); + } } /> ); }, + args: { + label: 'Label', + }, }; From 62ed2fed2aa2f059db054d85f43660e700299f65 Mon Sep 17 00:00:00 2001 From: im3dabasia Date: Mon, 6 Jan 2025 16:33:15 +0530 Subject: [PATCH 4/4] fix: disableUnits prop in story and doc --- packages/block-editor/src/components/unit-control/README.md | 2 +- .../src/components/unit-control/stories/index.story.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-editor/src/components/unit-control/README.md b/packages/block-editor/src/components/unit-control/README.md index 7cd5269f00d032..e44ffb494deff1 100644 --- a/packages/block-editor/src/components/unit-control/README.md +++ b/packages/block-editor/src/components/unit-control/README.md @@ -34,7 +34,7 @@ const Example = () => { ### Props -#### disabledUnits +#### disableUnits If true, the unit `