Replace Spinner from jetpack-components with wp-components Spinner

projects/js-packages/components/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: minor
+Type: removed
+
+Spinner: Remove Spinner component in favor of the one from `@wordpress/components`.

projects/js-packages/components/index.ts

@@ -25,7 +25,6 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.tsx';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.tsx';
 export { default as JetpackFooter } from './components/jetpack-footer/index.tsx';
-export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gridicon } from './components/gridicon/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';
 export { default as ActionButton } from './components/action-button/index.tsx';

projects/js-packages/connection/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Connection Error Notice: Replace Spinner from `@automattic/jetpack-components` with the one from `@wordpress/components`.

projects/js-packages/connection/components/connect-screen/required-plan/style.scss

@@ -100,10 +100,5 @@
 			}
 		}
 
-		.jp-components-spinner__inner,
-		.jp-components-spinner__outer {
-			border-top-color: var(--jp-black);
-			border-right-color: var(--jp-black);
-		}
 	}
 }

projects/js-packages/connection/components/connection-error-notice/index.tsx

@@ -1,5 +1,4 @@
-import { Spinner } from '@automattic/jetpack-components';
-import { Icon, Notice, Path, SVG } from '@wordpress/components';
+import { Icon, Notice, Path, Spinner, SVG } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import styles from './styles.module.scss';
@@ -44,7 +43,7 @@ const ConnectionErrorNotice = ( {
 		return (
 			<Notice status={ 'error' } isDismissible={ false } className={ wrapperClassName }>
 				<div className={ styles.message }>
-					<Spinner color="#B32D2E" size={ 24 } />
+					<Spinner />
 					{ __( 'Reconnecting Jetpack', 'jetpack-connection-js' ) }
 				</div>
 			</Notice>

projects/js-packages/connection/components/connection-error-notice/styles.module.scss

@@ -149,7 +149,4 @@
 		margin-right: calc(var(--spacing-base) * 2); // 16px
 	}
 
-	:global(.jp-components-spinner) {
-		margin-right: calc(var(--spacing-base) * 2); // 16px
-	}
 }

projects/js-packages/idc/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace Spinner from `@automattic/jetpack-components` with the one from `@wordpress/components`.

projects/js-packages/idc/components/card-fresh/index.jsx

@@ -1,5 +1,5 @@
-import { getRedirectUrl, Spinner } from '@automattic/jetpack-components';
-import { Button, Dashicon } from '@wordpress/components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { Button, Dashicon, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';

projects/js-packages/idc/components/card-migrate/index.jsx

@@ -1,5 +1,5 @@
-import { getRedirectUrl, Spinner } from '@automattic/jetpack-components';
-import { Button, Dashicon } from '@wordpress/components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { Button, Dashicon, Spinner } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';

projects/js-packages/idc/components/idc-screen/screen-migrated.jsx

@@ -1,5 +1,4 @@
-import { Spinner } from '@automattic/jetpack-components';
-import { Button, Dashicon } from '@wordpress/components';
+import { Button, Dashicon, Spinner } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import PropTypes from 'prop-types';

projects/js-packages/idc/components/safe-mode/index.jsx

@@ -1,6 +1,6 @@
 import restApi from '@automattic/jetpack-api';
-import { getRedirectUrl, Spinner } from '@automattic/jetpack-components';
-import { Button } from '@wordpress/components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { Button, Spinner } from '@wordpress/components';
 import { compose } from '@wordpress/compose';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { createInterpolateElement } from '@wordpress/element';
@@ -46,7 +46,7 @@ const renderStaySafeButton = ( callback, isDisabled ) => {
 const renderStayingSafe = () => {
 	return (
 		<div className="jp-idc__safe-mode__staying-safe">
-			<Spinner color="black" />
+			<Spinner />
 			<span>{ __( 'Finishing setting up Safe mode…', 'jetpack-idc' ) }</span>
 		</div>
 	);
@@ -181,7 +181,7 @@ const SafeMode = props => {
 							onClick={ staySafeCallback }
 							disabled={ isActionInProgress }
 						>
-							{ isStayingSafe ? <Spinner color="black" /> : buttonLabel }
+							{ isStayingSafe ? <Spinner /> : buttonLabel }
 						</Button>
 
 						{ hasError && renderError( customContent.supportURL ) }

projects/js-packages/idc/components/safe-mode/style.scss

@@ -6,9 +6,6 @@
 		justify-content: center;
 		padding: 6px;
 
-		.jp-components-spinner {
-			margin: 0 10px;
-		}
 	}
 
 	&,

projects/js-packages/licensing/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace Spinner from `@automattic/jetpack-components` with the one from `@wordpress/components`.

projects/js-packages/licensing/components/activation-screen-controls/index.jsx

@@ -1,6 +1,6 @@
 import jetpackAnalytics from '@automattic/jetpack-analytics';
-import { JetpackLogo, Spinner } from '@automattic/jetpack-components';
-import { Button, TextControl, SelectControl } from '@wordpress/components';
+import { JetpackLogo } from '@automattic/jetpack-components';
+import { Button, SelectControl, Spinner, TextControl } from '@wordpress/components';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';

projects/js-packages/licensing/components/activation-screen-controls/style.scss

@@ -122,8 +122,5 @@
 			color: var(--jp-gray-20);
 		}
 
-		.jp-components-spinner {
-			width: 100%;
-		}
 	}
 }

projects/js-packages/licensing/components/activation-screen-success-info/primary-link/index.jsx

@@ -1,5 +1,5 @@
-import { Spinner, getRedirectUrl } from '@automattic/jetpack-components';
-import { Button } from '@wordpress/components';
+import { getRedirectUrl } from '@automattic/jetpack-components';
+import { Button, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import PropTypes from 'prop-types';
 import useActivePlugins from '../../../hooks/use-active-plugins';

projects/js-packages/licensing/components/activation-screen-success-info/primary-link/style.scss

@@ -41,8 +41,5 @@
 			color: var(--jp-gray-20);
 		}
 
-		.jp-components-spinner {
-			width: 100%;
-		}
 	}
 }

projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx

@@ -3,8 +3,8 @@ import {
 	requestSpeedScores,
 	calculateDaysSince,
 } from '@automattic/jetpack-boost-score-api';
-import { Spinner, BoostScoreBar } from '@automattic/jetpack-components';
-import { Popover } from '@wordpress/components';
+import { BoostScoreBar } from '@automattic/jetpack-components';
+import { Popover, Spinner } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { __, sprintf } from '@wordpress/i18n';
 import { arrowUp, Icon } from '@wordpress/icons';
@@ -225,7 +225,7 @@ const BoostSpeedScore: BoostSpeedScoreType = () => {
 				onBlur={ handleOut }
 			>
 				{ isLoading ? (
-					<Spinner color="#23282d" size={ 16 } />
+					<Spinner />
 				) : (
 					<>
 						<div className="screen-reader-text">

projects/packages/my-jetpack/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace Spinner from `@automattic/jetpack-components` with the one from `@wordpress/components`.

projects/plugins/automattic-for-agencies-client/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace Spinner from `@automattic/jetpack-components` with the one from `@wordpress/components`.

projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/index.jsx

@@ -1,6 +1,6 @@
 import restApi from '@automattic/jetpack-api';
-import { Button, Spinner } from '@automattic/jetpack-components';
-import { Modal } from '@wordpress/components';
+import { Button } from '@automattic/jetpack-components';
+import { Modal, Spinner } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useEffect, useState } from 'react';
 import styles from './styles.module.scss';

projects/plugins/boost/app/assets/src/js/features/performance-history/graph-component/graph-component.module.scss

@@ -2,10 +2,4 @@
 	position: relative;
 	min-height: 300px;
 
-	:global(.jp-components-spinner) {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-	}
 }

projects/plugins/boost/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Replace spinner component with new one.

projects/plugins/protect/changelog/update-rna-components-spinner

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Replace Spinner from `@automattic/jetpack-components` with the one from `@wordpress/components`.

projects/plugins/protect/src/js/components/paid-accordion/index.jsx

@@ -1,6 +1,6 @@
-import { IconTooltip, Spinner, Text, useBreakpointMatch } from '@automattic/jetpack-components';
+import { IconTooltip, Text, useBreakpointMatch } from '@automattic/jetpack-components';
 import { ThreatSeverityBadge } from '@automattic/jetpack-scan';
-import { ExternalLink } from '@wordpress/components';
+import { ExternalLink, Spinner } from '@wordpress/components';
 import { dateI18n } from '@wordpress/date';
 import { createInterpolateElement } from '@wordpress/element';
 import { sprintf, __ } from '@wordpress/i18n';
@@ -92,7 +92,7 @@ const renderFixerStatus = ( isActiveFixInProgress, isStaleFixInProgress ) => {
 	}
 
 	if ( isActiveFixInProgress ) {
-		return <Spinner color="black" />;
+		return <Spinner />;
 	}
 
 	return <Icon icon={ check } className={ styles[ 'icon-check' ] } size={ 28 } />;