From 3572e839511dfef3ded18c1519ff728861c46264 Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Thu, 28 Nov 2024 15:44:58 +0530
Subject: [PATCH 1/2] Storybook: Add BorderRadiusControl story

---
 .../stories/index.story.js                    | 78 +++++++++++++++++++
 1 file changed, 78 insertions(+)
 create mode 100644 packages/block-editor/src/components/border-radius-control/stories/index.story.js

diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js
new file mode 100644
index 00000000000000..cd50ae668d4906
--- /dev/null
+++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js
@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import BorderRadiusControl from '../';
+
+/**
+ * BorderRadiusControl component allows setting border radius values.
+ */
+const meta = {
+	title: 'BlockEditor/BorderRadiusControl',
+	component: BorderRadiusControl,
+	parameters: {
+		docs: {
+			canvas: { sourceState: 'shown' },
+			description: {
+				component: 'Control to display border radius options.',
+			},
+		},
+	},
+	argTypes: {
+		values: { control: 'object', description: 'Border radius values.' },
+		onChange: {
+			action: 'onChange',
+			description: 'Callback to handle onChange.',
+		},
+	},
+};
+export default meta;
+
+const Template = ( initialValues ) => {
+	const [ values, setValues ] = useState( initialValues.values );
+
+	return (
+		<BorderRadiusControl
+			values={ values }
+			onChange={ ( newValues ) => {
+				setValues( newValues );
+				initialValues.onChange( newValues );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	values: {
+		topLeft: '10px',
+		topRight: '10px',
+		bottomLeft: '10px',
+		bottomRight: '10px',
+	},
+};
+
+/**
+ * This story demonstrates the control with no initial values.
+ */
+export const NoInitialValues = Template.bind( {} );
+NoInitialValues.args = {
+	values: {},
+};
+
+/**
+ * This story demonstrates the control with mixed values.
+ */
+export const MixedUnits = Template.bind( {} );
+MixedUnits.args = {
+	values: {
+		topLeft: '10px',
+		topRight: '1em',
+		bottomLeft: '20%',
+		bottomRight: '5rem',
+	},
+};

From 8e88b6ce42a73d7dda5987088f613fca34d17f3e Mon Sep 17 00:00:00 2001
From: Sukhendu Sekhar Guria <sukhendu.guria@rtcamp.com>
Date: Mon, 2 Dec 2024 16:57:55 +0530
Subject: [PATCH 2/2] Update BorderRadiusControl story to CSF 3

---
 .../stories/index.story.js                    | 62 ++++++-------------
 1 file changed, 20 insertions(+), 42 deletions(-)

diff --git a/packages/block-editor/src/components/border-radius-control/stories/index.story.js b/packages/block-editor/src/components/border-radius-control/stories/index.story.js
index cd50ae668d4906..35be169527d208 100644
--- a/packages/block-editor/src/components/border-radius-control/stories/index.story.js
+++ b/packages/block-editor/src/components/border-radius-control/stories/index.story.js
@@ -11,7 +11,7 @@ import BorderRadiusControl from '../';
 /**
  * BorderRadiusControl component allows setting border radius values.
  */
-const meta = {
+export default {
 	title: 'BlockEditor/BorderRadiusControl',
 	component: BorderRadiusControl,
 	parameters: {
@@ -30,49 +30,27 @@ const meta = {
 		},
 	},
 };
-export default meta;
 
-const Template = ( initialValues ) => {
-	const [ values, setValues ] = useState( initialValues.values );
+export const Default = {
+	render: function Template( { onChange, ...args } ) {
+		const [ values, setValues ] = useState( args.values );
 
-	return (
-		<BorderRadiusControl
-			values={ values }
-			onChange={ ( newValues ) => {
-				setValues( newValues );
-				initialValues.onChange( newValues );
-			} }
-		/>
-	);
-};
-
-export const Default = Template.bind( {} );
-Default.args = {
-	values: {
-		topLeft: '10px',
-		topRight: '10px',
-		bottomLeft: '10px',
-		bottomRight: '10px',
+		return (
+			<BorderRadiusControl
+				values={ values }
+				onChange={ ( ...changeArgs ) => {
+					setValues( ...changeArgs );
+					onChange( ...changeArgs );
+				} }
+			/>
+		);
 	},
-};
-
-/**
- * This story demonstrates the control with no initial values.
- */
-export const NoInitialValues = Template.bind( {} );
-NoInitialValues.args = {
-	values: {},
-};
-
-/**
- * This story demonstrates the control with mixed values.
- */
-export const MixedUnits = Template.bind( {} );
-MixedUnits.args = {
-	values: {
-		topLeft: '10px',
-		topRight: '1em',
-		bottomLeft: '20%',
-		bottomRight: '5rem',
+	args: {
+		values: {
+			topLeft: '10px',
+			topRight: '10px',
+			bottomLeft: '10px',
+			bottomRight: '10px',
+		},
 	},
 };