@wordpress/components 29.3.0 → 29.5.0

package/src/border-control/border-control-dropdown/component.tsx

@@ -157,7 +157,7 @@ const BorderControlDropdown = (
 		onStyleChange,
 		popoverContentClassName,
 		popoverControlsClassName,
-		resetButtonClassName,
+		resetButtonWrapperClassName,
 		size,
 		__unstablePopoverProps,
 		...otherProps
@@ -173,7 +173,7 @@ const BorderControlDropdown = (
 		enableStyle
 	);
 
-	const showResetButton = color || ( style && style !== 'none' );
+	const enableResetButton = color || ( style && style !== 'none' );
 	const dropdownPosition = __experimentalIsRenderedInSidebar
 		? 'bottom left'
 		: undefined;
@@ -199,9 +199,7 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
-		onClose,
-	} ) => (
+	const renderContent: DropdownComponentProps[ 'renderContent' ] = () => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
@@ -224,22 +222,20 @@ const BorderControlDropdown = (
 						/>
 					) }
 				</VStack>
-			</DropdownContentWrapper>
-			{ showResetButton && (
-				<DropdownContentWrapper paddingSize="none">
+				<div className={ resetButtonWrapperClassName }>
 					<Button
-						className={ resetButtonClassName }
 						variant="tertiary"
 						onClick={ () => {
 							onReset();
-							onClose();
 						} }
+						disabled={ ! enableResetButton }
+						accessibleWhenDisabled
 						__next40pxDefaultSize
 					>
 						{ __( 'Reset' ) }
 					</Button>
-				</DropdownContentWrapper>
-			) }
+				</div>
+			</DropdownContentWrapper>
 		</>
 	);
 

package/src/border-control/border-control-dropdown/hook.ts

@@ -76,8 +76,8 @@ export function useBorderControlDropdown(
 		return cx( styles.borderControlPopoverContent );
 	}, [ cx ] );
 
-	const resetButtonClassName = useMemo( () => {
-		return cx( styles.resetButton );
+	const resetButtonWrapperClassName = useMemo( () => {
+		return cx( styles.resetButtonWrapper );
 	}, [ cx ] );
 
 	return {
@@ -94,7 +94,7 @@ export function useBorderControlDropdown(
 		onReset,
 		popoverContentClassName,
 		popoverControlsClassName,
-		resetButtonClassName,
+		resetButtonWrapperClassName,
 		size,
 		__experimentalIsRenderedInSidebar,
 	};

package/src/border-control/styles.ts

@@ -147,16 +147,10 @@ export const borderControlPopoverControls = css`
 export const borderControlPopoverContent = css``;
 export const borderColorIndicator = css``;
 
-export const resetButton = css`
-	justify-content: center;
-	width: 100%;
-
-	/* Override button component styling */
-	&& {
-		border-top: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 400 ] };
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
+export const resetButtonWrapper = css`
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 12px;
 `;
 
 export const borderSlider = () => css`

package/src/border-control/test/index.js

@@ -138,7 +138,7 @@ describe( 'BorderControl', () => {
 
 			const customColorPicker = getButton( /Custom color picker/ );
 			const circularOptionPicker = screen.getByRole( 'listbox', {
-				name: 'Custom color picker.',
+				name: 'Custom color picker',
 			} );
 			const colorSwatchButtons =
 				within( circularOptionPicker ).getAllByRole( 'option' );

package/src/circular-option-picker/README.md

@@ -93,6 +93,19 @@ Prevents keyboard interaction from wrapping around. Only used when `asButtons` i
 - Required: No
 - Default: `true`
 
+### `aria-labelledby`: `string`
+
+The ID reference list of one or more elements that label the wrapper element.
+
+- Required: No
+
+### `aria-label`: `string`
+
+The label for the wrapper element. Not used if an 'aria-labelledby' is provided.
+
+- Required: No
+- Default: `Custom color picker`
+
 ## Subcomponents
 
 ### `CircularOptionPicker.ButtonAction`

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

@@ -132,7 +132,7 @@ function ButtonsCircularOptionPicker(
 	);
 
 	return (
-		<div { ...additionalProps } id={ baseId }>
+		<div { ...additionalProps } role="group" id={ baseId }>
 			<CircularOptionPickerContext.Provider value={ contextValue }>
 				{ options }
 				{ children }

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

@@ -9,5 +9,6 @@ export {
 	ButtonAction,
 	DropdownLinkAction,
 } from './circular-option-picker-actions';
+export { getComputeCircularOptionPickerCommonProps } from './utils';
 
 export default CircularOptionPicker;

package/src/circular-option-picker/stories/index.story.tsx

@@ -131,7 +131,7 @@ WithLoopingDisabled.parameters = {
 	docs: {
 		source: {
 			code: `<CircularOptionPicker
-  aria-label="${ WithLoopingDisabled.args[ 'aria-label' ] }"
+  'aria-label': 'Circular Option Picker',
   loop={false}
   options={<DefaultOptions />}
 />`,

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

@@ -57,6 +57,7 @@ describe( 'CircularOptionPicker', () => {
 
 			expect( screen.queryByRole( 'listbox' ) ).not.toBeInTheDocument();
 			expect( screen.queryByRole( 'option' ) ).not.toBeInTheDocument();
+			expect( screen.getByRole( 'group' ) ).toBeInTheDocument();
 			expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
 		} );
 	} );

package/src/circular-option-picker/types.ts

@@ -40,6 +40,16 @@ type CommonCircularOptionPickerProps = {
 	 * The child elements.
 	 */
 	children?: ReactNode;
+	/**
+	 * The ID reference list of one or more elements that label the wrapper
+	 * element.
+	 */
+	'aria-labelledby'?: string;
+	/**
+	 * The label for the wrapper element. Defaults to 'Custom color picker'. Not
+	 * used if an 'aria-labelledby' is provided.
+	 */
+	'aria-label'?: string;
 };
 
 type WithBaseId = {
@@ -59,16 +69,7 @@ type FullListboxCircularOptionPickerProps = CommonCircularOptionPickerProps & {
 	 * @default true
 	 */
 	loop?: boolean;
-} & (
-		| {
-				'aria-label': string;
-				'aria-labelledby'?: never;
-		  }
-		| {
-				'aria-label'?: never;
-				'aria-labelledby': string;
-		  }
-	);
+};
 
 export type ListboxCircularOptionPickerProps = WithBaseId &
 	Omit< FullListboxCircularOptionPickerProps, 'asButtons' >;

package/src/circular-option-picker/utils.tsx

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Computes the common props for the CircularOptionPicker.
+ */
+export function getComputeCircularOptionPickerCommonProps(
+	asButtons?: boolean,
+	loop?: boolean,
+	ariaLabel?: string,
+	ariaLabelledby?: string
+) {
+	const metaProps = asButtons
+		? { asButtons: true }
+		: { asButtons: false, loop };
+
+	const labelProps = {
+		'aria-labelledby': ariaLabelledby,
+		'aria-label': ariaLabelledby
+			? undefined
+			: ariaLabel || __( 'Custom color picker' ),
+	};
+
+	return { metaProps, labelProps };
+}

package/src/color-palette/index.tsx

@@ -19,7 +19,9 @@ import { useCallback, useMemo, useState, forwardRef } from '@wordpress/element';
  */
 import Dropdown from '../dropdown';
 import { ColorPicker } from '../color-picker';
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	getComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import { VStack } from '../v-stack';
 import { Truncate } from '../truncate';
 import { ColorHeading } from './styles';
@@ -233,7 +235,7 @@ function UnforwardedColorPalette(
 				buttonLabelName,
 				displayValue
 		  )
-		: __( 'Custom color picker.' );
+		: __( 'Custom color picker' );
 
 	const paletteCommonProps = {
 		clearColor,
@@ -251,33 +253,12 @@ function UnforwardedColorPalette(
 		</CircularOptionPicker.ButtonAction>
 	);
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
-
-	if ( asButtons ) {
-		metaProps = { asButtons: true };
-	} else {
-		const _metaProps: { asButtons: false; loop?: boolean } = {
-			asButtons: false,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	return (
 		<VStack spacing={ 3 } ref={ forwardedRef } { ...additionalProps }>
@@ -335,6 +316,7 @@ function UnforwardedColorPalette(
 			{ ( colors.length > 0 || actions ) && (
 				<CircularOptionPicker
 					{ ...metaProps }
+					{ ...labelProps }
 					actions={ actions }
 					options={
 						hasMultipleColorOrigins ? (

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

@@ -258,7 +258,7 @@ describe( 'ColorPalette', () => {
 		expect( screen.queryByText( colorCode ) ).not.toBeInTheDocument();
 		expect(
 			screen.getByRole( 'button', {
-				name: /^Custom color picker.$/,
+				name: /^Custom color picker$/,
 			} )
 		).toBeInTheDocument();
 	} );

package/src/combobox-control/README.md

@@ -39,6 +39,7 @@ function MyComboboxControl() {
 			label="Font Size"
 			value={ fontSize }
 			onChange={ setFontSize }
+			isLoading={ isLoading }
 			options={ filteredOptions }
 			onFilterValueChange={ ( inputValue ) =>
 				setFilteredOptions(
@@ -112,13 +113,20 @@ If the control is clicked, the dropdown will expand regardless of this prop.
 -   Required: No
 -   Default: `true`
 
-### placeholder
+#### placeholder
 
 If passed, the combobox input will show a placeholder string if no values are present.
 
 -   Type: `string`
 -   Required: No
 
+#### isLoading
+
+Show a spinner (and hide the suggestions dropdown) while data about the matching suggestions (ie the `options` prop) is loading
+
+-   Type: `Boolean`
+-   Required: No
+
 #### __experimentalRenderItem
 
 Custom renderer invoked for each option in the suggestion list. The render prop receives as its argument an object containing, under the `item` key, the single option's data (directly from the array of data passed to the `options` prop).

package/src/combobox-control/index.tsx

@@ -35,6 +35,7 @@ import type { TokenInputProps } from '../form-token-field/types';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
 import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import { maybeWarnDeprecated36pxSize } from '../utils/deprecated-36px-size';
+import Spinner from '../spinner';
 
 const noop = () => {};
 
@@ -126,6 +127,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 		help,
 		allowReset = true,
 		className,
+		isLoading = false,
 		messages = {
 			selected: __( 'Item selected.' ),
 		},
@@ -362,6 +364,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 								onChange={ onInputChange }
 							/>
 						</FlexBlock>
+						{ isLoading && <Spinner /> }
 						{ allowReset && (
 							<Button
 								size="small"
@@ -375,7 +378,7 @@ function ComboboxControl( props: ComboboxControlProps ) {
 							/>
 						) }
 					</InputWrapperFlex>
-					{ isExpanded && (
+					{ isExpanded && ! isLoading && (
 						<SuggestionsList
 							instanceId={ instanceId }
 							// The empty string for `value` here is not actually used, but is

package/src/combobox-control/style.scss

@@ -36,5 +36,8 @@ input.components-combobox-control__input[type="text"] {
 	&:focus-within {
 		@include input-style__focus();
 	}
-}
 
+	.components-spinner {
+		margin: 0;
+	}
+}

package/src/combobox-control/types.ts

@@ -86,4 +86,11 @@ export type ComboboxControlProps = Pick<
 	 * If passed, the combobox input will show a placeholder string if no values are present.
 	 */
 	placeholder?: string;
+	/**
+	 * Show a spinner (and hide the suggestions dropdown) while data
+	 * about the matching suggestions (ie the `options` prop) is loading
+	 *
+	 * @default false
+	 */
+	isLoading?: boolean;
 };

package/src/duotone-picker/duotone-picker.tsx

@@ -13,7 +13,9 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import ColorListPicker from './color-list-picker';
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	getComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
@@ -127,33 +129,12 @@ function DuotonePicker( {
 		);
 	} );
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
-
-	if ( asButtons ) {
-		metaProps = { asButtons: true };
-	} else {
-		const _metaProps: { asButtons: false; loop?: boolean } = {
-			asButtons: false,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	const options = unsetable
 		? [ unsetOption, ...duotoneOptions ]
@@ -163,6 +144,7 @@ function DuotonePicker( {
 		<CircularOptionPicker
 			{ ...otherProps }
 			{ ...metaProps }
+			{ ...labelProps }
 			options={ options }
 			actions={
 				!! clearable && (

package/src/font-size-picker/README.md

@@ -99,6 +99,8 @@ Available units for custom font size selection.
 
 The current font size value.
 
+**Note**: For the `units` property to work, the current font size value must be specified as strings with units (e.g., `'12px'` instead of `12`). When the font size is provided as a number, the component operates in "unitless mode" where the `units` property has no effect.
+
 -   Required: No
 
 ### `withReset`: `boolean`

package/src/font-size-picker/font-size-picker-select.tsx

@@ -20,21 +20,8 @@ const DEFAULT_OPTION: FontSizePickerSelectOption = {
 	value: undefined,
 };
 
-const CUSTOM_OPTION: FontSizePickerSelectOption = {
-	key: 'custom',
-	name: __( 'Custom' ),
-};
-
 const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
-	const {
-		__next40pxDefaultSize,
-		fontSizes,
-		value,
-		disableCustomFontSizes,
-		size,
-		onChange,
-		onSelectCustom,
-	} = props;
+	const { __next40pxDefaultSize, fontSizes, value, size, onChange } = props;
 
 	const areAllSizesSameUnit = !! getCommonSizeUnit( fontSizes );
 
@@ -59,12 +46,10 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 				hint,
 			};
 		} ),
-		...( disableCustomFontSizes ? [] : [ CUSTOM_OPTION ] ),
 	];
 
-	const selectedOption = value
-		? options.find( ( option ) => option.value === value ) ?? CUSTOM_OPTION
-		: DEFAULT_OPTION;
+	const selectedOption =
+		options.find( ( option ) => option.value === value ) ?? DEFAULT_OPTION;
 
 	return (
 		<CustomSelectControl
@@ -86,11 +71,7 @@ const FontSizePickerSelect = ( props: FontSizePickerSelectProps ) => {
 			}: {
 				selectedItem: FontSizePickerSelectOption;
 			} ) => {
-				if ( selectedItem === CUSTOM_OPTION ) {
-					onSelectCustom();
-				} else {
-					onChange( selectedItem.value );
-				}
+				onChange( selectedItem.value );
 			} }
 			size={ size }
 		/>

package/src/font-size-picker/stories/index.story.tsx

@@ -18,6 +18,10 @@ const meta: Meta< typeof FontSizePicker > = {
 	component: FontSizePicker,
 	argTypes: {
 		value: { control: false },
+		units: {
+			control: 'inline-check',
+			options: [ 'px', 'em', 'rem', 'vw', 'vh' ],
+		},
 	},
 	parameters: {
 		actions: { argTypesRegex: '^on.*' },

package/src/font-size-picker/test/index.tsx

@@ -127,7 +127,7 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
-			expect( options ).toHaveLength( 8 );
+			expect( options ).toHaveLength( 7 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
 			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8' );
 			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 12' );
@@ -135,7 +135,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Large 20' );
 			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30' );
 			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40' );
-			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
 		test.each( [
@@ -186,7 +185,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		commonSelectTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -231,7 +229,7 @@ describe( 'FontSizePicker', () => {
 				screen.getByRole( 'combobox', { name: 'Font size' } )
 			);
 			const options = screen.getAllByRole( 'option' );
-			expect( options ).toHaveLength( 8 );
+			expect( options ).toHaveLength( 7 );
 			expect( options[ 0 ] ).toHaveAccessibleName( 'Default' );
 			expect( options[ 1 ] ).toHaveAccessibleName( 'Tiny 8px' );
 			expect( options[ 2 ] ).toHaveAccessibleName( 'Small 1em' );
@@ -239,7 +237,6 @@ describe( 'FontSizePicker', () => {
 			expect( options[ 4 ] ).toHaveAccessibleName( 'Large' );
 			expect( options[ 5 ] ).toHaveAccessibleName( 'Extra Large 30px' );
 			expect( options[ 6 ] ).toHaveAccessibleName( 'xx-large 40px' );
-			expect( options[ 7 ] ).toHaveAccessibleName( 'Custom' );
 		} );
 
 		test.each( [
@@ -327,7 +324,6 @@ describe( 'FontSizePicker', () => {
 			}
 		);
 
-		commonSelectTests( fontSizes );
 		commonTests( fontSizes );
 	} );
 
@@ -523,24 +519,6 @@ describe( 'FontSizePicker', () => {
 		);
 	}
 
-	function commonSelectTests( fontSizes: FontSize[] ) {
-		it( 'shows custom input when Custom is selected', async () => {
-			const user = userEvent.setup();
-			const onChange = jest.fn();
-			await render(
-				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
-			);
-			await user.click(
-				screen.getByRole( 'combobox', { name: 'Font size' } )
-			);
-			await user.click(
-				screen.getByRole( 'option', { name: 'Custom' } )
-			);
-			expect( screen.getByLabelText( 'Custom' ) ).toBeVisible();
-			expect( onChange ).not.toHaveBeenCalled();
-		} );
-	}
-
 	function commonTests( fontSizes: FontSize[] ) {
 		it( 'shows custom input when value is unknown', async () => {
 			await render(

package/src/font-size-picker/types.ts

@@ -34,6 +34,10 @@ export type FontSizePickerProps = {
 	units?: string[];
 	/**
 	 * The current font size value.
+	 *
+	 * Note: For the `units` property to work, the current font size value must be specified
+	 * as strings with units (e.g., '12px' instead of 12). When the font size is provided
+	 * as a number, the component operates in "unitless mode" where the `units` property has no effect.
 	 */
 	value?: number | string;
 	/**

package/src/gradient-picker/index.tsx

@@ -8,7 +8,9 @@ import { useCallback, useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import CircularOptionPicker from '../circular-option-picker';
+import CircularOptionPicker, {
+	getComputeCircularOptionPickerCommonProps,
+} from '../circular-option-picker';
 import CustomGradientPicker from '../custom-gradient-picker';
 import { VStack } from '../v-stack';
 import { ColorHeading } from '../color-palette/styles';
@@ -128,37 +130,17 @@ function Component( props: PickerProps< any > ) {
 		<SingleOrigin { ...additionalProps } />
 	);
 
-	let metaProps:
-		| { asButtons: false; loop?: boolean; 'aria-label': string }
-		| { asButtons: false; loop?: boolean; 'aria-labelledby': string }
-		| { asButtons: true };
-
-	if ( asButtons ) {
-		metaProps = { asButtons: true };
-	} else {
-		const _metaProps: { asButtons: false; loop?: boolean } = {
-			asButtons: false,
-			loop,
-		};
-
-		if ( ariaLabel ) {
-			metaProps = { ..._metaProps, 'aria-label': ariaLabel };
-		} else if ( ariaLabelledby ) {
-			metaProps = {
-				..._metaProps,
-				'aria-labelledby': ariaLabelledby,
-			};
-		} else {
-			metaProps = {
-				..._metaProps,
-				'aria-label': __( 'Custom color picker.' ),
-			};
-		}
-	}
+	const { metaProps, labelProps } = getComputeCircularOptionPickerCommonProps(
+		asButtons,
+		loop,
+		ariaLabel,
+		ariaLabelledby
+	);
 
 	return (
 		<CircularOptionPicker
 			{ ...metaProps }
+			{ ...labelProps }
 			actions={ actions }
 			options={ options }
 		/>