Replace deprecated isPrimary, isSecondary, isTertiary, isLink Button props with variant

changelogs/dev-update-deprecated-button-props

@@ -0,0 +1,4 @@
+Significance: patch
+Type: Dev
+
+Replace deprecated isPrimary, isSecondary, isTertiary, isLink Button props with variant. #8340

client/activity-panel/activity-card/test/index.js

@@ -78,7 +78,7 @@ describe( 'ActivityCard', () => {
 			<ActivityCard
 				title="Inbox message"
 				actions={
-					<Button isSecondary onClick={ noop }>
+					<Button variant="secondary" onClick={ noop }>
 						Action
 					</Button>
 				}
@@ -95,10 +95,10 @@ describe( 'ActivityCard', () => {
 			<ActivityCard
 				title="Inbox message"
 				actions={ [
-					<Button key="action1" isPrimary onClick={ noop }>
+					<Button key="action1" variant="primary" onClick={ noop }>
 						Action 1
 					</Button>,
-					<Button key="action2" isSecondary onClick={ noop }>
+					<Button key="action2" variant="secondary" onClick={ noop }>
 						Action 2
 					</Button>,
 				] }

client/activity-panel/highlight-tooltip/index.js

@@ -165,7 +165,7 @@ function HighlightTooltip( {
 							<CardFooter isBorderless={ true }>
 								<Button
 									size="small"
-									isPrimary
+									variant="primary"
 									onClick={ triggerClose }
 								>
 									{ closeButtonText ||

client/analytics/settings/historical-data/actions.js

@@ -103,7 +103,7 @@ function HistoricalDataActions( {
 				<Fragment>
 					<Button
 						className="woocommerce-settings-historical-data__action-button"
-						isPrimary
+						variant="primary"
 						onClick={ onStopImport }
 					>
 						{ __( 'Stop Import', 'woocommerce-admin' ) }
@@ -128,13 +128,16 @@ function HistoricalDataActions( {
 				return (
 					<Fragment>
 						<Button
-							isPrimary
+							variant="primary"
 							onClick={ onStartImport }
 							disabled={ importDisabled }
 						>
 							{ __( 'Start', 'woocommerce-admin' ) }
 						</Button>
-						<Button isSecondary onClick={ deletePreviousData }>
+						<Button
+							variant="secondary"
+							onClick={ deletePreviousData }
+						>
 							{ __(
 								'Delete Previously Imported Data',
 								'woocommerce-admin'
@@ -147,7 +150,7 @@ function HistoricalDataActions( {
 			return (
 				<Fragment>
 					<Button
-						isPrimary
+						variant="primary"
 						onClick={ onStartImport }
 						disabled={ importDisabled }
 					>
@@ -170,10 +173,10 @@ function HistoricalDataActions( {
 		// Has imported all possible data
 		return (
 			<Fragment>
-				<Button isSecondary onClick={ reimportData }>
+				<Button variant="secondary" onClick={ reimportData }>
 					{ __( 'Re-import Data', 'woocommerce-admin' ) }
 				</Button>
-				<Button isSecondary onClick={ deletePreviousData }>
+				<Button variant="secondary" onClick={ deletePreviousData }>
 					{ __(
 						'Delete Previously Imported Data',
 						'woocommerce-admin'

client/analytics/settings/index.js

@@ -143,11 +143,11 @@ const Settings = ( { createNotice, query } ) => {
 					/>
 				) ) }
 				<div className="woocommerce-settings__actions">
-					<Button isSecondary onClick={ resetDefaults }>
+					<Button variant="secondary" onClick={ resetDefaults }>
 						{ __( 'Reset defaults', 'woocommerce-admin' ) }
 					</Button>
 					<Button
-						isPrimary
+						variant="primary"
 						isBusy={ isRequesting }
 						onClick={ saveChanges }
 					>

client/analytics/settings/setting.js

@@ -59,7 +59,7 @@ class Setting extends Component {
 			case 'button':
 				return (
 					<Button
-						isSecondary
+						variant="secondary"
 						onClick={ this.handleInputCallback }
 						disabled={ disabled }
 					>

client/dashboard/components/cart-modal.js

@@ -143,15 +143,15 @@ class CartModal extends Component {
 
 				<div className="woocommerce-cart-modal__actions">
 					<Button
-						isLink
+						variant="link"
 						isBusy={ purchaseLaterButtonBusy }
 						onClick={ () => this.onClickPurchaseLater() }
 					>
 						{ __( "I'll do it later", 'woocommerce-admin' ) }
 					</Button>
 
 					<Button
-						isPrimary
+						variant="primary"
 						isBusy={ purchaseNowButtonBusy }
 						onClick={ () => this.onClickPurchaseNow() }
 					>

client/dashboard/components/connect/index.js

@@ -71,7 +71,7 @@ export class Connect extends Component {
 			<Fragment>
 				{ hasErrors ? (
 					<Button
-						isPrimary
+						variant="primary"
 						onClick={ () => window.location.reload() }
 					>
 						{ __( 'Retry', 'woocommerce-admin' ) }
@@ -80,7 +80,7 @@ export class Connect extends Component {
 					<Button
 						disabled={ isRequesting }
 						isBusy={ this.state.isConnecting }
-						isPrimary
+						variant="primary"
 						onClick={ this.connectJetpack }
 					>
 						{ __( 'Connect', 'woocommerce-admin' ) }

client/homescreen/activity-panel/reviews/index.js

@@ -244,7 +244,7 @@ class ReviewsPanel extends Component {
 		const cardActions = [
 			<Button
 				key="approve-action"
-				isSecondary
+				variant="secondary"
 				onClick={ () => {
 					this.recordReviewEvent( 'approve', manageReviewEvent );
 					this.updateReviewStatus(
@@ -258,7 +258,7 @@ class ReviewsPanel extends Component {
 			</Button>,
 			<Button
 				key="spam-action"
-				isTertiary
+				variant="tertiary"
 				onClick={ () => {
 					this.recordReviewEvent( 'mark_as_spam', manageReviewEvent );
 					this.updateReviewStatus( review.id, 'spam', review.status );
@@ -269,7 +269,7 @@ class ReviewsPanel extends Component {
 			<Button
 				key="delete-action"
 				isDestructive
-				isTertiary
+				variant="tertiary"
 				onClick={ () => {
 					this.recordReviewEvent( 'delete', manageReviewEvent );
 					this.deleteReview( review.id );

client/homescreen/activity-panel/stock/card.js

@@ -133,7 +133,7 @@ export class ProductStockCard extends Component {
 
 		if ( editing ) {
 			return [
-				<Button key="save" type="submit" isPrimary>
+				<Button key="save" type="submit" variant="primary">
 					{ __( 'Save', 'woocommerce-admin' ) }
 				</Button>,
 				<Button key="cancel" type="reset">
@@ -143,7 +143,7 @@ export class ProductStockCard extends Component {
 		}
 
 		return [
-			<Button key="update" isSecondary onClick={ this.beginEdit }>
+			<Button key="update" variant="secondary" onClick={ this.beginEdit }>
 				{ __( 'Update stock', 'woocommerce-admin' ) }
 			</Button>,
 		];

client/homescreen/stats-overview/install-jetpack-cta.js

@@ -54,7 +54,7 @@ export const JetpackCTA = ( {
 			</div>
 			<footer>
 				<Button
-					isSecondary
+					variant="secondary"
 					onClick={ () => {
 						recordEvent( 'statsoverview_install_jetpack' );
 						onClickInstall();
@@ -65,7 +65,7 @@ export const JetpackCTA = ( {
 					{ getJetpackInstallText( jetpackInstallState ) }
 				</Button>
 				<Button
-					isTertiary
+					variant="tertiary"
 					onClick={ () => {
 						recordEvent( 'statsoverview_dismiss_install_jetpack' );
 						onClickDismiss();

client/inbox-panel/dismiss-all-modal.js

@@ -66,7 +66,7 @@ const DismissAllModal = ( { onClose } ) => {
 							{ __( 'Cancel', 'woocommerce-admin' ) }
 						</Button>
 						<Button
-							isPrimary
+							variant="primary"
 							onClick={ () => {
 								dismissAllNotes();
 								onClose();

client/layout/store-alerts/index.js

@@ -71,8 +71,7 @@ export class StoreAlerts extends Component {
 			return (
 				<Button
 					key={ action.name }
-					isPrimary={ action.primary }
-					isSecondary={ ! action.primary }
+					variant={ action.primary ? 'primary' : 'secondary' }
 					href={ action.url || undefined }
 					onClick={ () => triggerNoteAction( alert.id, action.id ) }
 				>

client/layout/transient-notices/snackbar/index.js

@@ -132,7 +132,7 @@ function Snackbar(
 						<Button
 							key={ index }
 							href={ url }
-							isTertiary
+							variant="tertiary"
 							onClick={ ( event ) =>
 								onActionClick( event, onClick )
 							}

client/marketing/components/button/README.md

@@ -7,7 +7,7 @@ This component creates simple reusable html `<button></button>` element.
 
 ```jsx
 <Button
-	isSecondary
+	variant="secondary"
 	onClick={ this.onActivateClick }
 	disabled={ isLoading }
 >

client/marketing/overview/installed-extensions/row.js

@@ -93,7 +93,7 @@ class InstalledExtensionRow extends Component {
 
 		return (
 			<Button
-				isSecondary
+				variant="secondary"
 				onClick={ this.onActivateClick }
 				disabled={ isLoading }
 			>
@@ -105,7 +105,7 @@ class InstalledExtensionRow extends Component {
 	getFinishSetupButton() {
 		return (
 			<Button
-				isSecondary
+				variant="secondary"
 				href={ this.props.settingsUrl }
 				onClick={ this.onFinishSetupClick }
 			>

client/mobile-banner/banner.js

@@ -75,7 +75,7 @@ export const Banner = ( { onInstall, onDismiss } ) => {
 
 			<Button
 				href={ PLAY_STORE_LINK }
-				isSecondary
+				variant="secondary"
 				onClick={ () => {
 					onInstall();
 					setIsActioned( true );

client/navigation/components/favorite-button/index.js

@@ -46,7 +46,7 @@ export const FavoriteButton = ( { id } ) => {
 		<Button
 			id="woocommerce-navigation-favorite-button"
 			className="woocommerce-navigation-favorite-button"
-			isTertiary
+			variant="tertiary"
 			onClick={ toggleFavorite }
 			aria-label={
 				isFavorited

client/payments-welcome/exit-survey-modal.tsx

@@ -126,14 +126,18 @@ function ExitSurveyModal( {
 
 			<div className="wc-calypso-bridge-payments-welcome-survey__buttons">
 				<Button
-					isTertiary
+					variant="tertiary"
 					isDestructive
 					onClick={ removeWCPayMenu }
 					name="cancel"
 				>
 					{ strings.surveyCancelButton }
 				</Button>
-				<Button isSecondary onClick={ sendFeedback } name="send">
+				<Button
+					variant="secondary"
+					onClick={ sendFeedback }
+					name="send"
+				>
 					{ strings.surveySubmitButton }
 				</Button>
 			</div>

client/payments-welcome/index.tsx

@@ -173,7 +173,7 @@ const ConnectPageOnboarding = ( {
 				</div>
 				<div className="connect-account__action">
 					<Button
-						isSecondary
+						variant="secondary"
 						isBusy={ isNoThanksClicked && isExitSurveyModalOpen }
 						disabled={ isNoThanksClicked && isExitSurveyModalOpen }
 						onClick={ handleNoThanks }
@@ -182,7 +182,7 @@ const ConnectPageOnboarding = ( {
 						{ strings.nothanks }
 					</Button>
 					<Button
-						isPrimary
+						variant="primary"
 						isBusy={ isSubmitted }
 						disabled={ isSubmitted }
 						onClick={ handleSetup }

client/payments/payment-recommendations.tsx

@@ -150,7 +150,7 @@ const PaymentRecommendations: React.FC = () => {
 				content: decodeEntities( plugin.content ),
 				after: (
 					<Button
-						isSecondary
+						variant="secondary"
 						onClick={ () => setupPlugin( plugin ) }
 						isBusy={ installingPlugin === plugin.id }
 						disabled={ !! installingPlugin }
@@ -210,7 +210,11 @@ const PaymentRecommendations: React.FC = () => {
 			</CardHeader>
 			<List items={ pluginsList } />
 			<CardFooter>
-				<Button href={ SEE_MORE_LINK } target="_blank" isTertiary>
+				<Button
+					href={ SEE_MORE_LINK }
+					target="_blank"
+					variant="tertiary"
+				>
 					{ __( 'See more options', 'woocommerce-admin' ) }
 					<ExternalIcon size={ 18 } />
 				</Button>

client/profile-wizard/steps/business-details/flows/selective-bundle/index.js

@@ -597,7 +597,7 @@ class BusinessDetails extends Component {
 								</CardFooter>
 								<CardFooter justify="center">
 									<Button
-										isPrimary
+										variant="primary"
 										onClick={ async () => {
 											await handleSubmit();
 											this.persistProfileItems();

client/profile-wizard/steps/business-details/flows/selective-bundle/selective-extensions-bundle/index.js

@@ -384,7 +384,7 @@ export const SelectiveExtensionsBundle = ( {
 						} }
 						isBusy={ isInstallingActivating || isResolving }
 						disabled={ isInstallingActivating || isResolving }
-						isPrimary
+						variant="primary"
 					>
 						{ __( 'Continue', 'woocommerce-admin' ) }
 					</Button>

client/profile-wizard/steps/industry.js

@@ -265,7 +265,7 @@ class Industry extends Component {
 					</CardBody>
 					<CardFooter isBorderless justify="center">
 						<Button
-							isPrimary
+							variant="primary"
 							onClick={ () => {
 								this.onContinue().then(
 									this.props.goToNextStep

client/profile-wizard/steps/product-types/index.js

@@ -280,7 +280,7 @@ export class ProductTypes extends Component {
 					</CardBody>
 					<CardFooter isBorderless justify="center">
 						<Button
-							isPrimary
+							variant="primary"
 							onClick={ () => {
 								this.onContinue( this.props.goToNextStep );
 							} }

client/profile-wizard/steps/product-types/label.js

@@ -35,7 +35,7 @@ export default function ProductTypeLabel( {
 				{ label }
 			</span>
 			<Button
-				isTertiary
+				variant="tertiary"
 				label={ __(
 					'Learn more about recommended free business features',
 					'woocommerce-admin'

client/profile-wizard/steps/product-types/product-type.js

@@ -33,7 +33,7 @@ export default function ProductType( {
 		<div className="woocommerce-product-type">
 			<span className="woocommerce-product-type__label">{ label }</span>
 			<Button
-				isTertiary
+				variant="tertiary"
 				label={ __(
 					'Learn more about recommended free business features',
 					'woocommerce-admin'