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.

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

[Experimental] Utilize WP generated class names when styling new active filters block. #44069

Merged
merged 3 commits into from
Jan 26, 2024

Conversation

samueljseay
Copy link
Contributor

Changes proposed in this Pull Request:

@dinhtungdu and I agreed that we don't need to create our own unique class names or use bem style syntax, its overly verbose and doesn't add anything.

Instead we scope all styles to the class name generated for the block by WP, and also remove the BEM style prefix from any scoped class names. (To keep PR's small and testable I'm addressing one block at a time.)

Additionally, I noticed a lot of copy pasted styles from the old block that we don't use or need.

This is part of #43167

How to test the changes in this Pull Request:

  1. Create a page (or edit the product catalog template) and add the new active filters block along with some of the other new blocks.
  2. Try adding some filters and clearing some, Check that the styling and behaviour still looks correct for one or 2 filters or many filters.

Changelog entry

  • Automatically create a changelog entry from the details below.

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

[Experimental] Utilize WP generated class names when styling new active filters block.

Comment

@github-actions github-actions bot added the plugin: woocommerce Issues related to the WooCommerce Core plugin. label Jan 25, 2024
@woocommercebot woocommercebot requested review from a team and tjcafferkey and removed request for a team January 25, 2024 09:00
Copy link
Contributor

github-actions bot commented Jan 25, 2024

Hi @dinhtungdu,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

@@ -159,7 +158,7 @@ private function render_chip_item( $args ) {

$remove_label = sprintf( 'Remove %s filter', wp_strip_all_tags( $title ) );
?>
<li class="wc-block-active-filters__list-item">
<li class="list-item">
<span class="is-removable wc-block-components-chip wc-block-components-chip--radius-large">
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The only thing I left alone were these components chip classes. I assume they're borrowing styles from another component with some conditional overrides.

@samueljseay samueljseay requested review from dinhtungdu and removed request for tjcafferkey January 25, 2024 09:02
Copy link
Contributor

github-actions bot commented Jan 25, 2024

Test Results Summary

Commit SHA: e2240f5

Test 🧪Passed ✅Failed 🚨Broken 🚧Skipped ⏭️Unknown ❔Total 📊Duration ⏱️
API Tests25900202610m 36s
E2E Tests275002102965m 53s

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

Copy link
Member

@dinhtungdu dinhtungdu left a comment

Choose a reason for hiding this comment

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

So much cleaner! I tested this on JN and the block still works as expected as before.

image

@samueljseay samueljseay merged commit 1ce39d9 into trunk Jan 26, 2024
54 checks passed
@samueljseay samueljseay deleted the dev/unify-class-naming-active-filters branch January 26, 2024 06:06
@github-actions github-actions bot added this to the 8.7.0 milestone Jan 26, 2024
@github-actions github-actions bot added the needs: analysis Indicates if the PR requires a PR testing scrub session. label Jan 26, 2024
@veljkho veljkho added status: analysis complete Indicates if a PR has been analysed by Solaris and removed needs: analysis Indicates if the PR requires a PR testing scrub session. labels Jan 26, 2024
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. status: analysis complete Indicates if a PR has been analysed by Solaris
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants