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

Make Active filters texts bigger #7087

Merged
merged 1 commit into from Sep 9, 2022
Merged

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Sep 8, 2022

This PR is a design change suggestion to make Active filters block texts slightly bigger. IMO the active filter texts were abnormally small compared to other filter blocks.

Changes included in this PR:

  • Makes the Clear all button slightly bigger.
  • Makes the active filter labels bigger (ie: Blue).
  • Keeps the type heading the same size (ie: COLOR:).
  • Reduces the spacing between the remove button and the active filter label.

User Facing Testing

  1. Create a page with the filter blocks and the All Products block.
  2. In the frontend add some filters.
  3. Verify the active filters texts have a size which doesn't seem broken compared to other filter blocks.
  4. Try changing the display style to chips and verify the same.
  5. If you can, try with different themes (I tried with Storefront and Twenty Twenty Two).
List
Before After
Chips
Before After
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Enhance the display of the Active filters block changing the sizes of the text.

@Aljullu Aljullu added status: needs review skip-changelog PRs that you don't want to appear in the changelog. block: active filters Issues related to the Active Filters block. labels Sep 8, 2022
@Aljullu Aljullu added this to the 8.5.0 milestone Sep 8, 2022
@Aljullu Aljullu self-assigned this Sep 8, 2022
@rubikuserbot rubikuserbot requested review from a team and danielwrobert and removed request for a team September 8, 2022 09:20
@Aljullu
Copy link
Contributor Author

Aljullu commented Sep 8, 2022

@vivialice it would be great if you can take a look at this one and see if the design changes look good. 🙂

@github-actions
Copy link
Contributor

github-actions bot commented Sep 8, 2022

The release ZIP for this PR is accessible via:

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

@github-actions
Copy link
Contributor

github-actions bot commented Sep 8, 2022

Size Change: -31 B (0%)

Total Size: 873 kB

Filename Size Change
build/wc-blocks-style-rtl.css 23.3 kB -14 B (0%)
build/wc-blocks-style.css 23.3 kB -17 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.34 kB
build/active-filters.js 8.01 kB
build/all-products-frontend.js 18.1 kB
build/all-products.js 33.9 kB
build/all-reviews.js 7.8 kB
build/attribute-filter-frontend.js 22.3 kB
build/attribute-filter.js 13.3 kB
build/blocks-checkout.js 17.4 kB
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.16 kB
build/cart-blocks/cart-express-payment-frontend.js 5.09 kB
build/cart-blocks/cart-items-frontend.js 298 B
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.25 kB
build/cart-blocks/cart-line-items-frontend.js 429 B
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/filled-cart-frontend.js 784 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.14 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 453 B
build/cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping-frontend.js 6.37 kB
build/cart-blocks/order-summary-shipping-frontend.js 427 B
build/cart-blocks/order-summary-subtotal-frontend.js 274 B
build/cart-blocks/order-summary-taxes-frontend.js 434 B
build/cart-blocks/proceed-to-checkout-frontend.js 1.15 kB
build/cart-frontend.js 47.1 kB
build/cart.js 41.8 kB
build/checkout-blocks/actions-frontend.js 1.42 kB
build/checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 4.12 kB
build/checkout-blocks/billing-address-frontend.js 891 B
build/checkout-blocks/contact-information-frontend.js 2.83 kB
build/checkout-blocks/express-payment-frontend.js 5.39 kB
build/checkout-blocks/fields-frontend.js 344 B
build/checkout-blocks/order-note-frontend.js 1.07 kB
build/checkout-blocks/order-summary-cart-items-frontend.js 3.64 kB
build/checkout-blocks/order-summary-coupon-form-frontend.js 2.79 kB
build/checkout-blocks/order-summary-discount-frontend.js 2.26 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/order-summary-taxes-frontend.js 435 B
build/checkout-blocks/payment-frontend.js 7.7 kB
build/checkout-blocks/shipping-address-frontend.js 1.03 kB
build/checkout-blocks/shipping-methods-frontend.js 4.74 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.2 kB
build/checkout.js 43.1 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/filled-cart-frontend.js 229 B
build/mini-cart-contents-block/footer--mini-cart-contents-block/products-table-frontend.js 4.69 kB
build/mini-cart-contents-block/footer-frontend.js 6.98 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.31 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.65 kB
build/product-add-to-cart-frontend.js 6.95 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-frontend.js 1.88 kB
build/product-button.js 1.57 kB
build/product-categories.js 2.41 kB
build/product-category-list-frontend.js 880 B
build/product-category-list.js 502 B
build/product-category.js 8.69 kB
build/product-image-frontend.js 1.88 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-frontend.js 1.9 kB
build/product-price.js 1.51 kB
build/product-query.js 648 B
build/product-rating-frontend.js 1.16 kB
build/product-rating.js 740 B
build/product-sale-badge-frontend.js 1.13 kB
build/product-sale-badge.js 802 B
build/product-search.js 2.65 kB
build/product-sku-frontend.js 381 B
build/product-sku.js 379 B
build/product-stock-indicator-frontend.js 994 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.28 kB
build/product-summary.js 922 B
build/product-tag-list-frontend.js 875 B
build/product-tag-list.js 498 B
build/product-tag.js 8.08 kB
build/product-title-frontend.js 1.31 kB
build/product-title.js 922 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-frontend.js 21.4 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.61 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--cart-blocks/cart-line-items--checkout-blocks/order-summary-cart-items--mini-cart-contents---233ab542-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--5b8feb0b-frontend.js 4.84 kB
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/billing-address--checkout-blocks/order--decc3dc6-frontend.js 19.1 kB
build/vendors--mini-cart-contents-block/footer-frontend.js 6.86 kB
build/vendors--product-add-to-cart-frontend.js 7.53 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

@Aljullu Aljullu removed the skip-changelog PRs that you don't want to appear in the changelog. label Sep 8, 2022
Copy link
Contributor

@danielwrobert danielwrobert 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 working on this!

@vivialice and I spoke briefly about these font sizes earlier this week. IIRC, the idea was to keep the Active Filters smaller and scale everything else down as well, since the filters are secondary UI elements.

I'll leave it to @vivialice to confirm this though. 🙂

@Aljullu
Copy link
Contributor Author

Aljullu commented Sep 8, 2022

Oh, I didn't know you had discussed about it, sorry.

I'll leave it to @vivialice to confirm this though. slightly_smiling_face

Sure, let's wait to see what @vivialice says. It would be good if we can get this into WC Blocks 8.5.0 given that this will end up in WC core.

@danielwrobert
Copy link
Contributor

Oh, I didn't know you had discussed about it, sorry.

That's my fault. We discussed it on a call and I didn't follow up in a public channel. I could have opened an issue around it for better visibility!

It would be good if we can get this into WC Blocks 8.5.0 given that this will end up in WC core.

Perhaps we can merge this in so we have better consistency for the time being. Then we can plan an effort to address all of the filter text sizes together in an upcoming cycle. I know that means reverting this down the road but I don't see that being too much overhead and it seems a better route in the meantime. Thoughts?

@Aljullu
Copy link
Contributor Author

Aljullu commented Sep 8, 2022

Perhaps we can merge this in so we have better consistency for the time being. Then we can plan an effort to address all of the filter text sizes together in an upcoming cycle. I know that means reverting this down the road but I don't see that being too much overhead and it seems a better route in the meantime. Thoughts?

Works for me. 🙂

Copy link
Contributor

@danielwrobert danielwrobert left a comment

Choose a reason for hiding this comment

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

@Aljullu ok, sounds good! I'll approve this and we can plan for a follow-up on addressing all of the sizing. 🚀

@Aljullu Aljullu merged commit ec07902 into trunk Sep 9, 2022
@Aljullu Aljullu deleted the fix/bigger-active-filters branch September 9, 2022 07:53
@gigitux gigitux added the type: enhancement The issue is a request for an enhancement. label Sep 12, 2022
senadir pushed a commit to senadir/woocommerce-blocks that referenced this pull request Nov 12, 2022
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. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants