@wordpress/components 25.15.1-next.79a6196f.0 → 26.0.0

package/src/angle-picker-control/types.ts

@@ -4,6 +4,8 @@ export type AnglePickerControlProps = {
 	 * in a future version.
 	 *
 	 * @default false
+	 * @deprecated Default behavior since WP 6.5. Prop can be safely removed.
+	 * @ignore
 	 */
 	__nextHasNoMarginBottom?: boolean;
 	/**

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

@@ -89,7 +89,6 @@ const UnconnectedBorderBoxControl = (
 		);
 
 	const mergedRef = useMergeRefs( [ setPopoverAnchor, forwardedRef ] );
-
 	return (
 		<View className={ className } { ...otherProps } ref={ mergedRef }>
 			<BorderLabel

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

@@ -35,9 +35,13 @@ export function useBorderBoxControl(
 		size = 'default',
 		value,
 		__experimentalIsRenderedInSidebar = false,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
 
+	const computedSize =
+		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+
 	const mixedBorders = hasMixedBorders( value );
 	const splitBorders = hasSplitBorders( value );
 
@@ -133,7 +137,7 @@ export function useBorderBoxControl(
 		onSplitChange,
 		toggleLinked,
 		linkedValue,
-		size,
+		size: computedSize,
 		splitValue,
 		wrapperClassName,
 		__experimentalIsRenderedInSidebar,

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

@@ -45,6 +45,12 @@ 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
+		 */
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type LinkedButtonProps = Pick< BorderBoxControlProps, 'size' > & {

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

@@ -38,6 +38,7 @@ const UnconnectedBorderControl = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
+		__next40pxDefaultSize = false,
 		colors,
 		disableCustomColors,
 		disableUnits,
@@ -46,6 +47,7 @@ const UnconnectedBorderControl = (
 		hideLabelFromVision,
 		innerWrapperClassName,
 		inputWidth,
+		isStyleSettable,
 		label,
 		onBorderChange,
 		onSliderChange,
@@ -80,6 +82,7 @@ const UnconnectedBorderControl = (
 							disableCustomColors={ disableCustomColors }
 							enableAlpha={ enableAlpha }
 							enableStyle={ enableStyle }
+							isStyleSettable={ isStyleSettable }
 							onChange={ onBorderChange }
 							previousStyleSelection={ previousStyleSelection }
 							showDropdownHeader={ showDropdownHeader }
@@ -112,6 +115,7 @@ const UnconnectedBorderControl = (
 						step={ [ 'px', '%' ].includes( widthUnit ) ? 1 : 0.1 }
 						value={ widthValue || undefined }
 						withInputField={ false }
+						__next40pxDefaultSize={ __next40pxDefaultSize }
 					/>
 				) }
 			</HStack>

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

@@ -14,16 +14,12 @@ import { useCx } from '../../utils/hooks/use-cx';
 
 import type { Border, BorderControlProps } from '../types';
 
-const sanitizeBorder = ( border?: Border ) => {
-	const hasNoWidth = border?.width === undefined || border.width === '';
-	const hasNoColor = border?.color === undefined;
-
-	// If width and color are undefined, unset any style selection as well.
-	if ( hasNoWidth && hasNoColor ) {
-		return undefined;
-	}
-
-	return border;
+// If either width or color are defined, the border is considered valid
+// and a border style can be set as well.
+const isValidBorder = ( border?: Border ) => {
+	const hasWidth = border?.width !== undefined && border.width !== '';
+	const hasColor = border?.color !== undefined;
+	return hasWidth || hasColor;
 };
 
 export function useBorderControl(
@@ -41,9 +37,13 @@ export function useBorderControl(
 		value: border,
 		width,
 		__experimentalIsRenderedInSidebar = false,
+		__next40pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
+	const computedSize =
+		size === 'default' && __next40pxDefaultSize ? '__unstable-large' : size;
+
 	const [ widthValue, originalWidthUnit ] = parseQuantityAndUnitFromRawValue(
 		border?.width
 	);
@@ -53,12 +53,16 @@ export function useBorderControl(
 	const [ colorSelection, setColorSelection ] = useState< string >();
 	const [ styleSelection, setStyleSelection ] = useState< string >();
 
+	const isStyleSettable = shouldSanitizeBorder
+		? isValidBorder( border )
+		: true;
+
 	const onBorderChange = useCallback(
 		( newBorder?: Border ) => {
-			if ( shouldSanitizeBorder ) {
-				return onChange( sanitizeBorder( newBorder ) );
+			if ( shouldSanitizeBorder && ! isValidBorder( newBorder ) ) {
+				onChange( undefined );
+				return;
 			}
-
 			onChange( newBorder );
 		},
 		[ onChange, shouldSanitizeBorder ]
@@ -130,10 +134,10 @@ export function useBorderControl(
 	}
 	const innerWrapperClassName = useMemo( () => {
 		const widthStyle = !! wrapperWidth && styles.wrapperWidth;
-		const heightStyle = styles.wrapperHeight( size );
+		const heightStyle = styles.wrapperHeight( computedSize );
 
 		return cx( styles.innerWrapper(), widthStyle, heightStyle );
-	}, [ wrapperWidth, cx, size ] );
+	}, [ wrapperWidth, cx, computedSize ] );
 
 	const sliderClassName = useMemo( () => {
 		return cx( styles.borderSlider() );
@@ -147,6 +151,7 @@ export function useBorderControl(
 		enableStyle,
 		innerWrapperClassName,
 		inputWidth: wrapperWidth,
+		isStyleSettable,
 		onBorderChange,
 		onSliderChange,
 		onWidthChange,
@@ -155,7 +160,8 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		size,
+		size: computedSize,
 		__experimentalIsRenderedInSidebar,
+		__next40pxDefaultSize,
 	};
 }

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

@@ -142,6 +142,7 @@ const BorderControlDropdown = (
 		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
+		isStyleSettable,
 		onReset,
 		onColorChange,
 		onStyleChange,
@@ -218,7 +219,7 @@ const BorderControlDropdown = (
 						clearable={ false }
 						enableAlpha={ enableAlpha }
 					/>
-					{ enableStyle && (
+					{ enableStyle && isStyleSettable && (
 						<BorderControlStylePicker
 							label={ __( 'Style' ) }
 							value={ style }

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

@@ -7,16 +7,12 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import Button from '../../button';
-import { StyledLabel } from '../../base-control/styles/base-control-styles';
-import { View } from '../../view';
-import { Flex } from '../../flex';
-import { VisuallyHidden } from '../../visually-hidden';
-import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
-import { useBorderControlStylePicker } from './hook';
-
-import type { LabelProps, StylePickerProps } from '../types';
+import type { StylePickerProps } from '../types';
+import {
+	ToggleGroupControl,
+	ToggleGroupControlOptionIcon,
+} from '../../toggle-group-control';
 
 const BORDER_STYLES = [
 	{ label: __( 'Solid' ), icon: lineSolid, value: 'solid' },
@@ -24,67 +20,36 @@ const BORDER_STYLES = [
 	{ label: __( 'Dotted' ), icon: lineDotted, value: 'dotted' },
 ];
 
-const Label = ( props: LabelProps ) => {
-	const { label, hideLabelFromVision } = props;
-
-	if ( ! label ) {
-		return null;
-	}
-
-	return hideLabelFromVision ? (
-		<VisuallyHidden as="label">{ label }</VisuallyHidden>
-	) : (
-		<StyledLabel>{ label }</StyledLabel>
-	);
-};
-
-const BorderControlStylePicker = (
-	props: WordPressComponentProps< StylePickerProps, 'div' >,
+function UnconnectedBorderControlStylePicker(
+	{ onChange, ...restProps }: StylePickerProps,
 	forwardedRef: React.ForwardedRef< any >
-) => {
-	const {
-		buttonClassName,
-		hideLabelFromVision,
-		label,
-		onChange,
-		value,
-		...otherProps
-	} = useBorderControlStylePicker( props );
-
+) {
 	return (
-		<View { ...otherProps } ref={ forwardedRef }>
-			<Label
-				label={ label }
-				hideLabelFromVision={ hideLabelFromVision }
-			/>
-			<Flex justify="flex-start" gap={ 1 }>
-				{ BORDER_STYLES.map( ( borderStyle ) => (
-					<Button
-						key={ borderStyle.value }
-						className={ buttonClassName }
-						icon={ borderStyle.icon }
-						size="small"
-						isPressed={ borderStyle.value === value }
-						onClick={ () =>
-							onChange(
-								borderStyle.value === value
-									? undefined
-									: borderStyle.value
-							)
-						}
-						aria-label={ borderStyle.label }
-						label={ borderStyle.label }
-						showTooltip={ true }
-					/>
-				) ) }
-			</Flex>
-		</View>
+		<ToggleGroupControl
+			__nextHasNoMarginBottom
+			__next40pxDefaultSize
+			ref={ forwardedRef }
+			isDeselectable
+			onChange={ ( value ) => {
+				onChange?.( value as string | undefined );
+			} }
+			{ ...restProps }
+		>
+			{ BORDER_STYLES.map( ( borderStyle ) => (
+				<ToggleGroupControlOptionIcon
+					key={ borderStyle.value }
+					value={ borderStyle.value }
+					icon={ borderStyle.icon }
+					label={ borderStyle.label }
+				/>
+			) ) }
+		</ToggleGroupControl>
 	);
-};
+}
 
-const ConnectedBorderControlStylePicker = contextConnect(
-	BorderControlStylePicker,
+const BorderControlStylePicker = contextConnect(
+	UnconnectedBorderControlStylePicker,
 	'BorderControlStylePicker'
 );
 
-export default ConnectedBorderControlStylePicker;
+export default BorderControlStylePicker;

package/src/border-control/styles.ts

@@ -165,21 +165,6 @@ export const resetButton = css`
 	}
 `;
 
-export const borderControlStylePicker = css`
-	${ StyledLabel } {
-		${ labelStyles }
-	}
-`;
-
-export const borderStyleButton = css`
-	&&&&& {
-		min-width: 32px;
-		width: 32px;
-		height: 32px;
-		padding: 4px;
-	}
-`;
-
 export const borderSlider = () => css`
 	flex: 1 1 60%;
 	${ rtl( { marginRight: space( 3 ) } )() }

package/src/border-control/types.ts

@@ -8,6 +8,7 @@ import type { CSSProperties } from 'react';
  */
 import type { ColorPaletteProps } from '../color-palette/types';
 import type { PopoverProps } from '../popover/types';
+import type { ToggleGroupControlProps } from '../toggle-group-control/types';
 
 export type Border = {
 	color?: CSSProperties[ 'borderColor' ];
@@ -99,6 +100,12 @@ export type BorderControlProps = ColorProps &
 		 * `RangeControl` for additional control over a border's width.
 		 */
 		withSlider?: boolean;
+		/**
+		 * Start opting into the larger default height that will become the default size in a future version.
+		 *
+		 * @default false
+		 */
+		__next40pxDefaultSize?: boolean;
 	};
 
 export type DropdownProps = ColorProps &
@@ -109,6 +116,10 @@ export type DropdownProps = ColorProps &
 		 * values for its popover controls.
 		 */
 		border?: Border;
+		/**
+		 * Whether a border style can be set, based on the border sanitization settings.
+		 */
+		isStyleSettable: boolean;
 		/**
 		 * An internal prop used to control the visibility of the dropdown.
 		 */
@@ -131,7 +142,10 @@ export type DropdownProps = ColorProps &
 		showDropdownHeader?: boolean;
 	};
 
-export type StylePickerProps = LabelProps & {
+export type StylePickerProps = Omit<
+	ToggleGroupControlProps,
+	'value' | 'onChange' | 'children'
+> & {
 	/**
 	 * A callback function invoked when a border style is selected or cleared.
 	 */

package/src/box-control/all-input-control.tsx

@@ -1,42 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import type { UnitControlProps } from '../unit-control/types';
+import {
+	FlexedRangeControl,
+	StyledUnitControl,
+} from './styles/box-control-styles';
+import { HStack } from '../h-stack';
 import type { BoxControlInputControlProps } from './types';
-import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control';
 import {
 	LABELS,
 	applyValueToSides,
 	getAllValue,
 	isValuesMixed,
 	isValuesDefined,
+	CUSTOM_VALUE_SETTINGS,
 } from './utils';
 
 const noop = () => {};
 
 export default function AllInputControl( {
+	__next40pxDefaultSize,
 	onChange = noop,
 	onFocus = noop,
-	onHoverOn = noop,
-	onHoverOff = noop,
 	values,
 	sides,
 	selectedUnits,
 	setSelectedUnits,
 	...props
 }: BoxControlInputControlProps ) {
+	const inputId = useInstanceId( AllInputControl, 'box-control-input-all' );
+
 	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
 	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
 	const allPlaceholder = isMixed ? LABELS.mixed : undefined;
 
+	const [ parsedQuantity, parsedUnit ] =
+		parseQuantityAndUnitFromRawValue( allValue );
+
 	const handleOnFocus: React.FocusEventHandler< HTMLInputElement > = (
 		event
 	) => {
 		onFocus( event, { side: 'all' } );
 	};
 
-	const handleOnChange: UnitControlProps[ 'onChange' ] = ( next ) => {
+	const onValueChange = ( next?: string ) => {
 		const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
 		const nextValue = isNumeric ? next : undefined;
 		const nextValues = applyValueToSides( values, nextValue, sides );
@@ -44,6 +58,12 @@ export default function AllInputControl( {
 		onChange( nextValues );
 	};
 
+	const sliderOnChange = ( next?: number ) => {
+		onValueChange(
+			next !== undefined ? [ next, parsedUnit ].join( '' ) : undefined
+		);
+	};
+
 	// Set selected unit so it can be used as fallback by unlinked controls
 	// when individual sides do not have a value containing a unit.
 	const handleOnUnitChange: UnitControlProps[ 'onUnitChange' ] = ( unit ) => {
@@ -51,36 +71,39 @@ export default function AllInputControl( {
 		setSelectedUnits( newUnits );
 	};
 
-	const handleOnHoverOn = () => {
-		onHoverOn( {
-			top: true,
-			bottom: true,
-			left: true,
-			right: true,
-		} );
-	};
-
-	const handleOnHoverOff = () => {
-		onHoverOff( {
-			top: false,
-			bottom: false,
-			left: false,
-			right: false,
-		} );
-	};
-
 	return (
-		<UnitControl
-			{ ...props }
-			disableUnits={ isMixed }
-			isOnly
-			value={ allValue }
-			onChange={ handleOnChange }
-			onUnitChange={ handleOnUnitChange }
-			onFocus={ handleOnFocus }
-			onHoverOn={ handleOnHoverOn }
-			onHoverOff={ handleOnHoverOff }
-			placeholder={ allPlaceholder }
-		/>
+		<HStack>
+			<StyledUnitControl
+				{ ...props }
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				className="component-box-control__unit-control"
+				disableUnits={ isMixed }
+				id={ inputId }
+				isPressEnterToChange
+				value={ allValue }
+				onChange={ onValueChange }
+				onUnitChange={ handleOnUnitChange }
+				onFocus={ handleOnFocus }
+				placeholder={ allPlaceholder }
+				label={ LABELS.all }
+				hideLabelFromVision
+			/>
+
+			<FlexedRangeControl
+				__nextHasNoMarginBottom
+				__next40pxDefaultSize={ __next40pxDefaultSize }
+				aria-controls={ inputId }
+				label={ LABELS.all }
+				hideLabelFromVision
+				onChange={ sliderOnChange }
+				min={ 0 }
+				max={ CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10 }
+				step={
+					CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
+				}
+				value={ parsedQuantity ?? 0 }
+				withInputField={ false }
+			/>
+		</HStack>
 	);
 }