Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

InputControl: remove default value argument from Storybook #40410

Merged
merged 9 commits into from
Apr 21, 2022
Merged

InputControl: remove default value argument from Storybook #40410

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b9e518f
InputControl: remove default `value` argument from Storybook
ciampo Apr 18, 2022
64ac5c4
CHANGELOG
ciampo Apr 18, 2022
9ab2d8c
Option 1: Show complete manual code snippet in Docs
mirka Apr 19, 2022
bc47a77
Option 2: Controlled story with stubbed props in code snippet
mirka Apr 19, 2022
4cc6042
Restore option 1, add "Controlled" Storybook example instead
ciampo Apr 19, 2022
c731541
Remove controlled story
ciampo Apr 20, 2022
1c9151c
Fix JSDoc snippet
ciampo Apr 20, 2022
8b269e5
Move changelog entry under the right version heading
ciampo Apr 21, 2022
20c9489
Actually remove controlled story
ciampo Apr 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)).

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noticed it's under the wrong version heading 🧹

### Enhancements

- Update `BorderControl` and `BorderBoxControl` to allow the passing of custom class names to popovers ([#39753](https://github.com/WordPress/gutenberg/pull/39753)).
Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/input-control/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const Example = () => {
return (
<InputControl
value={ value }
onChange={ ( nextValue ) => setValue( nextValue ) }
onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
/>
);
};
Expand Down
5 changes: 3 additions & 2 deletions packages/components/src/input-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
*
Expand All @@ -102,10 +102,11 @@ export function UnforwardedInputControl(
* return (
* <InputControl
* value={ value }
* onChange={ ( nextValue ) => setValue( nextValue ) }
* onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
* />
* );
* };
* ```
*/
export const InputControl = forwardRef( UnforwardedInputControl );

Expand Down
21 changes: 17 additions & 4 deletions packages/components/src/input-control/stories/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,11 @@
*/
import type { ComponentMeta, ComponentStory } from '@storybook/react';

/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';

/**
* Internal dependencies
*/
Expand All @@ -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 },
Expand All @@ -26,15 +32,22 @@ 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 = {
label: 'Value',
placeholder: 'Placeholder',
value: '',
};

export const WithPrefix = Template.bind( {} );
Expand Down