@wordpress/components 22.1.0 → 23.0.0

package/src/base-field/{hook.js → hook.ts}

@@ -6,26 +6,16 @@ import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import { useContextSystem } from '../ui/context';
+import { useContextSystem, WordPressComponentProps } from '../ui/context';
 import { useControlGroupContext } from '../ui/control-group';
 import { useFlex } from '../flex';
 import * as styles from './styles';
 import { useCx } from '../utils/hooks/use-cx';
+import type { BaseFieldProps } from './types';
 
-/**
- * @typedef OwnProps
- * @property {boolean} [hasError=false] Renders an error.
- * @property {boolean} [disabled]       Whether the field is disabled.
- * @property {boolean} [isInline=false] Renders as an inline element (layout).
- * @property {boolean} [isSubtle=false] Renders a subtle variant.
- */
-
-/** @typedef {import('../flex/types').FlexProps & OwnProps} Props */
-
-/**
- * @param {import('../ui/context').WordPressComponentProps<Props, 'div'>} props
- */
-export function useBaseField( props ) {
+export function useBaseField(
+	props: WordPressComponentProps< BaseFieldProps, 'div' >
+) {
 	const {
 		className,
 		hasError = false,

package/src/base-field/{styles.js → styles.ts}

@@ -13,7 +13,7 @@ export const BaseField = css`
 	background: ${ CONFIG.controlBackgroundColor };
 	border-radius: ${ CONFIG.controlBorderRadius };
 	border: 1px solid;
-	border-color: ${ CONFIG.controlBorderColor };
+	border-color: ${ COLORS.ui.border };
 	box-shadow: ${ CONFIG.controlBoxShadow };
 	display: flex;
 	flex: 1;
@@ -30,7 +30,7 @@ export const BaseField = css`
 	}
 
 	&:hover {
-		border-color: ${ CONFIG.controlBorderColorHover };
+		border-color: ${ COLORS.ui.borderHover };
 	}
 
 	&:focus,

package/src/base-field/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -12,7 +12,7 @@ Snapshot Diff:
       "background": "#fff",
       "border": "1px solid",
 -     "border-color": "#d94f4f",
-+     "border-color": "#757575",
++     "border-color": "#949494",
       "border-radius": "2px",
       "box-shadow": "transparent",
       "display": "flex",
@@ -28,7 +28,7 @@ Snapshot Diff:
 @@ -14,19 +14,18 @@
       "background": "#fff",
       "border": "1px solid",
-      "border-color": "#757575",
+      "border-color": "#949494",
       "border-radius": "2px",
       "box-shadow": "transparent",
 -     "display": "inline-flex",
@@ -62,7 +62,7 @@ Snapshot Diff:
       "background": "#fff",
 -     "background-color": "transparent",
       "border": "1px solid",
-      "border-color": "#757575",
+      "border-color": "#949494",
       "border-radius": "2px",
       "box-shadow": "transparent",
       "display": "flex",
@@ -89,7 +89,7 @@ exports[`base field should render correctly 1`] = `
   background: #fff;
   border-radius: 2px;
   border: 1px solid;
-  border-color: #757575;
+  border-color: #949494;
   box-shadow: transparent;
   display: -webkit-box;
   display: -webkit-flex;

package/src/base-field/test/{index.js → index.tsx}

@@ -8,9 +8,10 @@ import { render, screen } from '@testing-library/react';
  */
 import { useBaseField } from '../index';
 import { View } from '../../view';
+import type { BaseFieldProps } from '../types';
 
-const TestField = ( props ) => {
-	return <View { ...useBaseField( props ) } />;
+const TestField = ( props: Omit< BaseFieldProps, 'children' > ) => {
+	return <View { ...useBaseField( { ...props, children: '' } ) } />;
 };
 
 describe( 'base field', () => {
@@ -62,10 +63,14 @@ describe( 'base field', () => {
 			// wrap this in a component so that `useContext` calls don't fail inside the hook
 			// assertions will still run as normal when we `render` the component :)
 			const Component = () => {
-				const disabled = Symbol.for( 'disabled' );
-				const defaultValue = Symbol.for( 'defaultValue' );
+				const disabled = true;
+				const defaultValue = 'Lorem ipsum';
 
-				const result = useBaseField( { disabled, defaultValue } );
+				const result = useBaseField( {
+					disabled,
+					defaultValue,
+					children: '',
+				} );
 
 				expect( result.disabled ).toBe( disabled );
 				expect( result.defaultValue ).toBe( defaultValue );

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/test/index.js

@@ -3,6 +3,7 @@
  */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-test-renderer';
 
 /**
  * Internal dependencies
@@ -186,6 +187,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 +311,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

@@ -104,6 +104,7 @@ const UnconnectedBorderControl = (
 				/>
 				{ withSlider && (
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Border width' ) }
 						hideLabelFromVision
 						className={ sliderClassName }

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;
-	}
 `;

package/src/box-control/linked-button.js

@@ -13,19 +13,16 @@ import Tooltip from '../tooltip';
 export default function LinkedButton( { isLinked, ...props } ) {
 	const label = isLinked ? __( 'Unlink sides' ) : __( 'Link sides' );
 
-	// TODO: Remove span after merging https://github.com/WordPress/gutenberg/pull/44198
 	return (
 		<Tooltip text={ label }>
-			<span>
-				<Button
-					{ ...props }
-					className="component-box-control__linked-button"
-					isSmall
-					icon={ isLinked ? link : linkOff }
-					iconSize={ 24 }
-					aria-label={ label }
-				/>
-			</span>
+			<Button
+				{ ...props }
+				className="component-box-control__linked-button"
+				isSmall
+				icon={ isLinked ? link : linkOff }
+				iconSize={ 24 }
+				aria-label={ label }
+			/>
 		</Tooltip>
 	);
 }