@wordpress/components 21.3.0 → 22.1.0

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,16 +45,9 @@ export type BorderBoxControlProps = ColorProps &
 		 * properties but for each side; `top`, `right`, `bottom`, and `left`.
 		 */
 		value: AnyBorder;
-		/**
-		 * Start opting into the larger default height that will become the
-		 * default size in a future version.
-		 *
-		 * @default false
-		 */
-		__next36pxDefaultSize?: boolean;
 	};
 
-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"
@@ -65,61 +60,36 @@ export type LinkedButtonProps = {
 	 * `BorderBoxControl`.
 	 */
 	onClick: () => void;
-	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next36pxDefaultSize?: boolean;
 };
 
-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;
-	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next36pxDefaultSize?: boolean;
 };
 
-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;
-	/**
-	 * Start opting into the larger default height that will become the
-	 * default size in a future version.
-	 *
-	 * @default false
-	 */
-	__next36pxDefaultSize?: boolean;
-};
+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`
@@ -135,6 +136,14 @@ dropdown. The header includes a label for the color picker and a close button.
 
 - Required: No
 
+### `size`: `string`
+
+Size of the control.
+
+- Required: No
+- Default: `default`
+- Allowed values: `default`, `__unstable-large`
+
 ### `value`: `Object`
 
 An object representing a border or `undefined`. Used to set the current border
@@ -164,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,6 +53,7 @@ const UnconnectedBorderControl = (
 		__unstablePopoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
+		size,
 		sliderClassName,
 		value: border,
 		widthUnit,
@@ -60,7 +61,6 @@ const UnconnectedBorderControl = (
 		withSlider,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
-		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderControl( props );
 
@@ -70,7 +70,7 @@ const UnconnectedBorderControl = (
 				label={ label }
 				hideLabelFromVision={ hideLabelFromVision }
 			/>
-			<HStack spacing={ 3 } className={ innerWrapperClassName }>
+			<HStack spacing={ 4 } className={ innerWrapperClassName }>
 				<UnitControl
 					prefix={
 						<BorderControlDropdown
@@ -89,7 +89,7 @@ const UnconnectedBorderControl = (
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
-							__next36pxDefaultSize={ __next36pxDefaultSize }
+							size={ size }
 						/>
 					}
 					label={ __( 'Border width' ) }
@@ -100,6 +100,7 @@ const UnconnectedBorderControl = (
 					placeholder={ placeholder }
 					disableUnits={ disableUnits }
 					__unstableInputWidth={ inputWidth }
+					size={ size }
 				/>
 				{ withSlider && (
 					<RangeControl

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,
-		__next36pxDefaultSize = false,
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
@@ -65,7 +70,6 @@ export function useBorderControl(
 			const [ parsedValue ] =
 				parseQuantityAndUnitFromRawValue( newWidth );
 			const hasZeroWidth = parsedValue === 0;
-
 			const updatedBorder = { ...border, width: newWidthValue };
 
 			// Setting the border width explicitly to zero will also set the
@@ -118,13 +122,18 @@ export function useBorderControl(
 		return cx( styles.borderControl, className );
 	}, [ className, cx ] );
 
-	const wrapperWidth = isCompact ? '90px' : width;
+	let wrapperWidth = width;
+	if ( isCompact ) {
+		// Widths below represent the minimum usable width for compact controls.
+		// Taller controls contain greater internal padding, thus greater width.
+		wrapperWidth = size === '__unstable-large' ? '116px' : '90px';
+	}
 	const innerWrapperClassName = useMemo( () => {
 		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
+		const heightStyle = styles.wrapperHeight( size );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, __next36pxDefaultSize ] );
+	}, [ wrapperWidth, cx, size ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -133,6 +142,9 @@ export function useBorderControl(
 	return {
 		...otherProps,
 		className: classes,
+		colors,
+		enableAlpha,
+		enableStyle,
 		innerWrapperClassName,
 		inputWidth: wrapperWidth,
 		onBorderChange,
@@ -143,6 +155,8 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		__next36pxDefaultSize,
+		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,
-		__next36pxDefaultSize,
+		size = 'default',
+		__experimentalHasMultipleOrigins = false,
+		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
@@ -53,18 +57,16 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown(), className );
-	}, [ className, cx ] );
+		return cx( styles.borderControlDropdown( size ), className );
+	}, [ className, cx, size ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
 	}, [ cx ] );
 
 	const indicatorWrapperClassName = useMemo( () => {
-		return cx(
-			styles.colorIndicatorWrapper( border, __next36pxDefaultSize )
-		);
-	}, [ border, cx, __next36pxDefaultSize ] );
+		return cx( styles.colorIndicatorWrapper( border, size ) );
+	}, [ border, cx, size ] );
 
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );
@@ -83,6 +85,8 @@ export function useBorderControlDropdown(
 		border,
 		className: classes,
 		colors,
+		enableAlpha,
+		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
 		onColorChange,
@@ -91,5 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		__experimentalHasMultipleOrigins,
+		__experimentalIsRenderedInSidebar,
 	};
 }

package/src/border-control/stories/index.tsx

@@ -36,12 +36,12 @@ export default meta;
 
 // Available border colors.
 const colors = [
-	{ name: 'Blue', color: '#72aee6' },
-	{ name: 'Red', color: '#e65054' },
-	{ name: 'Yellow', color: '#f2d675' },
-	{ name: 'Blue', color: '#72aee6' },
-	{ name: 'Red', color: '#e65054' },
-	{ name: 'Yellow', color: '#f2d675' },
+	{ name: 'Blue 20', color: '#72aee6' },
+	{ name: 'Blue 40', color: '#3582c4' },
+	{ name: 'Red 40', color: '#e65054' },
+	{ name: 'Red 70', color: '#8a2424' },
+	{ name: 'Yellow 10', color: '#f2d675' },
+	{ name: 'Yellow 40', color: '#bd8600' },
 ];
 
 // Multiple origin colors.
@@ -84,14 +84,12 @@ const Template: ComponentStory< typeof BorderControl > = ( {
 
 	return (
 		<SlotFillProvider>
-			<div style={ { maxWidth: '280px' } }>
-				<BorderControl
-					onChange={ onChangeMerged }
-					value={ border }
-					{ ...props }
-				/>
-			</div>
-			{ /* @ts-expect-error Ignore until Popover is converted to TS */ }
+			<BorderControl
+				onChange={ onChangeMerged }
+				value={ border }
+				{ ...props }
+			/>
+			{ /* @ts-expect-error Ignore until Popover.Slot is converted to TS */ }
 			<Popover.Slot />
 		</SlotFillProvider>
 	);

package/src/border-control/styles.ts

@@ -13,7 +13,7 @@ import {
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
 import {
-	Root as UnitControlWrapper,
+	ValueInput as UnitControlWrapper,
 	UnitSelect,
 } from '../unit-control/styles/unit-control-styles';
 
@@ -56,26 +56,28 @@ export const wrapperWidth = css`
 	}
 `;
 
-/*
- * When default control height is 36px the following should be removed.
- * See: InputControl and __next36pxDefaultSize.
- */
-export const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {
+export const wrapperHeight = ( size?: 'default' | '__unstable-large' ) => {
 	return css`
-		height: ${ __next36pxDefaultSize ? '36px' : '30px' };
+		height: ${ size === '__unstable-large' ? '40px' : '30px' };
 	`;
 };
 
-export const borderControlDropdown = () => css`
+export const borderControlDropdown = (
+	size?: 'default' | '__unstable-large'
+) => css`
 	background: #fff;
 
 	&& > button {
 		/*
-		 * Override button component height and padding to fit within
-		 * BorderControl regardless of size.
+		 * Override button component styles to fit within BorderControl
+		 * regardless of size.
 		 */
-		height: 100%;
-		padding: ${ space( 0.75 ) };
+		height: ${ size === '__unstable-large' ? '40px' : '30px' };
+		width: ${ size === '__unstable-large' ? '40px' : '30px' };
+		padding: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 		${ rtl(
 			{ borderRadius: `2px 0 0 2px` },
 			{ borderRadius: `0 2px 2px 0` }
@@ -106,7 +108,7 @@ export const colorIndicatorBorder = ( border?: Border ) => {
 
 export const colorIndicatorWrapper = (
 	border?: Border,
-	__next36pxDefaultSize?: boolean
+	size?: 'default' | '__unstable-large'
 ) => {
 	const { style } = border || {};
 
@@ -114,9 +116,9 @@ export const colorIndicatorWrapper = (
 		border-radius: 9999px;
 		border: 2px solid transparent;
 		${ style ? colorIndicatorBorder( border ) : undefined }
-		width: ${ __next36pxDefaultSize ? '28px' : '22px' };
-		height: ${ __next36pxDefaultSize ? '28px' : '22px' };
-		padding: ${ __next36pxDefaultSize ? '2px' : '1px' };
+		width: ${ size === '__unstable-large' ? '24px' : '22px' };
+		height: ${ size === '__unstable-large' ? '24px' : '22px' };
+		padding: ${ size === '__unstable-large' ? '2px' : '1px' };
 
 		/*
 		 * ColorIndicator
@@ -125,13 +127,8 @@ export const colorIndicatorWrapper = (
 		 * over the active state of the border control dropdown's toggle button.
 		 */
 		& > span {
-			${ ! __next36pxDefaultSize
-				? css`
-						/* Dimensions fit in 30px overall control height. */
-						height: 16px;
-						width: 16px;
-				  `
-				: '' }
+			height: ${ space( 4 ) };
+			width: ${ space( 4 ) };
 			background: linear-gradient(
 				-45deg,
 				transparent 48%,