From b36ff1ae18b69ade7defbda14974109a6fa971d5 Mon Sep 17 00:00:00 2001
From: im3dabasia <eshaan.dabasiya@rtcamp.com>
Date: Fri, 3 Jan 2025 17:15:33 +0530
Subject: [PATCH] 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 a6c51d02703a2..3e0b37ba16ba9 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 (
 			<UnitControl
 				{ ...args }
-				value={ componentValue }
-				onChange={ handleValueChange }
-				onUnitChange={ onUnitChange }
+				value={ value }
+				onChange={ ( ...changeArgs ) => {
+					onChange( ...changeArgs );
+					setValue( ...changeArgs );
+				} }
 			/>
 		);
 	},
+	args: {
+		label: 'Label',
+	},
 };