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

Remove generic payment method icons (Stripe CC + Cheque) #2968

Merged
merged 3 commits into from Aug 11, 2020

Conversation

haszari
Copy link
Member

@haszari haszari commented Aug 5, 2020

Fixes #2669

This fixes a couple of issues by removing the generic icons for some payment methods.

The PaymentMethodLabel component now no longer needs support for icons - so I've removed this. We might simplify this further - remove the component and allow payment methods to provide a string or custom component for their label. cc @nerrad - this is an extensibility API change

Screenshots

Screen Shot 2020-08-05 at 4 41 29 PM

How to test the changes in this Pull Request:

  1. Set up Stripe CC (Stripe extension) and Check (core) payment methods.
  2. Set up a page with checkout block, add stuff to cart.
  3. View checkout and confirm payment method tabs render and function correctly.

Changelog

Removed generic icons for Check and Stripe Credit Card to reduce visual clutter in Checkout block.

May need a dev note - this changes the API/docs for implementing a payment method - specifically the PaymentMethodLabel interface has changed.

- icons should only be used for recognisable brands
- generic icons (e.g. credit card) are not recommended
@haszari haszari requested a review from a team as a code owner August 5, 2020 04:49
@haszari haszari requested review from senadir and removed request for a team August 5, 2020 04:49
@haszari haszari self-assigned this Aug 5, 2020
@haszari haszari added category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted. status: needs review needs: dev note PR that has some text that needs to be included in the release notes. block: checkout Issues related to the checkout block. labels Aug 5, 2020
@haszari haszari added this to the 3.2.0 milestone Aug 5, 2020
@github-actions
Copy link
Contributor

github-actions bot commented Aug 5, 2020

Size Change: +3.9 kB (0%)

Total Size: 1.66 MB

Filename Size Change
build/active-filters-frontend.js 8.76 kB +238 B (2%)
build/all-products-frontend.js 31.2 kB +228 B (0%)
build/all-products.js 35.6 kB +290 B (0%)
build/all-reviews.js 9.73 kB +9 B (0%)
build/atomic-block-components/add-to-cart-frontend.js 8.88 kB +151 B (1%)
build/atomic-block-components/add-to-cart.js 7.46 kB +146 B (1%)
build/atomic-block-components/add-to-cart~atomic-block-components/button.js 3.17 kB +50 B (1%)
build/atomic-block-components/add-to-cart~atomic-block-components/image~atomic-block-components/title.js 335 B +1 B
build/atomic-block-components/button-frontend.js 2.02 kB +29 B (1%)
build/atomic-block-components/button.js 837 B -2 B (0%)
build/atomic-block-components/image-frontend.js 1.71 kB +4 B (0%)
build/atomic-block-components/price-frontend.js 2.09 kB +5 B (0%)
build/atomic-block-components/price.js 2.11 kB +1 B
build/atomic-block-components/rating-frontend.js 524 B +1 B
build/atomic-block-components/rating.js 528 B +1 B
build/atomic-block-components/stock-indicator.js 570 B -1 B
build/atomic-block-components/tag-list-frontend.js 466 B +1 B
build/atomic-block-components/tag-list.js 472 B -1 B
build/attribute-filter-frontend.js 18.1 kB +232 B (1%)
build/attribute-filter.js 12.4 kB -2 B (0%)
build/cart-frontend.js 66.5 kB +415 B (0%)
build/cart.js 34.9 kB +297 B (0%)
build/checkout-frontend.js 83.8 kB +631 B (0%)
build/checkout.js 40.3 kB +228 B (0%)
build/featured-product.js 9.93 kB +5 B (0%)
build/handpicked-products.js 7.32 kB -1 B
build/price-filter-frontend.js 14.4 kB +227 B (1%)
build/price-filter.js 10.2 kB +5 B (0%)
build/product-best-sellers.js 7.39 kB -1 B
build/product-categories.js 3.23 kB -1 B
build/product-category.js 8.34 kB +1 B
build/product-new.js 7.55 kB -5 B (0%)
build/product-on-sale.js 7.94 kB -4 B (0%)
build/product-search.js 3.51 kB -3 B (0%)
build/product-top-rated.js 7.53 kB -2 B (0%)
build/products-by-attribute.js 8.27 kB +1 B
build/reviews-frontend-legacy.js 8.43 kB +195 B (2%)
build/reviews-frontend.js 9.33 kB +222 B (2%)
build/single-product-frontend.js 34 kB +223 B (0%)
build/single-product.js 10.1 kB -2 B (0%)
build/style-legacy-rtl.css 16.8 kB +27 B (0%)
build/style-legacy.css 16.8 kB +26 B (0%)
build/style-rtl.css 17.5 kB +25 B (0%)
build/style.css 17.5 kB +24 B (0%)
build/vendors.js 416 kB +2 B (0%)
build/wc-payment-method-cheque.js 787 B -9 B (1%)
build/wc-payment-method-stripe.js 11.9 kB -3 B (0%)
ℹ️ View Unchanged
Filename Size Change
build/active-filters.js 8.8 kB 0 B
build/all-reviews-legacy.js 9.4 kB 0 B
build/atomic-block-components/category-list-frontend.js 468 B 0 B
build/atomic-block-components/category-list.js 476 B 0 B
build/atomic-block-components/image.js 1.15 kB 0 B
build/atomic-block-components/sale-badge-frontend.js 862 B 0 B
build/atomic-block-components/sale-badge.js 864 B 0 B
build/atomic-block-components/sku-frontend.js 389 B 0 B
build/atomic-block-components/sku.js 394 B 0 B
build/atomic-block-components/stock-indicator-frontend.js 568 B 0 B
build/atomic-block-components/summary-frontend.js 918 B 0 B
build/atomic-block-components/summary.js 926 B 0 B
build/atomic-block-components/title-frontend.js 1.22 kB 0 B
build/atomic-block-components/title.js 1.06 kB 0 B
build/blocks-legacy.js 3.54 kB 0 B
build/blocks.js 3.54 kB 0 B
build/editor-legacy-rtl.css 13.8 kB 0 B
build/editor-legacy.css 13.8 kB 0 B
build/editor-rtl.css 14 kB 0 B
build/editor.css 14 kB 0 B
build/featured-category-legacy.js 7.29 kB 0 B
build/featured-category.js 7.67 kB 0 B
build/featured-product-legacy.js 9.55 kB 0 B
build/handpicked-products-legacy.js 6.95 kB 0 B
build/product-best-sellers-legacy.js 7.03 kB 0 B
build/product-categories-legacy.js 3.23 kB 0 B
build/product-category-legacy.js 7.94 kB 0 B
build/product-new-legacy.js 7.19 kB 0 B
build/product-on-sale-legacy.js 7.56 kB 0 B
build/product-search-legacy.js 3.17 kB 0 B
build/product-tag-legacy.js 6.12 kB 0 B
build/product-tag.js 6.47 kB 0 B
build/product-top-rated-legacy.js 7.16 kB 0 B
build/products-by-attribute-legacy.js 7.92 kB 0 B
build/reviews-by-category-legacy.js 11.4 kB 0 B
build/reviews-by-category.js 11.8 kB 0 B
build/reviews-by-product-legacy.js 12.9 kB 0 B
build/reviews-by-product.js 13.3 kB 0 B
build/vendors-legacy.js 367 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-rtl.css 1.03 kB 0 B
build/vendors-style.css 1.03 kB 0 B
build/vendors~atomic-block-components/price-frontend.js 5.65 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 2.28 kB 0 B
build/wc-payment-method-bacs.js 790 B 0 B
build/wc-payment-method-cod.js 875 B 0 B
build/wc-payment-method-paypal.js 831 B 0 B
build/wc-settings.js 2.14 kB 0 B
build/wc-shared-context.js 1.53 kB 0 B
build/wc-shared-hocs.js 1.66 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 works fine for me, but we're completely removing the ability for other extensions to register an icon, I think it's best if we just remove icons from our own payment methods but leave the attribute there.

Copy link
Contributor

@nerrad nerrad left a comment

Choose a reason for hiding this comment

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

Chatted with @LevinMedia in slack (p1597154267257400-slack-C8X6Q7XQU) and here's a summary:

  • confirm that generic icons get removed
  • please keep the icon attribute as it will still be needed for things like paypal etc that will get applied in future pulls around payment method select structure.

Copy link
Contributor

@nerrad nerrad left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@haszari
Copy link
Member Author

haszari commented Aug 11, 2020

Summary of slack discussion:

  • Although generic icons are no longer recommended for payment methods, well-known payment brand icons (e.g. PayPal) will be supported.
  • The layout and UI for multiple payment methods will change in a future PR (Checkout: update design of the payment methods #2628).
  • As part of this change, brand icons will need to be explicitly supported, so that the blocks plugin has control of how they are displayed (e.g. where on tab/radio button etc).
  • So we are keeping PaymentMethodLabel.icon prop as it may be part of this solution.

@haszari haszari merged commit 074986d into main Aug 11, 2020
@haszari haszari deleted the fix/2669-remove-generic-payment-icons branch August 11, 2020 20:44
@senadir
Copy link
Member

senadir commented Aug 18, 2020

We no longer need a dev note for this.

@senadir senadir removed the needs: dev note PR that has some text that needs to be included in the release notes. label Aug 18, 2020
@senadir senadir mentioned this pull request Aug 19, 2020
20 tasks
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. category: extensibility Work involving adding or updating extensibility. Useful to combine with other scopes impacted.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix payment icon layout issue with Twenty Twenty theme (non-mobile layout)
4 participants