@wordpress/components 19.7.0-next.e230fbab09.0 → 19.8.1

package/src/border-control/types.ts

@@ -0,0 +1,173 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+export type Border = {
+	color?: CSSProperties[ 'borderColor' ];
+	style?: CSSProperties[ 'borderStyle' ];
+	width?: CSSProperties[ 'borderWidth' ];
+};
+
+export type Color = {
+	name: string;
+	color: CSSProperties[ 'color' ];
+};
+
+export type ColorOrigin = {
+	name: string;
+	colors: Color[];
+};
+
+export type Colors = ColorOrigin[] | Color[];
+
+export type ColorProps = {
+	/**
+	 * An array of color definitions. This may also be a multi-dimensional array
+	 * where colors are organized by multiple origins.
+	 */
+	colors?: Colors;
+	/**
+	 * This toggles the ability to choose custom colors.
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * This controls whether the alpha channel will be offered when selecting
+	 * custom colors.
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * This is passed on to the color related sub-components which need to be
+	 * made aware of whether the colors prop contains multiple origins.
+	 */
+	__experimentalHasMultipleOrigins?: boolean;
+	/**
+	 * This is passed on to the color related sub-components so they may render
+	 * more effectively when used within a sidebar.
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type LabelProps = {
+	/**
+	 * Provides control over whether the label will only be visible to
+	 * screen readers.
+	 */
+	hideLabelFromVision?: boolean;
+	/**
+	 * If provided, a label will be generated using this as the content.
+	 */
+	label?: string;
+};
+
+export type BorderControlProps = ColorProps &
+	LabelProps & {
+		/**
+		 * This controls whether to include border style options within the
+		 * `BorderDropdown` sub-component.
+		 *
+		 * @default true
+		 */
+		enableStyle?: boolean;
+		/**
+		 * This flags the `BorderControl` to render with a more compact
+		 * appearance. It restricts the width of the control and prevents it
+		 * from expanding to take up additional space.
+		 */
+		isCompact?: boolean;
+		/**
+		 * A callback function invoked when the border value is changed via an
+		 * interaction that selects or clears, border color, style, or width.
+		 */
+		onChange: ( value?: Border ) => void;
+		/**
+		 * A custom CSS class name to be assigned to the border control's
+		 * dropdown popover content.
+		 */
+		popoverContentClassName?: string;
+		/**
+		 * If opted into, sanitizing the border means that if no width or color
+		 * have been selected, the border style is also cleared and `undefined`
+		 * is returned as the new border value.
+		 *
+		 * @default true
+		 */
+		shouldSanitizeBorder?: boolean;
+		/**
+		 * Whether or not to show the header for the border color and style
+		 * picker dropdown. The header includes a label for the color picker
+		 * and a close button.
+		 */
+		showDropdownHeader?: boolean;
+		/**
+		 * An object representing a border or `undefined`. Used to set the
+		 * current border configuration for this component.
+		 */
+		value?: Border;
+		/**
+		 * Controls the visual width of the `BorderControl`. It has no effect if
+		 * the `isCompact` prop is set to `true`.
+		 */
+		width?: CSSProperties[ 'width' ];
+		/**
+		 * Flags whether this `BorderControl` should also render a
+		 * `RangeControl` for additional control over a border's width.
+		 */
+		withSlider?: boolean;
+	};
+
+export type DropdownProps = ColorProps & {
+	/**
+	 * An object representing a border or `undefined`. This component will
+	 * extract the border color and style selections from this object to use as
+	 * values for its popover controls.
+	 */
+	border?: Border;
+	/**
+	 * A custom CSS class name to be assigned to the border control's
+	 * dropdown popover content.
+	 */
+	contentClassName?: string;
+	/**
+	 * This controls whether to render border style options.
+	 *
+	 * @default true
+	 */
+	enableStyle?: boolean;
+	/**
+	 * A callback invoked when the border color or style selections change.
+	 */
+	onChange: ( newBorder?: Border ) => void;
+	/**
+	 * Any previous style selection made by the user. This can be used to
+	 * reapply that previous selection when, for example, a zero border width is
+	 * to a non-zero value.
+	 */
+	previousStyleSelection?: string;
+	/**
+	 * Whether or not to render a header for the border color and style picker
+	 * dropdown. The header includes a label for the color picker and a
+	 * close button.
+	 */
+	showDropdownHeader?: boolean;
+};
+
+export type StylePickerProps = LabelProps & {
+	/**
+	 * A callback function invoked when a border style is selected or cleared.
+	 */
+	onChange: ( style?: string ) => void;
+	/**
+	 * The currently selected border style if there is one. Styles available via
+	 * this control are `solid`, `dashed` & `dotted`, however the possibility
+	 * to store other valid CSS values is maintained e.g. `none`, `inherit` etc.
+	 */
+	value?: string;
+};
+
+export type PopoverProps = {
+	/**
+	 * Callback function to invoke when closing the border dropdown's popover.
+	 */
+	onClose: () => void;
+};

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

@@ -10,7 +10,6 @@ import {
 	ALL_SIDES,
 	LABELS,
 	getAllValue,
-	getAllUnitFallback,
 	isValuesMixed,
 	isValuesDefined,
 } from './utils';
@@ -26,17 +25,11 @@ export default function AllInputControl( {
 	setSelectedUnits,
 	...props
 } ) {
-	const allValue = getAllValue( values, sides );
+	const allValue = getAllValue( values, selectedUnits, sides );
 	const hasValues = isValuesDefined( values );
-	const isMixed = hasValues && isValuesMixed( values, sides );
+	const isMixed = hasValues && isValuesMixed( values, selectedUnits, sides );
 	const allPlaceholder = isMixed ? LABELS.mixed : null;
 
-	// Set meaningful unit selection if no allValue and user has previously
-	// selected units without assigning values while controls were unlinked.
-	const allUnitFallback = ! allValue
-		? getAllUnitFallback( selectedUnits )
-		: undefined;
-
 	const handleOnFocus = ( event ) => {
 		onFocus( event, { side: 'all' } );
 	};
@@ -104,7 +97,6 @@ export default function AllInputControl( {
 			disableUnits={ isMixed }
 			isOnly
 			value={ allValue }
-			unit={ allUnitFallback }
 			onChange={ handleOnChange }
 			onUnitChange={ handleOnUnitChange }
 			onFocus={ handleOnFocus }

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

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import UnitControl from './unit-control';
 import { LABELS } from './utils';
 import { Layout } from './styles/box-control-styles';
@@ -113,27 +114,37 @@ export default function AxialInputControls( {
 			align="top"
 			className="component-box-control__vertical-horizontal-input-controls"
 		>
-			{ filteredSides.map( ( side ) => (
-				<UnitControl
-					{ ...props }
-					isFirst={ first === side }
-					isLast={ last === side }
-					isOnly={ only === side }
-					value={ side === 'vertical' ? values.top : values.left }
-					unit={
-						side === 'vertical'
-							? selectedUnits.top
-							: selectedUnits.left
-					}
-					onChange={ createHandleOnChange( side ) }
-					onUnitChange={ createHandleOnUnitChange( side ) }
-					onFocus={ createHandleOnFocus( side ) }
-					onHoverOn={ createHandleOnHoverOn( side ) }
-					onHoverOff={ createHandleOnHoverOff( side ) }
-					label={ LABELS[ side ] }
-					key={ side }
-				/>
-			) ) }
+			{ filteredSides.map( ( side ) => {
+				const [
+					parsedQuantity,
+					parsedUnit,
+				] = parseQuantityAndUnitFromRawValue(
+					side === 'vertical' ? values.top : values.left
+				);
+				const selectedUnit =
+					side === 'vertical'
+						? selectedUnits.top
+						: selectedUnits.left;
+				return (
+					<UnitControl
+						{ ...props }
+						isFirst={ first === side }
+						isLast={ last === side }
+						isOnly={ only === side }
+						value={ [
+							parsedQuantity,
+							selectedUnit ?? parsedUnit,
+						].join( '' ) }
+						onChange={ createHandleOnChange( side ) }
+						onUnitChange={ createHandleOnUnitChange( side ) }
+						onFocus={ createHandleOnFocus( side ) }
+						onHoverOn={ createHandleOnHoverOn( side ) }
+						onHoverOff={ createHandleOnHoverOff( side ) }
+						label={ LABELS[ side ] }
+						key={ side }
+					/>
+				);
+			} ) }
 		</Layout>
 	);
 }

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

@@ -7,6 +7,7 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import UnitControl from './unit-control';
+import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import { ALL_SIDES, LABELS } from './utils';
 import { LayoutContainer, Layout } from './styles/box-control-styles';
 
@@ -91,25 +92,35 @@ export default function BoxInputControls( {
 				align="top"
 				className="component-box-control__input-controls"
 			>
-				{ filteredSides.map( ( side ) => (
-					<UnitControl
-						{ ...props }
-						isFirst={ first === side }
-						isLast={ last === side }
-						isOnly={ only === side }
-						value={ values[ side ] }
-						unit={
-							values[ side ] ? undefined : selectedUnits[ side ]
-						}
-						onChange={ createHandleOnChange( side ) }
-						onUnitChange={ createHandleOnUnitChange( side ) }
-						onFocus={ createHandleOnFocus( side ) }
-						onHoverOn={ createHandleOnHoverOn( side ) }
-						onHoverOff={ createHandleOnHoverOff( side ) }
-						label={ LABELS[ side ] }
-						key={ `box-control-${ side }` }
-					/>
-				) ) }
+				{ filteredSides.map( ( side ) => {
+					const [
+						parsedQuantity,
+						parsedUnit,
+					] = parseQuantityAndUnitFromRawValue( values[ side ] );
+
+					const computedUnit = values[ side ]
+						? parsedUnit
+						: selectedUnits[ side ];
+
+					return (
+						<UnitControl
+							{ ...props }
+							isFirst={ first === side }
+							isLast={ last === side }
+							isOnly={ only === side }
+							value={ [ parsedQuantity, computedUnit ].join(
+								''
+							) }
+							onChange={ createHandleOnChange( side ) }
+							onUnitChange={ createHandleOnUnitChange( side ) }
+							onFocus={ createHandleOnFocus( side ) }
+							onHoverOn={ createHandleOnHoverOn( side ) }
+							onHoverOff={ createHandleOnHoverOff( side ) }
+							label={ LABELS[ side ] }
+							key={ `box-control-${ side }` }
+						/>
+					);
+				} ) }
 			</Layout>
 		</LayoutContainer>
 	);

package/src/box-control/utils.js

@@ -61,24 +61,32 @@ function mode( arr ) {
  * Gets the 'all' input value and unit from values data.
  *
  * @param {Object} values         Box values.
+ * @param {Object} selectedUnits  Box units.
  * @param {Array}  availableSides Available box sides to evaluate.
  *
  * @return {string} A value + unit for the 'all' input.
  */
-export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
+export function getAllValue(
+	values = {},
+	selectedUnits,
+	availableSides = ALL_SIDES
+) {
 	const sides = normalizeSides( availableSides );
 	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
 		parseQuantityAndUnitFromRawValue( values[ side ] )
 	);
-	const allValues = parsedQuantitiesAndUnits.map(
+	const allParsedQuantities = parsedQuantitiesAndUnits.map(
 		( value ) => value[ 0 ] ?? ''
 	);
-	const allUnits = parsedQuantitiesAndUnits.map( ( value ) => value[ 1 ] );
+	const allParsedUnits = parsedQuantitiesAndUnits.map(
+		( value ) => value[ 1 ]
+	);
 
-	const value = allValues.every( ( v ) => v === allValues[ 0 ] )
-		? allValues[ 0 ]
+	const commonQuantity = allParsedQuantities.every(
+		( v ) => v === allParsedQuantities[ 0 ]
+	)
+		? allParsedQuantities[ 0 ]
 		: '';
-	const unit = mode( allUnits );
 
 	/**
 	 * The isNumber check is important. On reset actions, the incoming value
@@ -89,9 +97,17 @@ export function getAllValue( values = {}, availableSides = ALL_SIDES ) {
 	 * isNumber() is more specific for these cases, rather than relying on a
 	 * simple truthy check.
 	 */
-	const allValue = isNumber( value ) ? `${ value }${ unit }` : undefined;
+	let commonUnit;
+	if ( isNumber( commonQuantity ) ) {
+		commonUnit = mode( allParsedUnits );
+	} else {
+		// Set meaningful unit selection if no commonQuantity and user has previously
+		// selected units without assigning values while controls were unlinked.
+		commonUnit =
+			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	}
 
-	return allValue;
+	return [ commonQuantity, commonUnit ].join( '' );
 }
 
 /**
@@ -113,13 +129,14 @@ export function getAllUnitFallback( selectedUnits ) {
 /**
  * Checks to determine if values are mixed.
  *
- * @param {Object} values Box values.
- * @param {Array}  sides  Available box sides to evaluate.
+ * @param {Object} values        Box values.
+ * @param {Object} selectedUnits Box units.
+ * @param {Array}  sides         Available box sides to evaluate.
  *
  * @return {boolean} Whether values are mixed.
  */
-export function isValuesMixed( values = {}, sides = ALL_SIDES ) {
-	const allValue = getAllValue( values, sides );
+export function isValuesMixed( values = {}, selectedUnits, sides = ALL_SIDES ) {
+	const allValue = getAllValue( values, selectedUnits, sides );
 	const isMixed = isNaN( parseFloat( allValue ) );
 
 	return isMixed;

package/src/card/styles.js

@@ -8,6 +8,12 @@ import { css } from '@emotion/react';
  */
 import { COLORS, CONFIG } from '../utils';
 
+// Since the border for `Card` is rendered via the `box-shadow` property
+// (as opposed to the `border` property), the value of the border radius needs
+// to be adjusted by removing 1px (this is because the `box-shadow` renders
+// as an "outer radius").
+const adjustedBorderRadius = `calc(${ CONFIG.cardBorderRadius } - 1px)`;
+
 export const Card = css`
 	box-shadow: 0 0 0 1px ${ CONFIG.surfaceBorderColor };
 	outline: none;
@@ -62,13 +68,13 @@ export const Divider = css`
 
 export const borderRadius = css`
 	&:first-of-type {
-		border-top-left-radius: ${ CONFIG.cardBorderRadius };
-		border-top-right-radius: ${ CONFIG.cardBorderRadius };
+		border-top-left-radius: ${ adjustedBorderRadius };
+		border-top-right-radius: ${ adjustedBorderRadius };
 	}
 
 	&:last-of-type {
-		border-bottom-left-radius: ${ CONFIG.cardBorderRadius };
-		border-bottom-right-radius: ${ CONFIG.cardBorderRadius };
+		border-bottom-left-radius: ${ adjustedBorderRadius };
+		border-bottom-right-radius: ${ adjustedBorderRadius };
 	}
 `;
 
@@ -85,7 +91,7 @@ export const borderless = css`
 `;
 
 export const rounded = css`
-	border-radius: ${ CONFIG.cardBorderRadius };
+	border-radius: ${ adjustedBorderRadius };
 `;
 
 const xSmallCardPadding = css`