Option 2: Controlled story with stubbed props in code snippet

WordPress · Apr 19, 2022 · 409b688 · 409b688
1 parent a23ae2b
commit 409b688
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 5 deletions.
diff --git 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
@@ -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 = {