@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

package/src/palette-edit/styles.js

@@ -13,7 +13,6 @@ import { space } from '../ui/utils/space';
 import { COLORS, CONFIG } from '../utils';
 import { View } from '../view';
 import InputControl from '../input-control';
-import Item from '../item-group/item';
 import {
 	Container as InputControlContainer,
 	Input,
@@ -30,7 +29,7 @@ export const IndicatorStyled = styled( CircularOptionPicker.Option )`
 export const NameInputControl = styled( InputControl )`
 	${ InputControlContainer } {
 		background: ${ COLORS.gray[ 100 ] };
-		border-radius: 2px;
+		border-radius: ${ CONFIG.controlBorderRadius }};
 		${ Input }${ Input }${ Input }${ Input } {
 			height: ${ space( 8 ) };
 		}
@@ -41,9 +40,26 @@ export const NameInputControl = styled( InputControl )`
 	}
 `;
 
-export const PaletteItem = styled( Item )`
+export const PaletteItem = styled( View )`
 	padding: 3px 0 3px ${ space( 3 ) };
 	height: calc( 40px - ${ CONFIG.borderWidth } );
+	border: 1px solid ${ CONFIG.surfaceBorderColor };
+	border-bottom-color: transparent;
+	&:first-of-type {
+		border-top-left-radius: ${ CONFIG.controlBorderRadius };
+		border-top-right-radius: ${ CONFIG.controlBorderRadius };
+	}
+	&:last-of-type {
+		border-bottom-left-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-right-radius: ${ CONFIG.controlBorderRadius };
+		border-bottom-color: ${ CONFIG.surfaceBorderColor };
+	}
+	&.is-selected + & {
+		border-top-color: transparent;
+	}
+	&.is-selected {
+		border-color: ${ COLORS.blue.wordpress[ 700 ] };
+	}
 `;
 
 export const NameContainer = styled.div`
@@ -52,6 +68,9 @@ export const NameContainer = styled.div`
 	margin-right: ${ space( 2 ) };
 	white-space: nowrap;
 	overflow: hidden;
+	${ PaletteItem }:hover & {
+		color: var( --wp-admin-theme-color, ${ COLORS.blue.wordpress[ 700 ] } );
+	}
 `;
 
 export const PaletteHeading = styled( Heading )`

package/src/placeholder/index.js

@@ -73,12 +73,14 @@ function Placeholder( {
 				<Icon icon={ icon } />
 				{ label }
 			</div>
-			{ !! instructions && (
-				<div className="components-placeholder__instructions">
-					{ instructions }
-				</div>
-			) }
-			<div className={ fieldsetClasses }>{ children }</div>
+			<fieldset className={ fieldsetClasses }>
+				{ !! instructions && (
+					<legend className="components-placeholder__instructions">
+						{ instructions }
+					</legend>
+				) }
+				{ children }
+			</fieldset>
 		</div>
 	);
 }

package/src/placeholder/style.scss

@@ -77,6 +77,18 @@
 	}
 }
 
+// Overrides for browser and editor fieldset styles.
+.components-placeholder__fieldset.components-placeholder__fieldset {
+	border: none;
+	padding: 0;
+
+	.components-placeholder__instructions {
+		padding: 0;
+		font-weight: normal;
+		font-size: 1em;
+	}
+}
+
 .components-placeholder__fieldset.is-column-layout,
 .components-placeholder__fieldset.is-column-layout form {
 	flex-direction: column;

package/src/placeholder/test/index.js

@@ -88,7 +88,7 @@ describe( 'Placeholder', () => {
 			const element = <div>Fieldset</div>;
 			const placeholder = shallow( <Placeholder children={ element } /> );
 			const placeholderFieldset = placeholder.find(
-				'.components-placeholder__fieldset'
+				'fieldset.components-placeholder__fieldset'
 			);
 			const child = placeholderFieldset.childAt( 0 );
 
@@ -96,6 +96,23 @@ describe( 'Placeholder', () => {
 			expect( child.matchesElement( element ) ).toBe( true );
 		} );
 
+		it( 'should display a legend if instructions are passed', () => {
+			const element = <div>Fieldset</div>;
+			const instructions = 'Choose an option.';
+			const placeholder = shallow(
+				<Placeholder
+					children={ element }
+					instructions={ instructions }
+				/>
+			);
+			const placeholderLegend = placeholder.find(
+				'legend.components-placeholder__instructions'
+			);
+
+			expect( placeholderLegend.exists() ).toBe( true );
+			expect( placeholderLegend.text() ).toEqual( instructions );
+		} );
+
 		it( 'should add an additional className to the top container', () => {
 			const placeholder = shallow(
 				<Placeholder className="wp-placeholder" />

package/src/range-control/styles/range-control-styles.js

@@ -58,7 +58,7 @@ export const BeforeIconWrapper = styled.span`
 export const AfterIconWrapper = styled.span`
 	margin-top: ${ railHeight }px;
 
-	${ rtl( { marginLeft: 16 } ) }
+	${ rtl( { marginLeft: 6 } ) }
 `;
 
 const railBackgroundColor = ( { disabled, railColor } ) => {

package/src/resizable-box/index.tsx

@@ -9,7 +9,6 @@ import { forwardRef } from '@wordpress/element';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
 import type { ResizableProps } from 're-resizable';
-// eslint-disable-next-line no-restricted-imports
 import type { ReactNode, Ref } from 'react';
 
 /**

package/src/resizable-box/resize-tooltip/index.tsx

@@ -3,13 +3,12 @@
  */
 import { noop } from 'lodash';
 import classnames from 'classnames';
+import type { Ref } from 'react';
 
 /**
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-// eslint-disable-next-line no-restricted-imports
-import type { Ref } from 'react';
 
 /**
  * Internal dependencies

package/src/resizable-box/resize-tooltip/label.tsx

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

package/src/sandbox/index.native.js

@@ -32,8 +32,8 @@ const observeAndResizeJS = `
 		function sendResize() {
 			var clientBoundingRect = document.body.getBoundingClientRect();
 
-			// The function postMessage is exposed by the react-native-webview library 
-			// to communicate between React Native and the WebView, in this case, 
+			// The function postMessage is exposed by the react-native-webview library
+			// to communicate between React Native and the WebView, in this case,
 			// we use it for notifying resize changes.
             window.ReactNativeWebView.postMessage(JSON.stringify( {
                 action: 'resize',
@@ -109,7 +109,7 @@ const style = `
 
 	/**
 	 * Add responsiveness to embeds with aspect ratios.
-	 * 
+	 *
 	 * These styles have been copied from the web version (https://git.io/JEFcX) and
 	 * adapted for the native version.
 	 */
@@ -270,9 +270,12 @@ function Sandbox( {
 	}
 
 	useEffect( () => {
-		Dimensions.addEventListener( 'change', onChangeDimensions );
+		const dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			onChangeDimensions
+		);
 		return () => {
-			Dimensions.removeEventListener( 'change', onChangeDimensions );
+			dimensionsChangeSubscription.remove();
 		};
 	}, [] );
 

package/src/scrollable/hook.js

@@ -36,7 +36,7 @@ export function useScrollable( props ) {
 				scrollDirection === 'auto' && styles.scrollAuto,
 				className
 			),
-		[ className, scrollDirection, smoothScroll ]
+		[ className, cx, scrollDirection, smoothScroll ]
 	);
 
 	return { ...otherProps, className: classes };

package/src/scrollable/stories/index.js

@@ -2,8 +2,11 @@
  * External dependencies
  */
 import { boolean, select } from '@storybook/addon-knobs';
-/* eslint-disable-next-line no-restricted-imports */
-import React from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,7 +23,7 @@ export default {
 };
 
 export const _default = () => {
-	const targetRef = React.useRef( null );
+	const targetRef = useRef( null );
 
 	const onButtonClick = () => {
 		targetRef.current?.focus();

package/src/select-control/README.md

@@ -201,9 +201,9 @@ An array of objects containing the following properties:
 
 #### children
 
-An alternative to the `options` prop.  
+An alternative to the `options` prop.
 Use the `children` prop to have more control on the style of the items being rendered, like `optgroup`s or `options` and possibly avoid re-rendering due to the reference update on the `options` prop.
-- Type: `Element`
+- Type: `ReactNode`
 - Required: No
 
 #### onChange

package/src/select-control/index.tsx

@@ -4,7 +4,7 @@
 import { isEmpty, noop } from 'lodash';
 import classNames from 'classnames';
 // eslint-disable-next-line no-restricted-imports
-import type { ChangeEvent, FocusEvent, Ref } from 'react';
+import type { ChangeEvent, FocusEvent, ReactNode, Ref } from 'react';
 
 /**
  * WordPress dependencies
@@ -31,7 +31,7 @@ function useUniqueId( idProp?: string ) {
 }
 
 export interface SelectControlProps
-	extends Omit< InputBaseProps, 'isFocused' > {
+	extends Omit< InputBaseProps, 'children' | 'isFocused' > {
 	help?: string;
 	hideLabelFromVision?: boolean;
 	multiple?: boolean;
@@ -50,6 +50,7 @@ export interface SelectControlProps
 	size?: Size;
 	value?: string | string[];
 	labelPosition?: LabelPosition;
+	children?: ReactNode;
 }
 
 function SelectControl(

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

@@ -69,7 +69,7 @@ export const _default = () => {
 	return <SelectControlWithState { ...props } />;
 };
 
-export const withNativeChildren = () => {
+export const withCustomChildren = () => {
 	return (
 		<SelectControlWithState label="Value">
 			<option value="option-1">Option 1</option>

package/src/slot-fill/bubbles-virtually/fill.js

@@ -8,6 +8,7 @@ import { useRef, useState, useEffect, createPortal } from '@wordpress/element';
  * Internal dependencies
  */
 import useSlot from './use-slot';
+import StyleProvider from '../../style-provider';
 
 function useForceUpdate() {
 	const [ , setState ] = useState( {} );
@@ -48,5 +49,15 @@ export default function Fill( { name, children } ) {
 		children = children( slot.fillProps );
 	}
 
-	return createPortal( children, slot.ref.current );
+	// When using a `Fill`, the `children` will be rendered in the document of the
+	// `Slot`. This means that we need to wrap the `children` in a `StyleProvider`
+	// to make sure we're referencing the right document/iframe (instead of the
+	// context of the `Fill`'s parent).
+	const wrappedChildren = (
+		<StyleProvider document={ slot.ref.current.ownerDocument }>
+			{ children }
+		</StyleProvider>
+	);
+
+	return createPortal( wrappedChildren, slot.ref.current );
 }

package/src/spacer/component.tsx

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

package/src/spacer/types.ts

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

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/surface/hook.js

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

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/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>
 	);