@wordpress/components 22.1.0 → 23.1.0

package/src/base-field/types.ts

@@ -0,0 +1,29 @@
+/**
+ * Internal dependencies
+ */
+import type { FlexProps } from '../flex/types';
+
+export type BaseFieldProps = FlexProps & {
+	/**
+	 * Whether the field is disabled.
+	 */
+	disabled?: boolean;
+	/**
+	 * Renders an error style around the component.
+	 *
+	 * @default false
+	 */
+	hasError?: boolean;
+	/**
+	 * Renders a component that can be inlined in some text.
+	 *
+	 * @default false
+	 */
+	isInline?: boolean;
+	/**
+	 * Renders a subtle variant of the component.
+	 *
+	 * @default false
+	 */
+	isSubtle?: boolean;
+};

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

@@ -29,6 +29,7 @@ show "Mixed" placeholder text.
 ```jsx
 import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
 
 const colors = [
 	{ name: 'Blue 20', color: '#72aee6' },

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

@@ -62,7 +62,6 @@ const UnconnectedBorderBoxControl = (
 		splitValue,
 		toggleLinked,
 		wrapperClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderBoxControl( props );
@@ -116,9 +115,6 @@ const UnconnectedBorderBoxControl = (
 						width={
 							size === '__unstable-large' ? '116px' : '110px'
 						}
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}
@@ -134,9 +130,6 @@ const UnconnectedBorderBoxControl = (
 						popoverPlacement={ popoverPlacement }
 						popoverOffset={ popoverOffset }
 						value={ splitValue }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}

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

@@ -33,7 +33,6 @@ export function useBorderBoxControl(
 		enableStyle = true,
 		size = 'default',
 		value,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControl' );
@@ -136,7 +135,6 @@ export function useBorderBoxControl(
 		size,
 		splitValue,
 		wrapperClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -33,7 +33,6 @@ const BorderBoxControlSplitControls = (
 		rightAlignedClassName,
 		size = 'default',
 		value,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderBoxControlSplitControls( props );
@@ -65,7 +64,6 @@ const BorderBoxControlSplitControls = (
 		enableAlpha,
 		enableStyle,
 		isCompact: true,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		size,
 	};

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

@@ -21,7 +21,6 @@ export function useBorderBoxControlSplitControls(
 		enableAlpha = false,
 		enableStyle = true,
 		size = 'default',
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderBoxControlSplitControls' );
@@ -49,7 +48,6 @@ export function useBorderBoxControlSplitControls(
 		enableStyle,
 		rightAlignedClassName,
 		size,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -3,12 +3,15 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
  */
 import { BorderBoxControl } from '../';
 
+jest.useFakeTimers();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
@@ -186,6 +189,7 @@ describe( 'BorderBoxControl', () => {
 
 			const colorButton = screen.getByLabelText( colorPickerRegex );
 			await user.click( colorButton );
+			await act( () => Promise.resolve() );
 
 			const styleLabel = screen.queryByText( 'Style' );
 			const solidButton = screen.queryByRole( 'button', {
@@ -309,7 +313,7 @@ describe( 'BorderBoxControl', () => {
 			await user.click( colorButtons[ 3 ] );
 			assertStyleOptionsMissing();
 			await user.click( colorButtons[ 3 ] );
-		}, 10000 );
+		} );
 	} );
 
 	describe( 'onChange handling', () => {

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

@@ -59,7 +59,6 @@ const UnconnectedBorderControl = (
 		widthUnit,
 		widthValue,
 		withSlider,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		...otherProps
 	} = useBorderControl( props );
@@ -83,9 +82,6 @@ const UnconnectedBorderControl = (
 							onChange={ onBorderChange }
 							previousStyleSelection={ previousStyleSelection }
 							showDropdownHeader={ showDropdownHeader }
-							__experimentalHasMultipleOrigins={
-								__experimentalHasMultipleOrigins
-							}
 							__experimentalIsRenderedInSidebar={
 								__experimentalIsRenderedInSidebar
 							}
@@ -104,6 +100,7 @@ const UnconnectedBorderControl = (
 				/>
 				{ withSlider && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Border width' ) }
 						hideLabelFromVision
 						className={ sliderClassName }

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

@@ -39,7 +39,6 @@ export function useBorderControl(
 		size = 'default',
 		value: border,
 		width,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControl' );
@@ -156,7 +155,6 @@ export function useBorderControl(
 		widthUnit,
 		widthValue,
 		size,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -25,19 +25,18 @@ import { StyledLabel } from '../../base-control/styles/base-control-styles';
 import DropdownContentWrapper from '../../dropdown/dropdown-content-wrapper';
 
 import type { ColorObject, PaletteObject } from '../../color-palette/types';
+import type { DropdownProps as DropdownComponentProps } from '../../dropdown/types';
 import type { ColorProps, DropdownProps } from '../types';
 
-const noop = () => undefined;
 const getColorObject = (
 	colorValue: CSSProperties[ 'borderColor' ],
-	colors: ColorProps[ 'colors' ] | undefined,
-	hasMultipleColorOrigins: boolean
+	colors: ColorProps[ 'colors' ] | undefined
 ) => {
-	if ( ! colorValue || ! colors ) {
+	if ( ! colorValue || ! colors || colors.length === 0 ) {
 		return;
 	}
 
-	if ( hasMultipleColorOrigins ) {
+	if ( ( colors as PaletteObject[] )[ 0 ].colors !== undefined ) {
 		let matchedColor;
 
 		( colors as PaletteObject[] ).some( ( origin ) =>
@@ -126,7 +125,6 @@ const BorderControlDropdown = (
 	forwardedRef: React.ForwardedRef< any >
 ) => {
 	const {
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 		border,
 		colors,
@@ -147,11 +145,7 @@ const BorderControlDropdown = (
 	} = useBorderControlDropdown( props );
 
 	const { color, style } = border || {};
-	const colorObject = getColorObject(
-		color,
-		colors,
-		!! __experimentalHasMultipleOrigins
-	);
+	const colorObject = getColorObject( color, colors );
 
 	const toggleAriaLabel = getToggleAriaLabel(
 		color,
@@ -165,7 +159,9 @@ const BorderControlDropdown = (
 		? 'bottom left'
 		: undefined;
 
-	const renderToggle = ( { onToggle = noop } ) => (
+	const renderToggle: DropdownComponentProps[ 'renderToggle' ] = ( {
+		onToggle,
+	} ) => (
 		<Button
 			onClick={ onToggle }
 			variant="tertiary"
@@ -183,8 +179,9 @@ const BorderControlDropdown = (
 		</Button>
 	);
 
-	// TODO: update types once Dropdown component is refactored to TypeScript.
-	const renderContent = ( { onClose }: { onClose: () => void } ) => (
+	const renderContent: DropdownComponentProps[ 'renderContent' ] = ( {
+		onClose,
+	} ) => (
 		<>
 			<DropdownContentWrapper paddingSize="medium">
 				<VStack className={ popoverControlsClassName } spacing={ 6 }>
@@ -204,9 +201,6 @@ const BorderControlDropdown = (
 						value={ color }
 						onChange={ onColorChange }
 						{ ...{ colors, disableCustomColors } }
-						__experimentalHasMultipleOrigins={
-							__experimentalHasMultipleOrigins
-						}
 						__experimentalIsRenderedInSidebar={
 							__experimentalIsRenderedInSidebar
 						}

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

@@ -25,7 +25,6 @@ export function useBorderControlDropdown(
 		onChange,
 		previousStyleSelection,
 		size = 'default',
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = useContextSystem( props, 'BorderControlDropdown' );
@@ -95,7 +94,6 @@ export function useBorderControlDropdown(
 		popoverContentClassName,
 		popoverControlsClassName,
 		resetButtonClassName,
-		__experimentalHasMultipleOrigins,
 		__experimentalIsRenderedInSidebar,
 	};
 }

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

@@ -138,7 +138,6 @@ export const WithMultipleOrigins = Template.bind( {} );
 WithMultipleOrigins.args = {
 	...Default.args,
 	colors: multipleOriginColors,
-	__experimentalHasMultipleOrigins: true,
 };
 
 /**

package/src/border-control/styles.ts

@@ -8,10 +8,7 @@ import { css } from '@emotion/react';
  */
 import { COLORS, CONFIG, boxSizingReset, rtl } from '../utils';
 import { space } from '../ui/utils/space';
-import {
-	StyledField,
-	StyledLabel,
-} from '../base-control/styles/base-control-styles';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 import {
 	ValueInput as UnitControlWrapper,
 	UnitSelect,
@@ -193,10 +190,4 @@ export const borderStyleButton = css`
 export const borderSlider = () => css`
 	flex: 1 1 60%;
 	${ rtl( { marginRight: space( 3 ) } )() }
-
-	${ StyledField } {
-		margin-bottom: 0;
-		font-size: 0;
-		display: flex;
-	}
 `;