Button Component: update to use non-deprecated attributes (#23242)

Co-authored-by: oskosk <[email protected]>
Automattic · Mar 7, 2022 · 88413da · 88413da
1 parent 8f061c9
commit 88413da
Show file tree

Hide file tree

Showing 79 changed files with 170 additions and 126 deletions.
diff --git a/projects/js-packages/components/changelog/update-buttons-deprecated-isdefault b/projects/js-packages/components/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: update attributes used within the Button component to match recent deprecations and changes.
diff --git a/projects/js-packages/components/components/action-button/index.jsx b/projects/js-packages/components/components/action-button/index.jsx
@@ -31,7 +31,7 @@ const ActionButton = props => {
 					className="jp-action-button--button"
 					label={ label }
 					onClick={ onClick }
-					isPrimary
+					variant="primary"
 					disabled={ isLoading }
 				>
 					{ isLoading ? <Spinner /> : label }

diff --git a/projects/js-packages/connection/changelog/update-buttons-deprecated-isdefault b/projects/js-packages/connection/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: update attributes used within the Button component to match recent deprecations and changes.
diff --git a/projects/js-packages/connection/changelog/update-buttons-deprecated-isdefault#2 b/projects/js-packages/connection/changelog/update-buttons-deprecated-isdefault#2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/connection/components/connection-status-card/index.jsx b/projects/js-packages/connection/components/connection-status-card/index.jsx
@@ -163,7 +163,7 @@ const ConnectionStatusCard = props => {
 					>
 						{ requiresUserConnection && __( 'Requires user connection.', 'jetpack' ) }{ ' ' }
 						<Button
-							isLink
+							variant="link"
 							disabled={ userIsConnecting }
 							onClick={ handleConnectUser }
 							className="jp-connection-status-card--btn-connect-user"

diff --git a/...cts/js-packages/connection/components/disconnect-dialog/steps/step-disconnect-confirm.jsx b/...cts/js-packages/connection/components/disconnect-dialog/steps/step-disconnect-confirm.jsx
@@ -47,7 +47,7 @@ const StepDisconnectConfirm = props => {
 						</p>
 						<p>
 							<Button
-								isPrimary
+								variant="primary"
 								onClick={ onProvideFeedback }
 								className="jp-connection__disconnect-dialog__btn-back-to-wp"
 							>
@@ -68,7 +68,7 @@ const StepDisconnectConfirm = props => {
 					<>
 						<p>
 							<Button
-								isPrimary
+								variant="primary"
 								onClick={ onExit }
 								className="jp-connection__disconnect-dialog__btn-back-to-wp"
 							>

diff --git a/projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx b/projects/js-packages/connection/components/disconnect-dialog/steps/step-disconnect.jsx
@@ -69,7 +69,7 @@ const StepDisconnect = props => {
 
 		return (
 			<Button
-				isPrimary
+				variant="primary"
 				disabled={ isDisconnecting }
 				onClick={ handleDisconnectClick }
 				className="jp-connection__disconnect-dialog__btn-disconnect"
@@ -152,7 +152,7 @@ const StepDisconnect = props => {
 					</div>
 					<div className="jp-connection__disconnect-dialog__button-wrap lg-col-span-5 md-col-span-8 sm-col-span-4">
 						<Button
-							isPrimary
+							variant="primary"
 							disabled={ isDisconnecting }
 							onClick={ handleStayConnectedClick }
 							className="jp-connection__disconnect-dialog__btn-dismiss"

diff --git a/projects/js-packages/connection/components/disconnect-dialog/steps/step-thank-you.jsx b/projects/js-packages/connection/components/disconnect-dialog/steps/step-thank-you.jsx
@@ -40,7 +40,7 @@ const StepThankYou = props => {
 					) }
 				</p>
 				<Button
-					isPrimary
+					variant="primary"
 					onClick={ onExit }
 					className="jp-connection__disconnect-dialog__btn-back-to-wp"
 				>

diff --git a/projects/js-packages/connection/components/disconnect-survey/index.jsx b/projects/js-packages/connection/components/disconnect-survey/index.jsx
@@ -164,7 +164,7 @@ const DisconnectSurvey = props => {
 			<p>
 				<Button
 					disabled={ ! selectedAnswer || isSubmittingFeedback }
-					isPrimary
+					variant="primary"
 					onClick={ handleSurveySubmit }
 					className="jp-connection__disconnect-dialog__btn-back-to-wp"
 				>

diff --git a/projects/js-packages/idc/changelog/update-buttons-deprecated-isdefault b/projects/js-packages/idc/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/licensing/changelog/update-buttons-deprecated-isdefault b/projects/js-packages/licensing/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/js-packages/partner-coupon/changelog/update-buttons-deprecated-isdefault b/projects/js-packages/partner-coupon/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/connection-ui/changelog/update-buttons-deprecated-isdefault b/projects/packages/connection-ui/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/identity-crisis/changelog/update-buttons-deprecated-isdefault b/projects/packages/identity-crisis/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/my-jetpack/_inc/components/product-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-card/index.jsx
@@ -52,7 +52,7 @@ const ActionButton = ( {
 } ) => {
 	if ( ! admin ) {
 		return (
-			<Button isLink onClick={ onLearn } className={ styles[ 'action-link-button' ] }>
+			<Button variant="link" onClick={ onLearn } className={ styles[ 'action-link-button' ] }>
 				{
 					/* translators: placeholder is product name. */
 					sprintf( __( 'Learn about %s', 'jetpack-my-jetpack' ), name )
@@ -62,15 +62,15 @@ const ActionButton = ( {
 	}
 
 	const buttonState = {
-		isPrimary: ! isFetching,
+		variant: ! isFetching ? 'primary' : undefined,
 		disabled: isFetching,
 	};
 
 	switch ( status ) {
 		case PRODUCT_STATUSES.NEEDS_PURCHASE:
 		case PRODUCT_STATUSES.ABSENT:
 			return (
-				<Button isLink onClick={ onAdd } className={ styles[ 'action-link-button' ] }>
+				<Button variant="link" onClick={ onAdd } className={ styles[ 'action-link-button' ] }>
 					{
 						/* translators: placeholder is product name. */
 						sprintf( __( 'Add %s', 'jetpack-my-jetpack' ), name )

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-button/index.js b/projects/packages/my-jetpack/_inc/components/product-detail-button/index.js
@@ -5,22 +5,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Button, Spinner } from '@wordpress/components';
 
-const ProductDetailButton = ( {
-	children,
-	className,
-	href,
-	isLoading,
-	onClick,
-	isPrimary,
-	isSecondary,
-} ) => {
+const ProductDetailButton = ( { children, className, href, isLoading, onClick, isPrimary } ) => {
 	return (
 		<Button
 			onClick={ onClick }
 			className={ className }
 			href={ href }
-			isPrimary={ isPrimary }
-			isSecondary={ isSecondary }
+			variant={ isPrimary ? 'primary' : 'secondary' }
 			disabled={ isLoading }
 		>
 			{ isLoading ? <Spinner /> : children }

diff --git a/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx b/projects/packages/my-jetpack/_inc/components/product-detail-card/index.jsx
@@ -192,7 +192,6 @@ const ProductDetail = ( { slug, onClick, trackButtonClick } ) => {
 							onClick={ clickHandler }
 							isLoading={ isFetching }
 							isPrimary={ ! isBundle }
-							isSecondary={ isBundle }
 							href={ onClick ? undefined : addProductUrl }
 							className={ `${ styles[ 'checkout-button' ] } ${
 								isBundle ? styles[ 'is-bundle' ] : ''

diff --git a/projects/packages/my-jetpack/changelog/update-buttons-deprecated-isdefault b/projects/packages/my-jetpack/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: update attributes used within the Button component to match recent deprecations and changes.
diff --git a/projects/packages/my-jetpack/changelog/update-buttons-deprecated-isdefault#2 b/projects/packages/my-jetpack/changelog/update-buttons-deprecated-isdefault#2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/search/changelog/update-buttons-deprecated-isdefault b/projects/packages/search/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Components: update attributes used within the Button component to match recent deprecations and changes.
diff --git a/projects/packages/search/changelog/update-buttons-deprecated-isdefault#2 b/projects/packages/search/changelog/update-buttons-deprecated-isdefault#2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/packages/search/src/customberg/components/header/index.jsx b/projects/packages/search/src/customberg/components/header/index.jsx
@@ -32,7 +32,7 @@ function Header( { enableSidebar } ) {
 				<Button
 					aria-label={ __( 'Show settings', 'jetpack-search-pkg' ) }
 					className="jp-search-configure-header__show-settings-button"
-					isSecondary
+					variant="secondary"
 					onClick={ () => enableSidebar() }
 				>
 					<Icon icon={ cog } />

diff --git a/projects/packages/search/src/customberg/components/save-button/index.jsx b/projects/packages/search/src/customberg/components/save-button/index.jsx
@@ -43,7 +43,7 @@ export default function SaveButton() {
 			className="jp-search-configure-save-button"
 			disabled={ ! hasUnsavedEdits }
 			isBusy={ isSaving }
-			isPrimary
+			variant="primary"
 			onClick={ onClick }
 		>
 			{ isSaving

diff --git a/projects/packages/search/src/customberg/components/sidebar/index.jsx b/projects/packages/search/src/customberg/components/sidebar/index.jsx
@@ -35,7 +35,7 @@ export default function Sidebar( props ) {
 				<Button
 					aria-label={ __( 'Show preview', 'jetpack-search-pkg' ) }
 					className="jp-search-configure-sidebar__hide-settings-button"
-					isSecondary
+					variant="secondary"
 					onClick={ disableSidebar }
 				>
 					<Icon icon={ image } />

diff --git a/projects/packages/search/src/customberg/components/sidebar/sidebar-description.jsx b/projects/packages/search/src/customberg/components/sidebar/sidebar-description.jsx
@@ -27,15 +27,15 @@ export default function SidebarDescription() {
 						'jetpack-search-pkg'
 					) }
 				</p>
-				<Button href={ 'widgets.php' } isTertiary>
+				<Button href={ 'widgets.php' } variant="tertiary">
 					{ __( 'Edit widgets', 'jetpack-search-pkg' ) }
 				</Button>
 				<Button
 					href={ addQueryArgs( 'customize.php', {
 						'autofocus[section]': 'jetpack_search',
 						return: `${ window.location.pathname }${ window.location.search }`,
 					} ) }
-					isTertiary
+					variant="tertiary"
 				>
 					{ __( 'Configure in the Customizer', 'jetpack-search-pkg' ) }
 				</Button>

diff --git a/projects/plugins/backup/changelog/update-buttons-deprecated-isdefault b/projects/plugins/backup/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated package dependencies.
diff --git a/projects/plugins/jetpack/_inc/client/components/contextualized-connection/index.jsx b/projects/plugins/jetpack/_inc/client/components/contextualized-connection/index.jsx
@@ -61,7 +61,7 @@ const ContextualizedConnection = props => {
 
 				{ isSiteConnected && (
 					<Button
-						isPrimary
+						variant="primary"
 						className="jp-contextualized-connection__button"
 						label={ __( 'Continue to Jetpack', 'jetpack' ) }
 						href={ redirectTo }

diff --git a/projects/plugins/jetpack/_inc/client/components/forms/index.jsx b/projects/plugins/jetpack/_inc/client/components/forms/index.jsx
@@ -170,7 +170,7 @@ export class FormButton extends React.Component {
 		return (
 			<Button
 				{ ...omit( this.props, 'className' ) }
-				primary={ this.props.isPrimary }
+				variant={ this.props.isPrimary ? 'primary' : undefined }
 				className={ classNames( this.props.className, buttonClasses ) }
 			>
 				{ isEmpty( this.props.children ) ? this.getDefaultButtonAction() : this.props.children }

diff --git a/projects/plugins/jetpack/changelog/update-buttons-deprecated-isdefault b/projects/plugins/jetpack/changelog/update-buttons-deprecated-isdefault
@@ -0,0 +1,4 @@
+Significance: patch
+Type: compat
+
+Blocks: remove deprecated attributes from Button components.
diff --git a/projects/plugins/jetpack/changelog/update-buttons-deprecated-isdefault#2 b/projects/plugins/jetpack/changelog/update-buttons-deprecated-isdefault#2
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Updated package dependencies.
diff --git a/projects/plugins/jetpack/extensions/blocks/amazon/edit.js b/projects/plugins/jetpack/extensions/blocks/amazon/edit.js
@@ -87,7 +87,7 @@ function AmazonEdit( {
 					label={ __( 'Products', 'jetpack' ) }
 					onChange={ onChange }
 				/>
-				<Button isSecondary isLarge type="submit">
+				<Button variant="secondary" type="submit">
 					{ __( 'Preview', 'jetpack' ) }
 				</Button>
 			</form>
@@ -222,7 +222,7 @@ function AmazonEdit( {
 					<Button
 						href={ detailPageUrl }
 						icon={ icon }
-						isPrimary
+						variant="primary"
 						className={ `${ defaultClassName }-button` }
 						style={ {
 							color: buttonTextColor,

diff --git a/projects/plugins/jetpack/extensions/blocks/anchor-fm/editor.js b/projects/plugins/jetpack/extensions/blocks/anchor-fm/editor.js
@@ -83,7 +83,7 @@ const ConvertToAudio = () => {
 				onClick={ handleClick }
 				onKeyDown={ handleClick }
 			>
-				<Button isPrimary href="https://anchor.fm/wordpressdotcom" target="_top">
+				<Button variant="primary" href="https://anchor.fm/wordpressdotcom" target="_top">
 					{ __( 'Create a podcast episode', 'jetpack' ) }{ ' ' }
 					<Icon icon={ external } className="anchor-post-publish-outbound-link__external_icon" />
 				</Button>

diff --git a/projects/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js b/projects/plugins/jetpack/extensions/blocks/business-hours/components/day-edit.js
@@ -46,7 +46,7 @@ class DayEdit extends Component {
 						{ day.hours.length > 1 && (
 							<Button
 								isSmall
-								isLink
+								variant="link"
 								icon="trash"
 								label={ __( 'Remove Hours', 'jetpack' ) }
 								onClick={ () => {
@@ -60,7 +60,11 @@ class DayEdit extends Component {
 					<div className="business-hours__row business-hours-row__add">
 						<div className={ classNames( day.name, 'business-hours__day' ) }>&nbsp;</div>
 						<div className={ classNames( day.name, 'business-hours__hours' ) }>
-							<Button isLink label={ __( 'Add Hours', 'jetpack' ) } onClick={ this.addInterval }>
+							<Button
+								variant="link"
+								label={ __( 'Add Hours', 'jetpack' ) }
+								onClick={ this.addInterval }
+							>
 								{ __( 'Add Hours', 'jetpack' ) }
 							</Button>
 						</div>

diff --git a/projects/plugins/jetpack/extensions/blocks/button/button-width-panel.js b/projects/plugins/jetpack/extensions/blocks/button/button-width-panel.js
@@ -75,7 +75,7 @@ export function ButtonWidthControl( { align, width, onChange } ) {
 								<Button
 									key={ widthValue }
 									isSmall
-									isPrimary={ widthValue === width }
+									variant={ widthValue === width ? 'primary' : undefined }
 									onClick={ () => handleChange( widthValue ) }
 								>
 									{ widthValue }

diff --git a/projects/plugins/jetpack/extensions/blocks/calendly/controls.js b/projects/plugins/jetpack/extensions/blocks/calendly/controls.js
@@ -51,7 +51,7 @@ export const CalendlyInspectorControls = props => {
 						className="components-placeholder__input"
 					/>
 					<div>
-						<Button isSecondary type="submit">
+						<Button variant="secondary" type="submit">
 							{ _x( 'Embed', 'button label', 'jetpack' ) }
 						</Button>
 					</div>

diff --git a/projects/plugins/jetpack/extensions/blocks/calendly/edit.js b/projects/plugins/jetpack/extensions/blocks/calendly/edit.js
@@ -141,7 +141,7 @@ export function CalendlyEdit( props ) {
 					className="components-placeholder__input"
 				/>
 				<div>
-					<Button isSecondary type="submit">
+					<Button variant="secondary" type="submit">
 						{ _x( 'Embed', 'button label', 'jetpack' ) }
 					</Button>
 				</div>

diff --git a/...act-form/components/jetpack-crm-integration/jetpack-crm-integration-settings-extension.js b/...act-form/components/jetpack-crm-integration/jetpack-crm-integration-settings-extension.js
@@ -62,7 +62,7 @@ const CRMJetpackFormsExtensionActivation = ( {
 	}
 
 	return (
-		<Button isSecondary onClick={ onExtensionActivationClick }>
+		<Button variant="secondary" onClick={ onExtensionActivationClick }>
 			{ __( 'Enable Jetpack Forms Extension', 'jetpack' ) }
 		</Button>
 	);

diff --git a/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-width.js b/projects/plugins/jetpack/extensions/blocks/contact-form/components/jetpack-field-width.js
@@ -20,7 +20,7 @@ export default function JetpackFieldWidth( { setAttributes, width } ) {
 						<Button
 							key={ widthValue }
 							isSmall
-							isPrimary={ widthValue === width }
+							variant={ widthValue === width ? 'primary' : undefined }
 							onClick={ () => setAttributes( { width: widthValue } ) }
 						>
 							{ widthValue }%

diff --git a/...s/blocks/contact-form/components/jetpack-newsletter-integration-settings-consent-block.js b/...s/blocks/contact-form/components/jetpack-newsletter-integration-settings-consent-block.js
@@ -37,7 +37,7 @@ const NoConsentBlockSettings = () => {
 					'jetpack'
 				) }
 			</p>
-			<Button isSecondary onClick={ insertConsentBlock } style={ { marginBottom: '1em' } }>
+			<Button variant="secondary" onClick={ insertConsentBlock } style={ { marginBottom: '1em' } }>
 				{ __( 'Add email permission request', 'jetpack' ) }
 			</Button>
 			<br />

diff --git a/...ns/blocks/contact-form/components/jetpack-newsletter-integration-settings-plugin-state.js b/...ns/blocks/contact-form/components/jetpack-newsletter-integration-settings-plugin-state.js
@@ -22,7 +22,7 @@ const CreativeMailPluginIsInstalling = ( { isActivating } ) => {
 		: __( 'Installing…', 'jetpack', /* dummy arg to avoid bad minification */ 0 );
 	return (
 		<Button
-			isSecondary
+			variant="secondary"
 			icon={ <Icon style={ { animation: 'rotation 2s infinite linear' } } icon="update" /> }
 			disabled
 			aria-label={ btnTxt }
@@ -46,7 +46,7 @@ const CreativeMailPluginIsNotInstalled = ( {
 				<br />
 				{ isInstalling && <CreativeMailPluginIsInstalling /> }
 				{ ! isInstalling && (
-					<Button isSecondary onClick={ installAndActivateCreativeMailPlugin }>
+					<Button variant="secondary" onClick={ installAndActivateCreativeMailPlugin }>
 						{ __( 'Install Creative Mail plugin', 'jetpack' ) }
 					</Button>
 				) }
@@ -67,7 +67,7 @@ const CreativeMailPluginIsInstalled = ( { activateCreativeMailPlugin, isInstalli
 			<br />
 			{ isInstalling && <CreativeMailPluginIsInstalling isActivating /> }
 			{ ! isInstalling && (
-				<Button isSecondary onClick={ activateCreativeMailPlugin }>
+				<Button variant="secondary" onClick={ activateCreativeMailPlugin }>
 					{ __( 'Activate Creative Mail Plugin', 'jetpack' ) }
 				</Button>
 			) }