@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/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.

package/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>
+	);
 }

package/src/spinner/index.native.js

@@ -9,9 +9,14 @@ import { View } from 'react-native';
 import style from './style.scss';
 
 export default function Spinner( props ) {
-	const { progress = 0 } = props;
+	const { progress = 0, testID } = props;
 
 	const width = progress + '%';
 
-	return <View style={ [ style.spinner, { width }, props.style ] } />;
+	return (
+		<View
+			style={ [ style.spinner, { width }, props.style ] }
+			testID={ testID }
+		/>
+	);
 }

package/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',
 };

package/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 };
+`;

package/src/style-provider/index.js

@@ -1,3 +1,5 @@
+//@ts-nocheck
+
 /**
  * External dependencies
  */

package/src/surface/hook.js

@@ -54,6 +54,7 @@ export function useSurface( props ) {
 		borderRight,
 		borderTop,
 		className,
+		cx,
 		variant,
 	] );
 

package/src/surface/stories/index.js

@@ -13,7 +13,7 @@ export default {
 	component: Surface,
 	title: 'Components (Experimental)/Surface',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/tab-panel/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/TabPanel',
 	component: TabPanel,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/text/get-line-height.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 /**

package/src/text/hook.js

@@ -126,6 +126,7 @@ export default function useText( props ) {
 		align,
 		className,
 		color,
+		cx,
 		display,
 		isBlock,
 		isCaption,

package/src/text/types.ts

@@ -6,7 +6,6 @@ import type { Props as TruncateProps } from '../truncate/types';
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties } from 'react';
 
 type TextAdjustLineHeightForInnerControls =

package/src/text-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/TextControl',
 	component: TextControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/text-highlight/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/TextHighlight',
 	component: TextHighlight,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/textarea-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/TextareaControl',
 	component: TextareaControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/tip/index.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { SVG, Path } from '@wordpress/primitives';
+import { Icon, tip } from '@wordpress/icons';
 
 /**
  * @typedef Props
@@ -15,9 +15,7 @@ import { SVG, Path } from '@wordpress/primitives';
 function Tip( props ) {
 	return (
 		<div className="components-tip">
-			<SVG width="24" height="24" viewBox="0 0 24 24">
-				<Path d="M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" />
-			</SVG>
+			<Icon icon={ tip } />
 			<p>{ props.children }</p>
 		</div>
 	);

package/src/tip/stories/index.js

@@ -12,7 +12,7 @@ export default {
 	title: 'Components/Tip',
 	component: Tip,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/toggle-control/stories/index.js

@@ -17,7 +17,7 @@ export default {
 	title: 'Components/ToggleControl',
 	component: ToggleControl,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/toggle-group-control/stories/index.js

@@ -19,7 +19,7 @@ export default {
 	component: ToggleGroupControl,
 	title: 'Components/ToggleGroupControl',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 

package/src/toggle-group-control/test/__snapshots__/index.js.snap

@@ -15,6 +15,11 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 }
 
 .emotion-4 {
+  display: inline-block;
+  margin-bottom: calc(4px * 2);
+}
+
+.emotion-6 {
   background: #fff;
   border: 1px solid;
   border-color: #757575;
@@ -32,23 +37,23 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-4 {
+  .emotion-6 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-4:hover {
+.emotion-6:hover {
   border-color: #757575;
 }
 
-.emotion-4:focus-within {
+.emotion-6:focus-within {
   border-color: var( --wp-admin-theme-color-darker-10, #007cba);
   box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
   outline: none;
   z-index: 1;
 }
 
-.emotion-6 {
+.emotion-8 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
@@ -61,7 +66,7 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   flex: 1;
 }
 
-.emotion-8 {
+.emotion-10 {
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -100,20 +105,20 @@ exports[`ToggleGroupControl should render correctly 1`] = `
 }
 
 @media ( prefers-reduced-motion: reduce ) {
-  .emotion-8 {
+  .emotion-10 {
     transition-duration: 0ms;
   }
 }
 
-.emotion-8::-moz-focus-inner {
+.emotion-10::-moz-focus-inner {
   border: 0;
 }
 
-.emotion-8:active {
+.emotion-10:active {
   background: #fff;
 }
 
-.emotion-9 {
+.emotion-11 {
   font-size: 13px;
   line-height: 1;
   position: absolute;
@@ -125,7 +130,7 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   transform: translate( -50%, -50% );
 }
 
-.emotion-11 {
+.emotion-13 {
   font-size: 13px;
   font-weight: bold;
   height: 0;
@@ -141,34 +146,27 @@ exports[`ToggleGroupControl should render correctly 1`] = `
   >
     <div>
       <span
-        class="components-base-control__label"
+        class="components-base-control__label emotion-4 emotion-5"
       >
         Test Toggle Group Control
       </span>
     </div>
     <div
       aria-label="Test Toggle Group Control"
-      class="medium components-toggle-group-control emotion-4 emotion-5"
+      class="medium components-toggle-group-control emotion-6 emotion-7"
       data-wp-c16t="true"
       data-wp-component="ToggleGroupControl"
       id="toggle-group-control-0"
       role="radiogroup"
     >
-      <iframe
-        aria-hidden="true"
-        frameborder="0"
-        src="about:blank"
-        style="display: block; opacity: 0; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; overflow: hidden; pointer-events: none; z-index: -1;"
-        tabindex="-1"
-      />
       <div
-        class="emotion-6 emotion-7"
+        class="emotion-8 emotion-9"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="R"
-          class="emotion-8 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option"
           data-value="rigas"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOption"
@@ -177,26 +175,26 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           tabindex="0"
         >
           <div
-            class="emotion-9 emotion-10"
+            class="emotion-11 emotion-12"
           >
             R
           </div>
           <div
             aria-hidden="true"
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             R
           </div>
         </button>
       </div>
       <div
-        class="emotion-6 emotion-7"
+        class="emotion-8 emotion-9"
         data-active="false"
       >
         <button
           aria-checked="false"
           aria-label="J"
-          class="emotion-8 components-toggle-group-control-option"
+          class="emotion-10 components-toggle-group-control-option"
           data-value="jack"
           data-wp-c16t="true"
           data-wp-component="ToggleGroupControlOption"
@@ -205,13 +203,13 @@ exports[`ToggleGroupControl should render correctly 1`] = `
           tabindex="-1"
         >
           <div
-            class="emotion-9 emotion-10"
+            class="emotion-11 emotion-12"
           >
             J
           </div>
           <div
             aria-hidden="true"
-            class="emotion-11 emotion-12"
+            class="emotion-13 emotion-14"
           >
             J
           </div>

package/src/toggle-group-control/toggle-group-control/component.tsx

@@ -1,18 +1,16 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { RadioGroup, useRadioState } from 'reakit';
-import useResizeAware from 'react-resize-aware';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { useRef, useMemo } from '@wordpress/element';
-import { useMergeRefs, useInstanceId } from '@wordpress/compose';
+import { useMergeRefs, useInstanceId, usePrevious } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,7 +23,6 @@ import {
 import { useUpdateEffect, useCx } from '../../utils/hooks';
 import { View } from '../../view';
 import BaseControl from '../../base-control';
-import ToggleGroupControlBackdrop from './toggle-group-control-backdrop';
 import type { ToggleGroupControlProps } from '../types';
 import ToggleGroupControlContext from '../context';
 import * as styles from './styles';
@@ -50,7 +47,6 @@ function ToggleGroupControl(
 	} = useContextSystem( props, 'ToggleGroupControl' );
 	const cx = useCx();
 	const containerRef = useRef();
-	const [ resizeListener, sizes ] = useResizeAware();
 	const baseId = useInstanceId(
 		ToggleGroupControl,
 		'toggle-group-control'
@@ -59,10 +55,15 @@ function ToggleGroupControl(
 		baseId,
 		state: value,
 	} );
+	const previousValue = usePrevious( value );
 
 	// Propagate radio.state change
 	useUpdateEffect( () => {
-		onChange( radio.state );
+		// Avoid calling onChange if radio state changed
+		// from incoming value.
+		if ( previousValue !== radio.state ) {
+			onChange( radio.state );
+		}
 	}, [ radio.state ] );
 
 	// Sync incoming value with radio.state
@@ -80,7 +81,7 @@ function ToggleGroupControl(
 				'medium',
 				className
 			),
-		[ className, isBlock ]
+		[ className, cx, isBlock ]
 	);
 	return (
 		<BaseControl help={ help }>
@@ -102,13 +103,6 @@ function ToggleGroupControl(
 					{ ...otherProps }
 					ref={ useMergeRefs( [ containerRef, forwardedRef ] ) }
 				>
-					{ resizeListener }
-					<ToggleGroupControlBackdrop
-						{ ...radio }
-						containerRef={ containerRef }
-						containerWidth={ sizes.width }
-						isAdaptiveWidth={ isAdaptiveWidth }
-					/>
 					{ children }
 				</RadioGroup>
 			</ToggleGroupControlContext.Provider>

package/src/toggle-group-control/toggle-group-control/styles.ts

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { css } from '@emotion/react';
-import styled from '@emotion/styled';
 
 /**
  * Internal dependencies
@@ -37,16 +36,3 @@ export const block = css`
 	display: flex;
 	width: 100%;
 `;
-
-export const BackdropView = styled.div`
-	background: ${ COLORS.gray[ 900 ] };
-	border-radius: ${ CONFIG.controlBorderRadius };
-	box-shadow: ${ CONFIG.toggleGroupControlBackdropBoxShadow };
-	left: 0;
-	position: absolute;
-	top: 2px;
-	bottom: 2px;
-	transition: transform ${ CONFIG.transitionDurationFast } ease;
-	${ reduceMotion( 'transition' ) }
-	z-index: 1;
-`;

package/src/toggle-group-control/toggle-group-control-option/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { Radio } from 'reakit';

package/src/toggle-group-control/toggle-group-control-option/styles.ts

@@ -54,9 +54,7 @@ export const buttonView = css`
 
 export const buttonActive = css`
 	color: ${ COLORS.white };
-	&:active {
-		background: transparent;
-	}
+	background-color: ${ COLORS.gray[ 900 ] };
 `;
 
 export const ButtonContentView = styled.div`

package/src/toggle-group-control/types.ts

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
-import type { MutableRefObject, ReactNode, ReactText } from 'react';
+import type { ReactNode, ReactText } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import type { RadioStateReturn } from 'reakit';
 
@@ -97,10 +96,3 @@ export type ToggleGroupControlContextProps = RadioStateReturn & {
 	 */
 	isBlock?: boolean;
 };
-
-export type ToggleGroupControlBackdropProps = {
-	containerRef: MutableRefObject< HTMLElement | undefined >;
-	containerWidth?: number | null;
-	isAdaptiveWidth?: boolean;
-	state?: any;
-};

package/src/toolbar-button/stories/index.js

@@ -18,7 +18,7 @@ export default {
 	title: 'Components/ToolbarButton',
 	component: ToolbarButton,
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };