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

Mini-cart: add the option to change the style between 'Outline' and 'Fill' in all the buttons #8835

Merged
merged 11 commits into from
Mar 24, 2023

Conversation

albarin
Copy link
Contributor

@albarin albarin commented Mar 23, 2023

This PR adds the Fill & Outline styles to the 3 Mini-cart buttons.

Fixes #8787

Testing

User-Facing Testing

  1. Add the Mini cart block to the header template of your site.
  2. Go to the Site Editor and edit the Mini cart template part.
  3. Open the List view and select the Empty Mini Cart view.
  4. Click on the Start shopping button, check that you can change the button style between Fill and Outline in the sidebar settings and change it from the default and save.
  5. Go to the frontend and check the button has the style you just picked on the editor.
  6. Repeat the same steps for the Filled Mini Cart view and the View my cart and the Go to checkout buttons.
  • Do not include in the Testing Notes

WooCommerce Visibility

  • WooCommerce Core
  • Feature plugin
  • Experimental

Changelog

Mini-cart: add the option to change the style between 'Outline' and 'Fill' in all the buttons.

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

The release ZIP for this PR is accessible via:

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

Script Dependencies Report

There is no changed script dependency between this branch and trunk.

This comment was automatically generated by the ./github/compare-assets action.

TypeScript Errors Report

  • Files with errors: 479
  • Total errors: 2303

🎉 🎉 This PR does not introduce new TS errors.

comments-aggregator

@github-actions
Copy link
Contributor

github-actions bot commented Mar 23, 2023

Size Change: +529 B (0%)

Total Size: 1.07 MB

Filename Size Change
build/all-products-frontend.js 11.8 kB -4 B (0%)
build/cart-blocks/cart-accepted-payment-methods-frontend.js 1.38 kB -3 B (0%)
build/cart-blocks/cart-cross-sells-products-frontend.js 9.71 kB -7 B (0%)
build/cart-blocks/cart-express-payment--checkout-blocks/express-payment-frontend.js 5.2 kB +2 B (0%)
build/cart-blocks/cart-express-payment-frontend.js 718 B +1 B (0%)
build/cart-blocks/cart-items-frontend.js 301 B -1 B (0%)
build/cart-blocks/cart-line-items--mini-cart-contents-block/products-table-frontend.js 5.36 kB +4 B (0%)
build/cart-blocks/filled-cart-frontend.js 655 B +2 B (0%)
build/cart-blocks/order-summary-coupon-form-frontend.js 1.62 kB -1 B (0%)
build/cart-blocks/order-summary-discount-frontend.js 2.12 kB -1 B (0%)
build/cart-blocks/order-summary-shipping-frontend.js 10.7 kB -4 B (0%)
build/cart-blocks/proceed-to-checkout-frontend.js 1.32 kB -1 B (0%)
build/cart-frontend.js 29.3 kB -7 B (0%)
build/checkout-blocks/billing-address-frontend.js 4.18 kB -2 B (0%)
build/checkout-blocks/contact-information-frontend.js 2.05 kB +2 B (0%)
build/checkout-blocks/order-note-frontend.js 1.14 kB +1 B (0%)
build/checkout-blocks/order-summary-cart-items-frontend.js 3.68 kB +2 B (0%)
build/checkout-blocks/order-summary-coupon-form-frontend.js 1.79 kB -1 B (0%)
build/checkout-blocks/order-summary-discount-frontend.js 2.29 kB -1 B (0%)
build/checkout-blocks/order-summary-frontend.js 1.24 kB -2 B (0%)
build/checkout-blocks/order-summary-shipping-frontend.js 10.8 kB -7 B (0%)
build/checkout-blocks/payment-frontend.js 8.39 kB +1 B (0%)
build/checkout-blocks/pickup-options-frontend.js 4.11 kB -2 B (0%)
build/checkout-blocks/shipping-address-frontend.js 4.14 kB -3 B (0%)
build/checkout-blocks/shipping-method-frontend.js 2.6 kB -2 B (0%)
build/checkout-blocks/shipping-methods-frontend.js 4.82 kB -2 B (0%)
build/checkout-blocks/terms-frontend.js 1.56 kB +2 B (0%)
build/checkout-blocks/totals-frontend.js 309 B -1 B (0%)
build/checkout-frontend.js 30.9 kB -6 B (0%)
build/mini-cart-component-frontend.js 28.2 kB +59 B (0%)
build/mini-cart-contents-block/cart-button-frontend.js 816 B +113 B (+16%) ⚠️
build/mini-cart-contents-block/checkout-button-frontend.js 818 B +122 B (+18%) ⚠️
build/mini-cart-contents-block/footer-frontend.js 3.18 kB +70 B (+2%)
build/mini-cart-contents-block/shopping-button-frontend.js 705 B +132 B (+23%) 🚨
build/mini-cart-contents.js 17.2 kB +75 B (0%)
build/product-add-to-cart-frontend.js 6.43 kB +1 B (0%)
build/product-button-frontend.js 1.91 kB -3 B (0%)
build/product-image-frontend.js 1.77 kB +1 B (0%)
build/product-rating-frontend.js 1.34 kB +1 B (0%)
build/product-sku-frontend.js 453 B -1 B (0%)
build/product-stock-indicator-frontend.js 1.01 kB -3 B (0%)
build/product-summary-frontend.js 1.29 kB -1 B (0%)
build/product-title-frontend.js 1.37 kB +1 B (0%)
build/rating-filter-wrapper-frontend.js 5.58 kB -1 B (0%)
build/stock-filter-wrapper-frontend.js 5.82 kB -1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary-shipping--checkout-blocks--18f9376a-frontend.js 19.4 kB +1 B (0%)
build/vendors--cart-blocks/cart-cross-sells-products--product-add-to-cart-frontend.js 7.25 kB +1 B (0%)
build/vendors--cart-blocks/order-summary-shipping--checkout-blocks/order-summary-shipping--checkout-block--24d3fc0c-frontend.js 8.25 kB +2 B (0%)
build/vendors--checkout-blocks/billing-address--checkout-blocks/shipping-address-frontend.js 5.44 kB -1 B (0%)
build/vendors--checkout-blocks/shipping-method-frontend.js 12 kB +2 B (0%)
ℹ️ View Unchanged
Filename Size
build/active-filters-frontend.js 7.98 kB
build/active-filters-wrapper-frontend.js 5.97 kB
build/active-filters.js 7.49 kB
build/all-products.js 37.1 kB
build/all-reviews.js 7.65 kB
build/attribute-filter-frontend.js 22.4 kB
build/attribute-filter-wrapper-frontend.js 7.1 kB
build/attribute-filter.js 13.2 kB
build/blocks-checkout.js 44 kB
build/breadcrumbs.js 2.04 kB
build/cart-blocks/cart-cross-sells-frontend.js 253 B
build/cart-blocks/cart-line-items-frontend.js 1.07 kB
build/cart-blocks/cart-order-summary-frontend.js 1.24 kB
build/cart-blocks/cart-totals-frontend.js 307 B
build/cart-blocks/empty-cart-frontend.js 345 B
build/cart-blocks/order-summary-fee-frontend.js 272 B
build/cart-blocks/order-summary-heading-frontend.js 455 B
build/cart-blocks/order-summary-subtotal-frontend.js 273 B
build/cart-blocks/order-summary-taxes-frontend.js 433 B
build/cart.js 48.1 kB
build/catalog-sorting.js 1.7 kB
build/checkout-blocks/actions-frontend.js 1.85 kB
build/checkout-blocks/express-payment-frontend.js 1.14 kB
build/checkout-blocks/fields-frontend.js 331 B
build/checkout-blocks/order-summary-fee-frontend.js 275 B
build/checkout-blocks/order-summary-subtotal-frontend.js 273 B
build/checkout-blocks/order-summary-taxes-frontend.js 433 B
build/checkout.js 45.8 kB
build/customer-account.js 3.16 kB
build/featured-category.js 14 kB
build/featured-product.js 14.4 kB
build/filter-wrapper-frontend.js 14 kB
build/filter-wrapper.js 2.4 kB
build/general-style-rtl.css 1.31 kB
build/general-style.css 1.31 kB
build/handpicked-products.js 7.92 kB
build/legacy-template.js 5.56 kB
build/mini-cart-contents-block/empty-cart-frontend.js 360 B
build/mini-cart-contents-block/filled-cart-frontend.js 268 B
build/mini-cart-contents-block/items-frontend.js 237 B
build/mini-cart-contents-block/products-table-frontend.js 589 B
build/mini-cart-contents-block/title-frontend.js 368 B
build/mini-cart-frontend.js 2.02 kB
build/mini-cart.js 4.49 kB
build/price-filter-frontend.js 13.9 kB
build/price-filter-wrapper-frontend.js 6.96 kB
build/price-filter.js 8.4 kB
build/price-format.js 1.19 kB
build/product-add-to-cart.js 178 B
build/product-best-sellers.js 8.26 kB
build/product-categories.js 2.36 kB
build/product-category.js 9.25 kB
build/product-image.js 178 B
build/product-new.js 8.26 kB
build/product-on-sale.js 8.59 kB
build/product-price-frontend.js 2.08 kB
build/product-query.js 11 kB
build/product-results-count.js 1.66 kB
build/product-sale-badge-frontend.js 977 B
build/product-search.js 2.63 kB
build/product-tag.js 8.74 kB
build/product-title.js 178 B
build/product-top-rated.js 8.5 kB
build/products-by-attribute.js 9.58 kB
build/rating-filter-frontend.js 20.8 kB
build/rating-filter.js 6.99 kB
build/reviews-by-category.js 11.9 kB
build/reviews-by-product.js 13 kB
build/reviews-frontend.js 7.11 kB
build/stock-filter-frontend.js 21 kB
build/stock-filter.js 7.7 kB
build/store-notices.js 1.69 kB
build/vendors--attribute-filter-wrapper--cart-blocks/cart-cross-sells-products--cart-blocks/order-summary--ef6753df-frontend.js 6.85 kB
build/vendors--attribute-filter-wrapper--rating-filter-wrapper--stock-filter-wrapper-frontend.js 7.7 kB
build/vendors--cart-blocks/cart-cross-sells-products--cart-blocks/cart-line-items--cart-blocks/cart-order--3c5fe802-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/wc-blocks-data.js 21.8 kB
build/wc-blocks-editor-style-rtl.css 5.78 kB
build/wc-blocks-editor-style.css 5.78 kB
build/wc-blocks-google-analytics.js 1.56 kB
build/wc-blocks-middleware.js 930 B
build/wc-blocks-registry.js 3.15 kB
build/wc-blocks-shared-context.js 1.52 kB
build/wc-blocks-shared-hocs.js 1.73 kB
build/wc-blocks-style-rtl.css 27 kB
build/wc-blocks-style.css 27 kB
build/wc-blocks-vendors-style-rtl.css 1.96 kB
build/wc-blocks-vendors-style.css 1.96 kB
build/wc-blocks-vendors.js 64.2 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
build/wc-shipping-method-pickup-location.js 29.9 kB
build/woo-directives-runtime.js 2.73 kB
build/woo-directives-vendors.js 7.91 kB

compressed-size-action

@albarin albarin changed the title Mini-cart: add the option to change the style between 'Outline' and 'Default' in all the buttons Mini-cart: add the option to change the style between 'Outline' and 'Fill' in all the buttons Mar 23, 2023
@albarin albarin changed the base branch from trunk to 8736/add-styles-to-mini-cart-buttons March 23, 2023 11:28
@albarin albarin marked this pull request as ready for review March 23, 2023 11:29
@woocommercebot woocommercebot requested review from a team and imanish003 and removed request for a team March 23, 2023 11:29
Base automatically changed from 8736/add-styles-to-mini-cart-buttons to trunk March 23, 2023 15:55
@albarin albarin force-pushed the 8787/button-outline-settings branch from dd2e1a9 to 6ed0afa Compare March 23, 2023 16:10
Copy link
Contributor

@imanish003 imanish003 left a comment

Choose a reason for hiding this comment

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

Great job, @albarin! 🙌🏻
I have some minor suggestions that I would like to share.

@albarin albarin requested a review from imanish003 March 24, 2023 08:36
Copy link
Contributor

@imanish003 imanish003 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 adding the default value for className 🙌🏻 LGTM 🚀

@github-actions github-actions bot added this to the 9.9.0 milestone Mar 24, 2023
@albarin albarin merged commit 771eb44 into trunk Mar 24, 2023
@albarin albarin deleted the 8787/button-outline-settings branch March 24, 2023 09:14
@albarin albarin added type: enhancement The issue is a request for an enhancement. block: mini-cart Issues related to the Mini-Cart block. labels Mar 27, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
block: mini-cart Issues related to the Mini-Cart block. type: enhancement The issue is a request for an enhancement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Mini-cart: add the option to change the style between 'Outline' and 'Default' in all the buttons
2 participants