fix: spacing of help text on ECE settings

[frosso]

Fixes STRIPE-798

Changes proposed in this Pull Request:

I noticed that the help text on the express checkout buttons settings page has some weird spacing.
Fixing to use the description attribute on the option itself, instead, which achieves the same result.

Before:

After:

Testing instructions

• In wp-admin, navigate to WooCommerce > Settings > Payments > Stripe
• Scroll down the page, click "Customize" next to "Google Pay / Apple Pay"
• In the "Settings" section, notice how the help text of the "Theme" options is now better aligned

---

• Covered with tests (or have a good reason not to test in description ☝️)
• Tested on mobile (or does not apply)

Changelog entry

• This Pull Request does not require a changelog entry. (Comment required below)

Changelog Entry Comment

Comment

Post merge

• Added testing instructions to the Release Testing Instructions wiki page (or does not apply)
• Added the needs docs label (or does not apply)
• Included this PR in the Release Thread scope (or does not apply)

[Copilot]

Pull Request Overview

This PR attempts to refactor the express checkout theme settings to use a simpler structure by replacing interpolateComponents with description properties on radio button options. However, the implementation has a critical bug that will prevent the descriptions from rendering.

• Removes custom CSS for help text spacing
• Refactors button theme options from embedded help text to separate description properties
• Updates changelog entries to document the UI spacing adjustment

Reviewed Changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
readme.txt	Adds changelog entry documenting the UI spacing fix
changelog.txt	Adds changelog entry documenting the UI spacing fix
client/entrypoints/express-checkout-settings/style.scss	Removes custom CSS styling for option help text
client/entrypoints/express-checkout-settings/express-checkout-settings-section.js	Refactors button theme options to use description properties instead of interpolated components, but introduces a bug where descriptions won't render

Comments suppressed due to low confidence (1)

client/entrypoints/express-checkout-settings/express-checkout-settings-section.js:115

• The RadioControl component from @wordpress/components does not support a description property on individual options. It only accepts label and value properties in the options array. The descriptions added here ('Recommended for white or light-colored backgrounds...', etc.) will not be rendered in the UI.

If the goal is to display these descriptions separately from the labels, you may need to either:

1. Use a custom RadioControl wrapper that supports per-option descriptions
2. Use the help prop on the RadioControl component itself (though this applies to all options, not per-option)
3. Embed the descriptions in the label as was done previously with makeButtonThemeText and interpolateComponents

const buttonThemeOptions = [
	{
		label: __( 'Dark', 'woocommerce-gateway-stripe' ),
		description: __(
			'Recommended for white or light-colored backgrounds with high contrast.',
			'woocommerce-gateway-stripe'
		),
		value: 'dark',
	},
	{
		label: __( 'Light', 'woocommerce-gateway-stripe' ),
		description: __(
			'Recommended for dark or colored backgrounds with high contrast.',
			'woocommerce-gateway-stripe'
		),
		value: 'light',
	},
	{
		label: __( 'Outline', 'woocommerce-gateway-stripe' ),
		description: __(
			'Recommended for white or light-colored backgrounds with insufficient contrast.',
			'woocommerce-gateway-stripe'
		),
		value: 'light-outline',
	},
];

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[diegocurbelo]

Thanks for the fix @frosso!

The changes look good, and the removed CSS is not used anywhere else.