@wordpress/components 25.6.1 → 25.8.0

package/src/color-palette/test/index.tsx

@@ -19,10 +19,6 @@ const EXAMPLE_COLORS = [
 ];
 const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
 
-function getWrappingPopoverElement( element: HTMLElement ) {
-	return element.closest( '.components-popover' );
-}
-
 const ControlledColorPalette = ( {
 	onChange,
 }: {
@@ -43,20 +39,6 @@ const ControlledColorPalette = ( {
 };
 
 describe( 'ColorPalette', () => {
-	it( 'should render a dynamic toolbar of colors', () => {
-		const onChange = jest.fn();
-
-		const { container } = render(
-			<ColorPalette
-				colors={ EXAMPLE_COLORS }
-				value={ INITIAL_COLOR }
-				onChange={ onChange }
-			/>
-		);
-
-		expect( container ).toMatchSnapshot();
-	} );
-
 	it( 'should render three color button options', () => {
 		const onChange = jest.fn();
 
@@ -69,7 +51,7 @@ describe( 'ColorPalette', () => {
 		);
 
 		expect(
-			screen.getAllByRole( 'button', { name: /^Color:/ } )
+			screen.getAllByRole( 'option', { name: /^Color:/ } )
 		).toHaveLength( 3 );
 	} );
 
@@ -86,7 +68,7 @@ describe( 'ColorPalette', () => {
 		);
 
 		await user.click(
-			screen.getByRole( 'button', { name: /^Color:/, pressed: true } )
+			screen.getByRole( 'option', { name: /^Color:/, selected: true } )
 		);
 
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
@@ -108,9 +90,9 @@ describe( 'ColorPalette', () => {
 		// Click the first unpressed button
 		// (i.e. a button representing a color that is not the current color)
 		await user.click(
-			screen.getAllByRole( 'button', {
+			screen.getAllByRole( 'option', {
 				name: /^Color:/,
-				pressed: false,
+				selected: false,
 			} )[ 0 ]
 		);
 
@@ -137,10 +119,26 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
+	it( 'should render custom color picker', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: /^Custom color picker\./ } )
+		).toBeInTheDocument();
+	} );
+
 	it( 'should allow disabling custom color picker', () => {
 		const onChange = jest.fn();
 
-		const { container } = render(
+		render(
 			<ColorPalette
 				colors={ EXAMPLE_COLORS }
 				disableCustomColors
@@ -149,7 +147,9 @@ describe( 'ColorPalette', () => {
 			/>
 		);
 
-		expect( container ).toMatchSnapshot();
+		expect(
+			screen.queryByRole( 'button', { name: /^Custom color picker\./ } )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should render dropdown and its content', async () => {
@@ -188,9 +188,7 @@ describe( 'ColorPalette', () => {
 		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
 
 		await waitFor( () =>
-			expect(
-				getWrappingPopoverElement( dropdownColorInput )
-			).toBePositionedPopover()
+			expect( dropdownColorInput ).toBePositionedPopover()
 		);
 	} );
 
@@ -231,9 +229,9 @@ describe( 'ColorPalette', () => {
 
 		// Click the first unpressed button
 		await user.click(
-			screen.getAllByRole( 'button', {
+			screen.getAllByRole( 'option', {
 				name: /^Color:/,
-				pressed: false,
+				selected: false,
 			} )[ 0 ]
 		);
 
@@ -258,7 +256,11 @@ describe( 'ColorPalette', () => {
 		// Clear the color, confirm that the relative values are cleared/updated.
 		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
 		expect( screen.getByText( 'No color selected' ) ).toBeVisible();
-		expect( screen.queryByText( colorName ) ).not.toBeInTheDocument();
+		expect(
+			screen.queryByText( colorName, {
+				selector: '.components-color-palette__custom-color-name',
+			} )
+		).not.toBeInTheDocument();
 		expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument();
 		expect(
 			screen.getByRole( 'button', {

package/src/color-palette/types.ts

@@ -82,10 +82,43 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	 * Currently active value.
 	 */
 	value?: string;
+	/**
+	 * Whether the control should present as a set of buttons,
+	 * each with its own tab stop.
+	 *
+	 * @default false
+	 */
+	asButtons?: boolean;
+	/**
+	 * Prevents keyboard interaction from wrapping around.
+	 * Only used when `asButtons` is not true.
+	 *
+	 * @default true
+	 */
+	loop?: boolean;
 	/**
 	 * Whether this is rendered in the sidebar.
 	 *
 	 * @default false
 	 */
 	__experimentalIsRenderedInSidebar?: boolean;
-};
+} & (
+		| {
+				/**
+				 * A label to identify the purpose of the control.
+				 *
+				 * @todo [#54055] Either this or `aria-labelledby` should be required
+				 */
+				'aria-label'?: string;
+				'aria-labelledby'?: never;
+		  }
+		| {
+				/**
+				 * An ID of an element to provide a label for the control.
+				 *
+				 * @todo [#54055] Either this or `aria-label` should be required
+				 */
+				'aria-labelledby'?: string;
+				'aria-label'?: never;
+		  }
+	);

package/src/color-picker/hsv-color-picker.native.js

@@ -0,0 +1,88 @@
+/**
+ * External dependencies
+ */
+import { View, Dimensions } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import HuePicker from './hue-picker';
+import SaturationValuePicker from './saturation-picker';
+import styles from './style.native.scss';
+
+const HsvColorPicker = ( props ) => {
+	const maxWidth = Dimensions.get( 'window' ).width - 32;
+	const satValPickerRef = useRef( null );
+
+	const {
+		containerStyle = {},
+		currentColor,
+		huePickerContainerStyle = {},
+		huePickerBorderRadius = 0,
+		huePickerHue = 0,
+		huePickerBarWidth = maxWidth,
+		huePickerBarHeight = 12,
+		huePickerSliderSize = 24,
+		onHuePickerDragStart,
+		onHuePickerDragMove,
+		onHuePickerDragEnd,
+		onHuePickerDragTerminate,
+		onHuePickerPress,
+		satValPickerContainerStyle = {},
+		satValPickerBorderRadius = 0,
+		satValPickerSize = { width: maxWidth, height: 200 },
+		satValPickerSliderSize = 24,
+		satValPickerHue = 0,
+		satValPickerSaturation = 1,
+		satValPickerValue = 1,
+		onSatValPickerDragStart,
+		onSatValPickerDragMove,
+		onSatValPickerDragEnd,
+		onSatValPickerDragTerminate,
+		onSatValPickerPress,
+	} = props;
+
+	return (
+		<View
+			style={ [ styles[ 'hsv-container' ], containerStyle ] }
+			testID="hsv-color-picker"
+		>
+			<SaturationValuePicker
+				containerStyle={ satValPickerContainerStyle }
+				currentColor={ currentColor }
+				borderRadius={ satValPickerBorderRadius }
+				size={ satValPickerSize }
+				sliderSize={ satValPickerSliderSize }
+				hue={ satValPickerHue }
+				saturation={ satValPickerSaturation }
+				value={ satValPickerValue }
+				onDragStart={ onSatValPickerDragStart }
+				onDragMove={ onSatValPickerDragMove }
+				onDragEnd={ onSatValPickerDragEnd }
+				onDragTerminate={ onSatValPickerDragTerminate }
+				onPress={ onSatValPickerPress }
+				ref={ satValPickerRef }
+			/>
+			<HuePicker
+				containerStyle={ huePickerContainerStyle }
+				borderRadius={ huePickerBorderRadius }
+				hue={ huePickerHue }
+				barWidth={ huePickerBarWidth }
+				barHeight={ huePickerBarHeight }
+				sliderSize={ huePickerSliderSize }
+				onDragStart={ onHuePickerDragStart }
+				onDragMove={ onHuePickerDragMove }
+				onDragEnd={ onHuePickerDragEnd }
+				onDragTerminate={ onHuePickerDragTerminate }
+				onPress={ onHuePickerPress }
+			/>
+		</View>
+	);
+};
+
+export default HsvColorPicker;

package/src/color-picker/hue-picker.native.js

@@ -0,0 +1,194 @@
+/**
+ * External dependencies
+ */
+import { Animated, View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.scss';
+
+export default class HuePicker extends Component {
+	constructor( props ) {
+		super( props );
+		this.hueColors = [
+			'#ff0000',
+			'#ffff00',
+			'#00ff00',
+			'#00ffff',
+			'#0000ff',
+			'#ff00ff',
+			'#ff0000',
+		];
+		this.sliderX = new Animated.Value(
+			( props.barHeight * props.hue ) / 360
+		);
+		this.panResponder = PanResponder.create( {
+			onStartShouldSetPanResponder: () => true,
+			onStartShouldSetPanResponderCapture: () => true,
+			onMoveShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponderCapture: () => true,
+			onPanResponderGrant: ( evt, gestureState ) => {
+				const { onPress } = this.props;
+				this.dragStartValue = this.computeHueValuePress( evt );
+
+				if ( onPress ) {
+					onPress( {
+						hue: this.computeHueValuePress( evt ),
+						nativeEvent: evt.nativeEvent,
+					} );
+				}
+
+				this.fireDragEvent( 'onDragStart', gestureState );
+			},
+			onPanResponderMove: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragMove', gestureState );
+			},
+			onPanResponderTerminationRequest: () => true,
+			onPanResponderRelease: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragEnd', gestureState );
+			},
+			onPanResponderTerminate: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragTerminate', gestureState );
+			},
+			onShouldBlockNativeResponder: () => true,
+		} );
+	}
+
+	componentDidUpdate( prevProps ) {
+		const { hue = 0, barWidth = 200, sliderSize = 24 } = this.props;
+		const borderWidth = sliderSize / 10;
+		if ( prevProps.hue !== hue || prevProps.barWidth !== barWidth ) {
+			this.sliderX.setValue(
+				( ( barWidth - sliderSize + borderWidth ) * hue ) / 360
+			);
+		}
+	}
+
+	normalizeValue( value ) {
+		if ( value < 0 ) return 0;
+		if ( value > 1 ) return 1;
+		return value;
+	}
+
+	getContainerStyle() {
+		const {
+			sliderSize = 24,
+			barHeight = 12,
+			containerStyle = {},
+		} = this.props;
+		const paddingLeft = sliderSize / 2;
+		const paddingTop =
+			sliderSize - barHeight > 0 ? ( sliderSize - barHeight ) / 2 : 0;
+		return [
+			styles[ 'hsv-container' ],
+			containerStyle,
+			{
+				paddingTop,
+				paddingBottom: paddingTop,
+				paddingLeft,
+				paddingRight: paddingLeft,
+			},
+		];
+	}
+
+	computeHueValueDrag( gestureState ) {
+		const { dx } = gestureState;
+		const { barWidth = 200 } = this.props;
+		const { dragStartValue } = this;
+		const diff = dx / barWidth;
+		const updatedHue =
+			this.normalizeValue( dragStartValue / 360 + diff ) * 360;
+		return updatedHue;
+	}
+
+	computeHueValuePress( event ) {
+		const { nativeEvent } = event;
+		const { locationX } = nativeEvent;
+		const { barWidth = 200 } = this.props;
+		const updatedHue = this.normalizeValue( locationX / barWidth ) * 360;
+		return updatedHue;
+	}
+
+	fireDragEvent( eventName, gestureState ) {
+		const { [ eventName ]: event } = this.props;
+		if ( event ) {
+			event( {
+				hue: this.computeHueValueDrag( gestureState ),
+				gestureState,
+			} );
+		}
+	}
+
+	firePressEvent( event ) {
+		const { onPress } = this.props;
+		if ( onPress ) {
+			onPress( {
+				hue: this.computeHueValuePress( event ),
+				nativeEvent: event.nativeEvent,
+			} );
+		}
+	}
+
+	render() {
+		const { hueColors } = this;
+		const {
+			sliderSize = 24,
+			barWidth = 200,
+			barHeight = 12,
+			borderRadius = 0,
+		} = this.props;
+		const borderWidth = sliderSize / 10;
+		return (
+			<View
+				style={ this.getContainerStyle() }
+				{ ...this.panResponder.panHandlers }
+				hitSlop={ {
+					top: 10,
+					bottom: 10,
+					left: 0,
+					right: 0,
+				} }
+			>
+				<LinearGradient
+					colors={ hueColors }
+					style={ {
+						borderRadius,
+					} }
+					start={ { x: 0, y: 0 } }
+					end={ { x: 1, y: 0 } }
+				>
+					<View
+						style={ {
+							width: barWidth,
+							height: barHeight,
+						} }
+					/>
+				</LinearGradient>
+				<Animated.View
+					pointerEvents="none"
+					style={ [
+						styles[ 'hue-slider' ],
+						{
+							width: sliderSize,
+							height: sliderSize,
+							left: ( sliderSize - borderWidth ) / 2,
+							borderRadius: sliderSize / 2,
+							transform: [
+								{
+									translateX: this.sliderX,
+								},
+							],
+						},
+					] }
+				/>
+			</View>
+		);
+	}
+}

package/src/color-picker/index.native.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
-import HsvColorPicker from 'react-native-hsv-color-picker';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 /**
@@ -17,6 +16,7 @@ import { Icon, check, close } from '@wordpress/icons';
  * Internal dependencies
  */
 import styles from './style.scss';
+import HsvColorPicker from './hsv-color-picker.native.js';
 
 extend( [ namesPlugin ] );
 
@@ -122,6 +122,7 @@ function ColorPicker( {
 		<>
 			<HsvColorPicker
 				huePickerHue={ hue }
+				currentColor={ currentColor }
 				onHuePickerDragMove={ updateColor }
 				onHuePickerPress={
 					! isBottomSheetContentScrolling && updateColor

package/src/color-picker/saturation-picker.native.js

@@ -0,0 +1,163 @@
+/**
+ * External dependencies
+ */
+import { View, PanResponder } from 'react-native';
+import LinearGradient from 'react-native-linear-gradient';
+import { colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import React, { Component } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import styles from './style.native.scss';
+
+export default class SaturationValuePicker extends Component {
+	constructor( props ) {
+		super( props );
+
+		this.panResponder = PanResponder.create( {
+			onStartShouldSetPanResponder: () => true,
+			onStartShouldSetPanResponderCapture: () => true,
+			onMoveShouldSetPanResponder: () => true,
+			onMoveShouldSetPanResponderCapture: () => true,
+			onPanResponderGrant: ( evt, gestureState ) => {
+				const { onPress } = this.props;
+				const { saturation, value } = this.computeSatValPress( evt );
+				this.dragStartValue = {
+					saturation,
+					value,
+				};
+
+				if ( onPress ) {
+					onPress( {
+						...this.computeSatValPress( evt ),
+						nativeEvent: evt.nativeEvent,
+					} );
+				}
+
+				this.fireDragEvent( 'onDragStart', gestureState );
+			},
+			onPanResponderMove: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragMove', gestureState );
+			},
+			onPanResponderTerminationRequest: () => true,
+			onPanResponderRelease: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragEnd', gestureState );
+			},
+			onPanResponderTerminate: ( evt, gestureState ) => {
+				this.fireDragEvent( 'onDragTerminate', gestureState );
+			},
+			onShouldBlockNativeResponder: () => true,
+		} );
+	}
+
+	normalizeValue( value ) {
+		if ( value < 0 ) return 0;
+		if ( value > 1 ) return 1;
+		return value;
+	}
+
+	computeSatValDrag( gestureState ) {
+		const { dx, dy } = gestureState;
+		const { size } = this.props;
+		const { saturation, value } = this.dragStartValue;
+		const diffx = dx / size.width;
+		const diffy = dy / size.height;
+		return {
+			saturation: this.normalizeValue( saturation + diffx ),
+			value: this.normalizeValue( value - diffy ),
+		};
+	}
+
+	computeSatValPress( event ) {
+		const { nativeEvent } = event;
+		const { locationX, locationY } = nativeEvent;
+		const { size } = this.props;
+		return {
+			saturation: this.normalizeValue( locationX / size.width ),
+			value: 1 - this.normalizeValue( locationY / size.height ),
+		};
+	}
+
+	fireDragEvent( eventName, gestureState ) {
+		const { [ eventName ]: event } = this.props;
+		if ( event ) {
+			event( {
+				...this.computeSatValDrag( gestureState ),
+				gestureState,
+			} );
+		}
+	}
+
+	render() {
+		const {
+			size,
+			sliderSize = 24,
+			hue = 0,
+			value = 1,
+			saturation = 1,
+			containerStyle = {},
+			borderRadius = 0,
+			currentColor,
+		} = this.props;
+
+		return (
+			<View
+				style={ [
+					styles[ 'hsv-container' ],
+					containerStyle,
+					{
+						height: size.height + sliderSize,
+						width: size.width + sliderSize,
+					},
+				] }
+				{ ...this.panResponder.panHandlers }
+			>
+				<LinearGradient
+					style={ [
+						styles[ 'gradient-container' ],
+						{
+							borderRadius,
+						},
+					] }
+					colors={ [
+						'#fff',
+						colord( { h: hue, s: 100, l: 50 } ).toHex(),
+					] }
+					start={ { x: 0, y: 0.5 } }
+					end={ { x: 1, y: 0.5 } }
+				>
+					<LinearGradient colors={ [ 'rgba(0, 0, 0, 0)', '#000' ] }>
+						<View
+							style={ {
+								height: size.height,
+								width: size.width,
+							} }
+						/>
+					</LinearGradient>
+				</LinearGradient>
+				<View
+					pointerEvents="none"
+					style={ [
+						styles[ 'saturation-slider' ],
+						{
+							width: sliderSize,
+							height: sliderSize,
+							borderRadius: sliderSize / 2,
+							borderWidth: sliderSize / 10,
+							backgroundColor: currentColor,
+							transform: [
+								{ translateX: size.width * saturation },
+								{ translateY: size.height * ( 1 - value ) },
+							],
+						},
+					] }
+				/>
+			</View>
+		);
+	}
+}

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ComponentMeta, Story } from '@storybook/react';
+import type { Meta, StoryFn } from '@storybook/react';
 
 /**
  * WordPress dependencies
@@ -13,7 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { ColorPicker } from '../component';
 
-const meta: ComponentMeta< typeof ColorPicker > = {
+const meta: Meta< typeof ColorPicker > = {
 	component: ColorPicker,
 	title: 'Components/ColorPicker',
 	argTypes: {
@@ -30,7 +30,7 @@ const meta: ComponentMeta< typeof ColorPicker > = {
 };
 export default meta;
 
-const Template: Story< typeof ColorPicker > = ( { onChange, ...props } ) => {
+const Template: StoryFn< typeof ColorPicker > = ( { onChange, ...props } ) => {
 	const [ color, setColor ] = useState< string | undefined >();
 
 	return (

package/src/color-picker/style.native.scss

@@ -62,3 +62,26 @@
 .pickerPointer {
 	height: 16px;
 }
+
+.hsv-container {
+	justify-content: center;
+	align-items: center;
+}
+
+.gradient-gontainer {
+	overflow: hidden;
+}
+
+.saturation-slider {
+	top: 0;
+	left: 0;
+	position: absolute;
+	border-color: $white;
+}
+
+.hue-slider {
+	position: absolute;
+	background-color: #fff;
+	box-shadow: 0 7px 10px rgba(0, 0, 0, 0.5);
+	z-index: 5;
+}