Show a beta badge next to WooPay theme checkbox (#10000)

Automattic · Dec 20, 2024 · cd650bd · cd650bd
1 parent 3767447
commit cd650bd
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/changelog/add-beta-badge-woopay-theme b/changelog/add-beta-badge-woopay-theme
@@ -0,0 +1,5 @@
+Significance: patch
+Type: add
+Comment: Adds a label to a gated feature.
+
+
diff --git a/client/settings/express-checkout-settings/index.scss b/client/settings/express-checkout-settings/index.scss
@@ -58,6 +58,18 @@
 }
 
 .woopay-settings {
+	&__badge {
+		background-color: $studio-gray-5;
+		padding: 0 8px;
+		border-radius: 2px;
+		font-size: 12px;
+		line-height: 20px;
+		margin-left: 4px;
+	}
+	&__global-theme-label {
+		display: inline-flex;
+		align-items: center;
+	}
 	&__custom-message-wrapper {
 		position: relative;
 

diff --git a/client/settings/express-checkout-settings/woopay-settings.js b/client/settings/express-checkout-settings/woopay-settings.js
@@ -226,10 +226,17 @@ const WooPaySettings = ( { section } ) => {
 									onChange={
 										updateIsWooPayGlobalThemeSupportEnabled
 									}
-									label={ __(
-										'Enable global theme support',
-										'woocommerce-payments'
-									) }
+									label={
+										<div className="woopay-settings__global-theme-label">
+											{ __(
+												'Enable global theme support',
+												'woocommerce-payments'
+											) }
+											<span className="woopay-settings__badge">
+												Beta
+											</span>
+										</div>
+									}
 									help={ interpolateComponents( {
 										mixedString: __(
 											'When enabled, WooPay checkout will be themed with your store’s brand colors and fonts. ' +