@wordpress/components 25.15.0 → 25.16.0

package/src/button/README.md

@@ -135,7 +135,7 @@ An accessible description for the button.
 
 #### `disabled`: `boolean`
 
-Whether the button is disabled. If `true`, this will force a `button` element to be rendered.
+Whether the button is disabled. If `true`, this will force a `button` element to be rendered, even when an `href` is given.
 
 -   Required: No
 

package/src/button/index.tsx

@@ -195,9 +195,9 @@ export function UnforwardedButton(
 	const shouldShowTooltip =
 		! trulyDisabled &&
 		// An explicit tooltip is passed or...
-		( ( showTooltip && label ) ||
+		( ( showTooltip && !! label ) ||
 			// There's a shortcut or...
-			shortcut ||
+			!! shortcut ||
 			// There's a label and...
 			( !! label &&
 				// The children are empty and...
@@ -249,40 +249,28 @@ export function UnforwardedButton(
 			</button>
 		);
 
-	// Convert legacy `position` values to be used with the new `placement` prop
-	let computedPlacement;
-	// if `tooltipPosition` is defined, compute value to `placement`
-	if ( tooltipPosition !== undefined ) {
-		computedPlacement = positionToPlacement( tooltipPosition );
-	}
-
-	if ( ! shouldShowTooltip ) {
-		return (
-			<>
-				{ element }
-				{ describedBy && (
-					<VisuallyHidden>
-						<span id={ descriptionId }>{ describedBy }</span>
-					</VisuallyHidden>
-				) }
-			</>
-		);
-	}
-
-	return (
-		<>
-			<Tooltip
-				text={
+	// In order to avoid some React reconciliation issues, we are always rendering
+	// the `Tooltip` component even when `shouldShowTooltip` is `false`.
+	// In order to make sure that the tooltip doesn't show when it shouldn't,
+	// we don't pass the props to the `Tooltip` component.
+	const tooltipProps = shouldShowTooltip
+		? {
+				text:
 					( children as string | ReactElement[] )?.length &&
 					describedBy
 						? describedBy
-						: label
-				}
-				shortcut={ shortcut }
-				placement={ computedPlacement }
-			>
-				{ element }
-			</Tooltip>
+						: label,
+				shortcut,
+				placement:
+					tooltipPosition &&
+					// Convert legacy `position` values to be used with the new `placement` prop
+					positionToPlacement( tooltipPosition ),
+		  }
+		: {};
+
+	return (
+		<>
+			<Tooltip { ...tooltipProps }>{ element }</Tooltip>
 			{ describedBy && (
 				<VisuallyHidden>
 					<span id={ descriptionId }>{ describedBy }</span>

package/src/button/test/index.tsx

@@ -112,6 +112,128 @@ describe( 'Button', () => {
 			);
 		} );
 
+		it( 'should render correctly as a tooltip anchor', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<>
+					<Tooltip text="Tooltip text">
+						<Button icon={ plusCircle } label="Tooltip anchor" />
+					</Tooltip>
+					<Button>Focus me</Button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Tooltip anchor',
+			} );
+
+			await user.tab();
+
+			expect( anchor ).toHaveFocus();
+
+			const tooltip = await screen.findByRole( 'tooltip', {
+				name: 'Tooltip text',
+			} );
+
+			expect( tooltip ).toBeVisible();
+
+			await user.tab();
+
+			expect(
+				screen.getByRole( 'button', { name: 'Focus me' } )
+			).toHaveFocus();
+
+			expect(
+				screen.queryByRole( 'tooltip', {
+					name: 'Tooltip text',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should render correctly as a tooltip anchor, ignoring its internal tooltip in favour of the external tooltip', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<>
+					<Tooltip text="Tooltip text">
+						<Button icon={ plusCircle } label="Button label" />
+					</Tooltip>
+					<Button>Focus me</Button>
+				</>
+			);
+
+			const anchor = screen.getByRole( 'button', {
+				name: 'Button label',
+			} );
+
+			await user.tab();
+
+			expect( anchor ).toHaveFocus();
+
+			const tooltip = await screen.findByRole( 'tooltip', {
+				name: 'Tooltip text',
+			} );
+
+			expect( tooltip ).toBeVisible();
+			// Check that the tooltip that would be normally rendered internally by
+			// the `Button` component is ignored, because of an outer tooltip.
+			expect(
+				screen.queryByRole( 'tooltip', {
+					name: 'Button label',
+				} )
+			).not.toBeInTheDocument();
+
+			await user.tab();
+
+			expect(
+				screen.getByRole( 'button', { name: 'Focus me' } )
+			).toHaveFocus();
+
+			expect(
+				screen.queryByRole( 'tooltip', {
+					name: 'Tooltip text',
+				} )
+			).not.toBeInTheDocument();
+		} );
+
+		it( 'should not trash the rendered HTML elements when toggling between showing and not showing a tooltip', async () => {
+			const user = userEvent.setup();
+
+			const { rerender } = render(
+				<Button label="Button label">Test button</Button>
+			);
+
+			const button = screen.getByRole( 'button', {
+				name: 'Button label',
+			} );
+
+			expect( button ).toBeVisible();
+
+			await user.tab();
+
+			expect( button ).toHaveFocus();
+
+			// Re-render the button, but this time change the settings so that it
+			// shows a tooltip.
+			rerender(
+				<Button label="Button label" showTooltip>
+					Test button
+				</Button>
+			);
+
+			// The same button element that we referenced before should still be
+			// in the document and have focus.
+			expect( button ).toHaveFocus();
+
+			// Re-render the button, but stop showing a tooltip.
+			rerender( <Button label="Button label">Test button</Button> );
+
+			// The same button element that we referenced before should still be
+			// in the document and have focus.
+			expect( button ).toHaveFocus();
+		} );
+
 		it( 'should add a disabled prop to the button', () => {
 			render( <Button disabled /> );
 

package/src/button/types.ts

@@ -115,7 +115,9 @@ type BaseButtonProps = {
 	 */
 	variant?: 'primary' | 'secondary' | 'tertiary' | 'link';
 	/**
-	 * Whether this is focusable.
+	 * Whether to keep the button focusable when disabled.
+	 *
+	 * @default false
 	 */
 	__experimentalIsFocusable?: boolean;
 };
@@ -123,7 +125,8 @@ type BaseButtonProps = {
 type _ButtonProps = {
 	/**
 	 * Whether the button is disabled.
-	 * If `true`, this will force a `button` element to be rendered.
+	 *
+	 * If `true`, this will force a `button` element to be rendered, even when an `href` is given.
 	 */
 	disabled?: boolean;
 };
@@ -131,7 +134,8 @@ type _ButtonProps = {
 type AnchorProps = {
 	/**
 	 * Whether the button is disabled.
-	 * If `true`, this will force a `button` element to be rendered.
+	 *
+	 * If `true`, this will force a `button` element to be rendered, even when an `href` is given.
 	 */
 	disabled?: false;
 	/**

package/src/circular-option-picker/test/index.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { press } from '@ariakit/test';
 
 /**
  * Internal dependencies
@@ -71,8 +71,6 @@ describe( 'CircularOptionPicker', () => {
 
 	describe( 'when `loop` is not set', () => {
 		it( 'should loop', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<CircularOptionPicker
 					{ ...DEFAULT_PROPS }
@@ -80,19 +78,17 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await user.tab();
+			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( getOption( 'Option Two' ) ).toHaveFocus();
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 		} );
 	} );
 
 	describe( 'when `loop` is true', () => {
 		it( 'should loop', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<CircularOptionPicker
 					{ ...DEFAULT_PROPS }
@@ -101,19 +97,17 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await user.tab();
+			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( getOption( 'Option Two' ) ).toHaveFocus();
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
 		} );
 	} );
 
 	describe( 'when `loop` is false', () => {
 		it( 'should not loop', async () => {
-			const user = userEvent.setup();
-
 			render(
 				<CircularOptionPicker
 					{ ...DEFAULT_PROPS }
@@ -122,11 +116,11 @@ describe( 'CircularOptionPicker', () => {
 				/>
 			);
 
-			await user.tab();
+			await press.Tab();
 			expect( getOption( 'Option One' ) ).toHaveFocus();
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( getOption( 'Option Two' ) ).toHaveFocus();
-			await user.keyboard( '[ArrowRight]' );
+			await press.ArrowRight();
 			expect( getOption( 'Option Two' ) ).toHaveFocus();
 		} );
 	} );

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

@@ -33,7 +33,7 @@ let scrollPosition = 0;
 let customIndicatorWidth = 0;
 
 function ColorPalette( {
-	enableCustomColor = true,
+	enableCustomColor = false,
 	setColor,
 	activeColor,
 	isGradientColor,
@@ -62,24 +62,35 @@ function ColorPalette( {
 	const scale = useRef( new Animated.Value( 1 ) ).current;
 	const opacity = useRef( new Animated.Value( 1 ) ).current;
 
-	const defaultColors = [
+	const mergedColors = [
 		...new Set(
 			( defaultSettings.colors ?? [] ).map( ( { color } ) => color )
 		),
 	];
-	const mergedColors = [
+	const mergedGradients = [
+		...new Set(
+			( defaultSettings.gradients ?? [] ).map(
+				( { gradient } ) => gradient
+			)
+		),
+	];
+	const allAvailableColors = [
 		...new Set(
 			( defaultSettings.allColors ?? [] ).map( ( { color } ) => color )
 		),
 	];
-	const defaultGradientColors = [
+	const allAvailableGradients = [
 		...new Set(
-			( defaultSettings.gradients ?? [] ).map(
+			( defaultSettings.allGradients ?? [] ).map(
 				( { gradient } ) => gradient
 			)
 		),
 	];
-	const colors = isGradientSegment ? defaultGradientColors : defaultColors;
+
+	const colors = isGradientSegment ? mergedGradients : mergedColors;
+	const allColors = isGradientSegment
+		? allAvailableGradients
+		: allAvailableColors;
 
 	const customIndicatorColor = isGradientSegment
 		? activeColor
@@ -110,7 +121,7 @@ function ColorPalette( {
 
 	function isSelectedCustom() {
 		const isWithinColors =
-			activeColor && mergedColors && mergedColors.includes( activeColor );
+			activeColor && allColors?.includes( activeColor );
 		if ( enableCustomColor && activeColor ) {
 			if ( isGradientSegment ) {
 				return isGradientColor && ! isWithinColors;

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

@@ -3,6 +3,11 @@
  */
 import { colord } from 'colord';
 
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect, useMemo } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -10,7 +15,49 @@ import { InputWithSlider } from './input-with-slider';
 import type { HslInputProps } from './types';
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
-	const { h, s, l, a } = color.toHsl();
+	const colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );
+
+	const [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );
+
+	const isInternalColorSameAsReceivedColor = color.isEqual(
+		colord( internalHSLA )
+	);
+
+	useEffect( () => {
+		if ( ! isInternalColorSameAsReceivedColor ) {
+			// Keep internal HSLA color up to date with the received color prop
+			setInternalHSLA( colorPropHSLA );
+		}
+	}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );
+
+	// If the internal color is equal to the received color prop, we can use the
+	// HSLA values from the local state which, compared to the received color prop,
+	// retain more details about the actual H and S values that the user selected,
+	// and thus allow for better UX when interacting with the H and S sliders.
+	const colorValue = isInternalColorSameAsReceivedColor
+		? internalHSLA
+		: colorPropHSLA;
+
+	const updateHSLAValue = (
+		partialNewValue: Partial< typeof colorPropHSLA >
+	) => {
+		const nextOnChangeValue = colord( {
+			...colorValue,
+			...partialNewValue,
+		} );
+
+		// Fire `onChange` only if the resulting color is different from the
+		// current one.
+		// Otherwise, update the internal HSLA color to cause a re-render.
+		if ( ! color.isEqual( nextOnChangeValue ) ) {
+			onChange( nextOnChangeValue );
+		} else {
+			setInternalHSLA( ( prevHSLA ) => ( {
+				...prevHSLA,
+				...partialNewValue,
+			} ) );
+		}
+	};
 
 	return (
 		<>
@@ -19,9 +66,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 359 }
 				label="Hue"
 				abbreviation="H"
-				value={ h }
+				value={ colorValue.h }
 				onChange={ ( nextH: number ) => {
-					onChange( colord( { h: nextH, s, l, a } ) );
+					updateHSLAValue( { h: nextH } );
 				} }
 			/>
 			<InputWithSlider
@@ -29,16 +76,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Saturation"
 				abbreviation="S"
-				value={ s }
+				value={ colorValue.s }
 				onChange={ ( nextS: number ) => {
-					onChange(
-						colord( {
-							h,
-							s: nextS,
-							l,
-							a,
-						} )
-					);
+					updateHSLAValue( { s: nextS } );
 				} }
 			/>
 			<InputWithSlider
@@ -46,16 +86,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Lightness"
 				abbreviation="L"
-				value={ l }
+				value={ colorValue.l }
 				onChange={ ( nextL: number ) => {
-					onChange(
-						colord( {
-							h,
-							s,
-							l: nextL,
-							a,
-						} )
-					);
+					updateHSLAValue( { l: nextL } );
 				} }
 			/>
 			{ enableAlpha && (
@@ -64,16 +97,9 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 					max={ 100 }
 					label="Alpha"
 					abbreviation="A"
-					value={ Math.trunc( 100 * a ) }
+					value={ Math.trunc( 100 * colorValue.a ) }
 					onChange={ ( nextA: number ) => {
-						onChange(
-							colord( {
-								h,
-								s,
-								l,
-								a: nextA / 100,
-							} )
-						);
+						updateHSLAValue( { a: nextA / 100 } );
 					} }
 				/>
 			) }