Fix alignment issue for the warning icon in settings. (#9711)

Automattic · Nov 14, 2024 · 04878e2 · 04878e2
1 parent 47739ad
commit 04878e2
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 37 deletions.
diff --git a/changelog/fix-9304-fix-alignment-issue-with-link-logo-in-settings b/changelog/fix-9304-fix-alignment-issue-with-link-logo-in-settings
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Update Link logo alignment issue when WooPay is enabled and a specific version of Gutenberg is enabled.
diff --git a/client/settings/express-checkout/link-item.tsx b/client/settings/express-checkout/link-item.tsx
@@ -59,27 +59,33 @@ const LinkExpressCheckoutItem = (): React.ReactElement => {
 					<div className="express-checkout__row">
 						<div className="express-checkout__checkbox">
 							{ isWooPayEnabled ? (
-								<HoverTooltip
-									content={ __(
-										'To enable Link by Stripe, you must first disable WooPay.',
-										'woocommerce-payments'
-									) }
-								>
-									<div className="loadable-checkbox__icon">
-										<NoticeOutlineIcon />
-										<div
-											className="loadable-checkbox__icon-warning"
-											data-testid="loadable-checkbox-icon-warning"
-										>
-											<VisuallyHidden>
-												{ __(
-													'Link by Stripe cannot be enabled at checkout. Click to expand.',
+								<div className="components-base-control components-checkbox-control">
+									<div className="components-base-control__field">
+										<span className="components-checkbox-control__input-container">
+											<HoverTooltip
+												content={ __(
+													'To enable Link by Stripe, you must first disable WooPay.',
 													'woocommerce-payments'
 												) }
-											</VisuallyHidden>
-										</div>
+											>
+												<div className="loadable-checkbox__icon">
+													<NoticeOutlineIcon />
+													<div
+														className="loadable-checkbox__icon-warning"
+														data-testid="loadable-checkbox-icon-warning"
+													>
+														<VisuallyHidden>
+															{ __(
+																'Link by Stripe cannot be enabled at checkout. Click to expand.',
+																'woocommerce-payments'
+															) }
+														</VisuallyHidden>
+													</div>
+												</div>
+											</HoverTooltip>
+										</span>
 									</div>
-								</HoverTooltip>
+								</div>
 							) : (
 								<CheckboxControl
 									label={ __(

diff --git a/client/settings/express-checkout/style.scss b/client/settings/express-checkout/style.scss
@@ -12,7 +12,7 @@
 			.loadable-checkbox__icon .gridicons-notice-outline {
 				fill: #f0b849;
 				margin-bottom: -5px;
-				margin-right: 12px;
+				margin-left: -4px;
 			}
 
 			&__label-container {

diff --git a/client/settings/express-checkout/woopay-item.tsx b/client/settings/express-checkout/woopay-item.tsx
@@ -50,27 +50,33 @@ const WooPayExpressCheckoutItem = (): React.ReactElement => {
 					<div className="express-checkout__row">
 						<div className="express-checkout__checkbox">
 							{ isStripeLinkEnabled ? (
-								<HoverTooltip
-									content={ __(
-										'To enable WooPay, you must first disable Link by Stripe.',
-										'woocommerce-payments'
-									) }
-								>
-									<div className="loadable-checkbox__icon">
-										<NoticeOutlineIcon />
-										<div
-											className="loadable-checkbox__icon-warning"
-											data-testid="loadable-checkbox-icon-warning"
-										>
-											<VisuallyHidden>
-												{ __(
-													'WooPay cannot be enabled at checkout. Click to expand.',
+								<div className="components-base-control components-checkbox-control">
+									<div className="components-base-control__field">
+										<span className="components-checkbox-control__input-container">
+											<HoverTooltip
+												content={ __(
+													'To enable WooPay, you must first disable Link by Stripe.',
 													'woocommerce-payments'
 												) }
-											</VisuallyHidden>
-										</div>
+											>
+												<div className="loadable-checkbox__icon">
+													<NoticeOutlineIcon />
+													<div
+														className="loadable-checkbox__icon-warning"
+														data-testid="loadable-checkbox-icon-warning"
+													>
+														<VisuallyHidden>
+															{ __(
+																'WooPay cannot be enabled at checkout. Click to expand.',
+																'woocommerce-payments'
+															) }
+														</VisuallyHidden>
+													</div>
+												</div>
+											</HoverTooltip>
+										</span>
 									</div>
-								</HoverTooltip>
+								</div>
 							) : (
 								<CheckboxControl
 									label={ __(