Storybook: Add stories for BlockAlignmentMatrixControl Component #67292

Sukhendu2002 · 2024-11-26T05:50:54Z

What?

This PR will add stories for BlockAlignmentMatrixControl component in the Storybook.

Testing Instructions

Run npm run storybook:dev
Open the storybook on http://localhost:50240/
Check the BlockAlignmentMatrixControl stories.

Screenshots or screencast

github-actions · 2024-11-26T06:53:12Z

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: Sukhendu2002 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: ciampo <[email protected]>

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

ciampo · 2024-12-13T16:07:59Z

Thank you for the ping. We @WordPress/gutenberg-components will try to get to reviewing this soon, but in the meantime I'll add a few more folks in case they have capacity for a first round of review before us.

t-hamano

Thanks for the PR! Thanks for noticing that the props in the README weren't complete 😅

t-hamano · 2024-12-16T04:41:10Z

packages/block-editor/src/components/block-alignment-matrix-control/README.md

-| `label`    | `string`   | `Change matrix alignment` | concise description of tool's functionality.                                                                                             |
-| `onChange` | `function` | `noop`                    | the function to execute upon a user's change of the matrix state                                                                         |
-| `value`    | `string`   | `center`                  | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` |
+| `label`    | `string`   | `Change matrix alignment` | Label for the control.											                                                                                             |


In the block-editor package, there are no strict rules for the format of props, but the table format is not used outside of this component.

The following format, which is the most widely used, may be a good choice.

### Props ### `propName` - **Type:** `String` - **Default:** `none` - **Options:** `one`, `two`, `three` Prop description goes here. ### `onChange` - **Type:** `Function` Prop description goes here.

t-hamano · 2024-12-16T04:46:22Z

packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js

+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'center center' },


Suggested change

defaultValue: { summary: 'center center' },

defaultValue: { summary: "'center'" },

I think the default value is "center".

t-hamano · 2024-12-16T04:49:18Z

packages/block-editor/src/components/block-alignment-matrix-control/README.md

-| `value`    | `string`   | `center`                  | describes the content alignment location and can be `top`, `right`, `bottom`, `left`, `topRight`, `bottomRight`, `bottomLeft`, `topLeft` |
+| `label`    | `string`   | `Change matrix alignment` | Label for the control.											                                                                                             |
+| `onChange` | `function` | `noop`                    | Function to execute upon a user's change of the matrix state.                                                                            |
+| `value`    | `string`   | `center`                  | Describes the content alignment location and can be `center center`, `center left`, `center right`, `top center`, `top left`, `top right`, `bottom center`, `bottom left`, `bottom right`. |


t-hamano · 2024-12-16T04:58:05Z

packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js

+			description: 'Disables the control.',
+		},
+		value: {
+			control: 'text',


Suggested change

control: 'text',

control: { type: null },

Since the value prop is controlled by useState, I don't think a text field is necessary.

t-hamano · 2024-12-16T05:01:24Z

packages/block-editor/src/components/block-alignment-matrix-control/stories/index.story.js

+			control: 'text',
+			table: {
+				type: { summary: 'string' },
+				defaultValue: { summary: 'Change matrix alignment' },


Suggested change

defaultValue: { summary: 'Change matrix alignment' },

defaultValue: { summary: "'Change matrix alignment'" },

It might be better to explicitly state that it is a string type.

…ional properties

Sukhendu2002 marked this pull request as ready for review November 26, 2024 06:52

Sukhendu2002 requested a review from ellatrix as a code owner November 26, 2024 06:52

akasunil mentioned this pull request Nov 28, 2024

Storybook: Add and Update Block Editor Components stories #67165

Open

akasunil added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components labels Nov 28, 2024

miminari requested review from ciampo and removed request for ellatrix November 28, 2024 23:35

ciampo requested a review from a team December 4, 2024 17:17

ciampo removed their request for review December 13, 2024 16:06

ciampo requested review from t-hamano and Mamaduka December 13, 2024 16:08

t-hamano reviewed Dec 16, 2024

View reviewed changes

Sukhendu2002 added 4 commits December 16, 2024 11:44

Storybook: Add BlockAlignmentMatrixControl Stories

f037188

Update BlockAlignmentMatrixControl story to CSF 3

9ab1da2

Update BlockAlignmentMatrixControl documentation and story with addit…

9e0cd13

…ional properties

Fix syntax error in BlockAlignmentMatrixControl README

613d0b0

Sukhendu2002 force-pushed the add/block-alignment-matrix-control-story branch from 5efe581 to 613d0b0 Compare December 16, 2024 06:17

Sukhendu2002 closed this Dec 16, 2024

Sukhendu2002 mentioned this pull request Dec 16, 2024

Storybook: Add BlockAlignmentMatrixControl Stories and update README #68007

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook: Add stories for BlockAlignmentMatrixControl Component #67292

Storybook: Add stories for BlockAlignmentMatrixControl Component #67292

Sukhendu2002 commented Nov 26, 2024 •

edited

Loading

github-actions bot commented Nov 26, 2024 •

edited

Loading

ciampo commented Dec 13, 2024

t-hamano left a comment

t-hamano Dec 16, 2024

t-hamano Dec 16, 2024

t-hamano Dec 16, 2024

t-hamano Dec 16, 2024

t-hamano Dec 16, 2024

	defaultValue: { summary: 'center center' },
	defaultValue: { summary: "'center'" },

	export type AlignmentMatrixControlValue =
	\| 'top left'
	\| 'top center'
	\| 'top right'
	\| 'center left'
	\| 'center'
	\| 'center center'
	\| 'center right'
	\| 'bottom left'
	\| 'bottom center'
	\| 'bottom right';

	defaultValue: { summary: 'Change matrix alignment' },
	defaultValue: { summary: "'Change matrix alignment'" },

Storybook: Add stories for BlockAlignmentMatrixControl Component #67292

Storybook: Add stories for BlockAlignmentMatrixControl Component #67292

Conversation

Sukhendu2002 commented Nov 26, 2024 • edited Loading

What?

Testing Instructions

Screenshots or screencast

github-actions bot commented Nov 26, 2024 • edited Loading

ciampo commented Dec 13, 2024

t-hamano left a comment

Choose a reason for hiding this comment

t-hamano Dec 16, 2024

Choose a reason for hiding this comment

t-hamano Dec 16, 2024

Choose a reason for hiding this comment

t-hamano Dec 16, 2024

Choose a reason for hiding this comment

t-hamano Dec 16, 2024

Choose a reason for hiding this comment

t-hamano Dec 16, 2024

Choose a reason for hiding this comment

Sukhendu2002 commented Nov 26, 2024 •

edited

Loading

github-actions bot commented Nov 26, 2024 •

edited

Loading