Skip to content
This repository has been archived by the owner on Feb 23, 2024. It is now read-only.

Update Active Filters "remove filter" icon to use Icon component #7035

Merged
merged 2 commits into from
Sep 9, 2022

Conversation

danielwrobert
Copy link
Contributor

To be consistent with the button icon used on the Chips view, this replaces the native svg element used in the List view with the same Icon component from WP Core.

Fixes #6915

Screenshots

Before After
CleanShot 2022-08-31 at 16 48 11 CleanShot 2022-08-31 at 16 38 34

Testing

  1. Add the Active Filters block, in List view alongside some other Filters blocks.
  2. Apply some filters to the page.
  3. Confirm the remove button matches the After screenshot above. Also confirm that the remove button is visually consistent with the remove button in Chips view.
  4. Confirm the remove buttons for each active filter have a hover state of an alternate shade of grey - also confirm they function as expected.
  5. Confirm no JS or PHP errors.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Enhancement - update "remove filter" icon on the Active Filters block to use Icon component in both layouts.

@danielwrobert danielwrobert added type: enhancement The issue is a request for an enhancement. needs: design The issue requires design input/work from a designer. block: active filters Issues related to the Active Filters block. labels Sep 1, 2022
@danielwrobert danielwrobert self-assigned this Sep 1, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Sep 1, 2022

The release ZIP for this PR is accessible via:

https://wcblocks.wpcomstaging.com/wp-content/uploads/woocommerce-gutenberg-products-block-7035.zip

@danielwrobert danielwrobert changed the title Update "remove filter" icon to use Icon component. Update Active Filters "remove filter" icon to use Icon component Sep 1, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Sep 1, 2022

Size Change: -145 B (0%)

Total Size: 875 kB

Filename Size Change
build/active-filters-frontend.js 7.65 kB -150 B (-2%)
build/active-filters.js 8.3 kB -143 B (-2%)
build/all-products-frontend.js 18.1 kB +9 B (0%)
build/attribute-filter-frontend.js 22.3 kB -3 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB +1 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB -2 B (0%)
build/cart-blocks/cart-items-frontend.js 299 B +1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.25 kB -1 B (0%)
build/cart-blocks/cart-line-items-frontend.js 429 B -1 B (0%)
build/cart-blocks/filled-cart-frontend.js 783 B -1 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 2.64 kB -3 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB +8 B (0%)
build/cart-blocks/order-summary-heading-frontend.js 454 B +1 B (0%)
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB +7 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 428 B +1 B (0%)
build/cart-blocks/order-summary-taxes-frontend.js 435 B +1 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB -3 B (0%)
build/cart-frontend.js 47.1 kB +2 B (0%)
build/checkout-blocks/actions-frontend.js 1.42 kB +2 B (0%)
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB +5 B (0%)
build/checkout-blocks/billing-address-frontend.js 892 B +1 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.84 kB +3 B (0%)
build/checkout-blocks/express-payment-frontend.js 5.39 kB +1 B (0%)
build/checkout-blocks/order-note-frontend.js 1.08 kB +4 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.64 kB -3 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.27 kB +9 B (0%)
build/checkout-blocks/order-summary-taxes-frontend.js 434 B -1 B (0%)
build/checkout-blocks/payment-frontend.js 7.7 kB +2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.74 kB +3 B (0%)
build/checkout-blocks/terms-frontend.js 1.23 kB +2 B (0%)
build/checkout-blocks/totals-frontend.js 326 B +1 B (0%)
build/checkout-frontend.js 49.2 kB -11 B (0%)
build/mini-cart-contents-block/filled-cart-frontend.js 230 B +1 B (0%)
build/mini-cart-contents-block/footer-frontend.js 6.98 kB +2 B (0%)
build/product-add-to-cart-frontend.js 6.95 kB +3 B (0%)
build/product-button-frontend.js 1.87 kB -1 B (0%)
build/product-category-list-frontend.js 883 B +2 B (0%)
build/product-image-frontend.js 1.88 kB +1 B (0%)
build/product-price-frontend.js 1.9 kB +1 B (0%)
build/product-rating-frontend.js 1.17 kB +3 B (0%)
build/product-sale-badge-frontend.js 1.13 kB +2 B (0%)
build/product-sku-frontend.js 380 B -1 B (0%)
build/product-stock-indicator-frontend.js 996 B +2 B (0%)
build/product-summary-frontend.js 1.29 kB +3 B (0%)
build/product-tag-list-frontend.js 876 B +1 B (0%)
build/product-title-frontend.js 1.31 kB +2 B (0%)
build/single-product-frontend.js 21.4 kB +2 B (0%)
build/stock-filter-frontend.js 7.62 kB -1 B (0%)
build/vendors--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.85 kB +3 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB -6 B (0%)
build/vendors--product-add-to-cart-frontend.js 7.53 kB +2 B (0%)
build/wc-blocks-style-rtl.css 23.8 kB +45 B (0%)
build/wc-blocks-style.css 23.7 kB +46 B (0%)
ℹ️ View Unchanged
Filename Size
build/all-products.js 33.9 kB
build/all-reviews.js 7.8 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-order-summary-frontend.js 1.11 kB
build/cart-blocks/cart-totals-frontend.js 322 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart.js 41.8 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.79 kB
build/checkout-blocks/order-summary-fee-frontend.js 276 B
build/checkout-blocks/order-summary-frontend.js 1.11 kB
build/checkout-blocks/order-summary-shipping-frontend.js 602 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout.js 43.2 kB
build/featured-category.js 13.2 kB
build/featured-product.js 13.5 kB
build/general-style-rtl.css 1.29 kB
build/general-style.css 1.29 kB
build/handpicked-products.js 7.37 kB
build/legacy-template.js 2.86 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 366 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 290 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-contents.js 22.8 kB
build/mini-cart-frontend.js 1.72 kB
build/mini-cart.js 4.58 kB
build/price-filter-frontend.js 13.4 kB
build/price-filter.js 9.32 kB
build/price-format.js 1.19 kB
build/product-add-to-cart--product-button--product-category-list--product-image--product-price--product-r--a0326d00.js 223 B
build/product-add-to-cart--product-button--product-image--product-title.js 2.66 kB
build/product-add-to-cart.js 6.88 kB
build/product-best-sellers.js 7.71 kB
build/product-button--product-category-list--product-image--product-price--product-rating--product-sale-b--e17c7c01.js 435 B
build/product-button--product-image--product-rating--product-sale-badge--product-title.js 300 B
build/product-button.js 1.57 kB
build/product-categories.js 2.41 kB
build/product-category-list.js 502 B
build/product-category.js 8.69 kB
build/product-image.js 1.59 kB
build/product-new.js 7.71 kB
build/product-on-sale.js 8.02 kB
build/product-price.js 1.51 kB
build/product-query.js 648 B
build/product-rating.js 739 B
build/product-sale-badge.js 801 B
build/product-search.js 2.65 kB
build/product-sku.js 379 B
build/product-stock-indicator.js 623 B
build/product-summary.js 920 B
build/product-tag-list.js 497 B
build/product-tag.js 8.09 kB
build/product-title.js 921 B
build/product-top-rated.js 7.95 kB
build/products-by-attribute.js 8.63 kB
build/reviews-by-category.js 11.2 kB
build/reviews-by-product.js 12.3 kB
build/reviews-frontend.js 7.02 kB
build/single-product.js 10 kB
build/stock-filter.js 7.55 kB
build/vendors--cart-blocks/cart-line-items--cart-blocks/cart-order-summary--cart-blocks/order-summary-shi--c02aad66-frontend.js 5.26 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/wc-blocks-data.js 9.87 kB
build/wc-blocks-editor-style-rtl.css 5.1 kB
build/wc-blocks-editor-style.css 5.1 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 931 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.53 kB
build/wc-blocks-shared-hocs.js 1.71 kB
build/wc-blocks-vendors-style-rtl.css 1.95 kB
build/wc-blocks-vendors-style.css 1.95 kB
build/wc-blocks-vendors.js 54.5 kB
build/wc-blocks.js 2.63 kB
build/wc-payment-method-bacs.js 816 B
build/wc-payment-method-cheque.js 811 B
build/wc-payment-method-cod.js 909 B
build/wc-payment-method-paypal.js 837 B
build/wc-settings.js 2.6 kB

compressed-size-action

@danielwrobert danielwrobert force-pushed the update/active-filters-remove-btns branch from d835ffa to 2595e96 Compare September 1, 2022 14:56
@danielwrobert danielwrobert marked this pull request as ready for review September 1, 2022 14:57
@rubikuserbot rubikuserbot requested review from a team and tjcafferkey and removed request for a team September 1, 2022 14:57
@danielwrobert danielwrobert force-pushed the update/active-filters-remove-btns branch 3 times, most recently from 20d07b3 to 884010c Compare September 6, 2022 14:07
@tjcafferkey
Copy link
Contributor

Hey @danielwrobert the colors for the "X" look different in the PR than they do on the Figma designs screenshotted below. Is this expected?

Screenshot 2022-09-06 at 15 15 23

@danielwrobert danielwrobert force-pushed the update/active-filters-remove-btns branch from 884010c to 8a485c5 Compare September 6, 2022 14:25
@danielwrobert
Copy link
Contributor Author

@tjcafferkey yes, this is expected. The decision to update these remove buttons came afterwards. These remove buttons should now be the same as the Chips view, which use the Core Icon component. Prior to this PR, the views were using different remove buttons between them.

That said, I'll leave it to @vivialice to make the final call to confirm this is what we're looking for visually!

Copy link
Contributor

@tjcafferkey tjcafferkey left a comment

Choose a reason for hiding this comment

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

If thats the case then I'll provisionally approve this as the change LGTM! 😄

@github-actions github-actions bot added this to the 8.5.0 milestone Sep 6, 2022
@vivialice
Copy link

Looks good to me! Thanks for consolidating these.

To be consistent with the button icon used on the Chips view, this
replaces the native svg element used in the List view with the same
Icon component from core.
There is currently no top margin when the active filters contain a price
filter in the list view. This is because the filters only contain a
range and do not render a child list.

This update will target that price filter item and add a top margin that
is consistent with the other active filters.
@danielwrobert danielwrobert force-pushed the update/active-filters-remove-btns branch from 8a485c5 to 47ef7ec Compare September 9, 2022 14:43
@danielwrobert danielwrobert merged commit 7b01374 into trunk Sep 9, 2022
@danielwrobert danielwrobert deleted the update/active-filters-remove-btns branch September 9, 2022 15:06
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
…commerce#7035)

* Update "remove filter" icon to use Icon component.

To be consistent with the button icon used on the Chips view, this
replaces the native svg element used in the List view with the same
Icon component from core.

* Add proper margin to active filters by price list.

There is currently no top margin when the active filters contain a price
filter in the list view. This is because the filters only contain a
range and do not render a child list.

This update will target that price filter item and add a top margin that
is consistent with the other active filters.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: active filters Issues related to the Active Filters block. needs: design The issue requires design input/work from a designer. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Inconsistent "remove" button markup between List and Chips
3 participants