@wordpress/components 19.8.4 → 19.11.0

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

@@ -15,16 +15,21 @@ 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 classes = useMemo( () => {
-		return cx( styles.BorderBoxControlVisualizer( value ), className );
-	}, [ className, value, rtl.watch() ] );
+		return cx(
+			styles.BorderBoxControlVisualizer( value, __next36pxDefaultSize ),
+			className
+		);
+	}, [ className, value, __next36pxDefaultSize, rtl.watch() ] );
 
 	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 ) };

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-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' );
 
@@ -116,9 +117,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 +143,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`

package/src/border-control/styles.ts

@@ -14,7 +14,10 @@ import {
 	StyledLabel,
 } from '../base-control/styles/base-control-styles';
 import { BackdropUI } from '../input-control/styles/input-control-styles';
-import { Root as UnitControlWrapper } from '../unit-control/styles/unit-control-styles';
+import {
+	Root as UnitControlWrapper,
+	UnitSelect,
+} from '../unit-control/styles/unit-control-styles';
 
 import type { Border } from './types';
 
@@ -22,13 +25,15 @@ const labelStyles = css`
 	font-weight: 500;
 `;
 
+const focusBoxShadow = css`
+	box-shadow: inset 0 0 0 ${ CONFIG.borderWidth } ${ COLORS.ui.borderFocus };
+`;
+
 export const borderControl = css`
 	position: relative;
 `;
 
 export const innerWrapper = () => css`
-	border: ${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] };
-	border-radius: 2px;
 	flex: 1 0 40%;
 
 	/*
@@ -44,7 +49,29 @@ export const innerWrapper = () => css`
 	 */
 	${ UnitControlWrapper } {
 		flex: 1;
-		${ rtl( { marginLeft: 0 } )() }
+		${ rtl( { marginLeft: -1 } )() }
+	}
+
+	&& ${ UnitSelect } {
+		/* Prevent default styles forcing heights larger than BorderControl */
+		min-height: 0;
+		${ rtl(
+			{
+				borderRadius: '0 1px 1px 0',
+				marginRight: 0,
+			},
+			{
+				borderRadius: '1px 0 0 1px',
+				marginLeft: 0,
+			}
+		)() }
+		transition: box-shadow 0.1s linear, border 0.1s linear;
+
+		&:focus {
+			z-index: 1;
+			${ focusBoxShadow }
+			border: 1px solid ${ COLORS.ui.borderFocus };
+		}
 	}
 `;
 
@@ -55,22 +82,40 @@ export const wrapperWidth = ( width: CSSProperties[ 'width' ] ) => {
 	`;
 };
 
+/*
+ * When default control height is 36px the following should be removed.
+ * See: InputControl and __next36pxDefaultSize.
+ */
+export const wrapperHeight = ( __next36pxDefaultSize?: boolean ) => {
+	return css`
+		height: ${ __next36pxDefaultSize ? '36px' : '30px' };
+	`;
+};
+
 export const borderControlDropdown = () => css`
 	background: #fff;
-	${ rtl(
-		{
-			borderRadius: `1px 0 0 1px`,
-			borderRight: `${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] }`,
-		},
-		{
-			borderRadius: `0 1px 1px 0`,
-			borderLeft: `${ CONFIG.borderWidth } solid ${ COLORS.gray[ 200 ] }`,
-		}
-	)() }
 
 	&& > button {
-		padding: ${ space( 1 ) };
-		border-radius: inherit;
+		/*
+		 * Override button component height and padding to fit within
+		 * BorderControl
+		 */
+		height: 100%;
+		padding: ${ space( 0.75 ) };
+		${ rtl(
+			{ borderRadius: `2px 0 0 2px` },
+			{ borderRadius: `0 2px 2px 0` }
+		)() }
+		border: ${ CONFIG.borderWidth } solid ${ COLORS.ui.border };
+		position: relative;
+
+		&:focus,
+		&:hover:not( :disabled ) {
+			${ focusBoxShadow }
+			border-color: ${ COLORS.ui.borderFocus };
+			z-index: 1;
+			position: relative;
+		}
 	}
 `;
 
@@ -86,16 +131,19 @@ export const colorIndicatorBorder = ( border?: Border ) => {
 	`;
 };
 
-export const colorIndicatorWrapper = ( border?: Border ) => {
+export const colorIndicatorWrapper = (
+	border?: Border,
+	__next36pxDefaultSize?: boolean
+) => {
 	const { style } = border || {};
 
 	return css`
 		border-radius: 9999px;
 		border: 2px solid transparent;
 		${ style ? colorIndicatorBorder( border ) : undefined }
-		width: 28px;
-		height: 28px;
-		padding: 2px;
+		width: ${ __next36pxDefaultSize ? '28px' : '22px' };
+		height: ${ __next36pxDefaultSize ? '28px' : '22px' };
+		padding: ${ __next36pxDefaultSize ? '2px' : '1px' };
 
 		/*
 		 * ColorIndicator
@@ -104,6 +152,13 @@ export const colorIndicatorWrapper = ( border?: Border ) => {
 		 * 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;
+				  `
+				: '' }
 			background: linear-gradient(
 				-45deg,
 				transparent 48%,
@@ -117,8 +172,9 @@ export const colorIndicatorWrapper = ( border?: Border ) => {
 
 export const borderControlPopover = css`
 	/* Remove padding from content, this will be re-added via inner elements*/
-	&& > div > div {
+	&& .components-popover__content {
 		padding: 0;
+		width: 264px;
 	}
 `;
 
@@ -153,7 +209,11 @@ export const resetButton = css`
 export const borderWidthControl = () => css`
 	/* Target the InputControl's backdrop */
 	&&& ${ BackdropUI } {
-		border: none;
+		${ rtl( {
+			borderTopLeftRadius: 0,
+			borderBottomLeftRadius: 0,
+		} )() }
+		transition: box-shadow 0.1s linear;
 	}
 
 	/* Specificity required to overcome UnitControl padding */

package/src/border-control/types.ts

@@ -81,10 +81,9 @@ export type BorderControlProps = ColorProps &
 		 */
 		onChange: ( value?: Border ) => void;
 		/**
-		 * A custom CSS class name to be assigned to the border control's
-		 * dropdown popover content.
+		 * An internal prop used to control the visibility of the dropdown.
 		 */
-		popoverContentClassName?: string;
+		__unstablePopoverProps?: Record< string, unknown >;
 		/**
 		 * If opted into, sanitizing the border means that if no width or color
 		 * have been selected, the border style is also cleared and `undefined`
@@ -114,6 +113,13 @@ 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
+		 */
+		__next36pxDefaultSize?: boolean;
 	};
 
 export type DropdownProps = ColorProps & {
@@ -124,10 +130,9 @@ export type DropdownProps = ColorProps & {
 	 */
 	border?: Border;
 	/**
-	 * A custom CSS class name to be assigned to the border control's
-	 * dropdown popover content.
+	 * An internal prop used to control the visibility of the dropdown.
 	 */
-	contentClassName?: string;
+	__unstablePopoverProps?: Record< string, unknown >;
 	/**
 	 * This controls whether to render border style options.
 	 *
@@ -150,6 +155,13 @@ export type DropdownProps = ColorProps & {
 	 * close button.
 	 */
 	showDropdownHeader?: boolean;
+	/**
+	 * Start opting into the larger default height that will become the
+	 * default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next36pxDefaultSize?: boolean;
 };
 
 export type StylePickerProps = LabelProps & {

package/src/box-control/README.md

@@ -29,73 +29,6 @@ const Example = () => {
 };
 ```
 
-### Visualizer
-
-BoxControl provides a companion component that visually renders value changes. Place the component you would like the sides visualized within the companion `<Visualizer>` component.
-
-```jsx
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-import MyComponent from './my-component';
-
-const { Visualizer } = BoxControl;
-
-const Example = () => {
-	const [ values, setValues ] = useState( {
-		top: '50px',
-		left: '10%',
-		right: '10%',
-		bottom: '50px',
-	} );
-
-	return (
-		<>
-			<BoxControl
-				values={ values }
-				onChange={ ( nextValues ) => setValues( nextValues ) }
-			/>
-			<Visualizer>
-				<MyComponent />
-			</Visualizer>
-		</>
-	);
-};
-```
-
-Alternatively, the `<Visualizer>` can be nested as a sibling to the component you would like visualized. Using `<Visualizer />` in this manner will require the parent element having a `position` style.
-
-```jsx
-import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-import MyComponent from './my-component';
-
-const { Visualizer } = BoxControl;
-
-const Example = () => {
-	const [ values, setValues ] = useState( {
-		top: '50px',
-		left: '10%',
-		right: '10%',
-		bottom: '50px',
-	} );
-
-	return (
-		<>
-			<BoxControl
-				values={ values }
-				onChange={ ( nextValues ) => setValues( nextValues ) }
-			/>
-			<div style={ { position: 'relative' } }>
-				<Visualizer />
-				<MyComponent />
-			</div>
-		</>
-	);
-};
-```
-
 ## Props
 ### allowReset
 
@@ -135,13 +68,6 @@ A callback function when an input value changes.
 -   Type: `Function`
 -   Required: Yes
 
-### onChangeShowVisualizer
-
-A callback function for visualizer changes, based on input hover interactions.
-
--   Type: `Function`
--   Required: Yes
-
 ### resetValues
 
 The `top`, `right`, `bottom`, and `left` box dimension values to use when the control is reset.