@wordpress/components 19.15.0 → 20.0.0

package/build-types/unit-control/types.d.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, FocusEventHandler, SyntheticEvent } from 'react';
+import type { CSSProperties, FocusEventHandler, ReactNode, SyntheticEvent } from 'react';
 /**
  * Internal dependencies
  */
@@ -33,7 +33,7 @@ export declare type WPUnitControlUnit = {
 export declare type UnitControlOnChangeCallback = InputChangeCallback<SyntheticEvent<HTMLSelectElement | HTMLInputElement>, {
     data?: WPUnitControlUnit;
 }>;
-export declare type UnitSelectControlProps = {
+export declare type UnitSelectControlProps = Pick<InputControlProps, 'size'> & {
     /**
      * Whether the control can be focused via keyboard navigation.
      *
@@ -44,12 +44,6 @@ export declare type UnitSelectControlProps = {
      * A callback function invoked when the value is changed.
      */
     onChange?: UnitControlOnChangeCallback;
-    /**
-     * Size of the control option. Supports "default" and "small".
-     *
-     * @default 'default'
-     */
-    size?: SelectSize;
     /**
      * Current unit.
      */
@@ -61,9 +55,13 @@ export declare type UnitSelectControlProps = {
      */
     units?: WPUnitControlUnit[];
 };
-export declare type UnitControlProps = Omit<UnitSelectControlProps, 'unit'> & Pick<InputControlProps, 'hideLabelFromVision' | '__next36pxDefaultSize'> & {
+export declare type UnitControlProps = Omit<UnitSelectControlProps, 'unit'> & Pick<InputControlProps, 'hideLabelFromVision' | 'prefix' | '__next36pxDefaultSize'> & {
     __unstableStateReducer?: StateReducer;
     __unstableInputWidth?: CSSProperties['width'];
+    /**
+     * The children elements.
+     */
+    children?: ReactNode;
     /**
      * If `true`, the unit `<select>` is hidden.
      *

package/build-types/unit-control/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE9E;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,iBAAiB,EACjB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACpC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;;;OAIG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,IAAI,CAAE,sBAAsB,EAAE,MAAM,CAAE,GACpE,IAAI,CACH,iBAAiB,EACjB,qBAAqB,GAAG,uBAAuB,CAC/C,GAAG;IACH,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAE,gBAAgB,GAAG,iBAAiB,CAAE,CAAC;CACnE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/unit-control/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,cAAc,EACd,MAAM,OAAO,CAAC;AAEf;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnE,OAAO,KAAK,EACX,mBAAmB,EACnB,iBAAiB,EACjB,IAAI,IAAI,SAAS,EACjB,MAAM,wBAAwB,CAAC;AAEhC,oBAAY,UAAU,GAAG,SAAS,CAAC;AAEnC,oBAAY,iBAAiB,GAAG;IAC/B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,oBAAY,2BAA2B,GAAG,mBAAmB,CAC5D,cAAc,CAAE,iBAAiB,GAAG,gBAAgB,CAAE,EACtD;IAAE,IAAI,CAAC,EAAE,iBAAiB,CAAA;CAAE,CAC5B,CAAC;AAEF,oBAAY,sBAAsB,GAAG,IAAI,CAAE,iBAAiB,EAAE,MAAM,CAAE,GAAG;IACxE;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,QAAQ,CAAC,EAAE,2BAA2B,CAAC;IACvC;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,iBAAiB,EAAE,CAAC;CAC5B,CAAC;AAGF,oBAAY,gBAAgB,GAAG,IAAI,CAAE,sBAAsB,EAAE,MAAM,CAAE,GACpE,IAAI,CACH,iBAAiB,EACjB,qBAAqB,GAAG,QAAQ,GAAG,uBAAuB,CAC1D,GAAG;IACH,sBAAsB,CAAC,EAAE,YAAY,CAAC;IACtC,oBAAoB,CAAC,EAAE,aAAa,CAAE,OAAO,CAAE,CAAC;IAChD;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;;;;OAKG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,CAAE,gBAAgB,GAAG,iBAAiB,CAAE,CAAC;CACnE,CAAC"}

package/build-types/utils/base-label.d.ts

@@ -0,0 +1,2 @@
+export declare const baseLabelTypography: import("@emotion/utils").SerializedStyles;
+//# sourceMappingURL=base-label.d.ts.map

package/build-types/utils/base-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-label.d.ts","sourceRoot":"","sources":["../../src/utils/base-label.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,mBAAmB,2CAK/B,CAAC"}

package/build-types/utils/box-sizing.d.ts

@@ -0,0 +1,2 @@
+export declare const boxSizingReset: import("@emotion/utils").SerializedStyles;
+//# sourceMappingURL=box-sizing.d.ts.map

package/build-types/utils/box-sizing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"box-sizing.d.ts","sourceRoot":"","sources":["../../src/utils/box-sizing.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,2CAQ1B,CAAC"}

package/build-types/utils/colors-values.d.ts

@@ -1,124 +1,46 @@
-export const COLORS: {
-    black: string;
-    white: string;
-} & {
+export const COLORS: Readonly<{
+    /**
+     * @deprecated Try to use `gray` instead.
+     */
     darkGray: {
-        900: string;
-        800: string;
-        700: string;
-        600: string;
         500: string;
-        400: string;
         300: string;
-        200: string;
         150: string;
-        100: string;
-        placeholder: string;
-    };
-    darkOpacity: {
-        900: string;
-        800: string;
-        700: string;
-        600: string;
-        500: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-        backgroundFill: string;
-    };
-    darkOpacityLight: {
-        900: string;
-        800: string;
-        700: string;
-        600: string;
-        500: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-    };
-    mediumGray: {
-        text: string;
     };
     /**
-     * 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.
+     * The main gray color object.
      */
     gray: {
-        900: string;
-        700: string;
-        600: string;
-        400: string;
-        300: string;
-        200: string;
-        100: string;
-    };
-    lightGray: {
         900: string;
         800: string;
+        /** Meets 4.6:1 text contrast against white. */
         700: string;
+        /** Meets 3:1 UI or large text contrast against white. */
         600: string;
-        500: string;
         400: string;
+        /** Used for most borders. */
         300: string;
+        /** Used sparingly for light borders. */
         200: string;
+        /** Used for light gray backgrounds. */
         100: string;
-        placeholder: string;
-    } & {
-        ui: string;
-        secondary: string;
-        tertiary: string;
     };
-    lightGrayLight: {
-        900: string;
+    /**
+     * @deprecated Try to use `gray` instead.
+     */
+    lightGray: {
         800: string;
-        700: string;
         600: string;
-        500: string;
         400: string;
         300: string;
         200: string;
-        100: string;
-        backgroundFill: string;
-    };
-    blue: {
-        wordpress: {
-            700: string;
-        };
-        dark: {
-            900: string;
-        };
-        medium: {
-            900: string;
-            800: string;
-            700: string;
-            600: string;
-            500: string;
-            400: string;
-            300: string;
-            200: string;
-            100: string;
-            highlight: string;
-            focus: string;
-        };
-    } & {
-        medium: {
-            focus: string;
-            focusDark: string;
-        };
     };
+    white: string;
     alert: {
         yellow: string;
         red: string;
         green: string;
     };
-    admin: {
-        theme: string;
-        themeDark10: string;
-    };
     ui: {
         theme: string;
         background: string;
@@ -127,12 +49,11 @@ export const COLORS: {
         borderHover: string;
         borderFocus: string;
         borderDisabled: string;
-        borderLight: string;
-        label: string;
         textDisabled: string;
         textDark: string;
-        textLight: string;
+        darkGrayPlaceholder: string;
+        lightGrayPlaceholder: string;
     };
-};
+}>;
 export default COLORS;
 //# sourceMappingURL=colors-values.d.ts.map

package/build-types/utils/colors-values.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":"AAgKA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAKC;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAQA"}
+{"version":3,"file":"colors-values.d.ts","sourceRoot":"","sources":["../../src/utils/colors-values.js"],"names":[],"mappings":"AAmEA;IACC;;OAEG;;;;;;IAEH;;OAEG;;;;QA/DH,+CAA+C;;QAE/C,yDAAyD;;;QAGzD,6BAA6B;;QAE7B,wCAAwC;;QAExC,uCAAuC;;;IAwDvC;;OAEG;;;;;;;;;;;;;;;;;;;;;;;;;;;GAKA"}

package/build-types/utils/rtl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rtl.d.ts","sourceRoot":"","sources":["../../src/utils/rtl.js"],"names":[],"mappings":"AA8DA;;;;;;;GAOG;AACH,gCALW,OAAO,OAAO,EAAE,aAAa,0DAG5B,MAAM,OAAO,gBAAgB,EAAE,gBAAgB,CAY1D;;IAED;;;;;;;;;;;OAWG;IACH,0BAAyB;;AApClB,4CAJI,OAAO,OAAO,EAAE,aAAa,GAE5B,OAAO,OAAO,EAAE,aAAa,CAIxC"}
+{"version":3,"file":"rtl.d.ts","sourceRoot":"","sources":["../../src/utils/rtl.js"],"names":[],"mappings":"AAkEA;;;;;;;GAOG;AACH,gCALW,OAAO,OAAO,EAAE,aAAa,0DAG5B,MAAM,OAAO,gBAAgB,EAAE,gBAAgB,CAY1D;;IAED;;;;;;;;;;;OAWG;IACH,0BAAyB;;AAzClB,4CAJI,OAAO,OAAO,EAAE,aAAa,GAE5B,OAAO,OAAO,EAAE,aAAa,CASxC"}

package/build-types/utils/strings.d.ts

@@ -0,0 +1,2 @@
+export declare const normalizeTextString: (value: string) => string;
+//# sourceMappingURL=strings.d.ts.map

package/build-types/utils/strings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"strings.d.ts","sourceRoot":"","sources":["../../src/utils/strings.ts"],"names":[],"mappings":"AAmEA,eAAO,MAAM,mBAAmB,UAAY,MAAM,KAAI,MAIrD,CAAC"}

package/build-types/utils/style-mixins.d.ts

@@ -1,3 +1,4 @@
+export { boxSizingReset } from "./box-sizing";
 export { rgba } from "./colors";
 export { reduceMotion } from "./reduce-motion";
 export { rtl } from "./rtl";
@@ -5,4 +6,5 @@ export { font } from "./font";
 export { breakpoint } from "./breakpoint";
 export { default as CONFIG } from "./config-values";
 export { COLORS } from "./colors-values";
+export { baseLabelTypography } from "./base-label";
 //# sourceMappingURL=style-mixins.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "19.15.0",
+	"version": "20.0.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -35,26 +35,28 @@
 		"@emotion/react": "^11.7.1",
 		"@emotion/serialize": "^1.0.2",
 		"@emotion/styled": "^11.6.0",
-		"@emotion/utils": "1.0.0",
-		"@floating-ui/react-dom": "0.6.3",
+		"@emotion/utils": "^1.0.0",
+		"@floating-ui/react-dom": "^1.0.0",
 		"@use-gesture/react": "^10.2.6",
-		"@wordpress/a11y": "^3.13.0",
-		"@wordpress/compose": "^5.11.0",
-		"@wordpress/date": "^4.13.0",
-		"@wordpress/deprecated": "^3.13.0",
-		"@wordpress/dom": "^3.13.0",
-		"@wordpress/element": "^4.11.0",
-		"@wordpress/escape-html": "^2.13.0",
-		"@wordpress/hooks": "^3.13.0",
-		"@wordpress/i18n": "^4.13.0",
-		"@wordpress/icons": "^9.4.0",
-		"@wordpress/is-shallow-equal": "^4.13.0",
-		"@wordpress/keycodes": "^3.13.0",
-		"@wordpress/primitives": "^3.11.0",
-		"@wordpress/rich-text": "^5.11.0",
-		"@wordpress/warning": "^2.13.0",
+		"@wordpress/a11y": "^3.16.0",
+		"@wordpress/compose": "^5.14.0",
+		"@wordpress/date": "^4.16.0",
+		"@wordpress/deprecated": "^3.16.0",
+		"@wordpress/dom": "^3.16.0",
+		"@wordpress/element": "^4.14.0",
+		"@wordpress/escape-html": "^2.16.0",
+		"@wordpress/hooks": "^3.16.0",
+		"@wordpress/i18n": "^4.16.0",
+		"@wordpress/icons": "^9.7.0",
+		"@wordpress/is-shallow-equal": "^4.16.0",
+		"@wordpress/keycodes": "^3.16.0",
+		"@wordpress/primitives": "^3.14.0",
+		"@wordpress/rich-text": "^5.14.0",
+		"@wordpress/warning": "^2.16.0",
+		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
+		"date-fns": "^2.28.0",
 		"dom-scroll-into-view": "^1.2.1",
 		"downshift": "^6.0.15",
 		"framer-motion": "^6.2.8",
@@ -62,12 +64,11 @@
 		"highlight-words-core": "^1.2.2",
 		"lodash": "^4.17.21",
 		"memize": "^1.1.0",
-		"moment": "^2.26.0",
 		"re-resizable": "^6.4.0",
 		"react-colorful": "^5.3.1",
-		"react-dates": "^21.8.0",
 		"reakit": "^1.3.8",
 		"remove-accents": "^0.4.2",
+		"use-lilius": "^2.0.1",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
@@ -77,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d9d33bbdf317a4381b8ca1713e43bb50df653b3"
+	"gitHead": "171b87c7465b93e685e081c5f57f153507363c95"
 }

package/src/alignment-matrix-control/index.js

@@ -75,7 +75,7 @@ export default function AlignmentMatrixControl( {
 			as={ Root }
 			className={ classes }
 			role="grid"
-			width={ width }
+			size={ width }
 		>
 			{ GRID.map( ( cells, index ) => (
 				<CompositeGroup

package/src/alignment-matrix-control/stories/index.js

@@ -1,47 +1,72 @@
-/**
- * External dependencies
- */
-import { number, select } from '@storybook/addon-knobs';
 /**
  * WordPress dependencies
  */
-import { Icon as BaseIcon } from '@wordpress/icons';
+import { useEffect, useState } from '@wordpress/element';
+import { Icon } from '@wordpress/icons';
+
 /**
  * Internal dependencies
  */
 import AlignmentMatrixControl from '../';
 import { ALIGNMENTS } from '../utils';
-
-const alignmentOptions = ALIGNMENTS.reduce( ( options, item ) => {
-	return { ...options, [ item ]: item };
-}, {} );
+import { HStack } from '../../h-stack';
 
 export default {
 	title: 'Components (Experimental)/AlignmentMatrixControl',
 	component: AlignmentMatrixControl,
+	subcomponents: {
+		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
+	},
+	argTypes: {
+		defaultValue: { options: ALIGNMENTS },
+		onChange: { action: 'onChange', control: { type: null } },
+		label: { control: { type: 'text' } },
+		width: { control: { type: 'number' } },
+		value: { control: { type: null } },
+	},
 	parameters: {
-		knobs: { disable: false },
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
 	},
 };
 
-export const _default = () => {
-	const props = {
-		value: select( 'value', alignmentOptions, 'center center' ),
-	};
+const Template = ( { defaultValue, onChange, ...props } ) => {
+	const [ value, setValue ] = useState();
 
-	return <AlignmentMatrixControl { ...props } />;
-};
-
-export const icon = () => {
-	const props = {
-		value: select( 'value', alignmentOptions, 'center center' ),
-		size: number( 'size', 24 ),
-	};
+	// Convenience handler for Canvas view so changes are reflected
+	useEffect( () => {
+		setValue( defaultValue );
+	}, [ defaultValue ] );
 
 	return (
-		<BaseIcon
-			icon={ <AlignmentMatrixControl.Icon size={ props.size } /> }
+		<AlignmentMatrixControl
 			{ ...props }
+			onChange={ ( ...changeArgs ) => {
+				setValue( ...changeArgs );
+				onChange( ...changeArgs );
+			} }
+			value={ value }
 		/>
 	);
 };
+export const Default = Template.bind( {} );
+
+export const IconSubcomponent = () => {
+	return (
+		<HStack justify="flex-start">
+			<Icon
+				icon={
+					<AlignmentMatrixControl.Icon size={ 24 } value="top left" />
+				}
+			/>
+			<Icon
+				icon={
+					<AlignmentMatrixControl.Icon
+						size={ 24 }
+						value="center center"
+					/>
+				}
+			/>
+		</HStack>
+	);
+};

package/src/alignment-matrix-control/styles/alignment-matrix-control-styles.js

@@ -45,9 +45,7 @@ export const Row = styled.div`
 const pointActive = ( { isActive } ) => {
 	const boxShadow = isActive ? `0 0 0 2px ${ COLORS.gray[ 900 ] }` : null;
 	const pointColor = isActive ? COLORS.gray[ 900 ] : COLORS.lightGray[ 800 ];
-	const pointColorHover = isActive
-		? COLORS.gray[ 900 ]
-		: COLORS.blue.medium.focus;
+	const pointColorHover = isActive ? COLORS.gray[ 900 ] : COLORS.ui.theme;
 
 	return css`
 		box-shadow: ${ boxShadow };

package/src/angle-picker-control/index.js

@@ -20,6 +20,8 @@ import { Text } from '../text';
 import { Spacer } from '../spacer';
 
 export default function AnglePickerControl( {
+	/** Start opting into the new margin-free styles that will become the default in a future version. */
+	__nextHasNoMarginBottom = false,
 	className,
 	label = __( 'Angle' ),
 	onChange,
@@ -34,7 +36,11 @@ export default function AnglePickerControl( {
 	const classes = classnames( 'components-angle-picker-control', className );
 
 	return (
-		<Root className={ classes }>
+		<Root
+			__nextHasNoMarginBottom={ __nextHasNoMarginBottom }
+			className={ classes }
+			gap={ 4 }
+		>
 			<FlexBlock>
 				<NumberControl
 					label={ label }
@@ -62,7 +68,6 @@ export default function AnglePickerControl( {
 			</FlexBlock>
 			<FlexItem
 				style={ {
-					marginLeft: space( 4 ),
 					marginBottom: space( 1 ),
 					marginTop: 'auto',
 				} }

package/src/angle-picker-control/stories/index.js

@@ -11,13 +11,16 @@ import AnglePickerControl from '../';
 export default {
 	title: 'Components/AnglePickerControl',
 	component: AnglePickerControl,
+	argTypes: {
+		__nextHasNoMarginBottom: { control: { type: 'boolean' } },
+	},
 };
 
-const AnglePickerWithState = () => {
+const AnglePickerWithState = ( args ) => {
 	const [ angle, setAngle ] = useState();
-	return <AnglePickerControl value={ angle } onChange={ setAngle } />;
+	return (
+		<AnglePickerControl { ...args } value={ angle } onChange={ setAngle } />
+	);
 };
 
-export const _default = () => {
-	return <AnglePickerWithState />;
-};
+export const Default = AnglePickerWithState.bind( {} );

package/src/angle-picker-control/styles/angle-picker-control-styles.js

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 /**
@@ -14,8 +15,16 @@ import CONFIG from '../../utils/config-values';
 const CIRCLE_SIZE = 32;
 const INNER_CIRCLE_SIZE = 3;
 
+const deprecatedBottomMargin = ( { __nextHasNoMarginBottom } ) => {
+	return ! __nextHasNoMarginBottom
+		? css`
+				margin-bottom: ${ space( 2 ) };
+		  `
+		: '';
+};
+
 export const Root = styled( Flex )`
-	margin-bottom: ${ space( 2 ) };
+	${ deprecatedBottomMargin }
 `;
 
 export const CircleRoot = styled.div`
@@ -36,9 +45,9 @@ export const CircleIndicatorWrapper = styled.div`
 `;
 
 export const CircleIndicator = styled.div`
-	background: ${ COLORS.admin.theme };
+	background: ${ COLORS.ui.theme };
 	border-radius: 50%;
-	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.admin.theme };
+	border: ${ INNER_CIRCLE_SIZE }px solid ${ COLORS.ui.theme };
 	bottom: 0;
 	box-sizing: border-box;
 	display: block;

package/src/autocomplete/index.js

@@ -14,15 +14,6 @@ import {
 	useRef,
 	useMemo,
 } from '@wordpress/element';
-import {
-	ENTER,
-	ESCAPE,
-	UP,
-	DOWN,
-	LEFT,
-	RIGHT,
-	BACKSPACE,
-} from '@wordpress/keycodes';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
 	useInstanceId,
@@ -220,7 +211,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		backspacing.current = event.keyCode === BACKSPACE;
+		backspacing.current = event.code === 'Backspace';
 
 		if ( ! autocompleter ) {
 			return;
@@ -231,8 +222,8 @@ function useAutocomplete( {
 		if ( event.defaultPrevented ) {
 			return;
 		}
-		switch ( event.keyCode ) {
-			case UP:
+		switch ( event.code ) {
+			case 'ArrowUp':
 				setSelectedIndex(
 					( selectedIndex === 0
 						? filteredOptions.length
@@ -240,24 +231,24 @@ function useAutocomplete( {
 				);
 				break;
 
-			case DOWN:
+			case 'ArrowDown':
 				setSelectedIndex(
 					( selectedIndex + 1 ) % filteredOptions.length
 				);
 				break;
 
-			case ESCAPE:
+			case 'Escape':
 				setAutocompleter( null );
 				setAutocompleterUI( null );
 				event.preventDefault();
 				break;
 
-			case ENTER:
+			case 'Enter':
 				select( filteredOptions[ selectedIndex ] );
 				break;
 
-			case LEFT:
-			case RIGHT:
+			case 'ArrowLeft':
+			case 'ArrowRight':
 				reset();
 				return;
 
@@ -265,7 +256,7 @@ function useAutocomplete( {
 				return;
 		}
 
-		// Any handled keycode should prevent original behavior. This relies on
+		// Any handled key should prevent original behavior. This relies on
 		// the early return in the default case.
 		event.preventDefault();
 	}

package/src/base-control/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { FunctionComponent } from 'react';
 
 /**
  * Internal dependencies
@@ -16,6 +15,7 @@ import {
 	StyledHelp,
 	StyledVisualLabel,
 } from './styles/base-control-styles';
+import type { WordPressComponentProps } from '../ui/context';
 
 /**
  * `BaseControl` is a component used to generate labels and help text for components handling user inputs.
@@ -104,12 +104,14 @@ export const BaseControl = ( {
  * 	</BaseControl>
  * );
  */
-export const VisualLabel: FunctionComponent< BaseControlVisualLabelProps > = ( {
+export const VisualLabel = ( {
 	className,
 	children,
-} ) => {
+	...props
+}: WordPressComponentProps< BaseControlVisualLabelProps, 'span' > ) => {
 	return (
 		<StyledVisualLabel
+			{ ...props }
 			className={ classnames(
 				'components-base-control__label',
 				className

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

@@ -60,6 +60,7 @@ WithHelpText.args = {
 export const WithVisualLabel: ComponentStory< typeof BaseControl > = (
 	props
 ) => {
+	// @ts-expect-error - Unclear how to fix, see also https://github.com/WordPress/gutenberg/pull/39468#discussion_r827150516
 	BaseControl.VisualLabel.displayName = 'BaseControl.VisualLabel';
 
 	return (