From 409b688e562916c6c5f5acda26c1412ca11ac4d2 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 20 Apr 2022 00:08:27 +0900
Subject: [PATCH] Option 2: Controlled story with stubbed props in code snippet

---
 .../components/src/input-control/index.tsx    |  3 +--
 .../src/input-control/stories/index.tsx       | 20 ++++++++++++++++---
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx
index c6498ef8799a4..8c480bd7c7dfb 100644
--- a/packages/components/src/input-control/index.tsx
+++ b/packages/components/src/input-control/index.tsx
@@ -92,7 +92,7 @@ export function UnforwardedInputControl(
  * InputControl components let users enter and edit text. This is an experimental component
  * intended to (in time) merge with or replace `TextControl`.
  *
- * ```jsx
+ * @example
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
  * import { useState } from '@wordpress/compose';
  *
@@ -106,7 +106,6 @@ export function UnforwardedInputControl(
  *  	/>
  *   );
  * };
- * ```
  */
 export const InputControl = forwardRef( UnforwardedInputControl );
 
diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.tsx
index 447428bdbd869..4a0ef0e90805c 100644
--- a/packages/components/src/input-control/stories/index.tsx
+++ b/packages/components/src/input-control/stories/index.tsx
@@ -3,6 +3,11 @@
  */
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -18,6 +23,7 @@ const meta: ComponentMeta< typeof InputControl > = {
 		prefix: { control: { type: null } },
 		suffix: { control: { type: null } },
 		type: { control: { type: 'text' } },
+		value: { control: { disable: true } },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -26,9 +32,17 @@ const meta: ComponentMeta< typeof InputControl > = {
 };
 export default meta;
 
-const Template: ComponentStory< typeof InputControl > = ( args ) => (
-	<InputControl { ...args } />
-);
+const Template: ComponentStory< typeof InputControl > = ( args ) => {
+	const [ value, setValue ] = useState( '' );
+
+	return (
+		<InputControl
+			{ ...args }
+			value={ value }
+			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
+		/>
+	);
+};
 
 export const Default = Template.bind( {} );
 Default.args = {