@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/autocomplete/types.ts

@@ -1,7 +1,11 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+
 /**
  * WordPress dependencies
  */
-import type { WPElement } from '@wordpress/element';
 import type { RichTextValue } from '@wordpress/rich-text';
 
 /**
@@ -20,7 +24,7 @@ export type ReplaceOption = { action: 'replace'; value: RichTextValue };
 
 export type OptionCompletion = React.ReactNode | InsertOption | ReplaceOption;
 
-type OptionLabel = string | WPElement | Array< string | WPElement >;
+type OptionLabel = string | ReactElement | Array< string | ReactElement >;
 export type KeyedOption = {
 	key: string;
 	value: any;

package/src/base-control/index.tsx

@@ -15,7 +15,8 @@ import {
 	StyledHelp,
 	StyledVisualLabel,
 } from './styles/base-control-styles';
-import type { WordPressComponentProps } from '../ui/context';
+import type { WordPressComponentProps } from '../context';
+import { contextConnectWithoutRef, useContextSystem } from '../context';
 
 export { useBaseControlProps } from './hooks';
 
@@ -42,19 +43,21 @@ export { useBaseControlProps } from './hooks';
  * );
  * ```
  */
-export const BaseControl = ( {
-	__nextHasNoMarginBottom = false,
-	id,
-	label,
-	hideLabelFromVision = false,
-	help,
-	className,
-	children,
-}: BaseControlProps ) => {
+const UnconnectedBaseControl = (
+	props: WordPressComponentProps< BaseControlProps, null >
+) => {
+	const {
+		__nextHasNoMarginBottom = false,
+		id,
+		label,
+		hideLabelFromVision = false,
+		help,
+		className,
+		children,
+	} = useContextSystem( props, 'BaseControl' );
+
 	return (
-		<Wrapper
-			className={ classnames( 'components-base-control', className ) }
-		>
+		<Wrapper className={ className }>
 			<StyledField
 				className="components-base-control__field"
 				// TODO: Official deprecation for this should start after all internal usages have been migrated
@@ -79,9 +82,7 @@ export const BaseControl = ( {
 					( hideLabelFromVision ? (
 						<VisuallyHidden as="label">{ label }</VisuallyHidden>
 					) : (
-						<BaseControl.VisualLabel>
-							{ label }
-						</BaseControl.VisualLabel>
+						<VisualLabel>{ label }</VisualLabel>
 					) ) }
 				{ children }
 			</StyledField>
@@ -132,6 +133,10 @@ export const VisualLabel = ( {
 		</StyledVisualLabel>
 	);
 };
-BaseControl.VisualLabel = VisualLabel;
+
+export const BaseControl = Object.assign(
+	contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ),
+	{ VisualLabel }
+);
 
 export default BaseControl;

package/src/base-control/styles/base-control-styles.ts

@@ -8,7 +8,7 @@ import { css } from '@emotion/react';
  * Internal dependencies
  */
 import { baseLabelTypography, boxSizingReset, font, COLORS } from '../../utils';
-import { space } from '../../ui/utils/space';
+import { space } from '../../utils/space';
 
 export const Wrapper = styled.div`
 	font-family: ${ font( 'default.fontFamily' ) };

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

@@ -27,9 +27,9 @@ show "Mixed" placeholder text.
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
 
 const colors = [
 	{ name: 'Blue 20', color: '#72aee6' },

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

@@ -14,8 +14,8 @@ import { BorderControl } from '../../border-control';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControl } from './hook';
 
 import type { BorderBoxControlProps } from '../types';
@@ -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

@@ -16,8 +16,8 @@ import {
 	isCompleteBorder,
 	isEmptyBorder,
 } from '../utils';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { Border } from '../../border-control/types';
@@ -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/border-box-control-linked-button/component.tsx

@@ -10,8 +10,8 @@ import { __ } from '@wordpress/i18n';
 import Button from '../../button';
 import Tooltip from '../../tooltip';
 import { View } from '../../view';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControlLinkedButton } from './hook';
 
 import type { LinkedButtonProps } from '../types';
@@ -29,7 +29,7 @@ const BorderBoxControlLinkedButton = (
 			<View className={ className }>
 				<Button
 					{ ...buttonProps }
-					isSmall
+					size="small"
 					icon={ isLinked ? link : linkOff }
 					iconSize={ 24 }
 					aria-label={ label }

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

@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { LinkedButtonProps } from '../types';

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

@@ -11,8 +11,8 @@ import { useMergeRefs } from '@wordpress/compose';
 import BorderBoxControlVisualizer from '../border-box-control-visualizer';
 import { BorderControl } from '../../border-control';
 import { Grid } from '../../grid';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControlSplitControls } from './hook';
 
 import type { BorderControlProps } from '../../border-control/types';

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

@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/';
 
 import type { SplitControlsProps } from '../types';

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

@@ -7,8 +7,8 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import { View } from '../../view';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderBoxControlVisualizer } from './hook';
 
 import type { VisualizerProps } from '../types';

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

@@ -7,8 +7,8 @@ import { useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import * as styles from '../styles';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils';
 
 import type { VisualizerProps } from '../types';

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/README.md

@@ -20,6 +20,7 @@ a "shape" abstraction.
 ## Usage
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalBorderControl as BorderControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -30,13 +31,12 @@ const colors = [
 
 const MyBorderControl = () => {
 	const [ border, setBorder ] = useState();
-	const onChange = ( newBorder ) => setBorder( newBorder );
 
 	return (
 		<BorderControl
 			colors={ colors }
 			label={ __( 'Border' ) }
-			onChange={ onChange }
+			onChange={ setBorder }
 			value={ border }
 		/>
 	);

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

@@ -13,8 +13,8 @@ import { HStack } from '../../h-stack';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import { View } from '../../view';
 import { VisuallyHidden } from '../../visually-hidden';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderControl } from './hook';
 
 import type { BorderControlProps, LabelProps } from '../types';
@@ -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

@@ -8,22 +8,18 @@ import { useCallback, useMemo, useState } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 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

@@ -19,8 +19,8 @@ import ColorPalette from '../../color-palette';
 import Dropdown from '../../dropdown';
 import { HStack } from '../../h-stack';
 import { VStack } from '../../v-stack';
-import type { WordPressComponentProps } from '../../ui/context';
-import { contextConnect } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { contextConnect } from '../../context';
 import { useBorderControlDropdown } from './hook';
 import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
@@ -142,6 +142,7 @@ const BorderControlDropdown = (
 		enableStyle,
 		indicatorClassName,
 		indicatorWrapperClassName,
+		isStyleSettable,
 		onReset,
 		onColorChange,
 		onStyleChange,
@@ -149,6 +150,7 @@ const BorderControlDropdown = (
 		popoverControlsClassName,
 		resetButtonClassName,
 		showDropdownHeader,
+		size,
 		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
@@ -178,6 +180,7 @@ const BorderControlDropdown = (
 			tooltipPosition={ dropdownPosition }
 			label={ __( 'Border color and style picker' ) }
 			showTooltip={ true }
+			__next40pxDefaultSize={ size === '__unstable-large' ? true : false }
 		>
 			<span className={ indicatorWrapperClassName }>
 				<ColorIndicator
@@ -198,7 +201,7 @@ const BorderControlDropdown = (
 						<HStack>
 							<StyledLabel>{ __( 'Border color' ) }</StyledLabel>
 							<Button
-								isSmall
+								size="small"
 								label={ __( 'Close border color' ) }
 								icon={ closeSmall }
 								onClick={ onClose }
@@ -216,7 +219,7 @@ const BorderControlDropdown = (
 						clearable={ false }
 						enableAlpha={ enableAlpha }
 					/>
-					{ enableStyle && (
+					{ enableStyle && isStyleSettable && (
 						<BorderControlStylePicker
 							label={ __( 'Style' ) }
 							value={ style }
@@ -235,7 +238,7 @@ const BorderControlDropdown = (
 							onClose();
 						} }
 					>
-						{ __( 'Reset to default' ) }
+						{ __( 'Reset' ) }
 					</Button>
 				</DropdownContentWrapper>
 			) }

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

@@ -8,8 +8,8 @@ import { useMemo } from '@wordpress/element';
  */
 import * as styles from '../styles';
 import { parseQuantityAndUnitFromRawValue } from '../../unit-control/utils';
-import type { WordPressComponentProps } from '../../ui/context';
-import { useContextSystem } from '../../ui/context';
+import type { WordPressComponentProps } from '../../context';
+import { useContextSystem } from '../../context';
 import { useCx } from '../../utils/hooks/use-cx';
 
 import type { DropdownProps } from '../types';
@@ -57,8 +57,8 @@ export function useBorderControlDropdown(
 	// Generate class names.
 	const cx = useCx();
 	const classes = useMemo( () => {
-		return cx( styles.borderControlDropdown( size ), className );
-	}, [ className, cx, size ] );
+		return cx( styles.borderControlDropdown, className );
+	}, [ className, cx ] );
 
 	const indicatorClassName = useMemo( () => {
 		return cx( styles.borderColorIndicator );
@@ -95,6 +95,7 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
+		size,
 		__experimentalIsRenderedInSidebar,
 	};
 }

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 '../../ui/context';
-import { contextConnect } from '../../ui/context';
-import { useBorderControlStylePicker } from './hook';
-
-import type { LabelProps, StylePickerProps } from '../types';
+import { contextConnect } from '../../context';
+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 }
-						isSmall
-						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;