Connection: migrate ActionButton, Button, and Text to @wordpress/ui

projects/js-packages/connection/changelog/migrate-jetpack-components-to-wp-ui

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection: Migrate ActionButton, Button, and Text consumers off @automattic/jetpack-components to @wordpress/ui equivalents; brings the package to zero migration-relevant jetpack-components imports.

projects/js-packages/connection/components/connect-button/index.jsx

@@ -1,5 +1,5 @@
-import { ActionButton } from '@automattic/jetpack-components';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import PropTypes from 'prop-types';
 import useConnection from '../use-connection';
 
@@ -39,12 +39,16 @@ const ConnectButton = props => {
 	return (
 		<>
 			{ ( ! isRegistered || ! isUserConnected ) && (
-				<ActionButton
-					label={ connectLabel }
-					onClick={ handleRegisterSite }
-					displayError={ registrationError ? true : false }
-					isLoading={ siteIsRegistering || userIsConnecting }
-				/>
+				<>
+					<Button onClick={ handleRegisterSite } loading={ siteIsRegistering || userIsConnecting }>
+						{ connectLabel }
+					</Button>
+					{ registrationError && (
+						<p className="jp-action-button__error">
+							{ __( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+						</p>
+					) }
+				</>
 			) }
 		</>
 	);

projects/js-packages/connection/components/connect-screen/basic/style.scss

@@ -17,25 +17,16 @@
 		}
 	}
 
-	.jp-action-button {
+	// Structural-only: top spacing + responsive width. All other treatment
+	// (colors, padding, border-radius, font-weight) honors the
+	// @wordpress/ui Button defaults.
+	.jp-connection__connect-screen__action-button {
 		margin-top: 40px;
+		max-width: 100%;
 
-		&--button {
-			border-radius: 4px;
-			font-weight: 600;
-		}
-
-		button {
-			max-width: 100%;
-
-			&:disabled {
-				color: hsla(0, 0%, 100%, 0.4);
-			}
-
-			@media ( max-width: breakpoints.$break-medium ) {
-				max-width: none;
-				width: 100%;
-			}
+		@media ( max-width: breakpoints.$break-medium ) {
+			max-width: none;
+			width: 100%;
 		}
 	}
 

projects/js-packages/connection/components/connect-screen/basic/visual.tsx

@@ -1,6 +1,7 @@
-import { ActionButton, TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
+import { TermsOfService, getRedirectUrl } from '@automattic/jetpack-components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import ConnectScreenLayout from '../layout';
 import type { Props as ConnectScreenProps } from '../basic';
 import type { WithRequired } from '../types';
@@ -102,14 +103,20 @@ const ConnectScreenVisual: FC< Props > = ( {
 			<div className="jp-connection__connect-screen__tos">
 				<TermsOfService agreeButtonLabel={ buttonLabel } />
 			</div>
-			<ActionButton
-				label={ buttonLabel }
+			<Button
+				className="jp-connection__connect-screen__action-button"
 				onClick={ handleButtonClick }
-				displayError={ displayButtonError || isOfflineMode }
-				errorMessage={ getErrorMessage( errorCode, isOfflineMode ) }
-				isLoading={ buttonIsLoading }
-				isDisabled={ isOfflineMode }
-			/>
+				loading={ buttonIsLoading }
+				disabled={ isOfflineMode }
+			>
+				{ buttonLabel }
+			</Button>
+			{ ( displayButtonError || isOfflineMode ) && (
+				<p className="jp-connection__connect-screen__error">
+					{ getErrorMessage( errorCode, isOfflineMode ) ||
+						__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+				</p>
+			) }
 			<span className="jp-connection__connect-screen__loading-message" role="status">
 				{ buttonIsLoading ? loadingLabel || __( 'Loading', 'jetpack-connection-js' ) : '' }
 			</span>

projects/js-packages/connection/components/connect-screen/required-plan/style.scss

@@ -43,23 +43,12 @@
 			right: calc(var(--spacing-base) * 12);
 		}
 
-		.jp-action-button--button.components-button {
+		// Structural-only: span the pricing card width and keep the vertical
+		// rhythm inside the card. All other treatment (colors, padding,
+		// font-size, border-radius) honors the @wordpress/ui Button defaults.
+		.jp-connection__connect-screen__action-button {
 			width: 100%;
-			height: auto;
-			font-size: 18px;
-			font-weight: 500;
-			background: var(--jp-black) !important;
-			color: var(--jp-white) !important;
-			border-radius: var(--jp-border-radius);
-			padding: 14px 24px;
-			margin: 24px 0 32px;
-			justify-content: center;
-			align-items: center;
-
-			&:disabled {
-				background: var(--jp-gray) !important;
-				color: var(--jp-gray-20) !important;
-			}
+			margin: 24px 0;
 		}
 
 		.terms-of-service {
@@ -77,33 +66,31 @@
 		gap: 1ch;
 		line-height: 1;
 
-		.jp-action-button--button.components-button.is-primary {
-			display: inline;
-			color: var(--jp-black) !important;
-			background: inherit !important;
+		// Inline button styled as a text link inside the surrounding sentence.
+		// `variant="unstyled"` strips @wordpress/ui Button's chrome so we can
+		// flow it inline with the prefix copy; we keep `<button>` semantics so
+		// the element stays keyboard-focusable and screen readers announce
+		// "button" + aria-busy when in-flight (a `<Link>` couldn't do that).
+		// `inline-flex` + `align-items: center` keeps either the label or the
+		// loading spinner vertically centered within the button row, and
+		// `align-self: baseline` aligns the whole button with the prefix
+		// text's baseline inside the parent flex container.
+		.jp-connection__connect-screen__inline-action {
+			display: inline-flex;
+			align-items: center;
+			align-self: baseline;
 			text-decoration: underline;
-
-			width: auto;
-			min-width: 0;
-			height: auto;
 			font: inherit;
 			padding: 0;
+			min-width: calc(var(--spacing-base) * 8);
+			justify-content: center;
 
-			&:hover {
-				background: inherit;
-				text-decoration-thickness: var(--jp-underline-thickness);
-			}
-
-			&:focus {
-				background: inherit;
-				box-shadow: none !important;
+			// @wordpress/components Spinner ships with `margin: 5px 11px 0`
+			// for use inside button chrome we no longer have. Zero it out
+			// so the spinner sits flush in the inline-flex row.
+			.components-spinner {
+				margin: 0;
 			}
 		}
-
-		.jp-components-spinner__inner,
-		.jp-components-spinner__outer {
-			border-top-color: var(--jp-black);
-			border-right-color: var(--jp-black);
-		}
 	}
 }

projects/js-packages/connection/components/connect-screen/required-plan/visual.jsx

@@ -1,11 +1,8 @@
-import {
-	ActionButton,
-	getRedirectUrl,
-	PricingCard,
-	TermsOfService,
-} from '@automattic/jetpack-components';
+import { getRedirectUrl, PricingCard, TermsOfService } from '@automattic/jetpack-components';
+import { Spinner } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { Button } from '@wordpress/ui';
 import clsx from 'clsx';
 import debugFactory from 'debug';
 import PropTypes from 'prop-types';
@@ -45,11 +42,15 @@ const ConnectScreenRequiredPlanVisual = props => {
 		__( 'Already have a subscription? <connectButton/>', 'jetpack-connection-js' ),
 		{
 			connectButton: (
-				<ActionButton
-					label={ __( 'Log in to get started', 'jetpack-connection-js' ) }
+				<Button
+					variant="unstyled"
+					className="jp-connection__connect-screen__inline-action"
 					onClick={ handleButtonClick }
-					isLoading={ buttonIsLoading }
-				/>
+					disabled={ buttonIsLoading }
+					aria-busy={ buttonIsLoading }
+				>
+					{ buttonIsLoading ? <Spinner /> : __( 'Log in to get started', 'jetpack-connection-js' ) }
+				</Button>
 			),
 		}
 	);
@@ -92,14 +93,20 @@ const ConnectScreenRequiredPlanVisual = props => {
 						priceAfter={ priceAfter }
 					>
 						<TermsOfService agreeButtonLabel={ buttonLabel } />
-						<ActionButton
-							label={ buttonLabel }
+						<Button
+							className="jp-connection__connect-screen__action-button"
 							onClick={ handleButtonClick }
-							displayError={ displayButtonError || isOfflineMode }
-							errorMessage={ errorMessage }
-							isLoading={ buttonIsLoading }
-							isDisabled={ isOfflineMode }
-						/>
+							loading={ buttonIsLoading }
+							disabled={ isOfflineMode }
+						>
+							{ buttonLabel }
+						</Button>
+						{ ( displayButtonError || isOfflineMode ) && (
+							<p className="jp-connection__connect-screen__error">
+								{ errorMessage ||
+									__( 'An error occurred. Please try again.', 'jetpack-connection-js' ) }
+							</p>
+						) }
 					</PricingCard>
 				</div>
 

projects/js-packages/connection/components/manage-connection-dialog/index.jsx

@@ -3,13 +3,13 @@
  */
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import restApi from '@automattic/jetpack-api';
-import { Button, getRedirectUrl, Text } from '@automattic/jetpack-components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
 import { isWoASite } from '@automattic/jetpack-script-data';
 import { Modal } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, chevronRight, external } from '@wordpress/icons';
-import { Link } from '@wordpress/ui';
+import { Button, Link, Text } from '@wordpress/ui';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useState, useMemo } from 'react';
@@ -316,8 +316,7 @@ const HelpFooter = ( { onClose, disabled } ) => {
 			</div>
 			<div className="jp-connection__manage-dialog__button-wrap lg-col-span-3 md-col-span-1 sm-col-span-1">
 				<Button
-					weight="regular"
-					variant="secondary"
+					variant="outline"
 					onClick={ onClose }
 					className="jp-connection__manage-dialog__btn-dismiss"
 					disabled={ disabled }