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

Fix Cart and Checkout sidebar styling issues #2694

Merged
merged 9 commits into from Jun 12, 2020

Conversation

Aljullu
Copy link
Contributor

@Aljullu Aljullu commented Jun 11, 2020

Fixes #2503.
Fixes #2658.
Fixes #2663.
Fixes #2692.
Fixes #2693.

How to test the changes in this Pull Request:

#2503

  1. Disable all shipping methods but one.
  2. Go to the Cart page and verify there is no double-border between the shipping method and the Coupon Code panel (the border should be 1px instead of 2px as it was before).

imatge

#2658

  1. Create a product with a long name.
  2. Go to the Checkout page and resize the window to trigger different sizes.
  3. Verify there is always spacing between the product name and the price in the Order summary panel.
    imatge

#2663

  1. Still in the Checkout page, verify the Order summary panel doesn't have top and bottom borders.

imatge

Fixing this, made the Checkout headers not to be aligned when there are no express payment methods. This has been fixed in 185610e, but would be worth testing it too.

  1. Make sure you don't have any express payment method enabled.
  2. Go to the Checkout page.
  3. Verify the step 1 title and the sidebar title are aligned.

imatge

#2692

  1. Add the Checkout block to a page or post and, in the editor, verify there is no spacing between the product description and the product variations in the Order summary.

imatge

#2693

  1. Disable all shipping options from your store.
  2. Go to the Cart block.
  3. Verify there is margin below the 'no shipping options' notice.

imatge

Changelog

Several style enhancements to the Cart and Checkout blocks sidebar.

@Aljullu Aljullu added this to the 2.8.0 milestone Jun 11, 2020
@Aljullu Aljullu requested a review from a team as a code owner June 11, 2020 13:44
@Aljullu Aljullu self-assigned this Jun 11, 2020
@Aljullu Aljullu requested review from senadir and removed request for a team June 11, 2020 13:44
.wc-block-shipping-rates-control {
.wc-block-shipping-rates-control__package.components-panel__body {
Copy link
Contributor Author

Choose a reason for hiding this comment

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

The class .components-panel__body was used by the Panel component from @wordpress/components. Since we migrated to our own Panel component which has different classes, all the code below was dead code and can be safely removed.

@github-actions
Copy link
Contributor

github-actions bot commented Jun 11, 2020

Size Change: +485 B (0%)

Total Size: 1.57 MB

Filename Size Change
build/all-products-frontend.js 38.9 kB +32 B (0%)
build/all-products.js 21.7 kB +26 B (0%)
build/all-reviews-legacy.js 9.24 kB +28 B (0%)
build/all-reviews.js 9.54 kB +27 B (0%)
build/cart-frontend.js 63.6 kB +70 B (0%)
build/cart.js 33 kB +64 B (0%)
build/checkout-frontend.js 80.2 kB +68 B (0%)
build/checkout.js 38.5 kB +61 B (0%)
build/price-filter-frontend.js 14.1 kB +6 B (0%)
build/price-filter.js 10 kB +5 B (0%)
build/reviews-by-category-legacy.js 11.2 kB +29 B (0%)
build/reviews-by-category.js 11.6 kB +24 B (0%)
build/reviews-by-product-legacy.js 12.7 kB +28 B (0%)
build/reviews-by-product.js 13.1 kB +34 B (0%)
build/reviews-frontend-legacy.js 8.08 kB +28 B (0%)
build/reviews-frontend.js 8.93 kB +29 B (0%)
build/single-product-frontend.js 41.7 kB +9 B (0%)
build/single-product.js 15.6 kB +6 B (0%)
build/style-legacy-rtl.css 5.5 kB +6 B (0%)
build/style-legacy.css 5.5 kB +5 B (0%)
build/style-rtl.css 17.3 kB -51 B (0%)
build/style.css 17.3 kB -50 B (0%)
build/wc-payment-method-stripe.js 11.9 kB +1 B
ℹ️ View Unchanged
Filename Size Change
build/active-filters-frontend.js 7.21 kB 0 B
build/active-filters.js 7.94 kB 0 B
build/attribute-filter-frontend.js 16.7 kB 0 B
build/attribute-filter.js 11.5 kB 0 B
build/block-error-boundary-legacy.js 775 B 0 B
build/block-error-boundary.js 774 B 0 B
build/blocks-legacy.js 2.92 kB 0 B
build/blocks.js 2.92 kB 0 B
build/custom-select-control-style-legacy.js 782 B 0 B
build/custom-select-control-style.js 782 B 0 B
build/editor-legacy-rtl.css 12.5 kB 0 B
build/editor-legacy.css 12.5 kB 0 B
build/editor-rtl.css 13.5 kB 0 B
build/editor.css 13.5 kB 0 B
build/featured-category-legacy.js 7.27 kB 0 B
build/featured-category.js 7.59 kB 0 B
build/featured-product-legacy.js 9.51 kB 0 B
build/featured-product.js 9.83 kB 0 B
build/handpicked-products-legacy.js 6.91 kB 0 B
build/handpicked-products.js 7.24 kB 0 B
build/product-best-sellers-legacy.js 6.99 kB 0 B
build/product-best-sellers.js 7.3 kB 0 B
build/product-categories-legacy.js 3.22 kB 0 B
build/product-categories.js 3.21 kB 0 B
build/product-category-legacy.js 7.91 kB 0 B
build/product-category.js 8.25 kB 0 B
build/product-list-style-legacy.js 774 B 0 B
build/product-new-legacy.js 7.15 kB 0 B
build/product-new.js 7.47 kB 0 B
build/product-on-sale-legacy.js 7.52 kB 0 B
build/product-on-sale.js 7.87 kB 0 B
build/product-search-legacy.js 3.14 kB 0 B
build/product-search.js 3.43 kB 0 B
build/product-tag-legacy.js 6.08 kB 0 B
build/product-tag.js 6.39 kB 0 B
build/product-top-rated-legacy.js 7.12 kB 0 B
build/product-top-rated.js 7.44 kB 0 B
build/products-by-attribute-legacy.js 7.88 kB 0 B
build/products-by-attribute.js 8.19 kB 0 B
build/snackbar-notice-style-legacy.js 778 B 0 B
build/snackbar-notice-style.js 779 B 0 B
build/spinner-style-legacy.js 772 B 0 B
build/spinner-style.js 772 B 0 B
build/vendors-legacy.js 366 kB 0 B
build/vendors-style-legacy-rtl.css 1.03 kB 0 B
build/vendors-style-legacy.css 1.03 kB 0 B
build/vendors-style-legacy.js 103 B 0 B
build/vendors-style-rtl.css 1.03 kB 0 B
build/vendors-style.css 1.03 kB 0 B
build/vendors-style.js 102 B 0 B
build/vendors.js 414 kB 0 B
build/wc-blocks-data.js 7.09 kB 0 B
build/wc-blocks-middleware.js 931 B 0 B
build/wc-blocks-registry.js 1.79 kB 0 B
build/wc-payment-method-cheque.js 794 B 0 B
build/wc-payment-method-paypal.js 830 B 0 B
build/wc-settings.js 2.14 kB 0 B
build/wc-shared-context.js 1.51 kB 0 B

compressed-size-action

Copy link
Member

@senadir senadir left a comment

Choose a reason for hiding this comment

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

This fixes the issues mentioned but I'm not really sure about the step title height being reduced, the text feels squeezed now, especially in 2020, maybe we can solve this another way? It's not really a huge deal, also we could give step titles margin-bottom to even out the missing spacing while keeping the alignment.

@Aljullu
Copy link
Contributor Author

Aljullu commented Jun 12, 2020

Thanks for reviewing @senadir.

Good point with the titles. I think we want to inherit the line-height from the theme, so I wouldn't undo that. But taking a look at the new designs, it looks like the margins should be a bit bigger now than they were before. I updated them in 17f629c and this is how it looks now:

imatge

@senadir
Copy link
Member

senadir commented Jun 12, 2020

yeah, that should fix it.

@Aljullu Aljullu merged commit f7ae0cf into master Jun 12, 2020
@Aljullu Aljullu deleted the fix/order-summary-styling-issues branch June 12, 2020 12:07
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.