8000 Fix: WooCommerce Blocks Storybook bugs by amitraj2203 · Pull Request #58053 · woocommerce/woocommerce · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Fix: WooCommerce Blocks Storybook bugs #58053

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

Conversation

amitraj2203
Copy link
Contributor
@amitraj2203 amitraj2203 commented May 16, 2025

Submission Review Guidelines:

Changes proposed in this Pull Request:

This PR addresses several UI component issues in the WooCommerce Blocks Storybook implementation. The changes fix various functionality and styling problems to improve the developer experience when using the Storybook components.

Specifically, the PR:

  • RadioControlAccordion: Created a style.scss file and added styles for top and bottom padding similar to RadioControl
  • RemovableChip: Fixed functionality to make the chip properly removable and added Disabled and RemoveOnAnyClick variations
  • TextInput: Fixed default error state display and added a WithHelp variation
  • Title: Fixed heading size to properly change when modifying the heading level tags prop in Storybook
  • CountryInput: Changed the label from "Select a countries" to "Select a country"
  • QuantitySelector: Set the editable prop to true by default and added new variations: NonEditable, WithMinimum, and WithMaximum
  • ValidatedTextInput: Fixed the showError prop functionality and repaired the "With error" variation

Closes #51785< 8000 /a>

Screenshots or screen recordings:

Component Image
RadioControlAccordion RadioControlAccordion after fix
Title Title after fix
Countrylnput Countrylnput after fix
QuantitySelector QuantitySelector after fix
ValidatedTextInput ValidatedTextInput after fix

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

  1. Run the Storybook instance with npm run storybook and go to http://localhost:6006/
  2. Test the fixed components:
    • Verify RadioControlAccordion displays with proper padding
    • Check that RemovableChip can be removed by clicking the 'x'
    • Confirm TextInput no longer shows errors by default
    • Verify Title component changes font size when changing heading levels
    • Check CountryInput displays with the correct Select a country: label
    • Verify QuantitySelector is editable by default and new variations work correctly
    • Test ValidatedTextInput error state displays correctly and the With error variation works now

Changelog entry

  • Automatically create a changelog entry from the details below.
  • This Pull Request does not require a changelog entry. (Comment required below)
Changelog Entry Details

Significance

  • Patch
  • Minor
  • Major

Type

  • Fix - Fixes an existing bug
  • Add - Adds functionality
  • Update - Update existing functionality
  • Dev - Development related task
  • Tweak - A minor adjustment to the codebase
  • Performance - Address performance issues
  • Enhancement - Improvement to existing functionality

Message

Changelog Entry Comment

Comment

@github-actions github-actions bot added plugin: woocommerce Issues related to the WooCommerce Core plugin. type: community contribution labels May 16, 2025
@opr opr requested review from a team and opr and removed request for a team May 16, 2025 11:25
Copy link
Contributor
github-actions bot commented May 16, 2025

Testing Guidelines

Hi ,

Apart from reviewing the code changes, please make sure to review the testing instructions (Guide) and verify that relevant tests (E2E, Unit, Integration, etc.) have been added or updated as needed.

Reminder: PR reviewers are required to document testing performed. This includes:

  • 🖼️ Screenshots or screen recordings.
  • 📝 List of functionality tested / steps followed.
  • 🌐 Site details (environment attributes such as hosting type, plugins, theme, store size, store age, and relevant settings).
  • 🔍 Any analysis performed, such as assessing potential impacts on environment attributes and other plugins, conducting performance profiling, or using LLM/AI-based analysis.

⚠️ Within the testing details you provide, please ensure that no sensitive information (such as API keys, passwords, user data, etc.) is included in this public issue.

Copy link
Contributor
@opr opr left a comment

Choose a reason for hiding this comment

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

Thanks a lot @amitraj2203 looking great so far except a few snags, please let me know if any of my comments are unclear.

By the way I also noticed the With error variation of the ValidatedTextInput does not show the value after typing, would you be willing to tackle that bug in this PR too? 🙏🏼

@amitraj2203
Copy link
Contributor Author

By the way I also noticed the With error variation of the ValidatedTextInput does not show the value after typing

I see, the issue was with all the variations present in the Docs page.
Screenshot 2025-05-21 at 1 23 22 AM
I tried to fix it in 40471b1 could you please review it again? Thanks!

@amitraj2203 amitraj2203 requested a review from opr May 20, 2025 20:18
Copy link
Contributor
@opr opr 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 looking at those things I mentioned! A couple more comments, but looks almost ready to merge 👍🏼

@amitraj2203 amitraj2203 requested a review from opr May 22, 2025 20:44
Copy link
Contributor
@opr opr left a comment

Choose a reason for hiding this comment

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

@amitraj2203 this looks good now, really impressive work. I've just tested the titles and they are working nicely.

Thanks again for your contribution, it's greatly appreciated!

@opr opr merged commit c0f0257 into woocommerce:trunk May 30, 2025
31 checks passed
@github-actions github-actions bot added this to the 10.0.0 milestone May 30, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
plugin: woocommerce Issues related to the WooCommerce Core plugin. type: community contribution
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Epic] WooCommerce Blocks Storybook bugs
2 participants
0