@wordpress/components 22.0.0 → 23.0.0

package/src/border-box-control/border-box-control/README.md

@@ -29,6 +29,7 @@ show "Mixed" placeholder text.
 ```jsx
 import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 const colors = [
 	{ name: 'Blue 20', color: '#72aee6' },
@@ -68,7 +69,7 @@ a `SlotFillProvider` overall.
 
 ## Props
 
-### `colors`: `Array`
+### `colors`: `( PaletteObject | ColorObject )[]`
 
 An array of color definitions. This may also be a multi-dimensional array where
 colors are organized by multiple origins.
@@ -76,6 +77,7 @@ colors are organized by multiple origins.
 Each color may be an object containing a `name` and `color` value.
 
 - Required: No
+- Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
@@ -89,6 +91,7 @@ This controls whether the alpha channel will be offered when selecting
 custom colors.
 
 - Required: No
+- Default: `false`
 
 ### `enableStyle`: `boolean`
 
@@ -124,7 +127,7 @@ _Note: The will be `undefined` if a user clears all borders._
 
 ### `popoverPlacement`: `string`
 
-The position of the color popover relative to the control wrapper.
+The position of the color popovers relative to the control wrapper.
 
 By default, popovers are displayed relative to the button that initiated the popover. By supplying a popover placement, you force the popover to display in a specific location.
 
@@ -134,7 +137,7 @@ The available base placements are 'top', 'right', 'bottom', 'left'. Each of thes
 
 ### `popoverOffset`: `number`
 
-Works in conjunctions with `popoverPlacement` and allows leaving a space between the color popover and the control wrapper.
+The space between the popover and the control wrapper.
 
 - Required: No
 
@@ -166,17 +169,3 @@ const splitBorders = {
 ```
 
 - Required: No
-
-### `__experimentalHasMultipleOrigins`: `boolean`
-
-This is passed on to the color related sub-components which need to be made
-aware of whether the colors prop contains multiple origins.
-
-- Required: No
-
-### `__experimentalIsRenderedInSidebar`: `boolean`
-
-This is passed on to the color related sub-components so they may render more
-effectively when used within a sidebar.
-
-- Required: No

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

@@ -58,7 +58,7 @@ const UnconnectedBorderBoxControl = (
 		onSplitChange,
 		popoverPlacement,
 		popoverOffset,
-		size = 'default',
+		size,
 		splitValue,
 		toggleLinked,
 		wrapperClassName,

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

@@ -25,10 +25,18 @@ import type { Borders, BorderSide, BorderBoxControlProps } from '../types';
 export function useBorderBoxControl(
 	props: WordPressComponentProps< BorderBoxControlProps, 'div' >
 ) {
-	const { className, onChange, value, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControl'
-	);
+	const {
+		className,
+		colors = [],
+		onChange,
+		enableAlpha = false,
+		enableStyle = true,
+		size = 'default',
+		value,
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControl' );
 
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
@@ -114,7 +122,10 @@ export function useBorderBoxControl(
 	return {
 		...otherProps,
 		className: classes,
+		colors,
 		disableUnits: mixedBorders && ! hasWidthValue,
+		enableAlpha,
+		enableStyle,
 		hasMixedBorders: mixedBorders,
 		isLinked,
 		linkedControlClassName,
@@ -122,7 +133,10 @@ export function useBorderBoxControl(
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
+		size,
 		splitValue,
 		wrapperClassName,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-box-control/border-box-control-split-controls/hook.ts

@@ -17,7 +17,12 @@ export function useBorderBoxControlSplitControls(
 ) {
 	const {
 		className,
+		colors = [],
+		enableAlpha = false,
+		enableStyle = true,
 		size = 'default',
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
 
@@ -39,7 +44,12 @@ export function useBorderBoxControlSplitControls(
 		...otherProps,
 		centeredClassName,
 		className: classes,
+		colors,
+		enableAlpha,
+		enableStyle,
 		rightAlignedClassName,
 		size,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -3,6 +3,7 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
@@ -186,6 +187,7 @@ describe( 'BorderBoxControl', () => {
 
 			const colorButton = screen.getByLabelText( colorPickerRegex );
 			await user.click( colorButton );
+			await act( () => Promise.resolve() );
 
 			const styleLabel = screen.queryByText( 'Style' );
 			const solidButton = screen.queryByRole( 'button', {
@@ -309,7 +311,7 @@ describe( 'BorderBoxControl', () => {
 			await user.click( colorButtons[ 3 ] );
 			assertStyleOptionsMissing();
 			await user.click( colorButtons[ 3 ] );
-		}, 10000 );
+		} );
 	} );
 
 	describe( 'onChange handling', () => {

package/src/border-box-control/types.ts

@@ -1,7 +1,12 @@
 /**
  * Internal dependencies
  */
-import type { Border, ColorProps, LabelProps } from '../border-control/types';
+import type {
+	Border,
+	ColorProps,
+	LabelProps,
+	BorderControlProps,
+} from '../border-control/types';
 import type { PopoverProps } from '../popover/types';
 
 export type Borders = {
@@ -16,11 +21,8 @@ export type BorderProp = keyof Border;
 export type BorderSide = keyof Borders;
 
 export type BorderBoxControlProps = ColorProps &
-	LabelProps & {
-		/**
-		 * This controls whether to support border style selections.
-		 */
-		enableStyle?: boolean;
+	LabelProps &
+	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
 		/**
 		 * A callback function invoked when any border value is changed. The value
 		 * received may be a "flat" border object, one that has properties defining
@@ -43,15 +45,9 @@ export type BorderBoxControlProps = ColorProps &
 		 * properties but for each side; `top`, `right`, `bottom`, and `left`.
 		 */
 		value: AnyBorder;
-		/**
-		 * Size of the control.
-		 *
-		 * @default 'default'
-		 */
-		size?: 'default' | '__unstable-large';
 	};
 
-export type LinkedButtonProps = {
+export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {
 	/**
 	 * This prop allows the `LinkedButton` to reflect whether the parent
 	 * `BorderBoxControl` is currently displaying "linked" or "unlinked"
@@ -64,58 +60,36 @@ export type LinkedButtonProps = {
 	 * `BorderBoxControl`.
 	 */
 	onClick: () => void;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
 };
 
-export type VisualizerProps = {
+export type VisualizerProps = Pick< BorderBoxControlProps, 'size' > & {
 	/**
 	 * An object representing the current border configuration. It contains
 	 * properties for each side, with each side an object reflecting the border
 	 * color, style, and width.
 	 */
 	value?: Borders;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
 };
 
-export type SplitControlsProps = ColorProps & {
-	/**
-	 * This controls whether to include border style options within the
-	 * individual `BorderControl` components.
-	 */
-	enableStyle?: boolean;
-	/**
-	 * A callback that is invoked whenever an individual side's border has
-	 * changed.
-	 */
-	onChange: ( value: Border | undefined, side: BorderSide ) => void;
-	/**
-	 * The position of the color popovers compared to the control wrapper.
-	 */
-	popoverPlacement?: PopoverProps[ 'placement' ];
-	/**
-	 * The space between the popover and the control wrapper.
-	 */
-	popoverOffset?: PopoverProps[ 'offset' ];
-	/**
-	 * An object representing the current border configuration. It contains
-	 * properties for each side, with each side an object reflecting the border
-	 * color, style, and width.
-	 */
-	value?: Borders;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
-};
+export type SplitControlsProps = ColorProps &
+	Pick< BorderBoxControlProps, 'enableStyle' | 'size' > & {
+		/**
+		 * A callback that is invoked whenever an individual side's border has
+		 * changed.
+		 */
+		onChange: ( value: Border | undefined, side: BorderSide ) => void;
+		/**
+		 * The position of the color popovers compared to the control wrapper.
+		 */
+		popoverPlacement?: PopoverProps[ 'placement' ];
+		/**
+		 * The space between the popover and the control wrapper.
+		 */
+		popoverOffset?: PopoverProps[ 'offset' ];
+		/**
+		 * An object representing the current border configuration. It contains
+		 * properties for each side, with each side an object reflecting the border
+		 * color, style, and width.
+		 */
+		value?: Borders;
+	};

package/src/border-control/border-control/README.md

@@ -51,7 +51,7 @@ for the `BorderControl`'s color and style options, by rendering your
 
 ## Props
 
-### `colors`: `Array`
+### `colors`: `( PaletteObject | ColorObject )[]`
 
 An array of color definitions. This may also be a multi-dimensional array where
 colors are organized by multiple origins.
@@ -59,6 +59,7 @@ colors are organized by multiple origins.
 Each color may be an object containing a `name` and `color` value.
 
 - Required: No
+- Default: `[]`
 
 ### `disableCustomColors`: `boolean`
 
@@ -78,11 +79,11 @@ This controls whether the alpha channel will be offered when selecting
 custom colors.
 
 - Required: No
+- Default: `false`
 
 ### `enableStyle`: `boolean`
 
-This controls whether to include border style options within the
-`BorderDropdown` sub-component.
+This controls whether to support border style selection.
 
 - Required: No
 - Default: `true`
@@ -172,17 +173,3 @@ Flags whether this `BorderControl` should also render a `RangeControl` for
 additional control over a border's width.
 
 - Required: No
-
-### `__experimentalHasMultipleOrigins`: `boolean`
-
-This is passed on to the color related sub-components which need to be made
-aware of whether the colors prop contains multiple origins.
-
-- Required: No
-
-### `__experimentalIsRenderedInSidebar`: `boolean`
-
-This is passed on to the color related sub-components so they may render more
-effectively when used within a sidebar.
-
-- Required: No

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

@@ -41,7 +41,7 @@ const UnconnectedBorderControl = (
 		disableCustomColors,
 		disableUnits,
 		enableAlpha,
-		enableStyle = true,
+		enableStyle,
 		hideLabelFromVision,
 		innerWrapperClassName,
 		inputWidth,
@@ -53,7 +53,7 @@ const UnconnectedBorderControl = (
 		__unstablePopoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
-		size = 'default',
+		size,
 		sliderClassName,
 		value: border,
 		widthUnit,
@@ -104,6 +104,7 @@ const UnconnectedBorderControl = (
 				/>
 				{ withSlider && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Border width' ) }
 						hideLabelFromVision
 						className={ sliderClassName }

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

@@ -30,12 +30,17 @@ export function useBorderControl(
 ) {
 	const {
 		className,
+		colors = [],
 		isCompact,
 		onChange,
+		enableAlpha = true,
+		enableStyle = true,
 		shouldSanitizeBorder = true,
 		size = 'default',
 		value: border,
 		width,
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
@@ -137,6 +142,9 @@ export function useBorderControl(
 	return {
 		...otherProps,
 		className: classes,
+		colors,
+		enableAlpha,
+		enableStyle,
 		innerWrapperClassName,
 		inputWidth: wrapperWidth,
 		onBorderChange,
@@ -148,5 +156,7 @@ export function useBorderControl(
 		widthUnit,
 		widthValue,
 		size,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -24,12 +24,13 @@ import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
-import type { Color, ColorOrigin, Colors, DropdownProps } from '../types';
+import type { ColorObject, PaletteObject } from '../../color-palette/types';
+import type { ColorProps, DropdownProps } from '../types';
 
 const noop = () => undefined;
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
-	colors: Colors | undefined,
+	colors: ColorProps[ 'colors' ] | undefined,
 	hasMultipleColorOrigins: boolean
 ) => {
 	if ( ! colorValue || ! colors ) {
@@ -39,7 +40,7 @@ const getColorObject = (
 	if ( hasMultipleColorOrigins ) {
 		let matchedColor;
 
-		( colors as ColorOrigin[] ).some( ( origin ) =>
+		( colors as PaletteObject[] ).some( ( origin ) =>
 			origin.colors.some( ( color ) => {
 				if ( color.color === colorValue ) {
 					matchedColor = color;
@@ -53,14 +54,14 @@ const getColorObject = (
 		return matchedColor;
 	}
 
-	return ( colors as Color[] ).find(
+	return ( colors as ColorObject[] ).find(
 		( color ) => color.color === colorValue
 	);
 };
 
 const getToggleAriaLabel = (
 	colorValue: CSSProperties[ 'borderColor' ],
-	colorObject: Color | undefined,
+	colorObject: ColorObject | undefined,
 	style: CSSProperties[ 'borderStyle' ],
 	isStyleEnabled: boolean
 ) => {
@@ -131,6 +132,7 @@ const BorderControlDropdown = (
 		colors,
 		disableCustomColors,
 		enableAlpha,
+		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
 		onReset,
@@ -140,7 +142,6 @@ const BorderControlDropdown = (
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
-		enableStyle = true,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );

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

@@ -19,10 +19,14 @@ export function useBorderControlDropdown(
 	const {
 		border,
 		className,
-		colors,
+		colors = [],
+		enableAlpha = false,
+		enableStyle = true,
 		onChange,
 		previousStyleSelection,
 		size = 'default',
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
@@ -81,6 +85,8 @@ export function useBorderControlDropdown(
 		border,
 		className: classes,
 		colors,
+		enableAlpha,
+		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
 		onColorChange,
@@ -89,5 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-control/styles.ts

@@ -8,10 +8,7 @@ import { css } from '@emotion/react';
  */
 import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
 import { space } from '../ui/utils/space';
-import {
-	StyledField,
-	StyledLabel,
-} from '../base-control/styles/base-control-styles';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 import {
 	ValueInput as UnitControlWrapper,
 	UnitSelect,
@@ -193,10 +190,4 @@ export const borderStyleButton = css`
 export const borderSlider = () => css`
 	flex: 1 1 60%;
 	${ rtl( { marginRight: space( 3 ) } )() }
-
-	${ StyledField } {
-		margin-bottom: 0;
-		font-size: 0;
-		display: flex;
-	}
 `;

package/src/border-control/types.ts

@@ -6,6 +6,7 @@ import type { CSSProperties } from 'react';
 /**
  * Internal dependencies
  */
+import type { ColorPaletteProps } from '../color-palette/types';
 import type { PopoverProps } from '../popover/types';
 
 export type Border = {
@@ -14,43 +15,17 @@ export type Border = {
 	width?: CSSProperties[ 'borderWidth' ];
 };
 
-export type Color = {
-	name: string;
-	color: NonNullable< CSSProperties[ 'color' ] >;
-};
-
-export type ColorOrigin = {
-	name: string;
-	colors: Color[];
-};
-
-export type Colors = ColorOrigin[] | Color[];
-
-export type ColorProps = {
-	/**
-	 * An array of color definitions. This may also be a multi-dimensional array
-	 * where colors are organized by multiple origins.
-	 */
-	colors?: Colors;
+export type ColorProps = Pick<
+	ColorPaletteProps,
+	| 'colors'
+	| 'enableAlpha'
+	| '__experimentalHasMultipleOrigins'
+	| '__experimentalIsRenderedInSidebar'
+> & {
 	/**
 	 * This toggles the ability to choose custom colors.
 	 */
 	disableCustomColors?: boolean;
-	/**
-	 * This controls whether the alpha channel will be offered when selecting
-	 * custom colors.
-	 */
-	enableAlpha?: boolean;
-	/**
-	 * This is passed on to the color related sub-components which need to be
-	 * made aware of whether the colors prop contains multiple origins.
-	 */
-	__experimentalHasMultipleOrigins?: boolean;
-	/**
-	 * This is passed on to the color related sub-components so they may render
-	 * more effectively when used within a sidebar.
-	 */
-	__experimentalIsRenderedInSidebar?: boolean;
 };
 
 export type LabelProps = {
@@ -72,8 +47,7 @@ export type BorderControlProps = ColorProps &
 		 */
 		disableUnits?: boolean;
 		/**
-		 * This controls whether to include border style options within the
-		 * `BorderDropdown` sub-component.
+		 * This controls whether to support border style selection.
 		 *
 		 * @default true
 		 */
@@ -107,6 +81,12 @@ export type BorderControlProps = ColorProps &
 		 * and a close button.
 		 */
 		showDropdownHeader?: boolean;
+		/**
+		 * Size of the control.
+		 *
+		 * @default 'default'
+		 */
+		size?: 'default' | '__unstable-large';
 		/**
 		 * An object representing a border or `undefined`. Used to set the
 		 * current border configuration for this component.
@@ -122,55 +102,38 @@ export type BorderControlProps = ColorProps &
 		 * `RangeControl` for additional control over a border's width.
 		 */
 		withSlider?: boolean;
+	};
+
+export type DropdownProps = ColorProps &
+	Pick< BorderControlProps, 'enableStyle' | 'size' > & {
 		/**
-		 * Size of the control.
-		 *
-		 * @default 'default'
+		 * An object representing a border or `undefined`. This component will
+		 * extract the border color and style selections from this object to use as
+		 * values for its popover controls.
 		 */
-		size?: 'default' | '__unstable-large';
+		border?: Border;
+		/**
+		 * An internal prop used to control the visibility of the dropdown.
+		 */
+		__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
+		/**
+		 * A callback invoked when the border color or style selections change.
+		 */
+		onChange: ( newBorder?: Border ) => void;
+		/**
+		 * Any previous style selection made by the user. This can be used to
+		 * reapply that previous selection when, for example, a zero border width is
+		 * to a non-zero value.
+		 */
+		previousStyleSelection?: string;
+		/**
+		 * Whether or not to render a header for the border color and style picker
+		 * dropdown. The header includes a label for the color picker and a
+		 * close button.
+		 */
+		showDropdownHeader?: boolean;
 	};
 
-export type DropdownProps = ColorProps & {
-	/**
-	 * An object representing a border or `undefined`. This component will
-	 * extract the border color and style selections from this object to use as
-	 * values for its popover controls.
-	 */
-	border?: Border;
-	/**
-	 * An internal prop used to control the visibility of the dropdown.
-	 */
-	__unstablePopoverProps?: Omit< PopoverProps, 'children' >;
-	/**
-	 * This controls whether to render border style options.
-	 *
-	 * @default true
-	 */
-	enableStyle?: boolean;
-	/**
-	 * A callback invoked when the border color or style selections change.
-	 */
-	onChange: ( newBorder?: Border ) => void;
-	/**
-	 * Any previous style selection made by the user. This can be used to
-	 * reapply that previous selection when, for example, a zero border width is
-	 * to a non-zero value.
-	 */
-	previousStyleSelection?: string;
-	/**
-	 * Whether or not to render a header for the border color and style picker
-	 * dropdown. The header includes a label for the color picker and a
-	 * close button.
-	 */
-	showDropdownHeader?: boolean;
-	/**
-	 * Size of the control.
-	 *
-	 * @default 'default'
-	 */
-	size?: 'default' | '__unstable-large';
-};
-
 export type StylePickerProps = LabelProps & {
 	/**
 	 * A callback function invoked when a border style is selected or cleared.