Skip to content

Storybook: Add story for the Warning component #68124

Merged
t-hamano merged 2 commits intoWordPress:trunkfrom
im3dabasia:add/storybook-warning-component
Dec 23, 2024
Merged

Storybook: Add story for the Warning component #68124
t-hamano merged 2 commits intoWordPress:trunkfrom
im3dabasia:add/storybook-warning-component

Conversation

@im3dabasia
Copy link
Contributor

Part of #67165

What?

This PR adds the Storybook stories for the Warning component in the block editor.

Testing Instructions

  1. Start Storybook by running npm run storybook:dev
  2. Open Storybook at http://localhost:50240/
  3. Navigate to "BlockEditor/Warning" in the Storybook sidebar
  4. Test the story

Screenshots or screencast

Screen.Recording.2024-12-19.at.2.03.53.PM.mov

@im3dabasia im3dabasia requested a review from ellatrix as a code owner December 19, 2024 08:35
@github-actions
Copy link

github-actions bot commented Dec 19, 2024

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@im3dabasia
Copy link
Contributor Author

Hey @t-hamano,

Could you please review my PR for adding the story for the Warning component? I used the README.md as a solid reference to create the story.

Looking forward to your feedback!

Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR!

I think it's important for this component to show how the actions prop and secondaryActions prop are displayed. For example, see the story of the Notice component. For example, you should be able to define multiple stories like this:

export const WithActions = {
	args: {
		...Default.args,
		actions: [
			<Button key="fix-issue" __next40pxDefaultSize variant="primary">
				{ __( 'Fix issue' ) }
			</Button>,
		],
	},
};

export const WithSecondaryActions = {
	args: {
		...Default.args,
		secondaryActions: [
			{ title: __( 'Get help' ) },
			{ title: __( 'Remove block' ) },
		],
	},
};

@im3dabasia
Copy link
Contributor Author

im3dabasia commented Dec 23, 2024

@t-hamano , Please check again; I have made the requested changes.

Screen.Recording.2024-12-23.at.6.02.57.PM.mov

@im3dabasia im3dabasia requested a review from t-hamano December 23, 2024 10:38
@t-hamano t-hamano added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components labels Dec 23, 2024
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@t-hamano t-hamano merged commit 080189e into WordPress:trunk Dec 23, 2024
@github-actions github-actions bot added this to the Gutenberg 20.0 milestone Dec 23, 2024
Gulamdastgir-Momin pushed a commit to Gulamdastgir-Momin/gutenberg that referenced this pull request Jan 23, 2025
* doc: Add storybook for warning component

* feat: Add story with actions, and secondary actions

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants