diff --git a/projects/js-packages/components/changelog/update-rna-components-spinner b/projects/js-packages/components/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..c5e506aba5e1 --- /dev/null +++ b/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`. diff --git a/projects/js-packages/components/components/spinner/README.md b/projects/js-packages/components/components/spinner/README.md deleted file mode 100644 index 9ec8b1576077..000000000000 --- a/projects/js-packages/components/components/spinner/README.md +++ /dev/null @@ -1,28 +0,0 @@ -# Spinner (DEPRECATED) - -## We encourage to use [core Spinner](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/spinner#readme) component instead ---------- - -Spinner is a React component for rendering a loading indicator. - -## Usage - -```jsx -import { Component } from 'react'; -import Spinner from '@automattic/jetpack-components'; - -export default class extends Component { - render() { - return ; - } -} -``` - -## Props - -The following props can be passed to the Spinner component: - -| PROPERTY | TYPE | REQUIRED | DEFAULT | DESCRIPTION | -| --------- | -------- | -------- | --------- | ----------------------------------------------- | -| **size** | _number_ | no | `20` | The width and height of the spinner, in pixels. | -| **color** | _strong_ | no | `#000000` | The color of the spinner, in hex. | diff --git a/projects/js-packages/components/components/spinner/index.tsx b/projects/js-packages/components/components/spinner/index.tsx deleted file mode 100644 index b1759d7cff34..000000000000 --- a/projects/js-packages/components/components/spinner/index.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import PropTypes from 'prop-types'; - -import './style.scss'; - -const Spinner = ( { color = '#FFFFFF', className = '', size = 20 } ) => { - const theClassName = className + ' jp-components-spinner'; - - const styleOuter = { - width: size, - height: size, - fontSize: size, // allows border-width to be specified in em units - borderTopColor: color, - }; - - const styleInner = { - borderTopColor: color, - borderRightColor: color, - }; - - return ( -
-
-
-
-
- ); -}; - -Spinner.propTypes = { - /** The spinner color. */ - color: PropTypes.string, - /** CSS class names. */ - className: PropTypes.string, - /** The spinner size. */ - size: PropTypes.number, -}; - -export default Spinner; diff --git a/projects/js-packages/components/components/spinner/stories/index.stories.tsx b/projects/js-packages/components/components/spinner/stories/index.stories.tsx deleted file mode 100644 index 3e4abdd74eaf..000000000000 --- a/projects/js-packages/components/components/spinner/stories/index.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import Spinner from '../index.tsx'; - -export default { - title: 'JS Packages/Components/Spinner', - component: Spinner, - argTypes: { - color: { control: 'color' }, - }, - globals: { - backgrounds: { - value: 'dark', - }, - }, -}; - -const Template = args => ; - -export const _default = Template.bind( {} ); diff --git a/projects/js-packages/components/components/spinner/style.scss b/projects/js-packages/components/components/spinner/style.scss deleted file mode 100644 index 70d3b0a3ad31..000000000000 --- a/projects/js-packages/components/components/spinner/style.scss +++ /dev/null @@ -1,33 +0,0 @@ -@keyframes rotate-spinner { - - 100% { - transform: rotate(360deg); - } -} - -.jp-components-spinner { - display: flex; - align-items: center; -} - -.jp-components-spinner__outer, -.jp-components-spinner__inner { - margin: auto; - box-sizing: border-box; - border: 0.1em solid transparent; - border-radius: 50%; - animation: 3s linear infinite; - animation-name: rotate-spinner; -} - -.jp-components-spinner__outer { - border-top-color: #fff; -} - -.jp-components-spinner__inner { - width: 100%; - height: 100%; - border-top-color: #fff; - border-right-color: #fff; - opacity: 0.4; -} diff --git a/projects/js-packages/components/components/spinner/test/component.tsx b/projects/js-packages/components/components/spinner/test/component.tsx deleted file mode 100644 index 80e7b620d069..000000000000 --- a/projects/js-packages/components/components/spinner/test/component.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { render } from '@testing-library/react'; -import Spinner from '../index.tsx'; - -describe( 'Spinner', () => { - const testProps = { - className: 'sample-classname', - }; - - describe( 'Render the Spinner component', () => { - const { container } = render( ); - - it( 'validate the class name', () => { - // eslint-disable-next-line testing-library/no-node-access - expect( container.firstChild ).toHaveClass( 'sample-classname' ); - } ); - } ); -} ); diff --git a/projects/js-packages/components/index.ts b/projects/js-packages/components/index.ts index b36eea7bd7d2..3b12297b4f54 100644 --- a/projects/js-packages/components/index.ts +++ b/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'; diff --git a/projects/js-packages/connection/changelog/update-rna-components-spinner b/projects/js-packages/connection/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..fd66719dd85b --- /dev/null +++ b/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`. diff --git a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss b/projects/js-packages/connection/components/connect-screen/required-plan/style.scss index 89c53b2084fa..16d9c7d339ba 100644 --- a/projects/js-packages/connection/components/connect-screen/required-plan/style.scss +++ b/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); - } } } diff --git a/projects/js-packages/connection/components/connection-error-notice/index.tsx b/projects/js-packages/connection/components/connection-error-notice/index.tsx index 9bec39e2e71a..1378d12a7e08 100644 --- a/projects/js-packages/connection/components/connection-error-notice/index.tsx +++ b/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 (
- + { __( 'Reconnecting Jetpack', 'jetpack-connection-js' ) }
diff --git a/projects/js-packages/connection/components/connection-error-notice/styles.module.scss b/projects/js-packages/connection/components/connection-error-notice/styles.module.scss index a8f436439bbc..49a5bc08a367 100644 --- a/projects/js-packages/connection/components/connection-error-notice/styles.module.scss +++ b/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 - } } diff --git a/projects/js-packages/idc/changelog/update-rna-components-spinner b/projects/js-packages/idc/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..cc78364998a2 --- /dev/null +++ b/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`. diff --git a/projects/js-packages/idc/components/card-fresh/index.jsx b/projects/js-packages/idc/components/card-fresh/index.jsx index 1cf0eac8d0fb..9217fd686e54 100644 --- a/projects/js-packages/idc/components/card-fresh/index.jsx +++ b/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'; diff --git a/projects/js-packages/idc/components/card-migrate/index.jsx b/projects/js-packages/idc/components/card-migrate/index.jsx index 6c62186dbc44..28e0cb898098 100644 --- a/projects/js-packages/idc/components/card-migrate/index.jsx +++ b/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'; diff --git a/projects/js-packages/idc/components/idc-screen/screen-migrated.jsx b/projects/js-packages/idc/components/idc-screen/screen-migrated.jsx index d1474785bf6e..779009c2be9a 100644 --- a/projects/js-packages/idc/components/idc-screen/screen-migrated.jsx +++ b/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'; diff --git a/projects/js-packages/idc/components/safe-mode/index.jsx b/projects/js-packages/idc/components/safe-mode/index.jsx index dc8a0efd6c26..13c9b72e1519 100644 --- a/projects/js-packages/idc/components/safe-mode/index.jsx +++ b/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 (
- + { __( 'Finishing setting up Safe mode…', 'jetpack-idc' ) }
); @@ -181,7 +181,7 @@ const SafeMode = props => { onClick={ staySafeCallback } disabled={ isActionInProgress } > - { isStayingSafe ? : buttonLabel } + { isStayingSafe ? : buttonLabel } { hasError && renderError( customContent.supportURL ) } diff --git a/projects/js-packages/idc/components/safe-mode/style.scss b/projects/js-packages/idc/components/safe-mode/style.scss index 5fe5dcb77ec8..5de0c50f9e92 100644 --- a/projects/js-packages/idc/components/safe-mode/style.scss +++ b/projects/js-packages/idc/components/safe-mode/style.scss @@ -6,9 +6,6 @@ justify-content: center; padding: 6px; - .jp-components-spinner { - margin: 0 10px; - } } &, diff --git a/projects/js-packages/licensing/changelog/update-rna-components-spinner b/projects/js-packages/licensing/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..cc78364998a2 --- /dev/null +++ b/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`. diff --git a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx b/projects/js-packages/licensing/components/activation-screen-controls/index.jsx index f5bac05f49c2..c1a96aed5c0c 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/index.jsx +++ b/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'; diff --git a/projects/js-packages/licensing/components/activation-screen-controls/style.scss b/projects/js-packages/licensing/components/activation-screen-controls/style.scss index e84ad2b39243..7e9331e10376 100644 --- a/projects/js-packages/licensing/components/activation-screen-controls/style.scss +++ b/projects/js-packages/licensing/components/activation-screen-controls/style.scss @@ -122,8 +122,5 @@ color: var(--jp-gray-20); } - .jp-components-spinner { - width: 100%; - } } } diff --git a/projects/js-packages/licensing/components/activation-screen-success-info/primary-link/index.jsx b/projects/js-packages/licensing/components/activation-screen-success-info/primary-link/index.jsx index 3ae907fee4ca..0e0553288f1d 100644 --- a/projects/js-packages/licensing/components/activation-screen-success-info/primary-link/index.jsx +++ b/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'; diff --git a/projects/js-packages/licensing/components/activation-screen-success-info/primary-link/style.scss b/projects/js-packages/licensing/components/activation-screen-success-info/primary-link/style.scss index 69ffdc5a8c2a..1609befca202 100644 --- a/projects/js-packages/licensing/components/activation-screen-success-info/primary-link/style.scss +++ b/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%; - } } } diff --git a/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx b/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx index 383d49f21e48..724c99056521 100644 --- a/projects/packages/my-jetpack/_inc/components/product-cards-section/boost-card/boost-speed-score.tsx +++ b/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 ? ( - + ) : ( <>
diff --git a/projects/packages/my-jetpack/changelog/update-rna-components-spinner b/projects/packages/my-jetpack/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..cc78364998a2 --- /dev/null +++ b/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`. diff --git a/projects/plugins/automattic-for-agencies-client/changelog/update-rna-components-spinner b/projects/plugins/automattic-for-agencies-client/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..cc78364998a2 --- /dev/null +++ b/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`. diff --git a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/index.jsx b/projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/index.jsx index 9d3ecba92430..6e4ae8a59e46 100644 --- a/projects/plugins/automattic-for-agencies-client/src/js/components/disconnect-site-link/index.jsx +++ b/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'; diff --git a/projects/plugins/boost/app/assets/src/js/features/performance-history/graph-component/graph-component.module.scss b/projects/plugins/boost/app/assets/src/js/features/performance-history/graph-component/graph-component.module.scss index fb1e3d204f40..ac1be446571a 100644 --- a/projects/plugins/boost/app/assets/src/js/features/performance-history/graph-component/graph-component.module.scss +++ b/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%); - } } diff --git a/projects/plugins/boost/changelog/update-rna-components-spinner b/projects/plugins/boost/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..e54fc35196c1 --- /dev/null +++ b/projects/plugins/boost/changelog/update-rna-components-spinner @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +Replace spinner component with new one. diff --git a/projects/plugins/protect/changelog/update-rna-components-spinner b/projects/plugins/protect/changelog/update-rna-components-spinner new file mode 100644 index 000000000000..cc78364998a2 --- /dev/null +++ b/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`. diff --git a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx b/projects/plugins/protect/src/js/components/paid-accordion/index.jsx index 5450b74e03a9..4c18823bdf3d 100644 --- a/projects/plugins/protect/src/js/components/paid-accordion/index.jsx +++ b/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 ; + return ; } return ;