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

Conversation

@albarin
Copy link
Contributor

@albarin albarin commented Sep 1, 2022

Fix the chevron overlap with the attribute pills in some smaller window sizes.

Fixes #6982

Screenshots

Before After
Screenshot 2022-09-01 at 12 16 45 Screenshot 2022-09-01 at 12 17 05

Testing

User Facing Testing

  1. Add the Filter by Attribute block and the All Products block to a page.
  2. Set the Filter by Attribute block display to dropdown and allow selecting multiple options.
  3. Play around with the window size and the options you select, and make sure the pills inside the input don't overlap the chevron.

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

@albarin albarin added skip-changelog PRs that you don't want to appear in the changelog. block-type: filter blocks Issues related to all of the filter blocks. block: filter by attribute Issues related to the Filter by Attribute block. labels 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-7039.zip

@albarin albarin marked this pull request as ready for review September 1, 2022 10:18
@rubikuserbot rubikuserbot requested review from a team and sunyatasattva and removed request for a team September 1, 2022 10:18
@albarin albarin requested a review from Aljullu September 1, 2022 10:18
@github-actions
Copy link
Contributor

github-actions bot commented Sep 1, 2022

Size Change: +27 B (0%)

Total Size: 872 kB

Filename Size Change
build/wc-blocks-style-rtl.css 23 kB +13 B (0%)
build/wc-blocks-style.css 23 kB +14 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.79 kB
build/attribute-filter-frontend.js 22.1 kB
build/attribute-filter.js 13.1 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 299 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.1 kB
build/cart-blocks/cart-totals-frontend.js 321 B
build/cart-blocks/empty-cart-frontend.js 346 B
build/cart-blocks/filled-cart-frontend.js 781 B
build/cart-blocks/order-summary-coupon-form-frontend.js 2.65 kB
build/cart-blocks/order-summary-discount-frontend.js 2.15 kB
build/cart-blocks/order-summary-fee-frontend.js 274 B
build/cart-blocks/order-summary-heading-frontend.js 454 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 426 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.38 kB
build/checkout-blocks/fields-frontend.js 345 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.8 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 604 B
build/checkout-blocks/order-summary-subtotal-frontend.js 274 B
build/checkout-blocks/order-summary-taxes-frontend.js 434 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.75 kB
build/checkout-blocks/terms-frontend.js 1.23 kB
build/checkout-blocks/totals-frontend.js 325 B
build/checkout-frontend.js 49.3 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.79 kB
build/mini-cart-component-frontend.js 16.8 kB
build/mini-cart-contents-block/empty-cart-frontend.js 365 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 289 B
build/mini-cart-contents-block/shopping-button-frontend.js 288 B
build/mini-cart-contents-block/title-frontend.js 367 B
build/mini-cart-contents.js 22.9 kB
build/mini-cart-frontend.js 1.71 kB
build/mini-cart.js 4.58 kB
build/price-filter-frontend.js 13.3 kB
build/price-filter.js 9.17 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 301 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 879 B
build/product-category-list.js 504 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.72 kB
build/product-on-sale.js 8.03 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 741 B
build/product-sale-badge-frontend.js 1.13 kB
build/product-sale-badge.js 803 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 993 B
build/product-stock-indicator.js 624 B
build/product-summary-frontend.js 1.29 kB
build/product-summary.js 921 B
build/product-tag-list-frontend.js 872 B
build/product-tag-list.js 499 B
build/product-tag.js 8.09 kB
build/product-title-frontend.js 1.31 kB
build/product-title.js 923 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.01 kB
build/single-product-frontend.js 21.4 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 7.59 kB
build/stock-filter.js 7.53 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.85 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

Copy link
Contributor

@Aljullu Aljullu left a comment

Choose a reason for hiding this comment

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

Confirming it fixes the issue! I left one small comment about using calc() for the input width, but LGTM.

@github-actions github-actions bot added this to the 8.5.0 milestone Sep 2, 2022
@albarin albarin merged commit 386d7e0 into trunk Sep 2, 2022
@albarin albarin deleted the fix/6982-chevron-overlap branch September 2, 2022 10:58
@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
…h the chevron (woocommerce#7039)

* Avoid chevron overlap

* Improve input width calculation
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

block: filter by attribute Issues related to the Filter by Attribute block. block-type: filter blocks Issues related to all of the filter blocks. skip-changelog PRs that you don't want to appear in the changelog. type: enhancement The issue is a request for an enhancement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Pills in the Filter by Attribute block dropdown might overlap the chevron

3 participants