refactor: Component code and add props in argTypes

WordPress · Jan 3, 2025 · b36ff1a · b36ff1a
1 parent f79dd0a
commit b36ff1a
Showing 1 changed file with 39 additions and 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
@@ -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 (
 			<UnitControl
 				{ ...args }
-				value={ componentValue }
-				onChange={ handleValueChange }
-				onUnitChange={ onUnitChange }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
 			/>
 		);
 	},
+	args: {
+		label: 'Label',
+	},
 };