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.

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

SelectControl: Add onChange, onBlur and onFocus to storybook actions #45432

Merged
merged 4 commits into from
Nov 1, 2022

Conversation

walbo
Copy link
Member

@walbo walbo commented Oct 31, 2022

What?

Log onChange, onBlur and onFocus props to the Actions screen in Storybook.

Why?

To see what onChange, onBlur and onFocus does.

How?

Update SelectControl storybook to log all props stating with on in the Actions screen.

Testing Instructions

  1. Fire up the storybook
  2. Select the SelectControl story and change the value.
  3. Confirm onChange, onBlur and onFocus was logged in the Actions screen.

Screenshots or screencast

select-control-actions

@walbo walbo added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components Storybook Storybook and its stories for components labels Oct 31, 2022
@walbo walbo requested a review from ajitbohra as a code owner October 31, 2022 22:43
@codesandbox
Copy link

codesandbox bot commented Oct 31, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@walbo walbo self-assigned this Oct 31, 2022
@walbo walbo requested review from mirka and ciampo November 1, 2022 10:14
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

🚀 Thank you!

@@ -23,6 +23,7 @@ const meta: ComponentMeta< typeof SelectControl > = {
prefix: { control: { type: 'text' } },
suffix: { control: { type: 'text' } },
value: { control: { type: null } },
onChange: { action: 'onChange' },
Copy link
Contributor

Choose a reason for hiding this comment

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

An alternative that we could look into adopting across the package is to use a regex to mark as actions all on* props (see for example FocalPointPicker's Storybook parameters)

Copy link
Member Author

Choose a reason for hiding this comment

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

Thanks. Didn't know you could do that. Would be great to get onBlur and onFocus as well. I'll update the PR later today.

Copy link
Member Author

Choose a reason for hiding this comment

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

Updated the PR to match all on* using regex.

@walbo walbo changed the title SelectControl: Add onChange to storybook actions SelectControl: Add onChange, onBlur and onFocus to storybook actions Nov 1, 2022
@walbo walbo requested a review from ciampo November 1, 2022 15:38
@walbo walbo merged commit 62987d7 into trunk Nov 1, 2022
@walbo walbo deleted the fix/storybook-select-control-onchange branch November 1, 2022 18:04
@github-actions github-actions bot added this to the Gutenberg 14.5 milestone Nov 1, 2022
@bph bph mentioned this pull request Feb 6, 2023
47 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components Storybook Storybook and its stories for components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants