Use AppButton with extracted Button component

js/src/components/app-button/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button } from 'extracted/@wordpress/components';
 import { Spinner } from '@woocommerce/components';
 import { recordEvent } from '@woocommerce/tracks';
 import classnames from 'classnames';

js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/add-time-modal/index.js

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Form } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import AppModal from '.~/components/app-modal';
 import AppInputNumberControl from '.~/components/app-input-number-control';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
@@ -53,7 +53,7 @@ const AddTimeModal = ( { countries, onRequestClose, onSubmit } ) => {
 							'google-listings-and-ads'
 						) }
 						buttons={ [
-							<Button
+							<AppButton
 								key="save"
 								isPrimary
 								disabled={ ! isValidForm }
@@ -63,7 +63,7 @@ const AddTimeModal = ( { countries, onRequestClose, onSubmit } ) => {
 									'Add shipping time',
 									'google-listings-and-ads'
 								) }
-							</Button>,
+							</AppButton>,
 						] }
 						onRequestClose={ onRequestClose }
 					>

js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/index.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import GridiconPlusSmall from 'gridicons/dist/plus-small';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import AddTimeModal from './add-time-modal';
 
 /**
@@ -30,13 +30,13 @@ const AddTimeButton = ( props ) => {
 
 	return (
 		<>
-			<Button
+			<AppButton
 				isSecondary
 				icon={ <GridiconPlusSmall /> }
 				onClick={ handleClick }
 			>
 				{ __( 'Add another time', 'google-listings-and-ads' ) }
-			</Button>
+			</AppButton>
 			{ isOpen && (
 				<AddTimeModal
 					onRequestClose={ handleModalRequestClose }

js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/edit-time-button/edit-time-modal/index.js

@@ -2,13 +2,13 @@
  * External dependencies
  */
 import { useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { Form } from '@woocommerce/components';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import AppModal from '.~/components/app-modal';
 import AppInputNumberControl from '.~/components/app-input-number-control';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
@@ -74,15 +74,15 @@ const EditTimeModal = ( {
 							'google-listings-and-ads'
 						) }
 						buttons={ [
-							<Button
+							<AppButton
 								key="delete"
 								isTertiary
 								isDestructive
 								onClick={ handleDeleteClick }
 							>
 								{ __( 'Delete', 'google-listings-and-ads' ) }
-							</Button>,
-							<Button
+							</AppButton>,
+							<AppButton
 								key="save"
 								isPrimary
 								disabled={ ! isValidForm }
@@ -92,7 +92,7 @@ const EditTimeModal = ( {
 									'Update shipping time',
 									'google-listings-and-ads'
 								) }
-							</Button>,
+							</AppButton>,
 						] }
 						onRequestClose={ onRequestClose }
 					>

js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/countries-time-input/edit-time-button/index.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import EditTimeModal from './edit-time-modal';
 import './index.scss';
 
@@ -43,13 +43,13 @@ const EditTimeButton = ( { audienceCountries, time, onChange, onDelete } ) => {
 
 	return (
 		<>
-			<Button
+			<AppButton
 				className="gla-edit-time-button"
 				isTertiary
 				onClick={ handleClick }
 			>
 				{ __( 'Edit', 'google-listings-and-ads' ) }
-			</Button>
+			</AppButton>
 			{ isOpen && (
 				<EditTimeModal
 					audienceCountries={ audienceCountries }

js/src/components/google-ads-account-card/create-account.js

@@ -3,12 +3,12 @@
  */
 import { __ } from '@wordpress/i18n';
 import { useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import Section from '.~/wcdl/section';
+import AppButton from '.~/components/app-button';
 import AccountCard, { APPEARANCE } from '.~/components/account-card';
 import CreateAccountButton from './create-account-button';
 import useApiFetchCallback from '.~/hooks/useApiFetchCallback';
@@ -70,12 +70,12 @@ const CreateAccount = ( props ) => {
 		>
 			{ allowShowExisting && (
 				<Section.Card.Footer>
-					<Button isLink onClick={ onShowExisting }>
+					<AppButton isLink onClick={ onShowExisting }>
 						{ __(
 							'Or, use your existing Google Ads account',
 							'google-listings-and-ads'
 						) }
-					</Button>
+					</AppButton>
 				</Section.Card.Footer>
 			) }
 		</AccountCard>

js/src/components/google-mc-account-card/create-account-button.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { useState } from '@wordpress/element';
 import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import WarningModal from './warning-modal';
 import TermsModal from './terms-modal';
 import useExistingGoogleMCAccounts from '.~/hooks/useExistingGoogleMCAccounts';
@@ -41,7 +41,7 @@ const CreateAccountButton = ( props ) => {
 
 	return (
 		<>
-			<Button onClick={ handleCreateAccountClick } { ...rest } />
+			<AppButton onClick={ handleCreateAccountClick } { ...rest } />
 			{ activeModal === MODALS.WARNING && (
 				<WarningModal
 					existingAccount={ matchingDomainAccount }

js/src/components/google-mc-account-card/disabled-card.js

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import AccountCard, { APPEARANCE } from '.~/components/account-card';
 
 const DisabledCard = () => {
@@ -15,9 +15,9 @@ const DisabledCard = () => {
 			disabled
 			appearance={ APPEARANCE.GOOGLE_MERCHANT_CENTER }
 			indicator={
-				<Button isSecondary disabled>
+				<AppButton isSecondary disabled>
 					{ __( 'Create account', 'google-listings-and-ads' ) }
-				</Button>
+				</AppButton>
 			}
 		/>
 	);

js/src/components/pre-launch-check-item/index.js

@@ -3,7 +3,6 @@
  */
 import { __ } from '@wordpress/i18n';
 import {
-	Button,
 	CheckboxControl,
 	Panel,
 	PanelBody,
@@ -15,6 +14,7 @@ import { useRef } from '@wordpress/element';
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import './index.scss';
 
 const getPanelToggleHandler = ( id ) => ( isOpened ) => {
@@ -60,12 +60,12 @@ export default function PreLaunchCheckItem( {
 				>
 					<PanelRow>
 						{ children }
-						<Button
+						<AppButton
 							isPrimary
 							onClick={ () => setValue( fieldName, true ) }
 						>
 							{ __( 'Confirm', 'google-listings-and-ads' ) }
-						</Button>
+						</AppButton>
 					</PanelRow>
 				</PanelBody>
 			</Panel>

js/src/components/shipping-rate-section/estimated-shipping-rates-card/estimated-shipping-rates-card.js

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import GridiconPlusSmall from 'gridicons/dist/plus-small';
 
 /**
  * Internal dependencies
  */
 import Section from '.~/wcdl/section';
+import AppButton from '.~/components/app-button';
 import AppButtonModalTrigger from '.~/components/app-button-modal-trigger';
 import VerticalGapLayout from '.~/components/vertical-gap-layout';
 import useStoreCurrency from '.~/hooks/useStoreCurrency';
@@ -101,15 +101,15 @@ export default function EstimatedShippingRatesCard( {
 					<div>
 						<AppButtonModalTrigger
 							button={
-								<Button
+								<AppButton
 									isSecondary
 									icon={ <GridiconPlusSmall /> }
 								>
 									{ __(
 										'Add another rate',
 										'google-listings-and-ads'
 									) }
-								</Button>
+								</AppButton>
 							}
 							modal={
 								<AddRateFormModal

js/src/components/shipping-rate-section/estimated-shipping-rates-card/rate-form-modals/add-rate-form-modal.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import RateFormModal from './rate-form-modal.js';
 
 /**
@@ -43,14 +43,14 @@ const AddRateFormModal = ( {
 				};
 
 				return [
-					<Button
+					<AppButton
 						key="submit"
 						isPrimary
 						disabled={ ! isValidForm }
 						onClick={ handleAddClick }
 					>
 						{ __( 'Add shipping rate', 'google-listings-and-ads' ) }
-					</Button>,
+					</AppButton>,
 				];
 			} }
 			onSubmit={ onSubmit }

js/src/components/shipping-rate-section/estimated-shipping-rates-card/rate-form-modals/edit-rate-form-modal.js

@@ -1,13 +1,13 @@
 /**
  * External dependencies
  */
-import { Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { noop } from 'lodash';
 
 /**
  * Internal dependencies
  */
+import AppButton from '.~/components/app-button';
 import RateFormModal from './rate-form-modal.js';
 
 /**
@@ -50,15 +50,15 @@ const EditRateFormModal = ( {
 				};
 
 				return [
-					<Button
+					<AppButton
 						key="delete"
 						isTertiary
 						isDestructive
 						onClick={ handleDeleteClick }
 					>
 						{ __( 'Delete', 'google-listings-and-ads' ) }
-					</Button>,
-					<Button
+					</AppButton>,
+					<AppButton
 						key="submit"
 						isPrimary
 						disabled={ ! isValidForm }
@@ -68,7 +68,7 @@ const EditRateFormModal = ( {
 							'Update shipping rate',
 							'google-listings-and-ads'
 						) }
-					</Button>,
+					</AppButton>,
 				];
 			} }
 			onSubmit={ onSubmit }

js/src/components/shipping-rate-section/estimated-shipping-rates-card/rate-form-modals/rate-form-modal.js

@@ -16,7 +16,7 @@ import VerticalGapLayout from '.~/components/vertical-gap-layout';
 import SupportedCountrySelect from '.~/components/supported-country-select';
 
 /**
- * @typedef { import("@wordpress/components").Button } Button
+ * @typedef { import(".~/components/app-button").default } AppButton
  * @typedef { import(".~/data/actions").CountryCode } CountryCode
  * @typedef { import("../typedefs.js").ShippingRateGroup } ShippingRateGroup
  */
@@ -29,7 +29,7 @@ import SupportedCountrySelect from '.~/components/supported-country-select';
  * @param {Object} props
  * @param {Array<CountryCode>} props.countryOptions Array of country codes, to be used as options in SupportedCountrySelect.
  * @param {ShippingRateGroup} props.initialValues Initial values for the form.
- * @param {(formProps: Object) => Array<Button>} props.renderButtons Function to render buttons for the modal. `formProps` will be passed into this render function.
+ * @param {(formProps: Object) => Array<AppButton>} props.renderButtons Function to render buttons for the modal. `formProps` will be passed into this render function.
  * @param {(values: ShippingRateGroup) => void} props.onSubmit Called with submitted value.
  * @param {() => void} props.onRequestClose Callback to close the modal.
  */