InputControl: remove default value argument from Storybook (#40410)

* InputControl: remove default `value` argument from Storybook * CHANGELOG * Option 1: Show complete manual code snippet in Docs * Option 2: Controlled story with stubbed props in code snippet * Restore option 1, add "Controlled" Storybook example instead of option 2 * Remove controlled story * Fix JSDoc snippet * Move changelog entry under the right version heading * Actually remove controlled story Co-authored-by: Lena Morita <[email protected]>
WordPress · Apr 21, 2022 · 1b58a2b · 1b58a2b
1 parent 9b1a8fc
commit 1b58a2b
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 4 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -12,6 +12,9 @@
 
 -   Remove individual color object exports from the `utils/colors-values.js` file. Colors should now be used from the main `COLORS` export([#40387](https://github.com/WordPress/gutenberg/pull/40387)).
 
+### Bug Fix
+
+-   `InputControl`: allow user to input a value interactively in Storybook, by removing default value argument ([#40410](https://github.com/WordPress/gutenberg/pull/40410)).
 
 ## 19.8.0 (2022-04-08)
 

diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md
@@ -18,7 +18,7 @@ const Example = () => {
 	return (
 		<InputControl
 			value={ value }
-			onChange={ ( nextValue ) => setValue( nextValue ) }
+			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>
 	);
 };

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`.
  *
- * @example
+ * ```jsx
  * import { __experimentalInputControl as InputControl } from '@wordpress/components';
  * import { useState } from '@wordpress/compose';
  *
@@ -102,10 +102,11 @@ export function UnforwardedInputControl(
  *   return (
  *  	<InputControl
  *  		value={ value }
- *  		onChange={ ( nextValue ) => setValue( nextValue ) }
+ *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
  *  	/>
  *   );
  * };
+ * ```
  */
 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
@@ -18,6 +18,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 },
@@ -34,7 +35,6 @@ export const Default = Template.bind( {} );
 Default.args = {
 	label: 'Value',
 	placeholder: 'Placeholder',
-	value: '',
 };
 
 export const WithPrefix = Template.bind( {} );