@wordpress/components 19.10.0 → 19.13.0

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

@@ -2,6 +2,8 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useRef } from '@wordpress/element';
+import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -25,12 +27,24 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		onChange,
-		popoverClassNames,
+		popoverPlacement,
+		popoverOffset,
+		rightAlignedClassName,
 		value,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
+		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
+	const containerRef = useRef();
+	const mergedRef = useMergeRefs( [ containerRef, forwardedRef ] );
+	const popoverProps = popoverPlacement
+		? {
+				placement: popoverPlacement,
+				offset: popoverOffset,
+				anchorRef: containerRef,
+		  }
+		: undefined;
 
 	const sharedBorderControlProps = {
 		colors,
@@ -40,17 +54,21 @@ const BorderBoxControlSplitControls = (
 		isCompact: true,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
+		__next36pxDefaultSize,
 	};
 
 	return (
-		<Grid { ...otherProps } ref={ forwardedRef } gap={ 4 }>
-			<BorderBoxControlVisualizer value={ value } />
+		<Grid { ...otherProps } ref={ mergedRef } gap={ 4 }>
+			<BorderBoxControlVisualizer
+				value={ value }
+				__next36pxDefaultSize={ __next36pxDefaultSize }
+			/>
 			<BorderControl
 				className={ centeredClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Top border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'top' ) }
-				popoverContentClassName={ popoverClassNames?.top }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.top }
 				{ ...sharedBorderControlProps }
 			/>
@@ -58,15 +76,16 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Left border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'left' ) }
-				popoverContentClassName={ popoverClassNames?.left }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.left }
 				{ ...sharedBorderControlProps }
 			/>
 			<BorderControl
+				className={ rightAlignedClassName }
 				hideLabelFromVision={ true }
 				label={ __( 'Right border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'right' ) }
-				popoverContentClassName={ popoverClassNames?.right }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.right }
 				{ ...sharedBorderControlProps }
 			/>
@@ -75,7 +94,7 @@ const BorderBoxControlSplitControls = (
 				hideLabelFromVision={ true }
 				label={ __( 'Bottom border' ) }
 				onChange={ ( newBorder ) => onChange( newBorder, 'bottom' ) }
-				popoverContentClassName={ popoverClassNames?.bottom }
+				__unstablePopoverProps={ popoverProps }
 				value={ value?.bottom }
 				{ ...sharedBorderControlProps }
 			/>

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

@@ -22,13 +22,27 @@ export function useBorderBoxControlSplitControls(
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControlSplitControls, className );
-	}, [ className, rtl.watch() ] );
+		return cx( styles.borderBoxControlSplitControls(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
 
 	const centeredClassName = useMemo( () => {
 		return cx( styles.CenteredBorderControl, className );
-	}, [] );
+	}, [ cx, className ] );
 
-	return { ...otherProps, centeredClassName, className: classes };
+	const rightAlignedClassName = useMemo( () => {
+		return cx( styles.rightBorderControl(), className );
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, rtlWatchResult ] );
+
+	return {
+		...otherProps,
+		centeredClassName,
+		className: classes,
+		rightAlignedClassName,
+	};
 }

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

@@ -15,16 +15,24 @@ import type { VisualizerProps } from '../types';
 export function useBorderBoxControlVisualizer(
 	props: WordPressComponentProps< VisualizerProps, 'div' >
 ) {
-	const { className, value, ...otherProps } = useContextSystem(
-		props,
-		'BorderBoxControlVisualizer'
-	);
+	const {
+		className,
+		value,
+		__next36pxDefaultSize = false,
+		...otherProps
+	} = useContextSystem( props, 'BorderBoxControlVisualizer' );
 
 	// Generate class names.
 	const cx = useCx();
+	const rtlWatchResult = rtl.watch();
 	const classes = useMemo( () => {
-		return cx( styles.BorderBoxControlVisualizer( value ), className );
-	}, [ className, value, rtl.watch() ] );
+		return cx(
+			styles.borderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			className
+		);
+		// rtlWatchResult is needed to refresh styles when the writing direction changes
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ cx, className, value, __next36pxDefaultSize, rtlWatchResult ] );
 
 	return { ...otherProps, className: classes, value };
 }

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

@@ -84,6 +84,7 @@ Default.args = {
 		style: 'dashed',
 		width: '1px',
 	},
+	__next36pxDefaultSize: false,
 };
 
 const WrapperView = styled.div`

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

@@ -18,11 +18,15 @@ export const LinkedBorderControl = css`
 	flex: 1;
 `;
 
-export const BorderBoxControlLinkedButton = css`
-	flex: 0;
-	flex-basis: 36px;
-	margin-top: 7px;
-`;
+export const BorderBoxControlLinkedButton = (
+	__next36pxDefaultSize?: boolean
+) => {
+	return css`
+		flex: 0;
+		flex-basis: 36px;
+		margin-top: ${ __next36pxDefaultSize ? '6px' : '3px' };
+	`;
+};
 
 const BorderBoxStyleWithFallback = ( border?: Border ) => {
 	const {
@@ -39,12 +43,15 @@ const BorderBoxStyleWithFallback = ( border?: Border ) => {
 	return `${ color } ${ borderStyle } ${ clampedWidth }`;
 };
 
-export const BorderBoxControlVisualizer = ( borders?: Borders ) => {
+export const borderBoxControlVisualizer = (
+	borders?: Borders,
+	__next36pxDefaultSize?: boolean
+) => {
 	return css`
 		position: absolute;
-		top: 20px;
+		top: ${ __next36pxDefaultSize ? '18px' : '15px' };
 		right: 30px;
-		bottom: 20px;
+		bottom: ${ __next36pxDefaultSize ? '18px' : '15px' };
 		left: 30px;
 		border-top: ${ BorderBoxStyleWithFallback( borders?.top ) };
 		border-bottom: ${ BorderBoxStyleWithFallback( borders?.bottom ) };
@@ -57,7 +64,7 @@ export const BorderBoxControlVisualizer = ( borders?: Borders ) => {
 	`;
 };
 
-export const BorderBoxControlSplitControls = css`
+export const borderBoxControlSplitControls = () => css`
 	position: relative;
 	flex: 1;
 	${ rtl( { marginRight: space( 3 ) }, { marginLeft: space( 3 ) } )() }
@@ -67,3 +74,7 @@ export const CenteredBorderControl = css`
 	grid-column: span 2;
 	margin: 0 auto;
 `;
+
+export const rightBorderControl = () => css`
+	${ rtl( { marginLeft: 'auto' }, { marginRight: 'auto' } )() }
+`;

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

@@ -14,14 +14,6 @@ export type AnyBorder = Border | Borders | undefined;
 export type BorderProp = keyof Border;
 export type BorderSide = keyof Borders;
 
-export type PopoverClassNames = {
-	linked?: string;
-	top?: string;
-	right?: string;
-	bottom?: string;
-	left?: string;
-};
-
 export type BorderBoxControlProps = ColorProps &
 	LabelProps & {
 		/**
@@ -35,10 +27,13 @@ export type BorderBoxControlProps = ColorProps &
 		 */
 		onChange: ( value: AnyBorder ) => void;
 		/**
-		 * An object defining CSS classnames for all the inner `BorderControl`
-		 * popover content.
+		 * The position of the color popovers compared to the control wrapper.
+		 */
+		popoverPlacement?: string;
+		/**
+		 * The space between the popover and the control wrapper.
 		 */
-		popoverClassNames?: PopoverClassNames;
+		popoverOffset?: number;
 		/**
 		 * An object representing the current border configuration.
 		 *
@@ -47,6 +42,13 @@ 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 = {
@@ -62,6 +64,13 @@ 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 = {
@@ -71,6 +80,13 @@ export type VisualizerProps = {
 	 * 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 & {
@@ -85,14 +101,24 @@ export type SplitControlsProps = ColorProps & {
 	 */
 	onChange: ( value: Border | undefined, side: BorderSide ) => void;
 	/**
-	 * An object defining CSS classnames for the split side `BorderControl`s'
-	 * popover content.
+	 * The position of the color popovers compared to the control wrapper.
 	 */
-	popoverClassNames?: PopoverClassNames;
+	popoverPlacement?: string;
+	/**
+	 * The space between the popover and the control wrapper.
+	 */
+	popoverOffset?: number;
 	/**
 	 * 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;
 };

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

@@ -135,8 +135,11 @@ export const getShorthandBorderStyle = (
 		return fallbackBorder;
 	}
 
-	const { color: fallbackColor, style: fallbackStyle, width: fallbackWidth } =
-		fallbackBorder || {};
+	const {
+		color: fallbackColor,
+		style: fallbackStyle,
+		width: fallbackWidth,
+	} = fallbackBorder || {};
 
 	const {
 		color = fallbackColor,

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

@@ -113,13 +113,6 @@ _Note: the value may be `undefined` if a user clears all border properties._
 
 - Required: Yes
 
-### `popoverContentClassName`: `string`
-
-A custom CSS class name to be assigned to the `BorderControl`'s dropdown
-popover content.
-
-- Required: No
-
 ### `shouldSanitizeBorder`: `boolean`
 
 If opted into, sanitizing the border means that if no width or color have been

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

@@ -43,7 +43,7 @@ const BorderControl = (
 		onSliderChange,
 		onWidthChange,
 		placeholder,
-		popoverContentClassName,
+		__unstablePopoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
 		sliderClassName,
@@ -54,6 +54,7 @@ const BorderControl = (
 		withSlider,
 		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
+		__next36pxDefaultSize,
 		...otherProps
 	} = useBorderControl( props );
 
@@ -68,7 +69,7 @@ const BorderControl = (
 					<BorderControlDropdown
 						border={ border }
 						colors={ colors }
-						contentClassName={ popoverContentClassName }
+						__unstablePopoverProps={ __unstablePopoverProps }
 						disableCustomColors={ disableCustomColors }
 						enableAlpha={ enableAlpha }
 						enableStyle={ enableStyle }
@@ -81,6 +82,7 @@ const BorderControl = (
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
+						__next36pxDefaultSize={ __next36pxDefaultSize }
 					/>
 					<UnitControl
 						className={ widthControlClassName }

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

@@ -35,6 +35,7 @@ export function useBorderControl(
 		shouldSanitizeBorder = true,
 		value: border,
 		width,
+		__next36pxDefaultSize = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
@@ -55,15 +56,14 @@ export function useBorderControl(
 
 			onChange( newBorder );
 		},
-		[ onChange, shouldSanitizeBorder, sanitizeBorder ]
+		[ onChange, shouldSanitizeBorder ]
 	);
 
 	const onWidthChange = useCallback(
 		( newWidth?: string ) => {
 			const newWidthValue = newWidth === '' ? undefined : newWidth;
-			const [ parsedValue ] = parseQuantityAndUnitFromRawValue(
-				newWidth
-			);
+			const [ parsedValue ] =
+				parseQuantityAndUnitFromRawValue( newWidth );
 			const hasZeroWidth = parsedValue === 0;
 
 			const updatedBorder = { ...border, width: newWidthValue };
@@ -96,7 +96,13 @@ export function useBorderControl(
 
 			onBorderChange( updatedBorder );
 		},
-		[ border, hadPreviousZeroWidth, onBorderChange ]
+		[
+			border,
+			hadPreviousZeroWidth,
+			colorSelection,
+			styleSelection,
+			onBorderChange,
+		]
 	);
 
 	const onSliderChange = useCallback(
@@ -116,9 +122,10 @@ export function useBorderControl(
 		const wrapperWidth = isCompact ? '90px' : width;
 		const widthStyle =
 			!! wrapperWidth && styles.wrapperWidth( wrapperWidth );
+		const heightStyle = styles.wrapperHeight( __next36pxDefaultSize );
 
-		return cx( styles.innerWrapper(), widthStyle );
-	}, [ isCompact, width, cx ] );
+		return cx( styles.innerWrapper(), widthStyle, heightStyle );
+	}, [ isCompact, width, cx, __next36pxDefaultSize ] );
 
 	const widthControlClassName = useMemo( () => {
 		return cx( styles.borderWidthControl() );
@@ -141,5 +148,6 @@ export function useBorderControl(
 		widthControlClassName,
 		widthUnit,
 		widthValue,
+		__next36pxDefaultSize,
 	};
 }

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

@@ -147,6 +147,7 @@ const BorderControlDropdown = (
 		resetButtonClassName,
 		showDropdownHeader,
 		enableStyle = true,
+		__unstablePopoverProps,
 		...otherProps
 	} = useBorderControlDropdown( props );
 
@@ -164,6 +165,7 @@ const BorderControlDropdown = (
 		enableStyle
 	);
 
+	const showResetButton = color || ( style && style !== 'none' );
 	const dropdownPosition = __experimentalIsRenderedInSidebar
 		? 'bottom left'
 		: undefined;
@@ -220,16 +222,18 @@ const BorderControlDropdown = (
 					/>
 				) }
 			</VStack>
-			<Button
-				className={ resetButtonClassName }
-				variant="tertiary"
-				onClick={ () => {
-					onReset();
-					onClose();
-				} }
-			>
-				{ __( 'Reset to default' ) }
-			</Button>
+			{ showResetButton && (
+				<Button
+					className={ resetButtonClassName }
+					variant="tertiary"
+					onClick={ () => {
+						onReset();
+						onClose();
+					} }
+				>
+					{ __( 'Reset to default' ) }
+				</Button>
+			) }
 		</>
 	);
 
@@ -237,7 +241,10 @@ const BorderControlDropdown = (
 		<Dropdown
 			renderToggle={ renderToggle }
 			renderContent={ renderContent }
-			contentClassName={ popoverClassName }
+			popoverProps={ {
+				...__unstablePopoverProps,
+				className: popoverClassName,
+			} }
 			{ ...otherProps }
 			ref={ forwardedRef }
 		/>

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

@@ -20,9 +20,9 @@ export function useBorderControlDropdown(
 		border,
 		className,
 		colors,
-		contentClassName,
 		onChange,
 		previousStyleSelection,
+		__next36pxDefaultSize,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
@@ -61,12 +61,14 @@ export function useBorderControlDropdown(
 	}, [ cx ] );
 
 	const indicatorWrapperClassName = useMemo( () => {
-		return cx( styles.colorIndicatorWrapper( border ) );
-	}, [ border, cx ] );
+		return cx(
+			styles.colorIndicatorWrapper( border, __next36pxDefaultSize )
+		);
+	}, [ border, cx, __next36pxDefaultSize ] );
 
 	const popoverClassName = useMemo( () => {
-		return cx( styles.borderControlPopover, contentClassName );
-	}, [ cx, contentClassName ] );
+		return cx( styles.borderControlPopover );
+	}, [ cx ] );
 
 	const popoverControlsClassName = useMemo( () => {
 		return cx( styles.borderControlPopoverControls );

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

@@ -111,6 +111,7 @@ Default.args = {
 	withSlider: true,
 	__experimentalIsRenderedInSidebar: false,
 	__experimentalHasMultipleOrigins: false,
+	__next36pxDefaultSize: false,
 };
 
 const WrapperView = styled.div`