@wordpress/components 19.8.3 → 19.10.0

package/src/unit-control/test/{utils.js → utils.ts}

@@ -7,21 +7,28 @@ import {
 	getValidParsedQuantityAndUnit,
 	getUnitsWithCurrentUnit,
 } from '../utils';
+import type { WPUnitControlUnit } from '../types';
 
 describe( 'UnitControl utils', () => {
 	describe( 'useCustomUnits', () => {
 		it( 'should return filtered css units', () => {
-			const cssUnits = [ { value: 'px' }, { value: '%' } ];
+			const cssUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: '%', label: 'percent' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ 'em', 'px' ],
 				units: cssUnits,
 			} );
 
-			expect( units ).toEqual( [ { value: 'px' } ] );
+			expect( units ).toEqual( [ { value: 'px', label: 'pixel' } ] );
 		} );
 
 		it( 'should add default values to available units', () => {
-			const cssUnits = [ { value: 'px' }, { value: '%' } ];
+			const cssUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: '%', label: 'percent' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ '%', 'px' ],
 				defaultValues: { '%': 10, px: 10 },
@@ -29,8 +36,8 @@ describe( 'UnitControl utils', () => {
 			} );
 
 			expect( units ).toEqual( [
-				{ value: 'px', default: 10 },
-				{ value: '%', default: 10 },
+				{ value: 'px', label: 'pixel', default: 10 },
+				{ value: '%', label: 'percent', default: 10 },
 			] );
 		} );
 
@@ -38,24 +45,32 @@ describe( 'UnitControl utils', () => {
 			// Although the public APIs of the component expect a `number` as the type of the
 			// default values, it's still good to test for strings (as it can happen in un-typed
 			// environments)
-			const cssUnits = [ { value: 'px' }, { value: '%' } ];
+			const cssUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: '%', label: 'percent' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ '%', 'px' ],
 				defaultValues: {
+					// @ts-expect-error (passing a string instead of a number is the point of the test)
 					'%': '14',
+					// @ts-expect-error (passing a string instead of a number is the point of the test)
 					px: 'not a valid numeric quantity',
 				},
 				units: cssUnits,
 			} );
 
 			expect( units ).toEqual( [
-				{ value: 'px', default: undefined },
-				{ value: '%', default: 14 },
+				{ value: 'px', label: 'pixel', default: undefined },
+				{ value: '%', label: 'percent', default: 14 },
 			] );
 		} );
 
 		it( 'should return an empty array where availableUnits match no preferred css units', () => {
-			const cssUnits = [ { value: 'em' }, { value: 'vh' } ];
+			const cssUnits = [
+				{ value: 'em', label: 'em' },
+				{ value: 'vh', label: 'vh' },
+			];
 			const units = useCustomUnits( {
 				availableUnits: [ '%', 'px' ],
 				defaultValues: { '%': 10, px: 10 },
@@ -69,16 +84,19 @@ describe( 'UnitControl utils', () => {
 	describe( 'filterUnitsWithSettings', () => {
 		it( 'should return filtered units array', () => {
 			const preferredUnits = [ '%', 'px' ];
-			const availableUnits = [ { value: 'px' }, { value: 'em' } ];
+			const availableUnits = [
+				{ value: 'px', label: 'pixel' },
+				{ value: 'em', label: 'em' },
+			];
 
 			expect(
 				filterUnitsWithSettings( preferredUnits, availableUnits )
-			).toEqual( [ { value: 'px' } ] );
+			).toEqual( [ { value: 'px', label: 'pixel' } ] );
 		} );
 
 		it( 'should return empty array where preferred units match no available css unit', () => {
 			const preferredUnits = [ '%', 'px' ];
-			const availableUnits = [ { value: 'em' } ];
+			const availableUnits = [ { value: 'em', label: 'em' } ];
 
 			expect(
 				filterUnitsWithSettings( preferredUnits, availableUnits )
@@ -92,13 +110,14 @@ describe( 'UnitControl utils', () => {
 			const availableUnits = false;
 
 			expect(
+				// @ts-expect-error (passing `false` instead of a valid array of units is the point of the test)
 				filterUnitsWithSettings( preferredUnits, availableUnits )
 			).toEqual( [] );
 		} );
 
 		it( 'should return empty array where available units is set to an empty array', () => {
 			const preferredUnits = [ '%', 'px' ];
-			const availableUnits = [];
+			const availableUnits: WPUnitControlUnit[] = [];
 
 			expect(
 				filterUnitsWithSettings( preferredUnits, availableUnits )
@@ -127,7 +146,7 @@ describe( 'UnitControl utils', () => {
 
 		it( 'should return fallback value', () => {
 			const nextValue = 'thirteen';
-			const preferredUnits = [ { value: 'em' } ];
+			const preferredUnits = [ { value: 'em', label: 'em' } ];
 			const fallbackValue = 13;
 
 			expect(
@@ -155,7 +174,7 @@ describe( 'UnitControl utils', () => {
 
 		it( 'should return first unit in preferred units collection as second fallback unit', () => {
 			const nextValue = 101;
-			const preferredUnits = [ { value: 'px' } ];
+			const preferredUnits = [ { value: 'px', label: 'pixel' } ];
 
 			expect(
 				getValidParsedQuantityAndUnit( nextValue, preferredUnits )
@@ -185,8 +204,8 @@ describe( 'UnitControl utils', () => {
 			expect( result ).toHaveLength( 3 );
 
 			const currentUnit = result.shift();
-			expect( currentUnit.value ).toBe( '%' );
-			expect( currentUnit.label ).toBe( '%' );
+			expect( currentUnit?.value ).toBe( '%' );
+			expect( currentUnit?.label ).toBe( '%' );
 			expect( result ).toEqual( limitedUnits );
 		} );
 
@@ -196,8 +215,8 @@ describe( 'UnitControl utils', () => {
 			expect( result ).toHaveLength( 3 );
 
 			const currentUnit = result.shift();
-			expect( currentUnit.value ).toBe( '%' );
-			expect( currentUnit.label ).toBe( '%' );
+			expect( currentUnit?.value ).toBe( '%' );
+			expect( currentUnit?.label ).toBe( '%' );
 			expect( result ).toEqual( limitedUnits );
 		} );
 

package/src/unit-control/types.ts

@@ -74,7 +74,10 @@ export type UnitSelectControlProps = {
 
 // TODO: when available, should (partially) extend `NumberControl` props.
 export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
-	Pick< InputControlProps, 'hideLabelFromVision' > & {
+	Pick<
+		InputControlProps,
+		'hideLabelFromVision' | '__next36pxDefaultSize'
+	> & {
 		__unstableStateReducer?: StateReducer;
 		__unstableInputWidth?: CSSProperties[ 'width' ];
 		/**

package/src/unit-control/utils.ts

@@ -155,7 +155,9 @@ export function getParsedQuantityAndUnit(
  * @param  units List of units.
  * @return Whether the list actually contains any units.
  */
-export function hasUnits( units?: WPUnitControlUnit[] ): boolean {
+export function hasUnits(
+	units?: WPUnitControlUnit[]
+): units is WPUnitControlUnit[] {
 	// Although the `isArray` check shouldn't be necessary (given the signature of
 	// this typed function), it's better to stay on the side of caution, since
 	// this function may be called from un-typed environments.
@@ -218,7 +220,7 @@ export function parseQuantityAndUnitFromRawValue(
  */
 export function getValidParsedQuantityAndUnit(
 	rawValue: string | number,
-	allowedUnits: WPUnitControlUnit[],
+	allowedUnits?: WPUnitControlUnit[],
 	fallbackQuantity?: number,
 	fallbackUnit?: string
 ): [ number | undefined, string | undefined ] {
@@ -295,7 +297,7 @@ export const useCustomUnits = ( {
 }: {
 	units?: WPUnitControlUnit[];
 	availableUnits?: string[];
-	defaultValues: Record< string, number >;
+	defaultValues?: Record< string, number >;
 } ): WPUnitControlUnit[] => {
 	const customUnitsToReturn = filterUnitsWithSettings(
 		availableUnits,

package/src/utils/colors-values.js

@@ -8,18 +8,12 @@ import { merge } from 'lodash';
  */
 import { rgba } from './colors';
 
-export const BASE = {
+const BASE = {
 	black: '#000',
 	white: '#fff',
 };
 
-/**
- * TODO: Continue to update values as "G2" design evolves.
- *
- * "G2" refers to the movement to advance the interface of the block editor.
- * https://github.com/WordPress/gutenberg/issues/18667
- */
-export const G2 = {
+const G2 = {
 	blue: {
 		medium: {
 			focus: '#007cba',
@@ -35,10 +29,6 @@ export const G2 = {
 		200: '#e0e0e0', // Used sparingly for light borders.
 		100: '#f0f0f0', // Used for light gray backgrounds.
 	},
-	darkGray: {
-		primary: '#1e1e1e',
-		heading: '#050505',
-	},
 	mediumGray: {
 		text: '#757575',
 	},
@@ -49,7 +39,7 @@ export const G2 = {
 	},
 };
 
-export const DARK_GRAY = {
+const DARK_GRAY = {
 	900: '#191e23',
 	800: '#23282d',
 	700: '#32373c',
@@ -63,7 +53,7 @@ export const DARK_GRAY = {
 	placeholder: rgba( G2.gray[ 900 ], 0.62 ),
 };
 
-export const DARK_OPACITY = {
+const DARK_OPACITY = {
 	900: rgba( '#000510', 0.9 ),
 	800: rgba( '#00000a', 0.85 ),
 	700: rgba( '#06060b', 0.8 ),
@@ -76,7 +66,7 @@ export const DARK_OPACITY = {
 	backgroundFill: rgba( DARK_GRAY[ 700 ], 0.7 ),
 };
 
-export const DARK_OPACITY_LIGHT = {
+const DARK_OPACITY_LIGHT = {
 	900: rgba( '#304455', 0.45 ),
 	800: rgba( '#425863', 0.4 ),
 	700: rgba( '#667886', 0.35 ),
@@ -88,7 +78,7 @@ export const DARK_OPACITY_LIGHT = {
 	100: rgba( '#747474', 0.05 ),
 };
 
-export const LIGHT_GRAY = {
+const LIGHT_GRAY = {
 	900: '#a2aab2',
 	800: '#b5bcc2',
 	700: '#ccd0d4',
@@ -101,7 +91,7 @@ export const LIGHT_GRAY = {
 	placeholder: rgba( BASE.white, 0.65 ),
 };
 
-export const LIGHT_OPACITY_LIGHT = {
+const LIGHT_OPACITY_LIGHT = {
 	900: rgba( BASE.white, 0.5 ),
 	800: rgba( BASE.white, 0.45 ),
 	700: rgba( BASE.white, 0.4 ),
@@ -117,7 +107,7 @@ export const LIGHT_OPACITY_LIGHT = {
 // Additional colors.
 // Some are from https://make.wordpress.org/design/handbook/foundations/colors/.
 
-export const BLUE = {
+const BLUE = {
 	wordpress: {
 		700: '#00669b',
 	},
@@ -139,19 +129,19 @@ export const BLUE = {
 	},
 };
 
-export const ALERT = {
+const ALERT = {
 	yellow: '#f0b849',
 	red: '#d94f4f',
 	green: '#4ab866',
 };
 
-export const ADMIN = {
+const ADMIN = {
 	theme: `var( --wp-admin-theme-color, ${ BLUE.wordpress[ 700 ] })`,
 	themeDark10: `var( --wp-admin-theme-color-darker-10, ${ BLUE.medium.focus })`,
 };
 
 // Namespaced values for raw colors hex codes.
-export const UI = {
+const UI = {
 	theme: ADMIN.theme,
 	background: BASE.white,
 	backgroundDisabled: LIGHT_GRAY[ 200 ],
@@ -169,10 +159,16 @@ export const UI = {
 // Using Object.assign instead of { ...spread } syntax helps TypeScript
 // to extract the correct type defs here.
 export const COLORS = Object.assign( {}, BASE, {
-	darkGray: merge( {}, DARK_GRAY, G2.darkGray ),
+	darkGray: DARK_GRAY,
 	darkOpacity: DARK_OPACITY,
 	darkOpacityLight: DARK_OPACITY_LIGHT,
 	mediumGray: G2.mediumGray,
+	/**
+	 * The main gray color object (since Apr 16, 2022).
+	 *
+	 * We are in the process of simplifying the colors in this file,
+	 * please prefer this `gray` object in the meantime.
+	 */
 	gray: G2.gray,
 	lightGray: merge( {}, LIGHT_GRAY, G2.lightGray ),
 	lightGrayLight: LIGHT_OPACITY_LIGHT,

package/tsconfig.json

@@ -3,7 +3,13 @@
 	"compilerOptions": {
 		"rootDir": "src",
 		"declarationDir": "build-types",
-		"types": [ "gutenberg-env" ],
+		"types": [
+			"gutenberg-env",
+			"gutenberg-test-env",
+			"jest",
+			"@testing-library/jest-dom",
+			"snapshot-diff"
+		],
 		// Some errors in Reakit types with TypeScript 4.3
 		// Remove the following line when they've been addressed.
 		"skipLibCheck": true,
@@ -71,6 +77,7 @@
 		"src/spinner/**/*",
 		"src/surface/**/*",
 		"src/text/**/*",
+		"src/text-control/**/*",
 		"src/tip/**/*",
 		"src/toggle-group-control/**/*",
 		"src/tools-panel/**/*",
@@ -90,7 +97,7 @@
 		"src/**/*.native.js",
 		"src/**/react-native-*",
 		"src/**/stories/**.js", // only exclude js files, tsx files should be checked
-		"src/**/test",
+		"src/**/test/**.js", // only exclude js files, ts{x} files should be checked
 		"src/ui/__storybook-utils",
 		"src/ui/font-size-control"
 	]