From a0dede499b22effb969c38799b16cb151aa5b543 Mon Sep 17 00:00:00 2001 From: Daniel Guerra Date: Wed, 11 Dec 2024 12:10:10 -0600 Subject: [PATCH 1/7] Checkout: Make sure the font size for PMME is smaller than the labels --- client/checkout/upe-styles/index.js | 43 +++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js index 5c775caf43e..a17c9955e97 100644 --- a/client/checkout/upe-styles/index.js +++ b/client/checkout/upe-styles/index.js @@ -12,6 +12,8 @@ import { handleAppearanceForFloatingLabel, } from './utils.js'; +const PMME_RELATIVE_TEXT_SIZE = 0.85; + export const appearanceSelectors = { default: { hiddenContainer: '#wcpay-hidden-div', @@ -42,6 +44,7 @@ export const appearanceSelectors = { headingSelectors: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ], buttonSelectors: [ '#place_order' ], linkSelectors: [ 'a' ], + pmmeRelativeTextSizeSelector: '.wc_payment_method > label', }, blocksCheckout: { appendTarget: '#contact-fields', @@ -70,6 +73,8 @@ export const appearanceSelectors = { containerSelectors: [ '.wp-block-woocommerce-checkout-order-summary-block', ], + pmmeRelativeTextSizeSelector: + '.wc-block-components-radio-control__label-group', }, bnplProductPage: { appendTarget: '.product .cart .quantity', @@ -465,6 +470,35 @@ export const getFontRulesFromPage = () => { return fontRules; }; +/** + * Ensure the font size of the element is smaller than the font size of target element. + * + * @param {string} selector Selector of the element to be checked. + * @param {string} fontSize Pre-computed font size. + * @param {number} percentage Percentage (0-1) to be used relative to the font size of the target element. + * + * @return {string} Font size of the element. + */ +function ensureFontSizeSmallerThan( selector, fontSize, percentage ) { + const fontSizeNumber = parseFloat( fontSize ); + + // If the element is not found, return the font size number multiplied by the percentage. + const elem = document.querySelector( selector ); + if ( ! elem ) { + return `${ fontSizeNumber * percentage }px`; + } + + const styles = window.getComputedStyle( elem ); + const targetFontSize = styles.getPropertyValue( 'font-size' ); + const targetFontSizeNumber = parseFloat( targetFontSize ) * percentage; + + if ( fontSizeNumber > targetFontSizeNumber ) { + return `${ targetFontSizeNumber }px`; + } + + return `${ fontSizeNumber }px`; +} + export const getAppearance = ( elementsLocation, forWooPay = false ) => { const selectors = appearanceSelectors.getSelectors( elementsLocation ); @@ -518,9 +552,18 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { colorBackground: backgroundColor, colorText: paragraphRules.color, fontFamily: paragraphRules.fontFamily, + // fontSizeBase: transformFontSize( paragraphRules.fontSize, 0.9 ), fontSizeBase: paragraphRules.fontSize, }; + if ( selectors.pmmeRelativeTextSizeSelector ) { + globalRules.fontSizeBase = ensureFontSizeSmallerThan( + selectors.pmmeRelativeTextSizeSelector, + paragraphRules.fontSize, + PMME_RELATIVE_TEXT_SIZE // The font size of the payment method messaging should be 85% or less of the target font size. + ); + } + const isFloatingLabel = elementsLocation === 'blocks_checkout'; let appearance = { From befd30b029bd36a836b03a866aa10aab8e75250d Mon Sep 17 00:00:00 2001 From: Daniel Guerra Date: Wed, 11 Dec 2024 12:12:17 -0600 Subject: [PATCH 2/7] Add changelog --- changelog/fix-change-font-size-pmme-checkout | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelog/fix-change-font-size-pmme-checkout diff --git a/changelog/fix-change-font-size-pmme-checkout b/changelog/fix-change-font-size-pmme-checkout new file mode 100644 index 00000000000..40d48f4ab6c --- /dev/null +++ b/changelog/fix-change-font-size-pmme-checkout @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +Checkout: Make sure the font size for PMME is smaller than the labels From fc8d1344d4e92da5f20f3517d7bd2979155ded3c Mon Sep 17 00:00:00 2001 From: Daniel Guerra Date: Wed, 11 Dec 2024 12:24:11 -0600 Subject: [PATCH 3/7] Preserve font size in floating labels --- client/checkout/upe-styles/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js index a17c9955e97..a1800033572 100644 --- a/client/checkout/upe-styles/index.js +++ b/client/checkout/upe-styles/index.js @@ -516,6 +516,10 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { '.Label' ); + const labelRestingRules = { + fontSize: labelRules.fontSize, + }; + const paragraphRules = getFieldStyles( selectors.upeThemeTextSelector, '.Text' @@ -576,6 +580,7 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { '.Input': inputRules, '.Input--invalid': inputInvalidRules, '.Label': labelRules, + '.Label--resting': labelRestingRules, '.Block': blockRules, '.Tab': tabRules, '.Tab:hover': tabHoverRules, From ac667126f9a22510a369624aa0af6397058e3850 Mon Sep 17 00:00:00 2001 From: Daniel Guerra Date: Wed, 11 Dec 2024 12:41:32 -0600 Subject: [PATCH 4/7] Update tests and skip the resizing if the fontSize is missing --- client/checkout/api/test/index.test.js | 1 + client/checkout/upe-styles/index.js | 2 +- client/checkout/upe-styles/test/index.js | 3 +++ 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/client/checkout/api/test/index.test.js b/client/checkout/api/test/index.test.js index 8ec819ea4c0..f0c9ecaec7d 100644 --- a/client/checkout/api/test/index.test.js +++ b/client/checkout/api/test/index.test.js @@ -28,6 +28,7 @@ const mockAppearance = { '.Input': {}, '.Input--invalid': {}, '.Label': {}, + '.Label--resting': {}, '.Tab': {}, '.Tab--selected': {}, '.Tab:hover': {}, diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js index a1800033572..0a1a2d39f48 100644 --- a/client/checkout/upe-styles/index.js +++ b/client/checkout/upe-styles/index.js @@ -560,7 +560,7 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { fontSizeBase: paragraphRules.fontSize, }; - if ( selectors.pmmeRelativeTextSizeSelector ) { + if ( selectors.pmmeRelativeTextSizeSelector && globalRules.fontSizeBase ) { globalRules.fontSizeBase = ensureFontSizeSmallerThan( selectors.pmmeRelativeTextSizeSelector, paragraphRules.fontSize, diff --git a/client/checkout/upe-styles/test/index.js b/client/checkout/upe-styles/test/index.js index 96a602a4bbd..37bfa3d1d63 100644 --- a/client/checkout/upe-styles/test/index.js +++ b/client/checkout/upe-styles/test/index.js @@ -158,6 +158,9 @@ describe( 'Getting styles for automated theming', () => { fontSize: '12px', padding: '10px', }, + '.Label--resting': { + fontSize: '12px', + }, '.Tab': { backgroundColor: 'rgba(0, 0, 0, 0)', color: 'rgb(109, 109, 109)', From a41defb7d2b6a15646fde1e4e5a4be688cafeaa8 Mon Sep 17 00:00:00 2001 From: Daniel Guerra Date: Wed, 18 Dec 2024 09:37:00 -0600 Subject: [PATCH 5/7] Update PMME_RELATIVE_TEXT_SIZE and add more selectors to target secondary font sizes --- client/checkout/upe-styles/index.js | 32 ++++++++++++++++++----------- 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js index 5c0d3bb12e7..3f612ba2413 100644 --- a/client/checkout/upe-styles/index.js +++ b/client/checkout/upe-styles/index.js @@ -12,7 +12,7 @@ import { handleAppearanceForFloatingLabel, } from './utils.js'; -const PMME_RELATIVE_TEXT_SIZE = 0.85; +const PMME_RELATIVE_TEXT_SIZE = 0.875; export const appearanceSelectors = { default: { @@ -25,7 +25,10 @@ export const appearanceSelectors = { appendTarget: '.woocommerce-billing-fields__field-wrapper', upeThemeInputSelector: '#billing_first_name', upeThemeLabelSelector: '.woocommerce-checkout .form-row label', - upeThemeTextSelector: '.woocommerce-checkout .form-row', + upeThemeTextSelectors: [ + '#payment .payment_methods li .payment_box fieldset', + '.woocommerce-checkout .form-row', + ], rowElement: 'p', validClasses: [ 'form-row' ], invalidClasses: [ @@ -50,7 +53,10 @@ export const appearanceSelectors = { appendTarget: '#contact-fields', upeThemeInputSelector: '.wc-block-components-text-input #email', upeThemeLabelSelector: '.wc-block-components-text-input label', - upeThemeTextSelector: '.wc-block-components-text-input', + upeThemeTextSelectors: [ + '.wc-block-components-checkout-step__description', + '.wc-block-components-text-input', + ], rowElement: 'div', validClasses: [ 'wc-block-components-text-input', 'is-active' ], invalidClasses: [ 'wc-block-components-text-input', 'has-error' ], @@ -80,7 +86,7 @@ export const appearanceSelectors = { appendTarget: '.product .cart .quantity', upeThemeInputSelector: '.product .cart .quantity .qty', upeThemeLabelSelector: '.product .cart .quantity label', - upeThemeTextSelector: '.product .cart .quantity', + upeThemeTextSelectors: [ '.product .cart .quantity' ], rowElement: 'div', validClasses: [ 'input-text' ], invalidClasses: [ 'input-text', 'has-error' ], @@ -99,7 +105,7 @@ export const appearanceSelectors = { appendTarget: '.cart .quantity', upeThemeInputSelector: '.cart .quantity .qty', upeThemeLabelSelector: '.cart .quantity label', - upeThemeTextSelector: '.cart .quantity', + upeThemeTextSelectors: [ '.cart .quantity' ], rowElement: 'div', validClasses: [ 'input-text' ], invalidClasses: [ 'input-text', 'has-error' ], @@ -120,7 +126,7 @@ export const appearanceSelectors = { upeThemeInputSelector: '.wc-block-cart .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input', upeThemeLabelSelector: '.wc-block-components-text-input', - upeThemeTextSelector: '.wc-block-components-text-input', + upeThemeTextSelectors: [ '.wc-block-components-text-input' ], rowElement: 'div', validClasses: [ 'wc-block-components-text-input' ], invalidClasses: [ 'wc-block-components-text-input', 'has-error' ], @@ -143,7 +149,7 @@ export const appearanceSelectors = { appendTarget: '.woocommerce-billing-fields__field-wrapper', upeThemeInputSelector: '#billing_first_name', upeThemeLabelSelector: '.woocommerce-checkout .form-row label', - upeThemeTextSelector: '.woocommerce-checkout .form-row', + upeThemeTextSelectors: [ '.woocommerce-checkout .form-row' ], rowElement: 'p', validClasses: [ 'form-row' ], invalidClasses: [ @@ -482,7 +488,11 @@ export const getFontRulesFromPage = () => { * * @return {string} Font size of the element. */ -function ensureFontSizeSmallerThan( selector, fontSize, percentage ) { +function ensureFontSizeSmallerThan( + selector, + fontSize, + percentage = PMME_RELATIVE_TEXT_SIZE +) { const fontSizeNumber = parseFloat( fontSize ); // If the element is not found, return the font size number multiplied by the percentage. @@ -524,7 +534,7 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { }; const paragraphRules = getFieldStyles( - selectors.upeThemeTextSelector, + selectors.upeThemeTextSelectors, '.Text' ); @@ -565,15 +575,13 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { colorBackground: backgroundColor, colorText: paragraphRules.color, fontFamily: paragraphRules.fontFamily, - // fontSizeBase: transformFontSize( paragraphRules.fontSize, 0.9 ), fontSizeBase: paragraphRules.fontSize, }; if ( selectors.pmmeRelativeTextSizeSelector && globalRules.fontSizeBase ) { globalRules.fontSizeBase = ensureFontSizeSmallerThan( selectors.pmmeRelativeTextSizeSelector, - paragraphRules.fontSize, - PMME_RELATIVE_TEXT_SIZE // The font size of the payment method messaging should be 85% or less of the target font size. + paragraphRules.fontSize ); } From 4126f3c0db862d5f4debc28d2eb4db487277a1ae Mon Sep 17 00:00:00 2001 From: Daniel Guerra Date: Wed, 18 Dec 2024 09:44:05 -0600 Subject: [PATCH 6/7] Pass fontRules to PMME container in blocks checkout --- client/checkout/blocks/payment-method-label.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/client/checkout/blocks/payment-method-label.js b/client/checkout/blocks/payment-method-label.js index 752a9b830db..acbf9f1ccc0 100644 --- a/client/checkout/blocks/payment-method-label.js +++ b/client/checkout/blocks/payment-method-label.js @@ -10,8 +10,8 @@ import { useStripeForUPE } from 'wcpay/hooks/use-stripe-async'; import { getUPEConfig } from 'wcpay/utils/checkout'; import { __ } from '@wordpress/i18n'; import './style.scss'; -import { useEffect, useState } from '@wordpress/element'; -import { getAppearance } from 'wcpay/checkout/upe-styles'; +import { useEffect, useMemo, useState } from '@wordpress/element'; +import { getAppearance, getFontRulesFromPage } from 'wcpay/checkout/upe-styles'; const bnplMethods = [ 'affirm', 'afterpay_clearpay', 'klarna' ]; const PaymentMethodMessageWrapper = ( { @@ -57,6 +57,8 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => { getUPEConfig( 'wcBlocksUPEAppearanceTheme' ) ); + const fontRules = useMemo( () => getFontRulesFromPage(), [] ); + // Stripe expects the amount to be sent as the minor unit of 2 digits. const amount = parseInt( normalizeCurrencyToMinorUnit( @@ -123,6 +125,7 @@ export default ( { api, title, countries, iconLight, iconDark, upeName } ) => { stripe={ stripe } options={ { appearance: appearance, + fonts: fontRules, } } > Date: Wed, 18 Dec 2024 13:03:49 -0600 Subject: [PATCH 7/7] Handle NaN font sizes --- client/checkout/upe-styles/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/client/checkout/upe-styles/index.js b/client/checkout/upe-styles/index.js index 3f612ba2413..bc54434aec1 100644 --- a/client/checkout/upe-styles/index.js +++ b/client/checkout/upe-styles/index.js @@ -495,6 +495,10 @@ function ensureFontSizeSmallerThan( ) { const fontSizeNumber = parseFloat( fontSize ); + if ( isNaN( fontSizeNumber ) ) { + return fontSize; + } + // If the element is not found, return the font size number multiplied by the percentage. const elem = document.querySelector( selector ); if ( ! elem ) { @@ -505,6 +509,10 @@ function ensureFontSizeSmallerThan( const targetFontSize = styles.getPropertyValue( 'font-size' ); const targetFontSizeNumber = parseFloat( targetFontSize ) * percentage; + if ( isNaN( targetFontSizeNumber ) ) { + return fontSize; + } + if ( fontSizeNumber > targetFontSizeNumber ) { return `${ targetFontSizeNumber }px`; }