Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove bullet point from WooPay button on Safari #9125

Merged
merged 1 commit into from
Jul 18, 2024

Conversation

bborman22
Copy link
Contributor

Fixes #9068

Changes proposed in this Pull Request

This change addresses an issue we noticed in which a bullet point was being displayed in the WooPay button in Safari on the Cart Block. As an added bonus this change also fixes some odd spacing issues we saw between buttons on Safari on the cart block when using the Stripe Express Checkout Element.

The change is a simple CSS change to apply a list-style: none to the parent container.

Before
Screenshot 2024-07-17 at 4 17 40 PM

After
Screenshot 2024-07-17 at 4 18 09 PM

Testing instructions

  1. Enable WooPay and the Cart Block page.
  2. In Safari add an item to your cart and visit the Cart block page.
  3. Confirm that there is no bullet point rendered in the button.
  4. Enable ECE with npm run wp option set _wcpay_feature_stripe_ece 1
  5. Enable Google Pay and Apple Pay if not already.
  6. Revisit Cart block page and confirm that spacing between the buttons in standardized.

  • Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
  • Covered with tests (or have a good reason not to test in description ☝️)
  • Tested on mobile (or does not apply)

Post merge

@bborman22 bborman22 requested review from a team and ricardo and removed request for a team July 17, 2024 20:25
@botwoo
Copy link
Collaborator

botwoo commented Jul 17, 2024

Test the build

Option 1. Jetpack Beta

  • Install and activate Jetpack Beta.
  • Use this build by searching for PR number 9125 or branch name fix/9068-bullet-on-woopay in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.


Build info:

  • Latest commit: 54159d8
  • Build time: 2024-07-17 20:28:05 UTC

Note: the build is updated when a new commit is pushed to this PR.

Copy link
Contributor

Size Change: +128 B (0%)

Total Size: 1.28 MB

Filename Size Change
release/woocommerce-payments/dist/express-checkout-rtl.css 235 B +16 B (+7%) 🔍
release/woocommerce-payments/dist/express-checkout.css 235 B +16 B (+7%) 🔍
release/woocommerce-payments/dist/payment-request-rtl.css 235 B +16 B (+7%) 🔍
release/woocommerce-payments/dist/payment-request.css 235 B +16 B (+7%) 🔍
release/woocommerce-payments/dist/tokenized-payment-request-rtl.css 235 B +16 B (+7%) 🔍
release/woocommerce-payments/dist/tokenized-payment-request.css 235 B +16 B (+7%) 🔍
release/woocommerce-payments/dist/woopay-express-button-rtl.css 235 B +16 B (+7%) 🔍
release/woocommerce-payments/dist/woopay-express-button.css 235 B +16 B (+7%) 🔍
ℹ️ View Unchanged
Filename Size
release/woocommerce-payments/assets/css/admin.css 1.08 kB
release/woocommerce-payments/assets/css/admin.rtl.css 1.08 kB
release/woocommerce-payments/assets/css/success.css 173 B
release/woocommerce-payments/assets/css/success.rtl.css 173 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css 2.08 kB
release/woocommerce-payments/dist/blocks-checkout.css 2.08 kB
release/woocommerce-payments/dist/blocks-checkout.js 60.9 kB
release/woocommerce-payments/dist/bnpl-announcement-rtl.css 528 B
release/woocommerce-payments/dist/bnpl-announcement.css 529 B
release/woocommerce-payments/dist/bnpl-announcement.js 20.1 kB
release/woocommerce-payments/dist/cart-block.js 15.4 kB
release/woocommerce-payments/dist/cart.js 4.87 kB
release/woocommerce-payments/dist/checkout-rtl.css 600 B
release/woocommerce-payments/dist/checkout.css 600 B
release/woocommerce-payments/dist/checkout.js 31.7 kB
release/woocommerce-payments/dist/express-checkout.js 6.31 kB
release/woocommerce-payments/dist/index-rtl.css 41.1 kB
release/woocommerce-payments/dist/index.css 41 kB
release/woocommerce-payments/dist/index.js 295 kB
release/woocommerce-payments/dist/multi-currency-analytics.js 1.05 kB
release/woocommerce-payments/dist/multi-currency-rtl.css 3.41 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js 59.9 kB
release/woocommerce-payments/dist/multi-currency.css 3.41 kB
release/woocommerce-payments/dist/multi-currency.js 55 kB
release/woocommerce-payments/dist/order-rtl.css 730 B
release/woocommerce-payments/dist/order.css 730 B
release/woocommerce-payments/dist/order.js 42 kB
release/woocommerce-payments/dist/payment-gateways-rtl.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.css 1.35 kB
release/woocommerce-payments/dist/payment-gateways.js 38.9 kB
release/woocommerce-payments/dist/payment-request.js 5.9 kB
release/woocommerce-payments/dist/plugins-page-rtl.css 386 B
release/woocommerce-payments/dist/plugins-page.css 386 B
release/woocommerce-payments/dist/plugins-page.js 19.4 kB
release/woocommerce-payments/dist/product-details-rtl.css 397 B
release/woocommerce-payments/dist/product-details.css 398 B
release/woocommerce-payments/dist/product-details.js 11.2 kB
release/woocommerce-payments/dist/settings-rtl.css 11.2 kB
release/woocommerce-payments/dist/settings.css 11.1 kB
release/woocommerce-payments/dist/settings.js 215 kB
release/woocommerce-payments/dist/subscription-edit-page.js 668 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css 524 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js 19.5 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js 694 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.css 120 B
release/woocommerce-payments/dist/subscriptions-empty-state.js 18.6 kB
release/woocommerce-payments/dist/tokenized-payment-request.js 6.62 kB
release/woocommerce-payments/dist/tos-rtl.css 235 B
release/woocommerce-payments/dist/tos.css 235 B
release/woocommerce-payments/dist/tos.js 21 kB
release/woocommerce-payments/dist/woopay-direct-checkout.js 5.25 kB
release/woocommerce-payments/dist/woopay-express-button.js 15.6 kB
release/woocommerce-payments/dist/woopay-rtl.css 4.26 kB
release/woocommerce-payments/dist/woopay.css 4.23 kB
release/woocommerce-payments/dist/woopay.js 69.6 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css 625 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js 814 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js 2.46 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js 1.02 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-admin-create-user.rtl.css 198 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.css 625 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.js 20 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-login.rtl.css 626 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/jetpack-sso-users.js 392 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js 584 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.css 215 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-admin-create-user.js 521 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.css 721 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-login.js 412 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/src/sso/jetpack-sso-users.js 520 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js 159 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css 2.36 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js 13.6 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css 2.36 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css 1.04 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css 294 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css 408 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css 3.59 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css 301 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css 746 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css 574 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css 414 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js 543 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js 9.4 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js 6.78 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js 3.84 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js 545 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js 2.52 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js 22.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js 11.7 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js 1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js 507 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js 358 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js 428 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js 1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js 782 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js 1.09 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js 1.26 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css 391 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js 3.04 kB

compressed-size-action

Copy link
Member

@ricardo ricardo left a comment

Choose a reason for hiding this comment

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

LGTM and tests well!

@bborman22 bborman22 added this pull request to the merge queue Jul 18, 2024
Merged via the queue into develop with commit 5c82241 Jul 18, 2024
23 checks passed
@bborman22 bborman22 deleted the fix/9068-bullet-on-woopay branch July 18, 2024 12:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

A bullet appears in the WooPay button on Safari
3 participants