Update express checkout max button height to 55px (#9117)

Automattic · Jul 19, 2024 · 12ce9c7 · 12ce9c7
1 parent ad90644
commit 12ce9c7
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 5 deletions.
diff --git a/changelog/update-9006-express-checkout-button-height b/changelog/update-9006-express-checkout-button-height
@@ -0,0 +1,4 @@
+Significance: patch
+Type: update
+
+Set express checkout max button height to 55px
diff --git a/client/checkout/woopay/style.scss b/client/checkout/woopay/style.scss
@@ -238,7 +238,7 @@
 
 	&[data-size='large'] {
 		font-size: 13px;
-		height: 56px;
+		height: 55px;
 
 		svg {
 			top: 3px;

diff --git a/client/settings/express-checkout-settings/general-payment-request-button-settings.js b/client/settings/express-checkout-settings/general-payment-request-button-settings.js
@@ -66,7 +66,7 @@ const buttonSizeOptions = [
 	{
 		label: makeButtonSizeText(
 			__(
-				'Large {{helpText}}(56 px){{/helpText}}',
+				'Large {{helpText}}(55 px){{/helpText}}',
 				'woocommerce-payments'
 			)
 		),

diff --git a/client/settings/express-checkout-settings/payment-request-button-preview.js b/client/settings/express-checkout-settings/payment-request-button-preview.js
@@ -29,7 +29,7 @@ import { ExpressCheckoutPreviewComponent } from 'wcpay/express-checkout/blocks/c
 const buttonSizeToPxMap = {
 	small: 40,
 	medium: 48,
-	large: 56,
+	large: 55,
 };
 
 const WooPayButtonPreview = ( { size, buttonType, theme, radius } ) => (

diff --git a/client/settings/express-checkout-settings/test/payment-request-settings.test.js b/client/settings/express-checkout-settings/test/payment-request-settings.test.js
@@ -223,7 +223,7 @@ describe( 'PaymentRequestSettings', () => {
 			expect.anything()
 		);
 
-		userEvent.click( screen.getByLabelText( 'Large (56 px)' ) );
+		userEvent.click( screen.getByLabelText( 'Large (55 px)' ) );
 		expect( setButtonSizeMock ).toHaveBeenCalledWith( 'large' );
 	} );
 

diff --git a/includes/express-checkout/class-wc-payments-express-checkout-button-helper.php b/includes/express-checkout/class-wc-payments-express-checkout-button-helper.php
@@ -299,7 +299,7 @@ public function get_button_height() {
 		}
 
 		if ( 'large' === $height ) {
-			return '56';
+			return '55';
 		}
 
 		// for the "default"/"small" and "catch-all" scenarios.