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 diff --git a/client/checkout/api/test/index.test.js b/client/checkout/api/test/index.test.js index f3635e66d71..866672be533 100644 --- a/client/checkout/api/test/index.test.js +++ b/client/checkout/api/test/index.test.js @@ -24,6 +24,7 @@ const mockAppearance = { '.Input': {}, '.Input--invalid': {}, '.Label': {}, + '.Label--resting': {}, '.Tab': {}, '.Tab--selected': {}, '.Tab:hover': {}, 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, } } > label', }, blocksCheckout: { 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' ], @@ -70,12 +79,14 @@ export const appearanceSelectors = { containerSelectors: [ '.wp-block-woocommerce-checkout-order-summary-block', ], + pmmeRelativeTextSizeSelector: + '.wc-block-components-radio-control__label-group', }, bnplProductPage: { 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' ], @@ -94,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' ], @@ -115,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' ], @@ -138,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: [ @@ -468,6 +479,47 @@ 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 = PMME_RELATIVE_TEXT_SIZE +) { + 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 ) { + return `${ fontSizeNumber * percentage }px`; + } + + const styles = window.getComputedStyle( elem ); + const targetFontSize = styles.getPropertyValue( 'font-size' ); + const targetFontSizeNumber = parseFloat( targetFontSize ) * percentage; + + if ( isNaN( targetFontSizeNumber ) ) { + return fontSize; + } + + if ( fontSizeNumber > targetFontSizeNumber ) { + return `${ targetFontSizeNumber }px`; + } + + return `${ fontSizeNumber }px`; +} + export const getAppearance = ( elementsLocation, forWooPay = false ) => { const selectors = appearanceSelectors.getSelectors( elementsLocation ); @@ -485,8 +537,12 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { '.Label' ); + const labelRestingRules = { + fontSize: labelRules.fontSize, + }; + const paragraphRules = getFieldStyles( - selectors.upeThemeTextSelector, + selectors.upeThemeTextSelectors, '.Text' ); @@ -530,6 +586,13 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { fontSizeBase: paragraphRules.fontSize, }; + if ( selectors.pmmeRelativeTextSizeSelector && globalRules.fontSizeBase ) { + globalRules.fontSizeBase = ensureFontSizeSmallerThan( + selectors.pmmeRelativeTextSizeSelector, + paragraphRules.fontSize + ); + } + const isFloatingLabel = elementsLocation === 'blocks_checkout'; let appearance = { @@ -542,6 +605,7 @@ export const getAppearance = ( elementsLocation, forWooPay = false ) => { '.Input': inputRules, '.Input--invalid': inputInvalidRules, '.Label': labelRules, + '.Label--resting': labelRestingRules, '.Block': blockRules, '.Tab': tabRules, '.Tab:hover': tabHoverRules, diff --git a/client/checkout/upe-styles/test/index.js b/client/checkout/upe-styles/test/index.js index 22fd181df90..4af3358484c 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)',