Spinner: Convert component to TypeScript

packages/components/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Internal
 
+-   `Spinner`: Convert to TypeScript and update storybook ([#41540](https://github.com/WordPress/gutenberg/pull/41540/)).
 -   `InputControl`: Add tests and update to use `@testing-library/user-event` ([#41421](https://github.com/WordPress/gutenberg/pull/41421)).
 
 ## 19.13.0 (2022-06-15)

packages/components/src/spinner/index.js → packages/components/src/spinner/index.tsx

@@ -2,24 +2,23 @@
  * External dependencies
  */
 import classNames from 'classnames';
+import type { ForwardedRef } from 'react';
 
 /**
  * Internal dependencies
  */
 import { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';
+import type { WordPressComponentProps } from '../ui/context';
 
 /**
- * @typedef OwnProps
- *
- * @property {string} [className] Class name
+ * WordPress dependencies
  */
-/** @typedef {import('react').ComponentPropsWithoutRef<'svg'> & OwnProps} Props */
+import { forwardRef } from '@wordpress/element';
 
-/**
- * @param {Props} props
- * @return {JSX.Element} Element
- */
-export default function Spinner( { className, ...props } ) {
+export function UnforwardedSpinner(
+	{ className, ...props }: WordPressComponentProps< {}, 'svg', false >,
+	forwardedRef: ForwardedRef< any >
+) {
 	return (
 		<StyledSpinner
 			className={ classNames( 'components-spinner', className ) }
@@ -28,6 +27,7 @@ export default function Spinner( { className, ...props } ) {
 			role="presentation"
 			focusable="false"
 			{ ...props }
+			ref={ forwardedRef }
 		>
 			{ /* Gray circular background */ }
 			<SpinnerTrack
@@ -45,3 +45,17 @@ export default function Spinner( { className, ...props } ) {
 		</StyledSpinner>
 	);
 }
+/**
+ * `Spinner` is a component used to notify users that their action is being processed.
+ *
+ * @example
+ * ```js
+ *   import { Spinner } from '@wordpress/components';
+ *
+ *   function Example() {
+ *     return <Spinner />;
+ *   }
+ * ```
+ */
+export const Spinner = forwardRef( UnforwardedSpinner );
+export default Spinner;

packages/components/src/spinner/stories/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import Spinner from '../';
+import { space } from '../../ui/utils/space';
+
+const meta: ComponentMeta< typeof Spinner > = {
+	title: 'Components/Spinner',
+	component: Spinner,
+	parameters: {
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Spinner > = ( args ) => {
+	return <Spinner { ...args } />;
+};
+
+export const Default: ComponentStory< typeof Spinner > = Template.bind( {} );
+
+// The Spinner can be resized to any size, but the stroke width will remain unchanged.
+export const CustomSize: ComponentStory< typeof Spinner > = Template.bind( {} );
+CustomSize.args = { style: { width: space( 20 ), height: space( 20 ) } };

packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap

@@ -184,7 +184,7 @@ exports[`PostPublishPanel should render the spinner if the post is being saved 1
   <div
     className="editor-post-publish-panel__content"
   >
-    <Spinner />
+    <ForwardRef(UnforwardedSpinner) />
   </div>
   <div
     className="editor-post-publish-panel__footer"