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

Checkbox Component Styling Fix #5164

Merged
merged 3 commits into from Nov 22, 2021
Merged

Checkbox Component Styling Fix #5164

merged 3 commits into from Nov 22, 2021

Conversation

mikejolley
Copy link
Member

I noticed 2 small issues with the checkbox component.

  1. It was possible to accidentally click the label due to extra padding when it's the last element in a form step
  2. Clicking the input lagged due to the SVG accepting pointer events

Fixed with CSS and a wrapping div.

Testing

How to test the changes in this Pull Request:

  1. Checkout Introduce Newsletter block for Checkout block mailpoet/mailpoet#3778 and enable mailpoet
  2. See checkbox added to contact step in checkout
  3. Go to frontend. Check the spacing between the label and the checkbox, and then click below the label in the gap between form steps. The checkbox should not be triggered
  4. Confirm you can still toggle the checkbox input

Changelog

Reduce the size of the checkbox component label to prevent accidental input

@mikejolley mikejolley self-assigned this Nov 17, 2021
@rubikuserbot rubikuserbot requested review from a team and opr and removed request for a team November 17, 2021 11:33
@github-actions
Copy link
Contributor

github-actions bot commented Nov 17, 2021 •
edited

Size Change: +6 B (0%)

Total Size: 1.11 MB

Filename Size Change
build/blocks-checkout.js 21.3 kB +5 B (0%)
build/wc-blocks-editor-style-rtl.css 15.7 kB -6 B (0%)
build/wc-blocks-editor-style.css 15.7 kB -6 B (0%)
build/wc-blocks-style-rtl.css 21.1 kB +7 B (0%)
build/wc-blocks-style.css 21 kB +6 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 8.18 kB
build/active-filters.js 8 kB
build/all-products-frontend.js 23.4 kB
build/all-products.js 38.3 kB
build/all-reviews.js 9.56 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 3.19 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.81 kB
build/atomic-block-components/add-to-cart-frontend.js 8.34 kB
build/atomic-block-components/add-to-cart.js 7.85 kB
build/atomic-block-components/button-frontend.js 1.74 kB
build/atomic-block-components/button.js 873 B
build/atomic-block-components/category-list-frontend.js 466 B
build/atomic-block-components/category-list.js 469 B
build/atomic-block-components/image-frontend.js 1.71 kB
build/atomic-block-components/image.js 1.36 kB
build/atomic-block-components/price-frontend.js 2.13 kB
build/atomic-block-components/price.js 2.1 kB
build/atomic-block-components/rating-frontend.js 562 B
build/atomic-block-components/rating.js 566 B
build/atomic-block-components/sale-badge-frontend.js 861 B
build/atomic-block-components/sale-badge.js 868 B
build/atomic-block-components/sku-frontend.js 390 B
build/atomic-block-components/sku.js 393 B
build/atomic-block-components/stock-indicator-frontend.js 611 B
build/atomic-block-components/stock-indicator.js 610 B
build/atomic-block-components/summary-frontend.js 907 B
build/atomic-block-components/summary.js 912 B
build/atomic-block-components/tag-list-frontend.js 468 B
build/atomic-block-components/tag-list.js 471 B
build/atomic-block-components/title-frontend.js 1.47 kB
build/atomic-block-components/title.js 1.48 kB
build/attribute-filter-frontend.js 18.1 kB
build/attribute-filter.js 12.1 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.39 kB
build/cart-blocks/checkout-button-frontend.js 1.21 kB
build/cart-blocks/empty-cart-frontend.js 348 B
build/cart-blocks/express-payment--checkout-blocks/express-payment--checkout-blocks/payment-frontend.js 4.73 kB
build/cart-blocks/express-payment-frontend.js 1.59 kB
build/cart-blocks/filled-cart-frontend.js 805 B
build/cart-blocks/items-frontend.js 302 B
build/cart-blocks/line-items-frontend.js 5.87 kB
build/cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 3.69 kB
build/cart-blocks/order-summary-frontend.js 7.4 kB
build/cart-blocks/totals-frontend.js 324 B
build/cart-frontend.js 52.6 kB
build/cart.js 50.5 kB
build/checkout-blocks/actions-frontend.js 1.48 kB
build/checkout-blocks/billing-address-frontend.js 2.64 kB
build/checkout-blocks/contact-information-frontend.js 3.62 kB
build/checkout-blocks/express-payment-frontend.js 1.93 kB
build/checkout-blocks/fields-frontend.js 348 B
build/checkout-blocks/order-note-frontend.js 1.25 kB
build/checkout-blocks/order-summary-frontend.js 12.9 kB
build/checkout-blocks/payment-frontend.js 4.28 kB
build/checkout-blocks/shipping-address-frontend.js 2.72 kB
build/checkout-blocks/shipping-methods-frontend.js 5.54 kB
build/checkout-blocks/terms-frontend.js 1.29 kB
build/checkout-blocks/totals-frontend.js 329 B
build/checkout-frontend.js 54.8 kB
build/checkout.js 53.8 kB
build/featured-category.js 7.74 kB
build/featured-product.js 9.43 kB
build/handpicked-products.js 6.27 kB
build/legacy-template.js 2.06 kB
build/mini-cart-component-frontend.js 44.4 kB
build/mini-cart-frontend.js 2.34 kB
build/mini-cart.js 5.72 kB
build/price-filter-frontend.js 14.2 kB
build/price-filter.js 9.65 kB
build/price-format.js 1.37 kB
build/product-best-sellers.js 6.62 kB
build/product-categories.js 3.38 kB
build/product-category.js 7.49 kB
build/product-new.js 6.77 kB
build/product-on-sale.js 7.11 kB
build/product-search.js 2.71 kB
build/product-tag.js 6.6 kB
build/product-top-rated.js 6.74 kB
build/products-by-attribute.js 7.71 kB
build/reviews-by-category.js 11.5 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 8.97 kB
build/single-product-frontend.js 26.9 kB
build/single-product.js 10 kB
build/stock-filter-frontend.js 8.62 kB
build/stock-filter.js 7.81 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary--checkout-blocks/billing-ad--c5eb4dcd-frontend.js 16.1 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 4.77 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary--checkout--8a3571de-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items--checkout-blocks/order-summary-frontend.js 3.14 kB
build/vendors--cart-blocks/order-summary--checkout-blocks/billing-address--checkout-blocks/order-summary---eb4d2cec-frontend.js 5.03 kB
build/wc-blocks-data.js 11.3 kB
build/wc-blocks-google-analytics.js 1.98 kB
build/wc-blocks-middleware.js 1.19 kB
build/wc-blocks-registry.js 3.71 kB
build/wc-blocks-shared-context.js 1.54 kB
build/wc-blocks-shared-hocs.js 1.92 kB
build/wc-blocks-vendors-style-rtl.css 1.37 kB
build/wc-blocks-vendors-style.css 1.37 kB
build/wc-blocks-vendors.js 255 kB
build/wc-blocks.js 3.49 kB
build/wc-payment-method-bacs.js 806 B
build/wc-payment-method-cheque.js 806 B
build/wc-payment-method-cod.js 898 B
build/wc-payment-method-paypal.js 839 B
build/wc-payment-method-stripe.js 12.2 kB
build/wc-settings.js 2.91 kB

compressed-size-action

opr
opr approved these changes Nov 19, 2021
View reviewed changes
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.

👍🏼 Nice, works well code looks fine.

@github-actions github-actions bot added this to the 6.4.0 milestone Nov 19, 2021
@opr opr added focus: blocks Specific work involving or impacting how blocks behave. focus: global styles Issues that involve styles/css/layout structure. block: checkout Issues related to the checkout block. labels Nov 19, 2021
@Aljullu Aljullu merged commit 28e83ee into trunk Nov 22, 2021
@Aljullu Aljullu deleted the fix/checkout-styling branch November 22, 2021 08:52
@Aljullu Aljullu added the type: bug The issue/PR concerns a confirmed bug. label Nov 22, 2021
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 14, 2021
@mikejolley @jonny-bull
Checkbox Component Styling Fix (woocommerce#5164)
5aadec2 
* Wrap label in div to prevent clickable area growing too large

* Prevent pointer events on svg

* Double gap in editor
jonny-bull pushed a commit to jonny-bull/woocommerce-gutenberg-products-block that referenced this pull request Dec 16, 2021
@mikejolley @jonny-bull
Checkbox Component Styling Fix (woocommerce#5164)
bc344e6 
* Wrap label in div to prevent clickable area growing too large

* Prevent pointer events on svg

* Double gap in editor
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@opr opr opr approved these changes

Assignees

@mikejolley mikejolley

Labels
block: checkout Issues related to the checkout block. focus: blocks Specific work involving or impacting how blocks behave. focus: global styles Issues that involve styles/css/layout structure. type: bug The issue/PR concerns a confirmed bug.
Projects
None yet
Milestone
6.4.0
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@mikejolley @opr @Aljullu