@wordpress/components 23.6.0 → 23.8.0

package/src/angle-picker-control/styles/angle-picker-control-styles.tsx

@@ -10,12 +10,13 @@ import styled from '@emotion/styled';
 import { Flex } from '../../flex';
 import { COLORS } from '../../utils';
 import { space } from '../../ui/utils/space';
+import { Text } from '../../text';
 import CONFIG from '../../utils/config-values';
 
 import type { AnglePickerControlProps } from '../types';
 
 const CIRCLE_SIZE = 32;
-const INNER_CIRCLE_SIZE = 3;
+const INNER_CIRCLE_SIZE = 6;
 
 const deprecatedBottomMargin = ( {
 	__nextHasNoMarginBottom,
@@ -39,6 +40,10 @@ export const CircleRoot = styled.div`
 	height: ${ CIRCLE_SIZE }px;
 	overflow: hidden;
 	width: ${ CIRCLE_SIZE }px;
+
+	:active {
+		cursor: grabbing;
+	}
 `;
 
 export const CircleIndicatorWrapper = styled.div`
@@ -55,15 +60,17 @@ export const CircleIndicatorWrapper = styled.div`
 export const CircleIndicator = styled.div`
 	background: ${ COLORS.ui.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
-	bottom: 0;
 	box-sizing: border-box;
 	display: block;
-	height: 0px;
-	left: 0;
-	margin: auto;
+	left: 50%;
+	top: 4px;
+	transform: translateX( -50% );
 	position: absolute;
-	right: 0;
-	top: -${ CIRCLE_SIZE / 2 }px;
-	width: 0px;
+	width: ${ INNER_CIRCLE_SIZE }px;
+	height: ${ INNER_CIRCLE_SIZE }px;
+`;
+
+export const UnitText = styled( Text )`
+	color: ${ COLORS.ui.theme };
+	margin-right: ${ space( 3 ) };
 `;

package/src/animate/index.tsx

@@ -0,0 +1,75 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import type { AnimateProps, GetAnimateOptions } from './types';
+
+/**
+ * @param type The animation type
+ * @return Default origin
+ */
+function getDefaultOrigin( type?: GetAnimateOptions[ 'type' ] ) {
+	return type === 'appear' ? 'top' : 'left';
+}
+
+/**
+ * @param options
+ *
+ * @return ClassName that applies the animations
+ */
+export function getAnimateClassName( options: GetAnimateOptions ) {
+	if ( options.type === 'loading' ) {
+		return classnames( 'components-animate__loading' );
+	}
+
+	const { type, origin = getDefaultOrigin( type ) } = options;
+
+	if ( type === 'appear' ) {
+		const [ yAxis, xAxis = 'center' ] = origin.split( ' ' );
+		return classnames( 'components-animate__appear', {
+			[ 'is-from-' + xAxis ]: xAxis !== 'center',
+			[ 'is-from-' + yAxis ]: yAxis !== 'middle',
+		} );
+	}
+
+	if ( type === 'slide-in' ) {
+		return classnames(
+			'components-animate__slide-in',
+			'is-from-' + origin
+		);
+	}
+
+	return undefined;
+}
+
+/**
+ * Simple interface to introduce animations to components.
+ *
+ * ```jsx
+ * import { Animate, Notice } from '@wordpress/components';
+ *
+ * const MyAnimatedNotice = () => (
+ * 	<Animate type="slide-in" options={ { origin: 'top' } }>
+ * 		{ ( { className } ) => (
+ * 			<Notice className={ className } status="success">
+ * 				<p>Animation finished.</p>
+ * 			</Notice>
+ * 		) }
+ * 	</Animate>
+ * );
+ * ```
+ */
+export function Animate( { type, options = {}, children }: AnimateProps ) {
+	return children( {
+		className: getAnimateClassName( {
+			type,
+			...options,
+		} as GetAnimateOptions ),
+	} );
+}
+
+export default Animate;

package/src/animate/stories/index.tsx

@@ -0,0 +1,102 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import { Animate } from '..';
+import Notice from '../../notice';
+
+const meta: ComponentMeta< typeof Animate > = {
+	title: 'Components/Animate',
+	component: Animate,
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof Animate > = ( props ) => (
+	<Animate { ...props } />
+);
+
+export const Default: ComponentStory< typeof Animate > = Template.bind( {} );
+Default.args = {
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>{ `No default animation. Use one of type = "appear", "slide-in", or "loading".` }</p>
+		</Notice>
+	),
+};
+
+export const AppearTopLeft: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearTopLeft.args = {
+	type: 'appear',
+	options: { origin: 'top left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top left.</p>
+		</Notice>
+	),
+};
+export const AppearTopRight: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearTopRight.args = {
+	type: 'appear',
+	options: { origin: 'top right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: top right.</p>
+		</Notice>
+	),
+};
+export const AppearBottomLeft: ComponentStory< typeof Animate > = Template.bind(
+	{}
+);
+AppearBottomLeft.args = {
+	type: 'appear',
+	options: { origin: 'bottom left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom left.</p>
+		</Notice>
+	),
+};
+export const AppearBottomRight: ComponentStory< typeof Animate > =
+	Template.bind( {} );
+AppearBottomRight.args = {
+	type: 'appear',
+	options: { origin: 'bottom right' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Appear animation. Origin: bottom right.</p>
+		</Notice>
+	),
+};
+
+export const Loading: ComponentStory< typeof Animate > = Template.bind( {} );
+Loading.args = {
+	type: 'loading',
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Loading animation.</p>
+		</Notice>
+	),
+};
+
+export const SlideIn: ComponentStory< typeof Animate > = Template.bind( {} );
+SlideIn.args = {
+	type: 'slide-in',
+	options: { origin: 'left' },
+	children: ( { className } ) => (
+		<Notice className={ className } status="success">
+			<p>Slide-in animation.</p>
+		</Notice>
+	),
+};

package/src/animate/types.ts

@@ -0,0 +1,32 @@
+export type AppearOptions = {
+	type: 'appear';
+	origin?:
+		| 'top'
+		| 'top left'
+		| 'top right'
+		| 'middle'
+		| 'middle left'
+		| 'middle right'
+		| 'bottom'
+		| 'bottom left'
+		| 'bottom right';
+};
+type SlideInOptions = { type: 'slide-in'; origin?: 'left' | 'right' };
+type LoadingOptions = { type: 'loading'; origin?: never };
+type NoAnimationOptions = { type?: never; origin?: never };
+
+export type GetAnimateOptions =
+	| AppearOptions
+	| SlideInOptions
+	| LoadingOptions
+	| NoAnimationOptions;
+
+// Create a new type that and distributes the `Pick` operator separately to
+// every individual type of a union, thus preserving that same union.
+type DistributiveTypeAndOptions< T extends { type?: any } > = T extends any
+	? Pick< T, 'type' > & { options?: Omit< T, 'type' > }
+	: never;
+
+export type AnimateProps = DistributiveTypeAndOptions< GetAnimateOptions > & {
+	children: ( props: { className?: string } ) => JSX.Element;
+};

package/src/border-box-control/stories/index.tsx

@@ -43,7 +43,7 @@ const colors = [
 
 const Template: ComponentStory< typeof BorderBoxControl > = ( props ) => {
 	const { onChange, ...otherProps } = props;
-	const [ borders, setBorders ] = useState< typeof props[ 'value' ] >();
+	const [ borders, setBorders ] = useState< ( typeof props )[ 'value' ] >();
 
 	const onChangeMerged: ComponentProps<
 		typeof BorderBoxControl

package/src/box-control/axial-input-controls.tsx

@@ -8,7 +8,7 @@ import { Layout } from './styles/box-control-styles';
 import type { BoxControlInputControlProps } from './types';
 
 const groupedSides = [ 'vertical', 'horizontal' ] as const;
-type GroupedSide = typeof groupedSides[ number ];
+type GroupedSide = ( typeof groupedSides )[ number ];
 
 export default function AxialInputControls( {
 	onChange,

package/src/circular-option-picker/style.scss

@@ -16,6 +16,16 @@ $color-palette-circle-spacing: 12px;
 		display: flex;
 		flex-wrap: wrap;
 		gap: $color-palette-circle-spacing;
+		position: relative;
+		z-index: z-index(".components-circular-option-picker__swatches");
+	}
+
+	// Make sure that the .components-circular-option-picker__swatches element
+	// renders visually on top of its siblings. This is necessary to make sure
+	// that the tooltip rendered when hovering an `Option` always appears on top.
+	> *:not(.components-circular-option-picker__swatches) {
+		position: relative;
+		z-index: z-index("> *:not(.components-circular-option-picker__swatches)");
 	}
 }
 

package/src/color-indicator/style.scss

@@ -5,4 +5,5 @@
 	border-radius: 50%;
 	display: inline-block;
 	padding: 0;
+	background: $white linear-gradient(-45deg, transparent 48%, $gray-300 48%, $gray-300 52%, transparent 52%);
 }

package/src/color-picker/README.md

@@ -31,13 +31,13 @@ The current color value to display in the picker. Must be a hex or hex8 string.
 
 ### `onChange`: `(hex8Color: string) => void`
 
-Fired when the color changes. Always passes a hex8 color string.
+Fired when the color changes. Always passes a hex or hex8 color string.
 
 - Required: No
 
 ### `enableAlpha`: `boolean`
 
-Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
 
 - Required: No
 - Default: `false`

package/src/color-picker/color-input.tsx

@@ -1,21 +1,10 @@
-/**
- * External dependencies
- */
-import type { Colord } from 'colord';
-
 /**
  * Internal dependencies
  */
 import { RgbInput } from './rgb-input';
 import { HslInput } from './hsl-input';
 import { HexInput } from './hex-input';
-
-interface ColorInputProps {
-	colorType: 'hsl' | 'hex' | 'rgb';
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { ColorInputProps } from './types';
 
 export const ColorInput = ( {
 	colorType,

package/src/color-picker/component.tsx

@@ -15,11 +15,7 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import {
-	useContextSystem,
-	contextConnect,
-	WordPressComponentProps,
-} from '../ui/context';
+import { useContextSystem, contextConnect } from '../ui/context';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -32,26 +28,18 @@ import { ColorInput } from './color-input';
 import { Picker } from './picker';
 import { useControlledValue } from '../utils/hooks';
 
-import type { ColorType } from './types';
+import type { ColorPickerProps, ColorType } from './types';
 
 extend( [ namesPlugin ] );
 
-export interface ColorPickerProps {
-	enableAlpha?: boolean;
-	color?: string;
-	onChange?: ( color: string ) => void;
-	defaultValue?: string;
-	copyFormat?: ColorType;
-}
-
 const options = [
 	{ label: 'RGB', value: 'rgb' as const },
 	{ label: 'HSL', value: 'hsl' as const },
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-const ColorPicker = (
-	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
+const UnconnectedColorPicker = (
+	props: ColorPickerProps,
 	forwardedRef: ForwardedRef< any >
 ) => {
 	const {
@@ -124,6 +112,9 @@ const ColorPicker = (
 	);
 };
 
-const ConnectedColorPicker = contextConnect( ColorPicker, 'ColorPicker' );
+export const ColorPicker = contextConnect(
+	UnconnectedColorPicker,
+	'ColorPicker'
+);
 
-export default ConnectedColorPicker;
+export default ColorPicker;

package/src/color-picker/hex-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -17,12 +17,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { COLORS } from '../utils/colors-values';
 import type { StateReducer } from '../input-control/reducer/state';
-
-interface HexInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HexInputProps } from './types';
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleChange = ( nextValue: string | undefined ) => {

package/src/color-picker/hsl-input.tsx

@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface HslInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { HslInputProps } from './types';
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 	const { h, s, l, a } = color.toHsl();

package/src/color-picker/input-with-slider.tsx

@@ -7,15 +7,7 @@ import { Spacer } from '../spacer';
 import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 import { COLORS } from '../utils/colors-values';
-
-interface InputWithSliderProps {
-	min: number;
-	max: number;
-	value: number;
-	label: string;
-	abbreviation: string;
-	onChange: ( value: number ) => void;
-}
+import type { InputWithSliderProps } from './types';
 
 export const InputWithSlider = ( {
 	min,

package/src/color-picker/legacy-adapter.tsx

@@ -2,10 +2,9 @@
  * Internal dependencies
  */
 import ColorPicker from './component';
+import type { LegacyAdapterProps } from './types';
 import { useDeprecatedProps } from './use-deprecated-props';
 
-type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
-
 export const LegacyAdapter = ( props: LegacyAdapterProps ) => {
 	return <ColorPicker { ...useDeprecatedProps( props ) } />;
 };

package/src/color-picker/picker.tsx

@@ -2,17 +2,16 @@
  * External dependencies
  */
 import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-interface PickerProps {
-	color: Colord;
-	enableAlpha: boolean;
-	onChange: ( nextColor: Colord ) => void;
-}
+/**
+ * Internal dependencies
+ */
+import type { PickerProps } from './types';
 
 export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
 	const Component = enableAlpha

package/src/color-picker/rgb-input.tsx

@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface RgbInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { RgbInputProps } from './types';
 
 export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 	const { r, g, b, a } = color.toRgb();

package/src/color-picker/stories/index.tsx

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPicker } from '../component';
+
+const meta: ComponentMeta< typeof ColorPicker > = {
+	component: ColorPicker,
+	title: 'Components/ColorPicker',
+	argTypes: {
+		as: { control: { type: null } },
+		color: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ColorPicker > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >();
+
+	return (
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChange={ ( ...changeArgs ) => {
+				onChange?.( ...changeArgs );
+				setColor( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );

package/src/color-picker/test/{index.js → index.tsx}

@@ -9,34 +9,37 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
 import { ColorPicker } from '..';
 
 /**
- * Ordinarily we'd try to select the compnoent by role but the silder role appears
+ * Ordinarily we'd try to select the component by role but the slider role appears
  * on several elements and we'd end up encoding assumptions about order when
- * trying to select the appropriate element. We might as well just use the classname
+ * trying to select the appropriate element. We might as well just use the class name
  * on the container which will be more durable if, for example, the order changes.
- *
- * @param {HTMLElement} container
- * @return {HTMLElement} The saturation element
  */
-function getSaturation( container ) {
+function getSaturation( container: HTMLElement ) {
 	return container.querySelector(
 		'.react-colorful__saturation .react-colorful__interactive'
 	);
 }
 
+type PageXPageY = { pageX: number; pageY: number };
+
 // Fix to pass `pageX` and `pageY`
 // See https://github.com/testing-library/react-testing-library/issues/268
-class FakeMouseEvent extends window.MouseEvent {
-	constructor( type, values = {} ) {
+class FakeMouseEvent extends MouseEvent {
+	constructor( type: MouseEvent[ 'type' ], values?: PageXPageY ) {
 		super( type, { buttons: 1, bubbles: true, ...values } );
 
 		Object.assign( this, {
-			pageX: values.pageX || 0,
-			pageY: values.pageY || 0,
+			pageX: values?.pageX ?? 0,
+			pageY: values?.pageY ?? 0,
 		} );
 	}
 }
 
-function moveReactColorfulSlider( sliderElement, from, to ) {
+function moveReactColorfulSlider(
+	sliderElement: Element,
+	from: PageXPageY,
+	to: PageXPageY
+) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
@@ -81,6 +84,13 @@ describe( 'ColorPicker', () => {
 			);
 
 			const saturation = getSaturation( container );
+
+			if ( saturation === null ) {
+				throw new Error( 'The saturation slider could not be found' );
+			}
+
+			expect( saturation ).toBeInTheDocument();
+
 			moveReactColorfulSlider(
 				saturation,
 				{ pageX: 0, pageY: 0 },
@@ -106,6 +116,13 @@ describe( 'ColorPicker', () => {
 		);
 
 		const saturation = getSaturation( container );
+
+		if ( saturation === null ) {
+			throw new Error( 'The saturation slider could not be found' );
+		}
+
+		expect( saturation ).toBeInTheDocument();
+
 		moveReactColorfulSlider(
 			saturation,
 			{ pageX: 0, pageY: 0 },
@@ -121,13 +138,7 @@ describe( 'ColorPicker', () => {
 
 	it( 'should fire onChange with the HSL value', async () => {
 		const onChange = jest.fn();
-		const color = {
-			h: 125,
-			s: 0.2,
-			l: 0.5,
-			// Add alpha to prove it's ignored.
-			a: 0.5,
-		};
+		const color = 'hsla(125, 20%, 50%, 0.5)';
 
 		const { container } = render(
 			<ColorPicker
@@ -138,6 +149,13 @@ describe( 'ColorPicker', () => {
 		);
 
 		const saturation = getSaturation( container );
+
+		if ( saturation === null ) {
+			throw new Error( 'The saturation slider could not be found' );
+		}
+
+		expect( saturation ).toBeInTheDocument();
+
 		moveReactColorfulSlider(
 			saturation,
 			{ pageX: 0, pageY: 0 },