@wordpress/components 19.1.1 → 19.1.5

package/src/color-palette/index.js

@@ -5,6 +5,7 @@ import { map } from 'lodash';
 import { colord, extend } from 'colord';
 import namesPlugin from 'colord/plugins/names';
 import a11yPlugin from 'colord/plugins/a11y';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -34,6 +35,7 @@ function SinglePalette( {
 	const colorOptions = useMemo( () => {
 		return map( colors, ( { color, name } ) => {
 			const colordColor = colord( color );
+
 			return (
 				<CircularOptionPicker.Option
 					key={ color }
@@ -108,6 +110,20 @@ function MultiplePalettes( {
 	);
 }
 
+export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
+	return (
+		<Dropdown
+			contentClassName={ classnames(
+				'components-color-palette__custom-color-dropdown-content',
+				{
+					'is-rendered-in-sidebar': isRenderedInSidebar,
+				}
+			) }
+			{ ...props }
+		/>
+	);
+}
+
 export default function ColorPalette( {
 	clearable = true,
 	className,
@@ -117,6 +133,7 @@ export default function ColorPalette( {
 	onChange,
 	value,
 	__experimentalHasMultipleOrigins = false,
+	__experimentalIsRenderedInSidebar = false,
 } ) {
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 	const Component = __experimentalHasMultipleOrigins
@@ -131,11 +148,13 @@ export default function ColorPalette( {
 		/>
 	);
 
+	const colordColor = colord( value );
+
 	return (
 		<VStack spacing={ 3 } className={ className }>
 			{ ! disableCustomColors && (
-				<Dropdown
-					contentClassName="components-color-palette__custom-color-dropdown-content"
+				<CustomColorPickerDropdown
+					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					renderContent={ renderCustomColorPicker }
 					renderToggle={ ( { isOpen, onToggle } ) => (
 						<button
@@ -144,7 +163,14 @@ export default function ColorPalette( {
 							aria-haspopup="true"
 							onClick={ onToggle }
 							aria-label={ __( 'Custom color picker' ) }
-							style={ { background: value } }
+							style={ {
+								background: value,
+								color:
+									colordColor.contrast() >
+									colordColor.contrast( '#000' )
+										? '#fff'
+										: '#000',
+							} }
 						>
 							{ value }
 						</button>

package/src/color-palette/style.scss

@@ -1,7 +1,7 @@
 .components-color-palette__custom-color {
+	position: relative;
 	border: none;
 	background: none;
-	outline: 0;
 	display: block;
 	border-radius: $radius-block-ui;
 	height: $grid-unit-60;
@@ -15,13 +15,34 @@
 	box-sizing: border-box;
 	color: $white;
 	cursor: pointer;
+	box-shadow: inset 0 0 0 $border-width rgba(0, 0, 0, 0.2);
+	// Show a thin outline in Windows high contrast mode.
+	outline: 1px solid transparent;
+
+	&:focus {
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		// Show a outline in Windows high contrast mode.
+		outline-width: 2px;
+	}
 }
 
 .components-dropdown__content.components-color-palette__custom-color-dropdown-content .components-popover__content {
 	overflow: visible;
 	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.05);
 	border: none;
+	border-radius: $radius-block-ui;
 	& > div {
 		padding: 0;
 	}
+	.react-colorful__saturation {
+		border-top-right-radius: $radius-block-ui;
+		border-top-left-radius: $radius-block-ui;
+	}
+}
+
+@include break-medium() {
+	.components-dropdown__content.components-color-palette__custom-color-dropdown-content.is-rendered-in-sidebar.is-from-top .components-popover__content {
+		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
+		margin-top: #{ -($grid-unit-60 + $grid-unit-15) };
+	}
 }

package/src/color-palette/test/__snapshots__/index.js.snap

@@ -17,6 +17,7 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
   style={
     Object {
       "background": "#f00",
+      "color": "#000",
     }
   }
 >
@@ -27,7 +28,6 @@ exports[`ColorPalette Dropdown .renderToggle should render dropdown content 1`]
 exports[`ColorPalette Dropdown should render it correctly 1`] = `
 <Dropdown
   contentClassName="components-color-palette__custom-color-dropdown-content"
-  key=".0"
   renderContent={[Function]}
   renderToggle={[Function]}
 >
@@ -44,6 +44,7 @@ exports[`ColorPalette Dropdown should render it correctly 1`] = `
       style={
         Object {
           "background": "#f00",
+          "color": "#000",
         }
       }
     >
@@ -177,32 +178,39 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
         data-wp-c16t={true}
         data-wp-component="VStack"
       >
-        <Dropdown
-          contentClassName="components-color-palette__custom-color-dropdown-content"
+        <CustomColorPickerDropdown
+          isRenderedInSidebar={false}
           key=".0"
           renderContent={[Function]}
           renderToggle={[Function]}
         >
-          <div
-            className="components-dropdown"
-            tabIndex="-1"
+          <Dropdown
+            contentClassName="components-color-palette__custom-color-dropdown-content"
+            renderContent={[Function]}
+            renderToggle={[Function]}
           >
-            <button
-              aria-expanded={false}
-              aria-haspopup="true"
-              aria-label="Custom color picker"
-              className="components-color-palette__custom-color"
-              onClick={[Function]}
-              style={
-                Object {
-                  "background": "#f00",
-                }
-              }
+            <div
+              className="components-dropdown"
+              tabIndex="-1"
             >
-              #f00
-            </button>
-          </div>
-        </Dropdown>
+              <button
+                aria-expanded={false}
+                aria-haspopup="true"
+                aria-label="Custom color picker"
+                className="components-color-palette__custom-color"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "background": "#f00",
+                    "color": "#000",
+                  }
+                }
+              >
+                #f00
+              </button>
+            </div>
+          </Dropdown>
+        </CustomColorPickerDropdown>
         <SinglePalette
           actions={
             <ButtonAction

package/src/color-picker/README.md

@@ -22,32 +22,34 @@ function Example() {
 
 ## Props
 
-### `color`
-
-**Type**: `string`
+### `color`: `string`
 
 The current color value to display in the picker. Must be a hex or hex8 string.
 
-### `onChange`
+- Required: No
 
-**Type**: `(hex8Color: string) => void`
+### `onChange`: `(hex8Color: string) => void`
 
 Fired when the color changes. Always passes a hex8 color string.
 
-### `enableAlpha`
+- Required: No
 
-**Type**: `boolean`
+### `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.
 
-### `defaultValue`
+- Required: No
+- Default: `false`
 
-**Type**: `string | undefined`
+### `defaultValue`: `string | undefined`
 
 An optional default value to use for the color picker.
 
-### `copyFormat`
+- Required: No
+- Default: `'#fff'`
 
-**Type**: `'hex' | 'hsl' | 'rgb' | undefined`
+### `copyFormat`: `'hex' | 'hsl' | 'rgb' | undefined`
 
 The format to copy when clicking the displayed color format.
+
+- Required: No

package/src/color-picker/component.tsx

@@ -11,6 +11,7 @@ import namesPlugin from 'colord/plugins/names';
  */
 import { useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
+import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -32,6 +33,7 @@ import {
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
+import { useControlledValue } from '../utils/hooks';
 
 import type { ColorType } from './types';
 
@@ -57,7 +59,7 @@ const ColorPicker = (
 ) => {
 	const {
 		enableAlpha = false,
-		color,
+		color: colorProp,
 		onChange,
 		defaultValue = '#fff',
 		copyFormat,
@@ -65,15 +67,23 @@ const ColorPicker = (
 	} = useContextSystem( props, 'ColorPicker' );
 
 	// Use a safe default value for the color and remove the possibility of `undefined`.
+	const [ color, setColor ] = useControlledValue( {
+		onChange,
+		value: colorProp,
+		defaultValue,
+	} );
+
 	const safeColordColor = useMemo( () => {
-		return color ? colord( color ) : colord( defaultValue );
-	}, [ color, defaultValue ] );
+		return colord( color );
+	}, [ color ] );
+
+	const debouncedSetColor = useDebounce( setColor );
 
 	const handleChange = useCallback(
 		( nextValue: Colord ) => {
-			onChange( nextValue.toHex() );
+			debouncedSetColor( nextValue.toHex() );
 		},
-		[ onChange ]
+		[ debouncedSetColor ]
 	);
 
 	const [ showInputs, setShowInputs ] = useState< boolean >( false );

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

@@ -41,6 +41,12 @@ function moveReactColorfulSlider( sliderElement, from, to ) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
 
+const sleep = ( ms ) => {
+	const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
+	jest.advanceTimersByTime( ms + 1 );
+	return promise;
+};
+
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
 	s: expect.any( Number ),
@@ -87,6 +93,9 @@ describe( 'ColorPicker', () => {
 				{ pageX: 10, pageY: 10 }
 			);
 
+			// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
+			await sleep( 1 );
+
 			expect( onChangeComplete ).toHaveBeenCalledWith(
 				legacyColorMatcher
 			);
@@ -108,6 +117,9 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
+		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
+		await sleep( 1 );
+
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
 		);
@@ -138,6 +150,9 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
+		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
+		await sleep( 1 );
+
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )
 		);

package/src/custom-gradient-bar/constants.js

@@ -1,8 +1,3 @@
-export const COLOR_POPOVER_PROPS = {
-	className: 'components-custom-gradient-picker__color-picker-popover',
-	position: 'top',
-};
-
 export const GRADIENT_MARKERS_WIDTH = 16;
 export const INSERT_POINT_WIDTH = 16;
 export const MINIMUM_ABSOLUTE_LEFT_POSITION = 5;

package/src/custom-gradient-bar/control-points.js

@@ -8,8 +8,8 @@ import { colord } from 'colord';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { useEffect, useRef, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { useEffect, useRef, useState, useMemo } from '@wordpress/element';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
 import { plus } from '@wordpress/icons';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 
@@ -18,8 +18,8 @@ import { LEFT, RIGHT } from '@wordpress/keycodes';
  */
 import Button from '../button';
 import { ColorPicker } from '../color-picker';
-import Dropdown from '../dropdown';
 import { VisuallyHidden } from '../visually-hidden';
+import { CustomColorPickerDropdown } from '../color-palette';
 
 import {
 	addControlPoint,
@@ -31,7 +31,6 @@ import {
 	getHorizontalRelativeGradientPosition,
 } from './utils';
 import {
-	COLOR_POPOVER_PROPS,
 	GRADIENT_MARKERS_WIDTH,
 	MINIMUM_SIGNIFICANT_MOVE,
 	KEYBOARD_CONTROL_POINT_VARIATION,
@@ -74,6 +73,33 @@ function ControlPointButton( { isOpen, position, color, ...additionalProps } ) {
 	);
 }
 
+function GradientColorPickerDropdown( {
+	isRenderedInSidebar,
+	gradientPickerDomRef,
+	...props
+} ) {
+	const popoverProps = useMemo( () => {
+		const result = {
+			className:
+				'components-custom-gradient-picker__color-picker-popover',
+			position: 'top',
+		};
+		if ( isRenderedInSidebar ) {
+			result.anchorRef = gradientPickerDomRef.current;
+			result.position = isRTL() ? 'bottom right' : 'bottom left';
+			result.__unstableForcePosition = true;
+		}
+		return result;
+	}, [ gradientPickerDomRef.current, isRenderedInSidebar ] );
+	return (
+		<CustomColorPickerDropdown
+			isRenderedInSidebar={ isRenderedInSidebar }
+			popoverProps={ popoverProps }
+			{ ...props }
+		/>
+	);
+}
+
 function ControlPoints( {
 	disableRemove,
 	disableAlpha,
@@ -83,6 +109,7 @@ function ControlPoints( {
 	onChange,
 	onStartControlPointChange,
 	onStopControlPointChange,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const controlPointMoveState = useRef();
 
@@ -134,7 +161,9 @@ function ControlPoints( {
 		const initialPosition = point?.position;
 		return (
 			ignoreMarkerPosition !== initialPosition && (
-				<Dropdown
+				<GradientColorPickerDropdown
+					gradientPickerDomRef={ gradientPickerDomRef }
+					isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 					key={ index }
 					onClose={ onStopControlPointChange }
 					renderToggle={ ( { isOpen, onToggle } ) => (
@@ -225,7 +254,7 @@ function ControlPoints( {
 									);
 								} }
 							/>
-							{ ! disableRemove && (
+							{ ! disableRemove && controlPoints.length > 2 && (
 								<Button
 									className="components-custom-gradient-picker__remove-control-point"
 									onClick={ () => {
@@ -244,7 +273,6 @@ function ControlPoints( {
 							) }
 						</>
 					) }
-					popoverProps={ COLOR_POPOVER_PROPS }
 				/>
 			)
 		);
@@ -258,10 +286,14 @@ function InsertPoint( {
 	onCloseInserter,
 	insertPosition,
 	disableAlpha,
+	__experimentalIsRenderedInSidebar,
+	gradientPickerDomRef,
 } ) {
 	const [ alreadyInsertedPoint, setAlreadyInsertedPoint ] = useState( false );
 	return (
-		<Dropdown
+		<GradientColorPickerDropdown
+			gradientPickerDomRef={ gradientPickerDomRef }
+			isRenderedInSidebar={ __experimentalIsRenderedInSidebar }
 			className="components-custom-gradient-picker__inserter"
 			onClose={ () => {
 				onCloseInserter();
@@ -314,7 +346,6 @@ function InsertPoint( {
 					} }
 				/>
 			) }
-			popoverProps={ COLOR_POPOVER_PROPS }
 		/>
 	);
 }

package/src/custom-gradient-bar/index.js

@@ -78,6 +78,7 @@ export default function CustomGradientBar( {
 	onChange,
 	disableInserter = false,
 	disableAlpha = false,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const gradientPickerDomRef = useRef();
 
@@ -134,6 +135,10 @@ export default function CustomGradientBar( {
 				{ ! disableInserter &&
 					( isMovingInserter || isInsertingControlPoint ) && (
 						<ControlPoints.InsertPoint
+							__experimentalIsRenderedInSidebar={
+								__experimentalIsRenderedInSidebar
+							}
+							gradientPickerDomRef={ gradientPickerDomRef }
 							disableAlpha={ disableAlpha }
 							insertPosition={ gradientBarState.insertPosition }
 							value={ controlPoints }
@@ -151,6 +156,9 @@ export default function CustomGradientBar( {
 						/>
 					) }
 				<ControlPoints
+					__experimentalIsRenderedInSidebar={
+						__experimentalIsRenderedInSidebar
+					}
 					disableAlpha={ disableAlpha }
 					disableRemove={ disableInserter }
 					gradientPickerDomRef={ gradientPickerDomRef }

package/src/custom-gradient-picker/index.js

@@ -103,7 +103,11 @@ const GradientTypePicker = ( { gradientAST, hasGradient, onChange } ) => {
 	);
 };
 
-export default function CustomGradientPicker( { value, onChange } ) {
+export default function CustomGradientPicker( {
+	value,
+	onChange,
+	__experimentalIsRenderedInSidebar,
+} ) {
 	const gradientAST = getGradientAstWithDefault( value );
 	// On radial gradients the bar should display a linear gradient.
 	// On radial gradients the bar represents a slice of the gradient from the center until the outside.
@@ -120,6 +124,9 @@ export default function CustomGradientPicker( { value, onChange } ) {
 	return (
 		<div className="components-custom-gradient-picker">
 			<CustomGradientBar
+				__experimentalIsRenderedInSidebar={
+					__experimentalIsRenderedInSidebar
+				}
 				background={ background }
 				hasGradient={ hasGradient }
 				value={ controlPoints }

package/src/gradient-picker/index.js

@@ -106,13 +106,16 @@ export default function GradientPicker( {
 	clearable = true,
 	disableCustomGradients = false,
 	__experimentalHasMultipleOrigins,
+	__experimentalIsRenderedInSidebar,
 } ) {
 	const clearGradient = useCallback( () => onChange( undefined ), [
 		onChange,
 	] );
-	const Component = __experimentalHasMultipleOrigins
-		? MultipleOrigin
-		: SingleOrigin;
+	const Component =
+		__experimentalHasMultipleOrigins && gradients?.length
+			? MultipleOrigin
+			: SingleOrigin;
+
 	return (
 		<Component
 			className={ className }
@@ -122,7 +125,8 @@ export default function GradientPicker( {
 			onChange={ onChange }
 			value={ value }
 			actions={
-				clearable && (
+				clearable &&
+				( gradients?.length || ! disableCustomGradients ) && (
 					<CircularOptionPicker.ButtonAction
 						onClick={ clearGradient }
 					>
@@ -133,6 +137,9 @@ export default function GradientPicker( {
 			content={
 				! disableCustomGradients && (
 					<CustomGradientPicker
+						__experimentalIsRenderedInSidebar={
+							__experimentalIsRenderedInSidebar
+						}
 						value={ value }
 						onChange={ onChange }
 					/>

package/src/gradient-picker/stories/index.js

@@ -84,3 +84,26 @@ export const _default = () => {
 		/>
 	);
 };
+
+export const WithNoExistingGradients = () => {
+	const disableCustomGradients = boolean( 'Disable Custom Gradients', false );
+	const __experimentalHasMultipleOrigins = boolean(
+		'Experimental Has Multiple Origins',
+		true
+	);
+	const clearable = boolean( 'Clearable', true );
+	const className = text( 'Class Name', '' );
+	const gradients = object( 'Gradients', [] );
+
+	return (
+		<GradientPickerWithState
+			__experimentalHasMultipleOrigins={
+				__experimentalHasMultipleOrigins
+			}
+			disableCustomGradients={ disableCustomGradients }
+			gradients={ gradients }
+			clearable={ clearable }
+			className={ className }
+		/>
+	);
+};

package/src/navigation/item/index.js

@@ -52,8 +52,10 @@ export default function NavigationItem( props ) {
 		return null;
 	}
 
+	const isActive = item && activeItem === item;
+
 	const classes = classnames( className, {
-		'is-active': item && activeItem === item,
+		'is-active': isActive,
 	} );
 
 	const onItemClick = ( event ) => {
@@ -67,7 +69,13 @@ export default function NavigationItem( props ) {
 	const baseProps = children ? props : { ...props, onClick: undefined };
 	const itemProps = isText
 		? restProps
-		: { as: Button, href, onClick: onItemClick, ...restProps };
+		: {
+				as: Button,
+				href,
+				onClick: onItemClick,
+				'aria-current': isActive ? 'page' : undefined,
+				...restProps,
+		  };
 
 	return (
 		<NavigationItemBase { ...baseProps } className={ classes }>