@wordpress/components 21.3.0 → 22.0.0

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

@@ -53,6 +53,7 @@ const UnconnectedBorderControl = (
 		__unstablePopoverProps,
 		previousStyleSelection,
 		showDropdownHeader,
+		size = 'default',
 		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

@@ -33,9 +33,9 @@ export function useBorderControl(
 		isCompact,
 		onChange,
 		shouldSanitizeBorder = true,
+		size = 'default',
 		value: border,
 		width,
-		__next36pxDefaultSize = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
 
@@ -65,7 +65,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 +117,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() );
@@ -143,6 +147,6 @@ export function useBorderControl(
 		value: border,
 		widthUnit,
 		widthValue,
-		__next36pxDefaultSize,
+		size,
 	};
 }

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

@@ -22,7 +22,7 @@ export function useBorderControlDropdown(
 		colors,
 		onChange,
 		previousStyleSelection,
-		__next36pxDefaultSize,
+		size = 'default',
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
 
@@ -53,18 +53,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 );

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%,