@wordpress/components 21.3.0 → 22.1.0

package/src/ui/spinner/test/__snapshots__/index.js.snap

@@ -5,19 +5,19 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -10,11 +10,11 @@
-      class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
-      style="transform: scale(0.4444444444444444);"
-    >
-      <div
-        class="css-tada40-BarsView e1s9yo7h0"
--       style="color: blue;"
-+       style="color: rgb(30, 30, 30);"
+@@ -11,11 +11,11 @@
+        class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
+        style="transform: scale(0.4444444444444444);"
       >
         <div
-          class="InnerBar1"
-        />
-        <div
+          class="css-tada40-BarsView e1s9yo7h0"
+-         style="color: blue;"
++         style="color: rgb(30, 30, 30);"
+        >
+          <div
+            class="InnerBar1"
+          />
+          <div
 `;
 
 exports[`props should render correctly 1`] = `
@@ -179,58 +179,60 @@ exports[`props should render correctly 1`] = `
   transform: rotate( 330deg ) translate( 0, -130% );
 }
 
-<div
-  aria-busy="true"
-  class="components-spinner emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="Spinner"
-  style="height: 16px; width: 16px;"
->
+<div>
   <div
-    aria-hidden="true"
-    class="emotion-2 emotion-3"
-    style="transform: scale(0.4444444444444444);"
+    aria-busy="true"
+    class="components-spinner emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="Spinner"
+    style="height: 16px; width: 16px;"
   >
     <div
-      class="emotion-4 emotion-5"
-      style="color: rgb(30, 30, 30);"
+      aria-hidden="true"
+      class="emotion-2 emotion-3"
+      style="transform: scale(0.4444444444444444);"
     >
       <div
-        class="InnerBar1"
-      />
-      <div
-        class="InnerBar2"
-      />
-      <div
-        class="InnerBar3"
-      />
-      <div
-        class="InnerBar4"
-      />
-      <div
-        class="InnerBar5"
-      />
-      <div
-        class="InnerBar6"
-      />
-      <div
-        class="InnerBar7"
-      />
-      <div
-        class="InnerBar8"
-      />
-      <div
-        class="InnerBar9"
-      />
-      <div
-        class="InnerBar10"
-      />
-      <div
-        class="InnerBar11"
-      />
-      <div
-        class="InnerBar12"
-      />
+        class="emotion-4 emotion-5"
+        style="color: rgb(30, 30, 30);"
+      >
+        <div
+          class="InnerBar1"
+        />
+        <div
+          class="InnerBar2"
+        />
+        <div
+          class="InnerBar3"
+        />
+        <div
+          class="InnerBar4"
+        />
+        <div
+          class="InnerBar5"
+        />
+        <div
+          class="InnerBar6"
+        />
+        <div
+          class="InnerBar7"
+        />
+        <div
+          class="InnerBar8"
+        />
+        <div
+          class="InnerBar9"
+        />
+        <div
+          class="InnerBar10"
+        />
+        <div
+          class="InnerBar11"
+        />
+        <div
+          class="InnerBar12"
+        />
+      </div>
     </div>
   </div>
 </div>
@@ -241,23 +243,23 @@ Snapshot Diff:
 - First value
 + Second value
 
-@@ -1,16 +1,16 @@
-  <div
-    aria-busy="true"
-    class="components-spinner css-14ywscc-ContainerView e1s9yo7h2"
-    data-wp-c16t="true"
-    data-wp-component="Spinner"
--   style="height: 31px; width: 31px;"
-+   style="height: 16px; width: 16px;"
-  >
+@@ -2,16 +2,16 @@
     <div
-      aria-hidden="true"
-      class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
--     style="transform: scale(0.8611111111111112);"
-+     style="transform: scale(0.4444444444444444);"
+      aria-busy="true"
+      class="components-spinner css-14ywscc-ContainerView e1s9yo7h2"
+      data-wp-c16t="true"
+      data-wp-component="Spinner"
+-     style="height: 31px; width: 31px;"
++     style="height: 16px; width: 16px;"
     >
       <div
-        class="css-tada40-BarsView e1s9yo7h0"
-        style="color: rgb(30, 30, 30);"
+        aria-hidden="true"
+        class="css-1rq9ofd-BarsWrapperView e1s9yo7h1"
+-       style="transform: scale(0.8611111111111112);"
++       style="transform: scale(0.4444444444444444);"
       >
+        <div
+          class="css-tada40-BarsView e1s9yo7h0"
+          style="color: rgb(30, 30, 30);"
+        >
 `;

package/src/ui/spinner/test/index.js

@@ -11,7 +11,7 @@ import { Spinner } from '..';
 describe( 'props', () => {
 	test( 'should render correctly', () => {
 		const { container } = render( <Spinner /> );
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render color', () => {
@@ -19,9 +19,7 @@ describe( 'props', () => {
 		const { container: secondRenderContainer } = render(
 			<Spinner color="blue" />
 		);
-		expect( secondRenderContainer.firstChild ).toMatchDiffSnapshot(
-			container.firstChild
-		);
+		expect( secondRenderContainer ).toMatchDiffSnapshot( container );
 	} );
 
 	test( 'should render size', () => {
@@ -29,8 +27,6 @@ describe( 'props', () => {
 		const { container: secondRenderContainer } = render(
 			<Spinner size={ 31 } />
 		);
-		expect( secondRenderContainer.firstChild ).toMatchDiffSnapshot(
-			container.firstChild
-		);
+		expect( secondRenderContainer ).toMatchDiffSnapshot( container );
 	} );
 } );

package/src/unit-control/index.tsx

@@ -6,8 +6,6 @@ import type {
 	KeyboardEvent,
 	ForwardedRef,
 	SyntheticEvent,
-	ChangeEvent,
-	PointerEvent,
 } from 'react';
 import classnames from 'classnames';
 
@@ -23,7 +21,7 @@ import { __ } from '@wordpress/i18n';
  */
 import type { WordPressComponentProps } from '../ui/context';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { Root, ValueInput } from './styles/unit-control-styles';
+import { ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import {
 	CSS_UNITS,
@@ -58,7 +56,6 @@ function UnforwardedUnitControl(
 		onChange: onChangeProp,
 		onUnitChange,
 		size = 'default',
-		style,
 		unit: unitProp,
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
@@ -105,14 +102,18 @@ function UnforwardedUnitControl(
 	// Stores parsed value for hand-off in state reducer.
 	const refParsedQuantity = useRef< number | undefined >( undefined );
 
-	const classes = classnames( 'components-unit-control', className );
+	const classes = classnames(
+		'components-unit-control',
+		// This class is added for legacy purposes to maintain it on the outer
+		// wrapper. See: https://github.com/WordPress/gutenberg/pull/45139
+		'components-unit-control-wrapper',
+		className
+	);
 
 	const handleOnQuantityChange = (
 		nextQuantityValue: number | string | undefined,
 		changeProps: {
-			event:
-				| ChangeEvent< HTMLInputElement >
-				| PointerEvent< HTMLInputElement >;
+			event: SyntheticEvent;
 		}
 	) => {
 		if (
@@ -177,7 +178,7 @@ function UnforwardedUnitControl(
 				: undefined;
 			const changeProps = { event, data };
 
-			// The `onChange` callback already gets called, no need to call it explicitely.
+			// The `onChange` callback already gets called, no need to call it explicitly.
 			onUnitChange?.( validParsedUnit, changeProps );
 
 			setUnit( validParsedUnit );
@@ -258,27 +259,25 @@ function UnforwardedUnitControl(
 	}
 
 	return (
-		<Root className="components-unit-control-wrapper" style={ style }>
-			<ValueInput
-				type={ isPressEnterToChange ? 'text' : 'number' }
-				{ ...props }
-				autoComplete={ autoComplete }
-				className={ classes }
-				disabled={ disabled }
-				hideHTMLArrows
-				isPressEnterToChange={ isPressEnterToChange }
-				label={ label }
-				onBlur={ handleOnBlur }
-				onKeyDown={ handleOnKeyDown }
-				onChange={ handleOnQuantityChange }
-				ref={ forwardedRef }
-				size={ size }
-				suffix={ inputSuffix }
-				value={ parsedQuantity ?? '' }
-				step={ step }
-				__unstableStateReducer={ stateReducer }
-			/>
-		</Root>
+		<ValueInput
+			type={ isPressEnterToChange ? 'text' : 'number' }
+			{ ...props }
+			autoComplete={ autoComplete }
+			className={ classes }
+			disabled={ disabled }
+			spinControls="none"
+			isPressEnterToChange={ isPressEnterToChange }
+			label={ label }
+			onBlur={ handleOnBlur }
+			onKeyDown={ handleOnKeyDown }
+			onChange={ handleOnQuantityChange }
+			ref={ forwardedRef }
+			size={ size }
+			suffix={ inputSuffix }
+			value={ parsedQuantity ?? '' }
+			step={ step }
+			__unstableStateReducer={ stateReducer }
+		/>
 	);
 }
 

package/src/unit-control/styles/unit-control-styles.ts

@@ -18,16 +18,6 @@ type SelectProps = {
 	selectSize: SelectSize;
 };
 
-export const Root = styled.div`
-	box-sizing: border-box;
-	position: relative;
-
-	/* Target the InputControl's backdrop and make focus styles smoother. */
-	&&& ${ BackdropUI } {
-		transition: box-shadow 0.1s linear;
-	}
-`;
-
 // TODO: Resolve need to use &&& to increase specificity
 // https://github.com/WordPress/gutenberg/issues/18483
 
@@ -37,6 +27,10 @@ export const ValueInput = styled( NumberControl )`
 			display: block;
 			width: 100%;
 		}
+
+		${ BackdropUI } {
+			transition: box-shadow 0.1s linear;
+		}
 	}
 `;
 
@@ -129,8 +123,8 @@ const unitSelectSizes = ( { selectSize = 'default' }: SelectProps ) => {
 };
 
 export const UnitSelect = styled.select< SelectProps >`
-	// The && counteracts <select> styles in WP forms.css
-	&& {
+	// The &&& counteracts <select> styles in WP forms.css
+	&&& {
 		appearance: none;
 		background: transparent;
 		border-radius: 2px;

package/src/unit-control/test/utils.ts

@@ -6,6 +6,7 @@ import {
 	useCustomUnits,
 	getValidParsedQuantityAndUnit,
 	getUnitsWithCurrentUnit,
+	parseQuantityAndUnitFromRawValue,
 } from '../utils';
 import type { WPUnitControlUnit } from '../types';
 
@@ -242,4 +243,46 @@ describe( 'UnitControl utils', () => {
 			expect( result ).toEqual( limitedUnits );
 		} );
 	} );
+
+	describe( 'parseQuantityAndUnitFromRawValue', () => {
+		const cases: [
+			number | string | undefined,
+			number | undefined,
+			string | undefined
+		][] = [
+			// Test undefined.
+			[ undefined, undefined, undefined ],
+			// Test integers and non-integers.
+			[ 1, 1, undefined ],
+			[ 1.25, 1.25, undefined ],
+			[ '123', 123, undefined ],
+			[ '1.5', 1.5, undefined ],
+			[ '0.75', 0.75, undefined ],
+			// Valid simple CSS values.
+			[ '20px', 20, 'px' ],
+			[ '0.8em', 0.8, 'em' ],
+			[ '2rem', 2, 'rem' ],
+			[ '1.4vw', 1.4, 'vw' ],
+			[ '0.4vh', 0.4, 'vh' ],
+			[ '-5px', -5, 'px' ],
+			// Complex CSS values that shouldn't parse.
+			[ 'abs(-15px)', undefined, undefined ],
+			[ 'calc(10px + 1)', undefined, undefined ],
+			[ 'clamp(2.5rem, 4vw, 3rem)', undefined, undefined ],
+			[ 'max(4.5em, 3vh)', undefined, undefined ],
+			[ 'min(10px, 1rem)', undefined, undefined ],
+			[ 'minmax(30px, auto)', undefined, undefined ],
+			[ 'var(--wp--font-size)', undefined, undefined ],
+		];
+
+		test.each( cases )(
+			'given %p as argument, returns value = %p and unit = %p',
+			( rawValue, expectedQuantity, expectedUnit ) => {
+				const [ quantity, unit ] =
+					parseQuantityAndUnitFromRawValue( rawValue );
+				expect( quantity ).toBe( expectedQuantity );
+				expect( unit ).toBe( expectedUnit );
+			}
+		);
+	} );
 } );

package/src/unit-control/types.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { FocusEventHandler, SyntheticEvent } from 'react';
+import type { FocusEventHandler } from 'react';
 
 /**
  * Internal dependencies
@@ -38,10 +38,9 @@ export type WPUnitControlUnit = {
 	step?: number;
 };
 
-export type UnitControlOnChangeCallback = InputChangeCallback<
-	SyntheticEvent< HTMLSelectElement | HTMLInputElement >,
-	{ data?: WPUnitControlUnit }
->;
+export type UnitControlOnChangeCallback = InputChangeCallback< {
+	data?: WPUnitControlUnit;
+} >;
 
 export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 	/**
@@ -67,7 +66,7 @@ export type UnitSelectControlProps = Pick< InputControlProps, 'size' > & {
 };
 
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
-	Omit< NumberControlProps, 'hideHTMLArrows' | 'suffix' | 'type' > & {
+	Omit< NumberControlProps, 'spinControls' | 'suffix' | 'type' > & {
 		/**
 		 * If `true`, the unit `<select>` is hidden.
 		 *

package/src/utils/colors-values.js

@@ -31,12 +31,14 @@ const ALERT = {
 
 // Matches @wordpress/base-styles
 const ADMIN = {
-	theme: 'var( --wp-admin-theme-color, #007cba)',
-	themeDark10: 'var( --wp-admin-theme-color-darker-10, #006ba1)',
+	theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #007cba))',
+	themeDark10:
+		'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #006ba1))',
 };
 
 const UI = {
 	theme: ADMIN.theme,
+	themeDark10: ADMIN.themeDark10,
 	background: white,
 	backgroundDisabled: GRAY[ 100 ],
 	border: GRAY[ 700 ],

package/src/utils/config-values.js

@@ -33,7 +33,6 @@ const TOGGLE_GROUP_CONTROL_PROPS = {
 	toggleGroupControlBackdropBackgroundColor:
 		CONTROL_PROPS.controlSurfaceColor,
 	toggleGroupControlBackdropBorderColor: COLORS.ui.border,
-	toggleGroupControlBackdropBoxShadow: 'transparent',
 	toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor,
 };
 

package/src/utils/hooks/stories/use-cx.js

@@ -32,9 +32,9 @@ const Example = ( { serializedStyles, children } ) => {
 const ExampleWithUseMemoWrong = ( { serializedStyles, children } ) => {
 	const cx = useCx();
 	// Wrong: using 'useMemo' without adding 'cx' to the dependency list.
-	// eslint-disable-next-line react-hooks/exhaustive-deps
 	const classes = useMemo(
 		() => cx( serializedStyles ),
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[ serializedStyles ]
 	);
 	return <span className={ classes }>{ children }</span>;

package/src/utils/hooks/use-update-effect.js

@@ -13,13 +13,17 @@ import { useRef, useEffect } from '@wordpress/element';
  */
 function useUpdateEffect( effect, deps ) {
 	const mounted = useRef( false );
-
 	useEffect( () => {
 		if ( mounted.current ) {
 			return effect();
 		}
 		mounted.current = true;
 		return undefined;
+		// Disable reasons:
+		// 1. This hook needs to pass a dep list that isn't an array literal
+		// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings
+		// see https://github.com/WordPress/gutenberg/pull/41166
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, deps );
 }
 

package/src/utils/input/base.js

@@ -19,10 +19,10 @@ export const inputStyleNeutral = css`
 `;
 
 export const inputStyleFocus = css`
-	border-color: var( --wp-admin-theme-color );
+	border-color: ${ COLORS.ui.theme };
 	box-shadow: 0 0 0
 		calc( ${ CONFIG.borderWidthFocus } - ${ CONFIG.borderWidth } )
-		var( --wp-admin-theme-color );
+		${ COLORS.ui.theme };
 
 	// Windows High Contrast mode will show this outline, but not the box-shadow.
 	outline: 2px solid transparent;

package/src/utils/types.ts

@@ -7,21 +7,6 @@ export type SizeRangeDefault =
 
 export type SizeRangeReduced = 'large' | 'medium' | 'small';
 
-export type FormElementProps< V > = {
-	/**
-	 * The default (initial) state to use if `value` is undefined.
-	 */
-	defaultValue?: V;
-	/**
-	 * Determines if element is disabled.
-	 */
-	disabled?: boolean;
-	/**
-	 * Label for the form element.
-	 */
-	label?: string;
-};
-
 export type PopperPlacement =
 	| 'auto'
 	| 'auto-start'

package/src/v-stack/test/__snapshots__/index.tsx.snap

@@ -24,17 +24,19 @@ exports[`props should render alignment 1`] = `
   min-height: 0;
 }
 
-<div
-  class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="VStack"
->
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
-  <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -61,17 +63,19 @@ exports[`props should render correctly 1`] = `
   min-height: 0;
 }
 
-<div
-  class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="VStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;
 
@@ -98,16 +102,18 @@ exports[`props should render spacing 1`] = `
   min-height: 0;
 }
 
-<div
-  class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
-  data-wp-c16t="true"
-  data-wp-component="VStack"
->
-  <div
-    class="emotion-2 emotion-1"
-  />
+<div>
   <div
-    class="emotion-2 emotion-1"
-  />
+    class="components-flex components-h-stack components-v-stack emotion-0 emotion-1"
+    data-wp-c16t="true"
+    data-wp-component="VStack"
+  >
+    <div
+      class="emotion-2 emotion-1"
+    />
+    <div
+      class="emotion-2 emotion-1"
+    />
+  </div>
 </div>
 `;

package/src/v-stack/test/index.tsx

@@ -17,7 +17,7 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render alignment', () => {
@@ -27,7 +27,7 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 
 	test( 'should render spacing', () => {
@@ -37,6 +37,6 @@ describe( 'props', () => {
 				<View />
 			</VStack>
 		);
-		expect( container.firstChild ).toMatchSnapshot();
+		expect( container ).toMatchSnapshot();
 	} );
 } );