@wordpress/components 19.17.0 → 20.0.2-next.957ca95e4c.0

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/get-default-use-items.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { debounce, escapeRegExp } from 'lodash';
+import { debounce } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -9,6 +9,11 @@ import removeAccents from 'remove-accents';
  */
 import { useLayoutEffect, useState } from '@wordpress/element';
 
+/**
+ * Internal dependencies
+ */
+import { escapeRegExp } from '../utils/strings';
+
 function filterOptions( search, options = [], maxResults = 10 ) {
 	const filtered = [];
 	for ( let i = 0; i < options.length; i++ ) {

package/src/autocomplete/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { escapeRegExp, find } from 'lodash';
+import { find } from 'lodash';
 import removeAccents from 'remove-accents';
 
 /**
@@ -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,
@@ -43,6 +34,7 @@ import { speak } from '@wordpress/a11y';
  * Internal dependencies
  */
 import { getAutoCompleterUI } from './autocompleter-ui';
+import { escapeRegExp } from '../utils/strings';
 
 /**
  * A raw completer option.
@@ -220,7 +212,7 @@ function useAutocomplete( {
 	}
 
 	function handleKeyDown( event ) {
-		backspacing.current = event.keyCode === BACKSPACE;
+		backspacing.current = event.code === 'Backspace';
 
 		if ( ! autocompleter ) {
 			return;
@@ -231,8 +223,8 @@ function useAutocomplete( {
 		if ( event.defaultPrevented ) {
 			return;
 		}
-		switch ( event.keyCode ) {
-			case UP:
+		switch ( event.code ) {
+			case 'ArrowUp':
 				setSelectedIndex(
 					( selectedIndex === 0
 						? filteredOptions.length
@@ -240,24 +232,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 +257,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/styles/base-control-styles.ts

@@ -64,7 +64,7 @@ export const StyledHelp = styled.p`
 	margin-bottom: 0;
 	font-size: ${ font( 'helpText.fontSize' ) };
 	font-style: normal;
-	color: ${ COLORS.mediumGray.text };
+	color: ${ COLORS.gray[ 700 ] };
 
 	${ deprecatedMarginHelp }
 `;

package/src/base-field/styles.js

@@ -35,7 +35,7 @@ export const BaseField = css`
 
 	&:focus,
 	&[data-focused='true'] {
-		border-color: ${ COLORS.admin.theme };
+		border-color: ${ COLORS.ui.theme };
 		box-shadow: ${ CONFIG.controlBoxShadowFocus };
 	}
 `;

package/src/base-field/test/__snapshots__/index.js.snap

@@ -129,8 +129,8 @@ exports[`base field should render correctly 1`] = `
 
 .emotion-0:focus,
 .emotion-0[data-focused='true'] {
-  border-color: var( --wp-admin-theme-color, #00669b);
-  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #00669b);
+  border-color: var( --wp-admin-theme-color, #007cba);
+  box-shadow: 0 0 0 0.5px var( --wp-admin-theme-color, #007cba);
 }
 
 <div

package/src/box-control/styles/box-control-visualizer-styles.js

@@ -31,7 +31,6 @@ export const Container = styled.div`
 
 export const Side = styled.div`
 	box-sizing: border-box;
-	background: ${ COLORS.blue.wordpress[ 700 ] };
 	background: ${ COLORS.ui.theme };
 	filter: brightness( 1 );
 	opacity: 0;

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

@@ -167,19 +167,19 @@ describe( 'BoxControl', () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
 
-			const { getAllByLabelText, getByLabelText } = render(
+			render(
 				<BoxControl
 					values={ state }
 					onChange={ ( next ) => setState( next ) }
 				/>
 			);
 			const user = setupUser();
-			const unlink = getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink Sides/ );
 
 			await user.click( unlink );
 
-			const input = getByLabelText( /Top/ );
-			const select = getAllByLabelText( /Select unit/ )[ 0 ];
+			const input = screen.getByLabelText( /Top/ );
+			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
 
 			await user.type( input, '100px' );
 			await user.keyboard( '{Enter}' );
@@ -199,7 +199,7 @@ describe( 'BoxControl', () => {
 			let state = {};
 			const setState = ( newState ) => ( state = newState );
 
-			const { getAllByLabelText, getByLabelText } = render(
+			render(
 				<BoxControl
 					values={ state }
 					onChange={ ( next ) => setState( next ) }
@@ -207,12 +207,12 @@ describe( 'BoxControl', () => {
 				/>
 			);
 			const user = setupUser();
-			const unlink = getByLabelText( /Unlink Sides/ );
+			const unlink = screen.getByLabelText( /Unlink Sides/ );
 
 			await user.click( unlink );
 
-			const input = getByLabelText( /Vertical/ );
-			const select = getAllByLabelText( /Select unit/ )[ 0 ];
+			const input = screen.getByLabelText( /Vertical/ );
+			const select = screen.getAllByLabelText( /Select unit/ )[ 0 ];
 
 			await user.type( input, '100px' );
 			await user.keyboard( '{Enter}' );