Checkout: Adjust label style to accommodate more cards #94693

jjchrisdiehl · 2024-09-18T22:37:56Z

The labels in Checkout were breaking out of their bounding box on small mobile viewports (< 375px), this PR adjusts how we handle the credit card logos across viewport sizes and tries to gracefully wrap them at different device sizes.

Before	After

A side benefit to this is that the changes also extend to the 'Add a payment method' and 'Change payment method' forms in the Purchases section.

Proposed Changes

Left to Right

Viewport 1024px - Inactive payment method
Not very different at this viewport

Before	After

View port 425px - Inactive payment method
Small changes at this size, the logos begin to wrap now. The benefit becomes more obvious at certain sizes like 375px wide where the logos drop onto their own line.

Before	After	375

Viewport 320px - Inactive payment method
Most visible at this size, fixes a bug where label items would overflow their bounding box by dropping cards to next line.

Before	After

Viewport 1024px - Active payment method

Not much change here other than standardizing the sizes of the svg logos for better alignment

Before	After

Viewport 320px - Active payment method
Logos will stack at this viewport size

Before	After

Testing Instructions

Test the different viewports in checkout and purchases, use the examples above for guidance
Try different languages to see if anything breaks
Try right to left languages to ensure the styles correctly reverse themselves

github-actions · 2024-09-18T22:38:11Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-120010

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-120010&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-120010&env=a8c-for-agencies

matticbot · 2024-09-18T22:38:43Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~90 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
site-purchases                     +400 B  (+0.0%)      +72 B  (+0.0%)
purchases                          +400 B  (+0.0%)      +72 B  (+0.0%)
checkout                           +400 B  (+0.0%)      +74 B  (+0.0%)
jetpack-cloud-partner-portal       +344 B  (+0.0%)      +56 B  (+0.0%)
a8c-for-agencies-purchases         +344 B  (+0.1%)      +56 B  (+0.0%)
a8c-for-agencies-client            +344 B  (+0.0%)      +56 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~74 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal            +400 B  (+0.0%)      +74 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal       +400 B  (+0.0%)      +74 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

JessBoctor · 2024-09-19T13:56:41Z

I may be doing something wrong, but when I try to test with a smaller viewport in the Chrome Inspector tools, I don't get the logos on a second line. I still see them pushed to the side. This is happening with both active and inactive payment methods.

I am using the fix/add-payment-label-mobile-layout branch on local calypso to test.

sirbrillig · 2024-09-19T17:01:44Z

I haven't tested this yet and it may just be an outdated screenshot, but something looks bad with the PayPal logo in the "after" screenshot here:

jjchrisdiehl · 2024-09-19T17:20:34Z

client/my-sites/checkout/src/components/payment-method-logos.js

-	text-align: right;
+	flex-wrap: wrap;
+	gap: 5px;
+	text-align: end;


This should resolve the PayPal logo issue. Changed to a more responsive value to handle RTL better.

jjchrisdiehl · 2024-09-19T17:24:42Z

client/my-sites/checkout/src/components/payment-method-logos.js

-	}
-
-	svg {
+	&.credit-card__logo svg {
 		display: inline-block;


More specific to avoid shrinking non-card logos (like PayPal)

jjchrisdiehl · 2024-09-19T17:25:13Z

client/my-sites/checkout/src/components/payment-method-logos.js


-		&.has-background {


Not really needed if we set a default size for the card logos and apply some flex gap.

matticbot · 2024-09-19T17:25:59Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/add-payment-label-mobile-layout on your sandbox.

jjchrisdiehl · 2024-09-19T17:26:27Z

packages/composite-checkout/src/components/radio-button.tsx

@@ -126,7 +129,7 @@ const Label = styled.label< LabelProps & React.LabelHTMLAttributes< HTMLLabelEle
 		content: '';
 		border: 1px solid ${ ( props ) => props.theme.colors.borderColor };
 		border-radius: 100%;
-		top: 28px;
+		top: 40%;


These radios dots are rather difficult to work with since they are absolutely positioned before and after the label. It might be worth rebuilding this component in the future so we can properly align the radio > label > and logos with flex or grid.

jjchrisdiehl · 2024-09-19T18:05:54Z

I think a better alternative to allowing the cards to wrap, is to instead allow the text to wrap in the finite number of device sizes where they begin to clash:

Card wrap	Text wrap

sirbrillig

Works as described at all the widths and scenarios I tested. One thing that occurs to me is that we could hide the credit card logos at small widths like we do with all the other logos. But this works and looks good so I have no complaints.

jjchrisdiehl · 2024-09-19T22:15:03Z

@sirbrillig Made a slight change to incorporate this:

Inactive	Active

Essentially, hide the logos when inactive (with less space to use) and then show when we click on the add method option.

This only applies below 400px wide. Everything else works as before.

sirbrillig · 2024-09-19T22:16:58Z

I haven't tested that change but the code looks fine and it sounds good.

jjchrisdiehl added 2 commits September 18, 2024 14:31

Adjust label style to accommodate more cards

d23f558

reduce label column gap to 5px

2e7f2a0

jjchrisdiehl added the [Feature] Checkout The checkout screen and process for purchases made on WordPress.com. label Sep 18, 2024

jjchrisdiehl self-assigned this Sep 18, 2024

jjchrisdiehl requested a review from a team as a code owner September 18, 2024 22:37

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Sep 18, 2024

jjchrisdiehl requested a review from sirbrillig September 18, 2024 22:38

Change spacing to logos on small devices

882a59a

jjchrisdiehl commented Sep 19, 2024

View reviewed changes

sirbrillig approved these changes Sep 19, 2024

View reviewed changes

Hide card logos when small and inactive

0471b5b

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkout: Adjust label style to accommodate more cards #94693

Checkout: Adjust label style to accommodate more cards #94693

jjchrisdiehl commented Sep 18, 2024 •

edited

Loading

github-actions bot commented Sep 18, 2024 •

edited by matticbot

Loading

matticbot commented Sep 18, 2024 •

edited

Loading

JessBoctor commented Sep 19, 2024

sirbrillig commented Sep 19, 2024

jjchrisdiehl Sep 19, 2024

jjchrisdiehl Sep 19, 2024

jjchrisdiehl Sep 19, 2024

matticbot commented Sep 19, 2024

jjchrisdiehl Sep 19, 2024

jjchrisdiehl commented Sep 19, 2024

sirbrillig left a comment

jjchrisdiehl commented Sep 19, 2024

sirbrillig commented Sep 19, 2024

Checkout: Adjust label style to accommodate more cards #94693

Are you sure you want to change the base?

Checkout: Adjust label style to accommodate more cards #94693

Conversation

jjchrisdiehl commented Sep 18, 2024 • edited Loading

Proposed Changes

Left to Right

Testing Instructions

github-actions bot commented Sep 18, 2024 • edited by matticbot Loading

matticbot commented Sep 18, 2024 • edited Loading

JessBoctor commented Sep 19, 2024

sirbrillig commented Sep 19, 2024

jjchrisdiehl Sep 19, 2024

Choose a reason for hiding this comment

jjchrisdiehl Sep 19, 2024

Choose a reason for hiding this comment

jjchrisdiehl Sep 19, 2024

Choose a reason for hiding this comment

matticbot commented Sep 19, 2024

jjchrisdiehl Sep 19, 2024

Choose a reason for hiding this comment

jjchrisdiehl commented Sep 19, 2024

sirbrillig left a comment

Choose a reason for hiding this comment

jjchrisdiehl commented Sep 19, 2024

sirbrillig commented Sep 19, 2024

jjchrisdiehl commented Sep 18, 2024 •

edited

Loading

github-actions bot commented Sep 18, 2024 •

edited by matticbot

Loading

matticbot commented Sep 18, 2024 •

edited

Loading