Skip to content

Storybook: Add stories for the TextAlignmentControl component#67371

Merged
t-hamano merged 6 commits intoWordPress:trunkfrom
himanshupathak95:storybook/text-alignment-control
Dec 13, 2024
Merged

Storybook: Add stories for the TextAlignmentControl component#67371
t-hamano merged 6 commits intoWordPress:trunkfrom
himanshupathak95:storybook/text-alignment-control

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
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 <abcd95@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.

@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?

@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

himanshupathak95 commented Dec 10, 2024

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 👍

@himanshupathak95
Copy link
Contributor Author

himanshupathak95 commented Dec 12, 2024

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
@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 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
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 <abcd95@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
@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