diff --git a/js/src/components/app-button/index.js b/js/src/components/app-button/index.js index b87d3a7e12..1bfe20b44a 100644 --- a/js/src/components/app-button/index.js +++ b/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'; diff --git a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/add-time-modal/index.js b/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/add-time-modal/index.js index 71a03283c0..6d7546a4e3 100644 --- a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/add-time-modal/index.js +++ b/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={ [ - , + , ] } onRequestClose={ onRequestClose } > diff --git a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/index.js b/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/index.js index 4a8299d8f3..c06de0128d 100644 --- a/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/index.js +++ b/js/src/components/free-listings/configure-product-listings/shipping-time/shipping-time-setup/add-time-button/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { Button } from '@wordpress/components'; import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import GridiconPlusSmall from 'gridicons/dist/plus-small'; @@ -9,6 +8,7 @@ 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 ( <> - + { isOpen && ( { __( 'Delete', 'google-listings-and-ads' ) } - , - + { isOpen && ( { > { allowShowExisting && ( - + ) } diff --git a/js/src/components/google-mc-account-card/create-account-button.js b/js/src/components/google-mc-account-card/create-account-button.js index 961a80026c..f588c11d96 100644 --- a/js/src/components/google-mc-account-card/create-account-button.js +++ b/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 ( <> - + } /> ); diff --git a/js/src/components/pre-launch-check-item/index.js b/js/src/components/pre-launch-check-item/index.js index 13f36348c2..d74d34f5a9 100644 --- a/js/src/components/pre-launch-check-item/index.js +++ b/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( { > { children } - + diff --git a/js/src/components/shipping-rate-section/estimated-shipping-rates-card/estimated-shipping-rates-card.js b/js/src/components/shipping-rate-section/estimated-shipping-rates-card/estimated-shipping-rates-card.js index bdcabdfe5c..657f44cb09 100644 --- a/js/src/components/shipping-rate-section/estimated-shipping-rates-card/estimated-shipping-rates-card.js +++ b/js/src/components/shipping-rate-section/estimated-shipping-rates-card/estimated-shipping-rates-card.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import GridiconPlusSmall from 'gridicons/dist/plus-small'; @@ -9,6 +8,7 @@ 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,7 +101,7 @@ export default function EstimatedShippingRatesCard( {
} > @@ -109,7 +109,7 @@ export default function EstimatedShippingRatesCard( { 'Add another rate', 'google-listings-and-ads' ) } - + } modal={ { __( 'Add shipping rate', 'google-listings-and-ads' ) } - , + , ]; } } onSubmit={ onSubmit } diff --git a/js/src/components/shipping-rate-section/estimated-shipping-rates-card/rate-form-modals/edit-rate-form-modal.js b/js/src/components/shipping-rate-section/estimated-shipping-rates-card/rate-form-modals/edit-rate-form-modal.js index 1fc59f9223..b5cb466c2d 100644 --- a/js/src/components/shipping-rate-section/estimated-shipping-rates-card/rate-form-modals/edit-rate-form-modal.js +++ b/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 [ - , - , + , ]; } } onSubmit={ onSubmit } diff --git a/js/src/components/shipping-rate-section/minimum-order-card/minimum-order-form-modals/edit-minimum-order-form-modal.js b/js/src/components/shipping-rate-section/minimum-order-card/minimum-order-form-modals/edit-minimum-order-form-modal.js index fa31b69120..cc57624f10 100644 --- a/js/src/components/shipping-rate-section/minimum-order-card/minimum-order-form-modals/edit-minimum-order-form-modal.js +++ b/js/src/components/shipping-rate-section/minimum-order-card/minimum-order-form-modals/edit-minimum-order-form-modal.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 MinimumOrderFormModal from './minimum-order-form-modal'; /** @@ -53,15 +53,15 @@ const EditMinimumOrderFormModal = ( { }; return [ - , - + ) }
); diff --git a/js/src/css/shared/_gutenberg-components.scss b/js/src/css/shared/_gutenberg-components.scss index 79e91b5ca5..68ead300f5 100644 --- a/js/src/css/shared/_gutenberg-components.scss +++ b/js/src/css/shared/_gutenberg-components.scss @@ -1,5 +1,4 @@ // Import Gutenberg components that aren't already imported in the lowest WC Admin version we support -@import "node_modules/@wordpress/components/src/button/style"; // required for tab-panel @import "node_modules/@wordpress/components/src/panel/style"; // Scope the old styles of core components to GLA pages to avoid styling conflicts with other non-GLA pages. @@ -10,40 +9,35 @@ // - It's fixed from @woocommerce/components // - or @wordpress/components is changed to be imported via (WC)DEWP @import "node_modules/@wordpress/components/src/date-time/date/datepicker"; /* stylelint-disable-line no-invalid-position-at-import-rule */ -} - -.components-button { - // Hack to show correct font color for disabled primary destructive button. - // The color style is copied from https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L67-L72 - &.is-primary.is-destructive:disabled { - color: rgba($white, 0.4); - } - // hack to fix tertiary destructive button. - &.is-tertiary.is-destructive { - box-shadow: none; - - &:hover:not(:disabled) { - box-shadow: none; + .components-button { + // Hack to show correct font color for disabled primary destructive button. + // The color style is copied from https://github.com/WordPress/gutenberg/blob/%40wordpress/components%4012.0.8/packages/components/src/button/style.scss#L67-L72 + &.is-primary.is-destructive:disabled { + color: rgba($white, 0.4); } - } - &.is-link.is-destructive:focus { - box-shadow: none; - color: $alert-red; + // hack to fix tertiary destructive button. + &.is-tertiary.is-destructive { + box-shadow: none; - &:not(:disabled) { - color: $alert-red; + &:hover:not(:disabled) { + box-shadow: none; + } } - } - &.is-link { - text-decoration: none; - } + &.is-link { + text-decoration: none; - // Fix that the panel title is rendered under the button with dropdown arrow. - &.components-panel__body-toggle { - padding-right: $grid-unit-60; + &.is-destructive:focus { + box-shadow: none; + color: $alert-red; + + &:not(:disabled) { + color: $alert-red; + } + } + } } } diff --git a/js/src/dashboard/all-programs-table-card/edit-program-button/edit-program-prompt-modal/index.js b/js/src/dashboard/all-programs-table-card/edit-program-button/edit-program-prompt-modal/index.js index 0c79c968fa..8d00ea08b1 100644 --- a/js/src/dashboard/all-programs-table-card/edit-program-button/edit-program-prompt-modal/index.js +++ b/js/src/dashboard/all-programs-table-card/edit-program-button/edit-program-prompt-modal/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { getHistory } from '@woocommerce/navigation'; import { recordEvent } from '@woocommerce/tracks'; @@ -10,6 +9,7 @@ import { recordEvent } from '@woocommerce/tracks'; * Internal dependencies */ import { FREE_LISTINGS_PROGRAM_ID } from '.~/constants'; +import AppButton from '.~/components/app-button'; import AppModal from '.~/components/app-modal'; import './index.scss'; import { getEditFreeListingsUrl, getEditCampaignUrl } from '.~/utils/urls'; @@ -53,12 +53,16 @@ const EditProgramPromptModal = ( { programId, onRequestClose } ) => { className="gla-edit-program-prompt-modal" title={ __( 'Before you edit…', 'google-listings-and-ads' ) } buttons={ [ - , - , + , ] } onRequestClose={ onRequestClose } > diff --git a/js/src/dashboard/all-programs-table-card/edit-program-button/index.js b/js/src/dashboard/all-programs-table-card/edit-program-button/index.js index 3c94c7f17f..42f83f37f1 100644 --- a/js/src/dashboard/all-programs-table-card/edit-program-button/index.js +++ b/js/src/dashboard/all-programs-table-card/edit-program-button/index.js @@ -2,11 +2,11 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; /** * Internal dependencies */ +import AppButton from '.~/components/app-button'; import EditProgramPromptModal from './edit-program-prompt-modal'; import AppButtonModalTrigger from '.~/components/app-button-modal-trigger'; @@ -16,9 +16,9 @@ const EditProgramButton = ( props ) => { return ( + { __( 'Edit', 'google-listings-and-ads' ) } - + } modal={ } /> diff --git a/js/src/dashboard/all-programs-table-card/program-toggle/pause-program-modal/index.js b/js/src/dashboard/all-programs-table-card/program-toggle/pause-program-modal/index.js index e60482497b..ba628b0fcb 100644 --- a/js/src/dashboard/all-programs-table-card/program-toggle/pause-program-modal/index.js +++ b/js/src/dashboard/all-programs-table-card/program-toggle/pause-program-modal/index.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 AppModal from '.~/components/app-modal'; import './index.scss'; @@ -34,12 +34,20 @@ const PauseProgramModal = ( props ) => { className="gla-pause-program-modal" title={ __( 'Before you pause…', 'google-listings-and-ads' ) } buttons={ [ - , - , + , ] } onRequestClose={ onRequestClose } > diff --git a/js/src/dashboard/all-programs-table-card/remove-program-button/index.js b/js/src/dashboard/all-programs-table-card/remove-program-button/index.js index 4f5a3dc3b6..f929393305 100644 --- a/js/src/dashboard/all-programs-table-card/remove-program-button/index.js +++ b/js/src/dashboard/all-programs-table-card/remove-program-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 RemoveProgramModal from './remove-program-modal'; const RemoveProgramButton = ( props ) => { @@ -24,9 +24,9 @@ const RemoveProgramButton = ( props ) => { return ( <> - + { isOpen && ( { title={ __( 'Permanently Remove?', 'google-listings-and-ads' ) } isDismissible={ ! isDeleting } buttons={ [ - , + , , - , + , ] } >
diff --git a/js/src/dashboard/index.js b/js/src/dashboard/index.js index 892cab4469..969b341982 100644 --- a/js/src/dashboard/index.js +++ b/js/src/dashboard/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { Button } from '@wordpress/components'; import { useState, useCallback } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Link } from '@woocommerce/components'; @@ -11,6 +10,7 @@ import { recordEvent } from '@woocommerce/tracks'; /** * Internal dependencies */ +import AppButton from '.~/components/app-button'; import DifferentCurrencyNotice from '.~/components/different-currency-notice'; import CampaignConversionDashboardNotice from '.~/components/campaign-conversion-notice'; import NavigationClassic from '.~/components/navigation-classic'; @@ -73,9 +73,9 @@ const Dashboard = () => { const ReportsLink = () => { return ( - + ); }; diff --git a/js/src/external-components/woocommerce/compare-filter/index.js b/js/src/external-components/woocommerce/compare-filter/index.js index 385648bca5..1a1fa6fa4e 100644 --- a/js/src/external-components/woocommerce/compare-filter/index.js +++ b/js/src/external-components/woocommerce/compare-filter/index.js @@ -9,13 +9,8 @@ */ import { __ } from '@wordpress/i18n'; import { Component } from '@wordpress/element'; -import { - Button, - Card, - CardBody, - CardFooter, - CardHeader, -} from '@wordpress/components'; +import { Card, CardBody, CardFooter, CardHeader } from '@wordpress/components'; +import { Button } from 'extracted/@wordpress/components'; import { isEqual, isFunction } from 'lodash'; import PropTypes from 'prop-types'; import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation'; diff --git a/js/src/external-components/woocommerce/filter-picker/index.js b/js/src/external-components/woocommerce/filter-picker/index.js index 723eb90146..a43723b362 100644 --- a/js/src/external-components/woocommerce/filter-picker/index.js +++ b/js/src/external-components/woocommerce/filter-picker/index.js @@ -8,7 +8,8 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { Button, Dropdown } from '@wordpress/components'; +import { Dropdown } from '@wordpress/components'; +import { Button } from 'extracted/@wordpress/components'; import { focus } from '@wordpress/dom'; import classnames from 'classnames'; import { Component } from '@wordpress/element'; diff --git a/js/src/external-components/wordpress/guide/finish-button.js b/js/src/external-components/wordpress/guide/finish-button.js index d2dc41f448..05c0dabf30 100644 --- a/js/src/external-components/wordpress/guide/finish-button.js +++ b/js/src/external-components/wordpress/guide/finish-button.js @@ -9,7 +9,7 @@ * External dependencies */ import { useRef, useLayoutEffect } from '@wordpress/element'; -import { Button } from '@wordpress/components'; +import { Button } from 'extracted/@wordpress/components'; export default function FinishButton( props ) { const ref = useRef(); diff --git a/js/src/external-components/wordpress/guide/index.js b/js/src/external-components/wordpress/guide/index.js index 7bdc75771c..ca428d7661 100644 --- a/js/src/external-components/wordpress/guide/index.js +++ b/js/src/external-components/wordpress/guide/index.js @@ -11,7 +11,8 @@ import classnames from 'classnames'; import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Modal, KeyboardShortcuts, Button } from '@wordpress/components'; +import { Modal, KeyboardShortcuts } from '@wordpress/components'; +import { Button } from 'extracted/@wordpress/components'; /** * Internal dependencies diff --git a/js/src/external-components/wordpress/guide/page-control.js b/js/src/external-components/wordpress/guide/page-control.js index af52611431..26cc9f0d29 100644 --- a/js/src/external-components/wordpress/guide/page-control.js +++ b/js/src/external-components/wordpress/guide/page-control.js @@ -10,7 +10,7 @@ */ import { times } from 'lodash'; import { __, sprintf } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; +import { Button } from 'extracted/@wordpress/components'; /** * Internal dependencies diff --git a/js/src/product-feed/product-feed-table-card/edit-visibility-action.js b/js/src/product-feed/product-feed-table-card/edit-visibility-action.js index 84ef1a4204..9681d44f29 100644 --- a/js/src/product-feed/product-feed-table-card/edit-visibility-action.js +++ b/js/src/product-feed/product-feed-table-card/edit-visibility-action.js @@ -3,13 +3,14 @@ */ import { __, sprintf } from '@wordpress/i18n'; import { useState, useEffect } from '@wordpress/element'; -import { Button, Icon } from '@wordpress/components'; +import { Icon } from '@wordpress/components'; import { SelectControl } from '@woocommerce/components'; import { edit as editIcon } from '@wordpress/icons'; /** * Internal dependencies */ +import AppButton from '.~/components/app-button'; import AppTooltip from '.~/components/app-tooltip'; const tipText = __( 'Select channel visibility', 'google-listings-and-ads' ); @@ -90,7 +91,7 @@ export default function EditVisibilityAction( { position="top center" text={ tipText } > - + ) } ); diff --git a/js/src/product-feed/submission-success-guide/index.js b/js/src/product-feed/submission-success-guide/index.js index 683de092b6..ecc32b62a9 100644 --- a/js/src/product-feed/submission-success-guide/index.js +++ b/js/src/product-feed/submission-success-guide/index.js @@ -8,7 +8,6 @@ import { useCallback, } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { Button } from '@wordpress/components'; import { recordEvent } from '@woocommerce/tracks'; /** @@ -18,6 +17,7 @@ import Guide from '.~/external-components/wordpress/guide'; import GuidePageContent, { ContentLink, } from '.~/components/guide-page-content'; +import AppButton from '.~/components/app-button'; import AddPaidCampaignButton from '.~/components/paid-ads/add-paid-campaign-button'; import { glaData, GUIDE_NAMES, LOCAL_STORAGE_KEYS } from '.~/constants'; import localStorage from '.~/utils/localStorage'; @@ -169,26 +169,26 @@ const SubmissionSuccessGuide = () => { const renderFinish = useCallback( () => { if ( glaData.adsSetupComplete ) { return ( - + ); } return ( <>
- + { __( 'Compare', 'google-listings-and-ads' ) } - + } isLoading={ isLoading } headers={ getHeaders( data ) } diff --git a/js/src/settings/disconnect-modal/confirm-modal.js b/js/src/settings/disconnect-modal/confirm-modal.js index 3d1b8181c3..a6c4dd4480 100644 --- a/js/src/settings/disconnect-modal/confirm-modal.js +++ b/js/src/settings/disconnect-modal/confirm-modal.js @@ -2,7 +2,7 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import { Button, CheckboxControl } from '@wordpress/components'; +import { CheckboxControl } from '@wordpress/components'; import { useState } from '@wordpress/element'; /** @@ -116,14 +116,14 @@ export default function ConfirmModal( { } isDismissible={ ! isDisconnecting } buttons={ [ - , + , - + ); diff --git a/js/src/setup-mc/setup-stepper/setup-accounts/index.js b/js/src/setup-mc/setup-stepper/setup-accounts/index.js index 4437415e1d..2d030d85db 100644 --- a/js/src/setup-mc/setup-stepper/setup-accounts/index.js +++ b/js/src/setup-mc/setup-stepper/setup-accounts/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { Button } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { createInterpolateElement } from '@wordpress/element'; @@ -11,6 +10,7 @@ import { createInterpolateElement } from '@wordpress/element'; import useJetpackAccount from '.~/hooks/useJetpackAccount'; import useGoogleAccount from '.~/hooks/useGoogleAccount'; import useGoogleMCAccount from '.~/hooks/useGoogleMCAccount'; +import AppButton from '.~/components/app-button'; import AppSpinner from '.~/components/app-spinner'; import StepContent from '.~/components/stepper/step-content'; import StepContentHeader from '.~/components/stepper/step-content-header'; @@ -142,13 +142,13 @@ const SetupAccounts = ( props ) => { - + );