@wordpress/components 19.10.0 → 19.13.0

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/all-input-control.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -14,6 +10,8 @@ import {
 	isValuesDefined,
 } from './utils';
 
+const noop = () => {};
+
 export default function AllInputControl( {
 	onChange = noop,
 	onFocus = noop,

package/src/box-control/axial-input-controls.js

@@ -115,12 +115,10 @@ export default function AxialInputControls( {
 			className="component-box-control__vertical-horizontal-input-controls"
 		>
 			{ filteredSides.map( ( side ) => {
-				const [
-					parsedQuantity,
-					parsedUnit,
-				] = parseQuantityAndUnitFromRawValue(
-					side === 'vertical' ? values.top : values.left
-				);
+				const [ parsedQuantity, parsedUnit ] =
+					parseQuantityAndUnitFromRawValue(
+						side === 'vertical' ? values.top : values.left
+					);
 				const selectedUnit =
 					side === 'vertical'
 						? selectedUnits.top

package/src/box-control/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,6 +34,8 @@ const defaultInputProps = {
 	min: 0,
 };
 
+const noop = () => {};
+
 function useUniqueId( idProp ) {
 	const instanceId = useInstanceId( BoxControl, 'inspector-box-control' );
 

package/src/box-control/input-controls.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * Internal dependencies
  */
@@ -11,6 +6,8 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
+const noop = () => {};
+
 export default function BoxInputControls( {
 	onChange = noop,
 	onFocus = noop,
@@ -38,37 +35,39 @@ export default function BoxInputControls( {
 		onChange( nextValues );
 	};
 
-	const createHandleOnChange = ( side ) => ( next, { event } ) => {
-		const { altKey } = event;
-		const nextValues = { ...values };
-		const isNumeric = ! isNaN( parseFloat( next ) );
-		const nextValue = isNumeric ? next : undefined;
+	const createHandleOnChange =
+		( side ) =>
+		( next, { event } ) => {
+			const { altKey } = event;
+			const nextValues = { ...values };
+			const isNumeric = ! isNaN( parseFloat( next ) );
+			const nextValue = isNumeric ? next : undefined;
 
-		nextValues[ side ] = nextValue;
+			nextValues[ side ] = nextValue;
 
-		/**
-		 * Supports changing pair sides. For example, holding the ALT key
-		 * when changing the TOP will also update BOTTOM.
-		 */
-		if ( altKey ) {
-			switch ( side ) {
-				case 'top':
-					nextValues.bottom = nextValue;
-					break;
-				case 'bottom':
-					nextValues.top = nextValue;
-					break;
-				case 'left':
-					nextValues.right = nextValue;
-					break;
-				case 'right':
-					nextValues.left = nextValue;
-					break;
+			/**
+			 * Supports changing pair sides. For example, holding the ALT key
+			 * when changing the TOP will also update BOTTOM.
+			 */
+			if ( altKey ) {
+				switch ( side ) {
+					case 'top':
+						nextValues.bottom = nextValue;
+						break;
+					case 'bottom':
+						nextValues.top = nextValue;
+						break;
+					case 'left':
+						nextValues.right = nextValue;
+						break;
+					case 'right':
+						nextValues.left = nextValue;
+						break;
+				}
 			}
-		}
 
-		handleOnChange( nextValues );
-	};
+			handleOnChange( nextValues );
+		};
 
 	const createHandleOnUnitChange = ( side ) => ( next ) => {
 		const newUnits = { ...selectedUnits };
@@ -93,10 +92,8 @@ export default function BoxInputControls( {
 				className="component-box-control__input-controls"
 			>
 				{ filteredSides.map( ( side ) => {
-					const [
-						parsedQuantity,
-						parsedUnit,
-					] = parseQuantityAndUnitFromRawValue( values[ side ] );
+					const [ parsedQuantity, parsedUnit ] =
+						parseQuantityAndUnitFromRawValue( values[ side ] );
 
 					const computedUnit = values[ side ]
 						? parsedUnit