Update the Spinner design (#37551)

* Update the spinner

* Formatting

* Spinner position in link input

* Use a span instead of a progress

* formatting

* Positioning

* Try an svg instead

* Revert to html + css, and simplify the animation

* Back to SVG

* gray 400 -> 300

* Add a comment explaining the wrapper and the shadow

* update circle attributes

* revert entirely to css in js

* formatting

* dedicated emotion elements for spinner and indicator

* formatting

* Number

* split styles into separate file

* remove aria-hidden and update role

* changelog

* update dasharray calc

* Split track and indicator to separate SVG elements, use a SVG arc for the indicator (instead of stroke-dashoffset)

* Allow Spinner to accept and forward external props

* Update storybook example to show different sizes

* Update README (including the removal of the screenshot)

* Update spinner size from `18` to `16` px

* remove extraneous comment

* fix vertical alignment of spinner in link control

* Vertical alignment of spinner in link control

* Update Storybook example to Controls

* Revert `display` and `margin` props to the same values as the previous version of the component

Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>

packages/base-styles/_variables.scss

@@ -55,7 +55,7 @@ $admin-sidebar-width: 160px;
 $admin-sidebar-width-big: 190px;
 $admin-sidebar-width-collapsed: 36px;
 $modal-min-width: 360px;
-$spinner-size: 18px;
+$spinner-size: 16px;
 
 
 /**

packages/block-editor/src/components/link-control/style.scss

@@ -483,16 +483,10 @@ $preview-image-height: 140px;
 		 * Position spinner to the left of the actions.
 		 *
 		 * Compensate for:
-		 *  - Input margin ($grid-unit-20)
-		 *  - Border (1px)
-		 *  - Vertically, for the difference in height between the input (40px)
-		 *    and the spinner.
-		 *  - Horizontally, adjust for the width occupied by the icon buttons,
-		 *    then artificially create spacing that mimics as if the spinner
-		 *    were center-padded to the same width as an icon button.
+		 *  - Input padding right ($button-size)
 		 */
-		top: $grid-unit-20 + 1px + ( ( 40px - $spinner-size ) * 0.5 );
-		right: $grid-unit-20 + 1px + ( $button-size * $block-editor-link-control-number-of-actions ) + ( ( $button-size - $spinner-size ) * 0.5 );
+		top: calc(50% - #{$spinner-size} / 2);
+		right: $button-size;
 	}
 }
 

packages/components/CHANGELOG.md

@@ -7,6 +7,10 @@
 -   Components: Fix `Slot`/`Fill` Emotion `StyleProvider` ([#38237](https://github.com/WordPress/gutenberg/pull/38237))
 -   Reduce height and min-width of the reset button on `ComboBoxControl` for consistency. ([#38020](https://github.com/WordPress/gutenberg/pull/38020))
 
+### Enhancements
+
+-   Update the visual design of the `Spinner` component. ([#37551](https://github.com/WordPress/gutenberg/pull/37551))
+
 ## 19.3.0 (2022-01-27)
 
 ### Enhancements

packages/components/src/spinner/README.md

@@ -1,19 +1,19 @@
 # Spinner
 
-Spinners notify users that their action is being processed.
-
-![Spinner component](https://wordpress.org/gutenberg/files/2019/07/spinner.png)
-
-## Best practices
-
-The spinner component should:
-
--   Signal to users that the processing of their request is underway and will soon complete.
+`Spinner` is a component used to notify users that their action is being processed.
 
 ## Usage
 
 ```jsx
 import { Spinner } from '@wordpress/components';
 
-const MySpinner = () => <Spinner />;
+function Example() {
+	return <Spinner />;
+}
 ```
+
+## Best practices
+
+The spinner component should:
+
+-   Signal to users that the processing of their request is underway and will soon complete.

packages/components/src/spinner/index.js

@@ -1,8 +1,47 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
 /**
  * Internal dependencies
  */
-import { StyledSpinner } from './styles/spinner-styles';
+import { StyledSpinner, SpinnerTrack, SpinnerIndicator } from './styles';
+
+/**
+ * @typedef OwnProps
+ *
+ * @property {string} [className] Class name
+ */
+/** @typedef {import('react').ComponentPropsWithoutRef<'svg'> & OwnProps} Props */
+
+/**
+ * @param {Props} props
+ * @return {JSX.Element} Element
+ */
+export default function Spinner( { className, ...props } ) {
+	return (
+		<StyledSpinner
+			className={ classNames( 'components-spinner', className ) }
+			viewBox="0 0 100 100"
+			xmlns="http://www.w3.org/2000/svg"
+			role="presentation"
+			focusable="false"
+			{ ...props }
+		>
+			{ /* Gray circular background */ }
+			<SpinnerTrack
+				cx="50"
+				cy="50"
+				r="50"
+				vectorEffect="non-scaling-stroke"
+			/>
 
-export default function Spinner() {
-	return <StyledSpinner className="components-spinner" />;
+			{ /* Theme-colored arc */ }
+			<SpinnerIndicator
+				d="m 50 0 a 50 50 0 0 1 50 50"
+				vectorEffect="non-scaling-stroke"
+			/>
+		</StyledSpinner>
+	);
 }

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

@@ -1,10 +1,43 @@
+/**
+ * External dependencies
+ */
+import { css } from '@emotion/react';
+
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
+import { space } from '../../ui/utils/space';
 import Spinner from '../';
 
-export default { title: 'Components/Spinner', component: Spinner };
+const sizes = {
+	default: undefined,
+	medium: space( 20 ),
+	large: space( 40 ),
+};
+
+export default {
+	title: 'Components/Spinner',
+	component: Spinner,
+	argTypes: {
+		size: {
+			options: Object.keys( sizes ),
+			mapping: sizes,
+			control: { type: 'select' },
+		},
+	},
+};
+
+const Template = ( { size } ) => {
+	const cx = useCx();
+	const spinnerClassname = cx( css`
+		width: ${ size };
+		height: ${ size };
+	` );
+	return <Spinner className={ spinnerClassname } />;
+};
 
-export const _default = () => {
-	return <Spinner />;
+export const Default = Template.bind( {} );
+Default.args = {
+	size: 'default',
 };

packages/components/src/spinner/styles.js

@@ -0,0 +1,47 @@
+/**
+ * External dependencies
+ */
+import styled from '@emotion/styled';
+import { css, keyframes } from '@emotion/react';
+
+/**
+ * Internal dependencies
+ */
+import { COLORS, CONFIG } from '../utils';
+
+const spinAnimation = keyframes`
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+ `;
+
+export const StyledSpinner = styled.svg`
+	width: ${ CONFIG.spinnerSize }px;
+	height: ${ CONFIG.spinnerSize }px;
+	display: inline-block;
+	margin: 5px 11px 0;
+	position: relative;
+	color: var( --wp-admin-theme-color );
+	overflow: visible;
+`;
+
+const commonPathProps = css`
+	fill: transparent;
+	stroke-width: 1.5px;
+`;
+
+export const SpinnerTrack = styled.circle`
+	${ commonPathProps };
+	stroke: ${ COLORS.gray[ 300 ] };
+`;
+
+export const SpinnerIndicator = styled.path`
+	${ commonPathProps };
+	stroke: currentColor;
+	stroke-linecap: round;
+	transform-origin: 50% 50%;
+	animation: 1.4s linear infinite both ${ spinAnimation };
+`;

packages/components/src/utils/config-values.js

@@ -44,7 +44,7 @@ export default {
 	borderWidth: '1px',
 	borderWidthFocus: '1.5px',
 	borderWidthTab: '4px',
-	spinnerSize: '18px',
+	spinnerSize: 16,
 	fontSize: '13px',
 	fontSizeH1: 'calc(2.44 * 13px)',
 	fontSizeH2: 'calc(1.95 * 13px)',