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

Jump to bottom

Storybook: Add stories for the TextAlignmentControl component #67371

Merged
merged 6 commits into from
Dec 13, 2024
Merged

Storybook: Add stories for the TextAlignmentControl component #67371

merged 6 commits into from
Dec 13, 2024

Conversation

himanshupathak95
Copy link
Contributor

@himanshupathak95 himanshupathak95 commented Nov 28, 2024 •
edited
Loading

Part of #67165

What?

This PR improves the Storybook stories for the TextAlignmentControl component in the block editor. It includes comprehensive stories demonstrating different text alignment states.

Why?

As part of the ongoing effort to improve component documentation and testing (tracked in #22891), we need comprehensive stories for all Block Editor components. This PR helps users and developers better understand the TextAlignmentControl component's capabilities and usage.

Testing Instructions

  • Start Storybook by running npm run storybook:dev
  • Open Storybook at http://localhost:50240/
  • Navigate to "BlockEditor/TextAlignmentControl" in the Storybook sidebar
  • Test the following stories:
    • Default (left alignment)
    • WithLeftAlignment (explicit left alignment)
    • WithCenterAlignment (center alignment)
    • WithRightAlignment (right alignment)
    • WithJustifyAlignment (justify alignment)
    • WithCustomClass (custom class name)

Screencast

text-alignment-control-story.mov

@himanshupathak95 himanshupathak95 changed the title Storybook: Add stories for the text-alignment-control component Storybook: Add stories for the TextAlignmentControl component Nov 28, 2024
@himanshupathak95 himanshupathak95 marked this pull request as ready for review November 28, 2024 09:02
@github-actions GitHub Actions
Copy link

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

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

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

@himanshupathak95 himanshupathak95 mentioned this pull request Nov 28, 2024
Open
@miminari miminari requested review from t-hamano and removed request for ellatrix November 29, 2024 00:12
t-hamano
t-hamano reviewed Dec 3, 2024
View reviewed changes
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!

Both the value prop and the classname prop can be changed in a story, so splitting them all out as stories seems a bit redundant 😅

Can't we just leave them as one story?

packages/block-editor/src/components/text-alignment-control/stories/index.story.js Outdated Show resolved Hide resolved
packages/block-editor/src/components/text-alignment-control/stories/index.story.js Show resolved Hide resolved
packages/block-editor/src/components/text-alignment-control/stories/index.story.js Outdated Show resolved Hide resolved
packages/block-editor/src/components/text-alignment-control/stories/index.story.js Outdated Show resolved Hide resolved
@t-hamano t-hamano added [Type] Developer Documentation Documentation for developers Storybook Storybook and its stories for components labels Dec 3, 2024
@himanshupathak95
Copy link
Contributor Author

Thanks, @t-hamano for the wonderful suggestions.

I have addressed all the feedback and created a screencast of the new changes. Please let me if it tests well for you.

Screen.Recording.2024-12-10.at.20.26.23.mov

t-hamano
t-hamano reviewed Dec 11, 2024
View reviewed changes
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 update! I left some small suggestions at the end, but it works fine 👍

packages/block-editor/src/components/text-alignment-control/stories/index.story.js Outdated Show resolved Hide resolved
packages/block-editor/src/components/text-alignment-control/stories/index.story.js Outdated Show resolved Hide resolved
packages/block-editor/src/components/text-alignment-control/stories/index.story.js Outdated Show resolved Hide resolved
@himanshupathak95
Copy link
Contributor Author

Thanks again for the follow-ups @t-hamano!

The suggestions help simplify the structure further. I have addressed all the feedback 👍🏻

t-hamano
t-hamano approved these changes Dec 12, 2024
View reviewed changes
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! Thank you fo your work 👍

@t-hamano t-hamano merged commit 67557ed into WordPress:trunk Dec 13, 2024
62 checks passed
@github-actions github-actions bot added this to the Gutenberg 20.0 milestone Dec 13, 2024
yogeshbhutkar pushed a commit to yogeshbhutkar/gutenberg that referenced this pull request Dec 18, 2024
@himanshupathak95 @t-hamano @yogeshbhutkar
Storybook: Add stories for the TextAlignmentControl component (WordPr…
819e7d4 
…ess#67371)

* Storybook: Add stories for the text-alignment-control component

* Storybook: Update TextAlignmentControl story to follow best practices and simplify the structure

* Storybook: Simplify TextAlignmentControl story

* Storybook: Simplify the documentation for TextAlignmentControl story

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
yogeshbhutkar pushed a commit to yogeshbhutkar/gutenberg that referenced this pull request Dec 18, 2024
@himanshupathak95 @t-hamano @yogeshbhutkar
Storybook: Add stories for the TextAlignmentControl component (WordPr…
bbc2611 
…ess#67371)

* Storybook: Add stories for the text-alignment-control component

* Storybook: Update TextAlignmentControl story to follow best practices and simplify the structure

* Storybook: Simplify TextAlignmentControl story

* Storybook: Simplify the documentation for TextAlignmentControl story

Co-authored-by: himanshupathak95 <[email protected]>
Co-authored-by: t-hamano <[email protected]>
@im3dabasia im3dabasia mentioned this pull request Dec 19, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

Assignees
No one assigned
Labels
Storybook Storybook and its stories for components [Type] Developer Documentation Documentation for developers
Projects
None yet
Milestone
Gutenberg 20.0
Development

Successfully merging this pull request may close these issues.
2 participants
@himanshupathak95 @t-hamano