@automattic/jetpack-components 1.12.10 → 1.12.11

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.12.11] - 2026-06-24
+### Removed
+- Remove deprecated Spinner component. Use Spinner from @wordpress/components instead. [#49856]
+
 ## [1.12.10] - 2026-06-23
 ### Changed
 - Update package dependencies. [#49831]
@@ -1852,6 +1856,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.12.11]: https://github.com/Automattic/jetpack-components/compare/1.12.10...1.12.11
 [1.12.10]: https://github.com/Automattic/jetpack-components/compare/1.12.9...1.12.10
 [1.12.9]: https://github.com/Automattic/jetpack-components/compare/1.12.8...1.12.9
 [1.12.8]: https://github.com/Automattic/jetpack-components/compare/1.12.7...1.12.8

package/build/index.d.ts

@@ -10,8 +10,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';
-/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
-export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';

package/build/index.js

@@ -24,8 +24,6 @@ export { default as AutomatticBylineLogo } from './components/automattic-byline-
 export { default as AutomatticIconLogo } from './components/automattic-icon-logo/index.js';
 export { default as AutomatticForAgenciesLogo } from './components/automattic-for-agencies-logo/index.js';
 export { default as JetpackFooter } from './components/jetpack-footer/index.js';
-/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
-export { default as Spinner } from './components/spinner/index.js';
 export { default as Gravatar } from './components/gravatar/index.js';
 export { default as IconTooltip } from './components/icon-tooltip/index.js';
 export { default as ActionButton } from './components/action-button/index.js';

package/index.ts

@@ -25,8 +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';
-/** @deprecated Use `Spinner` from `@wordpress/components` instead. */
-export { default as Spinner } from './components/spinner/index.tsx';
 export { default as Gravatar } from './components/gravatar/index.tsx';
 export type { GravatarProps } from './components/gravatar/index.tsx';
 export { default as IconTooltip } from './components/icon-tooltip/index.tsx';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "1.12.10",
+	"version": "1.12.11",
 	"description": "Jetpack Components Package",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/components/#readme",
 	"bugs": {

package/build/components/spinner/index.d.ts

@@ -1,17 +0,0 @@
-import './style.scss';
-declare function Spinner({ color, className, size }: {
-    className?: string;
-    color?: string;
-    size?: number;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Spinner {
-    var propTypes: {
-        /** The spinner color. */
-        color: any;
-        /** CSS class names. */
-        className: any;
-        /** The spinner size. */
-        size: any;
-    };
-}
-export default Spinner;

package/build/components/spinner/index.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-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 (_jsx("div", { className: theClassName, children: _jsx("div", { className: "jp-components-spinner__outer", style: styleOuter, children: _jsx("div", { className: "jp-components-spinner__inner", style: styleInner }) }) }));
-};
-Spinner.propTypes = {
-    /** The spinner color. */
-    color: PropTypes.string,
-    /** CSS class names. */
-    className: PropTypes.string,
-    /** The spinner size. */
-    size: PropTypes.number,
-};
-export default Spinner;

package/build/components/spinner/style.scss

@@ -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;
-}

package/components/spinner/README.md

@@ -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 <Spinner />;
-	}
-}
-```
-
-## 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.               |

package/components/spinner/index.tsx

@@ -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 (
-		<div className={ theClassName }>
-			<div className="jp-components-spinner__outer" style={ styleOuter }>
-				<div className="jp-components-spinner__inner" style={ styleInner } />
-			</div>
-		</div>
-	);
-};
-
-Spinner.propTypes = {
-	/** The spinner color. */
-	color: PropTypes.string,
-	/** CSS class names. */
-	className: PropTypes.string,
-	/** The spinner size. */
-	size: PropTypes.number,
-};
-
-export default Spinner;

package/components/spinner/style.scss

@@ -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;
-}