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

Keep top margin for create account section in editor #5633

Merged
merged 1 commit into from
Jan 31, 2022

Conversation

nielslange
Copy link
Member

@nielslange nielslange commented Jan 25, 2022

In #5191, we've adjusted the T&C checkbox position. This change lead to the fact that the top margin of the create account section disappeared. This PR aims to correct this regression.

Screenshots

Before:

fix-before

After:

fix-after

Testing

  1. Create a test page and add the checkout block.
  2. Click on email address field.
  3. Open settings sidebar.
  4. Activate Account Options » Allow shoppers to sign up for a user account during checkout.
  5. Verify that the Create an account? section has sufficient top margin.

User Facing Testing

  • Same as above

Changelog

Fix alignment issue with the "create account" section on the checkout block in the editor

@nielslange nielslange added status: needs review block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure. labels Jan 25, 2022
@rubikuserbot rubikuserbot requested review from a team and opr and removed request for a team January 25, 2022 04:40
@nielslange
Copy link
Member Author

Hello @sunyatasattva 👋

Given that you worked on #5191, I manually added you as a reviewer. If you don't have the capacity to do the review, feel free to unassign you. 😀

@github-actions
Copy link
Contributor

github-actions bot commented Jan 25, 2022

Size Change: +43 B (0%)

Total Size: 745 kB

Filename Size Change
build/wc-blocks-editor-style-rtl.css 4.7 kB +21 B (0%)
build/wc-blocks-editor-style.css 4.7 kB +22 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 6.21 kB
build/active-filters.js 7.08 kB
build/all-products-frontend.js 18.6 kB
build/all-products.js 35.1 kB
build/all-reviews.js 8.39 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---8f355022.js 238 B
build/atomic-block-components/add-to-cart--atomic-block-components/button--atomic-block-components/image---a7e2bb9b.js 2.67 kB
build/atomic-block-components/add-to-cart--atomic-block-components/button.js 1.48 kB
build/atomic-block-components/add-to-cart-frontend.js 7.04 kB
build/atomic-block-components/add-to-cart.js 6.6 kB
build/atomic-block-components/button-frontend.js 1.48 kB
build/atomic-block-components/button.js 854 B
build/atomic-block-components/category-list-frontend.js 458 B
build/atomic-block-components/category-list.js 458 B
build/atomic-block-components/image-frontend.js 1.37 kB
build/atomic-block-components/image.js 1.05 kB
build/atomic-block-components/price-frontend.js 1.74 kB
build/atomic-block-components/price.js 1.69 kB
build/atomic-block-components/rating-frontend.js 703 B
build/atomic-block-components/rating.js 700 B
build/atomic-block-components/sale-badge-frontend.js 624 B
build/atomic-block-components/sale-badge.js 624 B
build/atomic-block-components/sku-frontend.js 386 B
build/atomic-block-components/sku.js 384 B
build/atomic-block-components/stock-indicator--atomic-block-components/summary--atomic-block-components/title.js 452 B
build/atomic-block-components/stock-indicator-frontend.js 926 B
build/atomic-block-components/stock-indicator.js 624 B
build/atomic-block-components/summary-frontend.js 1.23 kB
build/atomic-block-components/summary.js 925 B
build/atomic-block-components/tag-list-frontend.js 459 B
build/atomic-block-components/tag-list.js 458 B
build/atomic-block-components/title-frontend.js 1.19 kB
build/atomic-block-components/title.js 932 B
build/attribute-filter-frontend.js 16.3 kB
build/attribute-filter.js 12.6 kB
build/blocks-checkout.js 17.6 kB
build/cart-blocks/accepted-payment-methods-frontend.js 1.14 kB
build/cart-blocks/checkout-button-frontend.js 1.14 kB
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/express-payment-frontend.js 4.73 kB
build/cart-blocks/filled-cart-frontend.js 713 B
build/cart-blocks/items-frontend.js 277 B
build/cart-blocks/line-items-frontend.js 5.26 kB
build/cart-blocks/order-summary-frontend.js 8.62 kB
build/cart-blocks/totals-frontend.js 294 B
build/cart-frontend.js 45.4 kB
build/cart.js 43.8 kB
build/checkout-frontend.js 45.3 kB
build/checkout.js 22.7 kB
build/featured-category.js 8.64 kB
build/featured-product.js 9.91 kB
build/handpicked-products.js 7.31 kB
build/legacy-template.js 2.16 kB
build/mini-cart-component-frontend.js 14.2 kB
build/mini-cart-contents.js 3.57 kB
build/mini-cart-frontend.js 1.76 kB
build/mini-cart.js 6.43 kB
build/price-filter-frontend.js 12.6 kB
build/price-filter.js 8.89 kB
build/price-format.js 1.18 kB
build/product-best-sellers.js 7.52 kB
build/product-categories.js 3.43 kB
build/product-category.js 8.67 kB
build/product-new.js 7.98 kB
build/product-on-sale.js 8.35 kB
build/product-search.js 2.47 kB
build/product-tag.js 8.06 kB
build/product-top-rated.js 7.94 kB
build/products-by-attribute.js 8.78 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 12.9 kB
build/reviews-frontend.js 7.34 kB
build/single-product-frontend.js 22.2 kB
build/single-product.js 10.5 kB
build/stock-filter-frontend.js 6.8 kB
build/stock-filter.js 6.82 kB
build/vendors--atomic-block-components/add-to-cart--cart-blocks/order-summary-frontend.js 19 kB
build/vendors--atomic-block-components/add-to-cart-frontend.js 7.42 kB
build/vendors--atomic-block-components/price--cart-blocks/line-items--cart-blocks/order-summary-frontend.js 5.71 kB
build/vendors--cart-blocks/line-items-frontend.js 3.33 kB
build/vendors--cart-blocks/order-summary-frontend.js 4.75 kB
build/wc-blocks-data.js 8.84 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 949 B
build/wc-blocks-registry.js 2.7 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.14 kB
build/wc-blocks-style-rtl.css 21.8 kB
build/wc-blocks-style.css 21.8 kB
build/wc-blocks-vendors-style-rtl.css 1.28 kB
build/wc-blocks-vendors-style.css 1.28 kB
build/wc-blocks-vendors.js 65.6 kB
build/wc-blocks.js 2.96 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.61 kB

compressed-size-action

Copy link
Contributor

@sunyatasattva sunyatasattva left a comment

Choose a reason for hiding this comment

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

This LGTM @nielslange thanks for spotting that. We did some regression testing and we didn't see that one.

I wonder if, long term, the best solution is adding exceptions to the margin rule instead of maybe taking a more generic approach. For now, I think this is totally fine! 👍

@nielslange
Copy link
Member Author

In any case, my point here is that if we keep targeting the margin of the checkbox we might go on playing a whack-a-mole situation.

That's true. How would you suggest proceeding in this case, though, to solve the regression bug?

@sunyatasattva
Copy link
Contributor

What about adding bottom margin to the text input containers? Can we try that and see if that doesn't create any disaster? Because of how margin collapsing works, that shouldn't be a disaster.

If that makes it a disaster (perhaps because they are floating), then we can just divide the current input margin by two between top and bottom.

What do you think?

@nielslange nielslange force-pushed the fix/adjust-create-account-section-margin branch from af7b9ec to a05ef61 Compare January 31, 2022 14:58
@nielslange nielslange merged commit 329b22a into trunk Jan 31, 2022
@nielslange nielslange deleted the fix/adjust-create-account-section-margin branch January 31, 2022 15:15
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: checkout Issues related to the checkout block. focus: global styles Issues that involve styles/css/layout structure.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants