From 12ce9c7d1492bb99ec831e408c3019c5ffdace3f Mon Sep 17 00:00:00 2001
From: Brian Borman <68524302+bborman22@users.noreply.github.com>
Date: Fri, 19 Jul 2024 10:21:03 -0400
Subject: [PATCH] Update express checkout max button height to 55px (#9117)

---
 changelog/update-9006-express-checkout-button-height          | 4 ++++
 client/checkout/woopay/style.scss                             | 2 +-
 .../general-payment-request-button-settings.js                | 2 +-
 .../payment-request-button-preview.js                         | 2 +-
 .../test/payment-request-settings.test.js                     | 2 +-
 .../class-wc-payments-express-checkout-button-helper.php      | 2 +-
 6 files changed, 9 insertions(+), 5 deletions(-)
 create mode 100644 changelog/update-9006-express-checkout-button-height

diff --git a/changelog/update-9006-express-checkout-button-height b/changelog/update-9006-express-checkout-button-height
new file mode 100644
index 00000000000..a7ad216fbe7
--- /dev/null
+++ 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
index b77ed029098..016dc03803d 100644
--- 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
index 9c0af33e335..bcb8663a03f 100644
--- 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
index dd6a0f3bcf8..a587348c79d 100644
--- 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
index e368d29f41a..95c7efd1792 100644
--- 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
index 4fa08fab878..57b8f133b84 100644
--- 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.