From b9e518f4ef54d85d79c28f6056293c8cdf6a2302 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 18 Apr 2022 13:46:55 +0200 Subject: [PATCH 1/9] InputControl: remove default `value` argument from Storybook --- packages/components/src/input-control/stories/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.tsx index 5b99a320427e5..447428bdbd869 100644 --- a/packages/components/src/input-control/stories/index.tsx +++ b/packages/components/src/input-control/stories/index.tsx @@ -34,7 +34,6 @@ export const Default = Template.bind( {} ); Default.args = { label: 'Value', placeholder: 'Placeholder', - value: '', }; export const WithPrefix = Template.bind( {} ); From 64ac5c4fba34964a3991fe5f240f44a991644eee Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Mon, 18 Apr 2022 14:08:08 +0200 Subject: [PATCH 2/9] CHANGELOG --- packages/components/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 73f297ecfb69f..b8984a3ca20fd 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,10 @@ ## 19.8.0 (2022-04-08) +### 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)). + ### Enhancements - Update `BorderControl` and `BorderBoxControl` to allow the passing of custom class names to popovers ([#39753](https://github.com/WordPress/gutenberg/pull/39753)). From 9ab2d8c15b1051debbdda81270bcf85ff3728dc9 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 20 Apr 2022 00:06:45 +0900 Subject: [PATCH 3/9] Option 1: Show complete manual code snippet in Docs --- packages/components/src/input-control/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index 8c480bd7c7dfb..c6498ef8799a4 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`. * - * @example + * ```jsx * import { __experimentalInputControl as InputControl } from '@wordpress/components'; * import { useState } from '@wordpress/compose'; * @@ -106,6 +106,7 @@ export function UnforwardedInputControl( * /> * ); * }; + * ``` */ export const InputControl = forwardRef( UnforwardedInputControl ); From bc47a77975b6beb9a39e0b926361235a262c1d59 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Wed, 20 Apr 2022 00:08:27 +0900 Subject: [PATCH 4/9] 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 ) => ( - -); +const Template: ComponentStory< typeof InputControl > = ( args ) => { + const [ value, setValue ] = useState( '' ); + + return ( + setValue( nextValue ?? '' ) } + /> + ); +}; export const Default = Template.bind( {} ); Default.args = { From 4cc60423e19cb7dbd74848460af81b507c9584dc Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Tue, 19 Apr 2022 22:27:08 +0200 Subject: [PATCH 5/9] Restore option 1, add "Controlled" Storybook example instead of option 2 --- .../components/src/input-control/index.tsx | 3 ++- .../src/input-control/stories/index.tsx | 25 +++++++++++++------ 2 files changed, 20 insertions(+), 8 deletions(-) diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index 8c480bd7c7dfb..c6498ef8799a4 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`. * - * @example + * ```jsx * import { __experimentalInputControl as InputControl } from '@wordpress/components'; * import { useState } from '@wordpress/compose'; * @@ -106,6 +106,7 @@ 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 4a0ef0e90805c..b71567de0091e 100644 --- a/packages/components/src/input-control/stories/index.tsx +++ b/packages/components/src/input-control/stories/index.tsx @@ -23,7 +23,6 @@ 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 }, @@ -32,7 +31,11 @@ const meta: ComponentMeta< typeof InputControl > = { }; export default meta; -const Template: ComponentStory< typeof InputControl > = ( args ) => { +const UncontrolledTemplate: ComponentStory< typeof InputControl > = ( + args +) => ; + +const ControlledTemplate: ComponentStory< typeof InputControl > = ( args ) => { const [ value, setValue ] = useState( '' ); return ( @@ -44,33 +47,41 @@ const Template: ComponentStory< typeof InputControl > = ( args ) => { ); }; -export const Default = Template.bind( {} ); +export const Default = UncontrolledTemplate.bind( {} ); Default.args = { label: 'Value', placeholder: 'Placeholder', }; -export const WithPrefix = Template.bind( {} ); +export const WithPrefix = UncontrolledTemplate.bind( {} ); WithPrefix.args = { ...Default.args, prefix: @, }; -export const WithSuffix = Template.bind( {} ); +export const WithSuffix = UncontrolledTemplate.bind( {} ); WithSuffix.args = { ...Default.args, suffix: , }; -export const WithSideLabel = Template.bind( {} ); +export const WithSideLabel = UncontrolledTemplate.bind( {} ); WithSideLabel.args = { ...Default.args, labelPosition: 'side', }; -export const WithEdgeLabel = Template.bind( {} ); +export const WithEdgeLabel = UncontrolledTemplate.bind( {} ); WithEdgeLabel.args = { ...Default.args, __unstableInputWidth: '20em', labelPosition: 'edge', }; + +export const Controlled = ControlledTemplate.bind( {} ); +Controlled.args = { + ...Default.args, +}; +Controlled.argTypes = { + value: { control: { disable: true } }, +}; From c73154182cae9f58c8ac7daa8fa71d4c745d2154 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Apr 2022 00:22:00 +0200 Subject: [PATCH 6/9] Remove controlled story --- .../src/input-control/stories/index.tsx | 25 ++++++------------- 1 file changed, 7 insertions(+), 18 deletions(-) diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.tsx index b71567de0091e..4a0ef0e90805c 100644 --- a/packages/components/src/input-control/stories/index.tsx +++ b/packages/components/src/input-control/stories/index.tsx @@ -23,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 }, @@ -31,11 +32,7 @@ const meta: ComponentMeta< typeof InputControl > = { }; export default meta; -const UncontrolledTemplate: ComponentStory< typeof InputControl > = ( - args -) => ; - -const ControlledTemplate: ComponentStory< typeof InputControl > = ( args ) => { +const Template: ComponentStory< typeof InputControl > = ( args ) => { const [ value, setValue ] = useState( '' ); return ( @@ -47,41 +44,33 @@ const ControlledTemplate: ComponentStory< typeof InputControl > = ( args ) => { ); }; -export const Default = UncontrolledTemplate.bind( {} ); +export const Default = Template.bind( {} ); Default.args = { label: 'Value', placeholder: 'Placeholder', }; -export const WithPrefix = UncontrolledTemplate.bind( {} ); +export const WithPrefix = Template.bind( {} ); WithPrefix.args = { ...Default.args, prefix: @, }; -export const WithSuffix = UncontrolledTemplate.bind( {} ); +export const WithSuffix = Template.bind( {} ); WithSuffix.args = { ...Default.args, suffix: , }; -export const WithSideLabel = UncontrolledTemplate.bind( {} ); +export const WithSideLabel = Template.bind( {} ); WithSideLabel.args = { ...Default.args, labelPosition: 'side', }; -export const WithEdgeLabel = UncontrolledTemplate.bind( {} ); +export const WithEdgeLabel = Template.bind( {} ); WithEdgeLabel.args = { ...Default.args, __unstableInputWidth: '20em', labelPosition: 'edge', }; - -export const Controlled = ControlledTemplate.bind( {} ); -Controlled.args = { - ...Default.args, -}; -Controlled.argTypes = { - value: { control: { disable: true } }, -}; From 1c9151c91d6db133f6aa21c46e1020629975313e Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Apr 2022 00:22:36 +0200 Subject: [PATCH 7/9] Fix JSDoc snippet --- packages/components/src/input-control/README.md | 2 +- packages/components/src/input-control/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/input-control/README.md b/packages/components/src/input-control/README.md index 4cfc918854a13..1cde49917823f 100644 --- a/packages/components/src/input-control/README.md +++ b/packages/components/src/input-control/README.md @@ -18,7 +18,7 @@ const Example = () => { return ( setValue( nextValue ) } + onChange={ ( nextValue ) => setValue( nextValue ?? '' ) } /> ); }; diff --git a/packages/components/src/input-control/index.tsx b/packages/components/src/input-control/index.tsx index c6498ef8799a4..6ff965f9ab131 100644 --- a/packages/components/src/input-control/index.tsx +++ b/packages/components/src/input-control/index.tsx @@ -102,7 +102,7 @@ export function UnforwardedInputControl( * return ( * setValue( nextValue ) } + * onChange={ ( nextValue ) => setValue( nextValue ?? '' ) } * /> * ); * }; From 8b269e52e15be74506ebdac131121b2b0f681e7b Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Apr 2022 17:36:14 +0200 Subject: [PATCH 8/9] Move changelog entry under the right version heading --- packages/components/CHANGELOG.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index b8984a3ca20fd..0037ca21b60eb 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -6,13 +6,12 @@ - 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)). - -## 19.8.0 (2022-04-08) - ### 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) + ### Enhancements - Update `BorderControl` and `BorderBoxControl` to allow the passing of custom class names to popovers ([#39753](https://github.com/WordPress/gutenberg/pull/39753)). From 20c9489f65d186f0a0cb13a9fb49b350795e310c Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Thu, 21 Apr 2022 18:37:20 +0200 Subject: [PATCH 9/9] Actually remove controlled story --- .../src/input-control/stories/index.tsx | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/packages/components/src/input-control/stories/index.tsx b/packages/components/src/input-control/stories/index.tsx index 4a0ef0e90805c..27ddb23262a0c 100644 --- a/packages/components/src/input-control/stories/index.tsx +++ b/packages/components/src/input-control/stories/index.tsx @@ -3,11 +3,6 @@ */ import type { ComponentMeta, ComponentStory } from '@storybook/react'; -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element'; - /** * Internal dependencies */ @@ -32,17 +27,9 @@ const meta: ComponentMeta< typeof InputControl > = { }; export default meta; -const Template: ComponentStory< typeof InputControl > = ( args ) => { - const [ value, setValue ] = useState( '' ); - - return ( - setValue( nextValue ?? '' ) } - /> - ); -}; +const Template: ComponentStory< typeof InputControl > = ( args ) => ( + +); export const Default = Template.bind( {} ); Default.args = {