diff --git a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx index 3277569d2883..a37a2dd8ae25 100644 --- a/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx +++ b/projects/packages/my-jetpack/_inc/components/plans-section/index.tsx @@ -1,5 +1,3 @@ -// TODO: migrate Button usages to @wordpress/ui Link (handled in a separate PR — all Buttons here use variant="link" + href + isExternalLink + weight="regular", which @wordpress/ui Button does not support). -import { Button } from '@automattic/jetpack-components'; import { getUserConnectionUrl } from '@automattic/jetpack-connection'; import { getMyJetpackUrl } from '@automattic/jetpack-script-data'; import { dateI18n, getDate } from '@wordpress/date'; @@ -110,16 +108,16 @@ const PlanExpiry: FC< PlanSectionProps > = ( { purchase } ) => { if ( isExpiringSoon ) { return ( - + ); } return ( - + ); }, [ isExpiringPurchase, isExpiringSoon, managePurchaseUrl, renewUrl ] ); @@ -243,39 +241,29 @@ const PlanSectionFooter: FC< PlanSectionHeaderAndFooterProps > = ( { numberOfPur ) } { numberOfPurchases > 0 && (
  • - +
  • ) } { ! hasComplete && (
  • - +
  • ) } { ! hasComplete && loadAddLicenseScreen && (
  • - +
  • ) } diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx index 095124878578..a465aa4476fb 100644 --- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx +++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/product-interstitial-modal.tsx @@ -1,6 +1,7 @@ import { Text, Button, ThemeProvider, Col, Container } from '@automattic/jetpack-components'; import { Modal } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +import { Link } from '@wordpress/ui'; import clsx from 'clsx'; import { useCallback, useState, cloneElement } from 'react'; import LoadingBlock from '../loading-block'; @@ -234,13 +235,12 @@ const ProductInterstitialModal: FC< ProductInterstitialModalProps > = props => {
    { PrimaryButton } - +
    { diff --git a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss index 9c4ba3981f94..bcddfbcbaef6 100644 --- a/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss +++ b/projects/packages/my-jetpack/_inc/components/product-interstitial-modal/style.module.scss @@ -70,6 +70,7 @@ $interstitial-modal-padding: 40px; .primary-footer { display: flex; flex-direction: row; + align-items: center; gap: 8px 24px; } diff --git a/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link b/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link new file mode 100644 index 000000000000..be9fb492b797 --- /dev/null +++ b/projects/packages/my-jetpack/changelog/update-link-variant-buttons-to-wp-ui-link @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +My Jetpack: migrate link-variant Buttons in Plans section and product interstitial modal to @wordpress/ui Link.