@wordpress/components 19.8.1 → 19.9.0

package/src/input-control/types.ts

@@ -7,6 +7,7 @@ import type {
 	ChangeEvent,
 	SyntheticEvent,
 	PointerEvent,
+	HTMLInputTypeAttribute,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
 
@@ -14,8 +15,8 @@ import type { useDrag } from '@use-gesture/react';
  * Internal dependencies
  */
 import type { StateReducer } from './reducer/state';
-import type { FlexProps } from '../flex/types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { FlexProps } from '../flex/types';
 
 export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
 
@@ -27,9 +28,31 @@ export type Size = 'default' | 'small' | '__unstable-large';
 
 interface BaseProps {
 	__unstableInputWidth?: CSSProperties[ 'width' ];
+	/**
+	 * If true, the label will only be visible to screen readers.
+	 *
+	 * @default false
+	 */
 	hideLabelFromVision?: boolean;
+	/**
+	 * Whether the component should be in a focused state.
+	 * Used to coordinate focus states when the actual focused element and the component handling
+	 * visual focus are separate.
+	 *
+	 * @default false
+	 */
 	isFocused: boolean;
+	/**
+	 * The position of the label.
+	 *
+	 * @default 'top'
+	 */
 	labelPosition?: LabelPosition;
+	/**
+	 * Adjusts the size of the input.
+	 *
+	 * @default 'default'
+	 */
 	size?: Size;
 }
 
@@ -39,10 +62,35 @@ export type InputChangeCallback<
 > = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
 
 export interface InputFieldProps extends BaseProps {
+	/**
+	 * Determines the drag axis.
+	 *
+	 * @default 'n'
+	 */
 	dragDirection?: DragDirection;
+	/**
+	 * If `isDragEnabled` is true, this controls the amount of `px` to have been dragged before
+	 * the drag gesture is actually triggered.
+	 *
+	 * @default 10
+	 */
 	dragThreshold?: number;
+	/**
+	 * If true, enables mouse drag gestures.
+	 *
+	 * @default false
+	 */
 	isDragEnabled?: boolean;
+	/**
+	 * If true, the `ENTER` key press is required in order to trigger an `onChange`.
+	 * If enabled, a change is also triggered when tabbing away (`onBlur`).
+	 *
+	 * @default false
+	 */
 	isPressEnterToChange?: boolean;
+	/**
+	 * A function that receives the value of the input.
+	 */
 	onChange?: InputChangeCallback;
 	onValidate?: (
 		nextValue: string,
@@ -50,24 +98,47 @@ export interface InputFieldProps extends BaseProps {
 	) => void;
 	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
+	/**
+	 * The current value of the input.
+	 */
 	value?: string;
 	onDragEnd?: ( dragProps: DragProps ) => void;
 	onDragStart?: ( dragProps: DragProps ) => void;
 	onDrag?: ( dragProps: DragProps ) => void;
+	/**
+	 * Type of the input element to render.
+	 *
+	 * @default 'text'
+	 */
+	type?: HTMLInputTypeAttribute;
 }
 
 export interface InputBaseProps extends BaseProps, FlexProps {
 	children: ReactNode;
+	/**
+	 * Renders an element on the left side of the input.
+	 */
 	prefix?: ReactNode;
+	/**
+	 * Renders an element on the right side of the input.
+	 */
 	suffix?: ReactNode;
+	/**
+	 * If true, the `input` will be disabled.
+	 *
+	 * @default false
+	 */
 	disabled?: boolean;
 	className?: string;
 	id?: string;
+	/**
+	 * If this property is added, a label will be generated using label property as the content.
+	 */
 	label?: ReactNode;
 }
 
 export interface InputControlProps
-	extends Omit< InputBaseProps, 'children' | 'isFocused' >,
+	extends Omit< InputBaseProps, 'children' | 'isFocused' | keyof FlexProps >,
 		/**
 		 * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
 		 * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from

package/src/navigation/styles/navigation-styles.js

@@ -11,7 +11,7 @@ import { isRTL } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { BASE, G2, UI } from '../../utils/colors-values';
+import { COLORS } from '../../utils/colors-values';
 import Button from '../../button';
 import { Text } from '../../text';
 import { Heading } from '../../heading';
@@ -155,18 +155,18 @@ export const ItemBaseUI = styled.li`
 	}
 
 	&.is-active {
-		background-color: ${ UI.theme };
-		color: ${ BASE.white };
+		background-color: ${ COLORS.ui.theme };
+		color: ${ COLORS.white };
 
 		> button,
 		> a {
-			color: ${ BASE.white };
+			color: ${ COLORS.white };
 			opacity: 1;
 		}
 	}
 
 	> svg path {
-		color: ${ G2.lightGray.ui };
+		color: ${ COLORS.gray[ 600 ] };
 	}
 `;
 

package/src/notice/index.native.js

@@ -7,15 +7,14 @@ import {
 	Text,
 	TouchableWithoutFeedback,
 	View,
-	Dimensions,
-	Platform,
+	useWindowDimensions,
 } from 'react-native';
 import { BlurView } from '@react-native-community/blur';
 
 /**
  * WordPress dependencies
  */
-import { useEffect, useRef, useState } from '@wordpress/element';
+import { useEffect, useRef, Platform } from '@wordpress/element';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 /**
@@ -23,57 +22,48 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
  */
 import styles from './style.scss';
 
-const Notice = ( { onNoticeHidden, content, id, status } ) => {
-	const [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );
-	const [ visible, setVisible ] = useState( true );
+const HIDE_TIMER = 3000;
 
+const Notice = ( { onNoticeHidden, content, id, status } ) => {
+	const { width } = useWindowDimensions();
 	const animationValue = useRef( new Animated.Value( 0 ) ).current;
 	const timer = useRef( null );
-	const isIOS = Platform.OS === 'ios';
-
-	const onDimensionsChange = () => {
-		setWidth( Dimensions.get( 'window' ).width );
-	};
-
-	useEffect( () => {
-		const dimensionsChangeSubscription = Dimensions.addEventListener(
-			'change',
-			onDimensionsChange
-		);
-		return () => {
-			dimensionsChangeSubscription.remove();
-		};
-	}, [] );
 
 	useEffect( () => {
 		startAnimation();
+
 		return () => {
 			clearTimeout( timer?.current );
 		};
-	}, [ visible, id ] );
+	}, [] );
 
-	const onHide = () => {
-		setVisible( false );
-	};
+	function onHide() {
+		Animated.timing( animationValue, {
+			toValue: 0,
+			duration: 150,
+			useNativeDriver: true,
+			easing: Easing.out( Easing.quad ),
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
+				onNoticeHidden( id );
+			}
+		} );
+	}
 
-	const startAnimation = () => {
+	function startAnimation() {
 		Animated.timing( animationValue, {
-			toValue: visible ? 1 : 0,
-			duration: visible ? 300 : 150,
+			toValue: 1,
+			duration: 300,
 			useNativeDriver: true,
 			easing: Easing.out( Easing.quad ),
-		} ).start( () => {
-			if ( visible && onNoticeHidden ) {
+		} ).start( ( { finished } ) => {
+			if ( finished && onNoticeHidden ) {
 				timer.current = setTimeout( () => {
 					onHide();
-				}, 3000 );
-			}
-
-			if ( ! visible && onNoticeHidden ) {
-				onNoticeHidden( id );
+				}, HIDE_TIMER );
 			}
 		} );
-	};
+	}
 
 	const noticeSolidStyles = usePreferredColorSchemeStyle(
 		styles.noticeSolid,
@@ -95,25 +85,25 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 		status === 'error' && errorTextStyles,
 	];
 
+	const containerStyles = [
+		styles.notice,
+		! Platform.isIOS && noticeSolidStyles,
+		{
+			width,
+			transform: [
+				{
+					translateY: animationValue.interpolate( {
+						inputRange: [ 0, 1 ],
+						outputRange: [ -24, 0 ],
+					} ),
+				},
+			],
+		},
+	];
+
 	return (
 		<>
-			<Animated.View
-				style={ [
-					styles.notice,
-					! isIOS && noticeSolidStyles,
-					{
-						width,
-						transform: [
-							{
-								translateY: animationValue.interpolate( {
-									inputRange: [ 0, 1 ],
-									outputRange: [ -24, 0 ],
-								} ),
-							},
-						],
-					},
-				] }
-			>
+			<Animated.View style={ containerStyles }>
 				<TouchableWithoutFeedback onPress={ onHide }>
 					<View style={ styles.noticeContent }>
 						<Text numberOfLines={ 3 } style={ textStyles }>
@@ -121,7 +111,7 @@ const Notice = ( { onNoticeHidden, content, id, status } ) => {
 						</Text>
 					</View>
 				</TouchableWithoutFeedback>
-				{ isIOS && (
+				{ Platform.isIOS && (
 					<BlurView
 						style={ styles.blurBackground }
 						blurType="prominent"

package/src/notice/list.native.js

@@ -6,9 +6,8 @@ import { View } from 'react-native';
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
-import { withDispatch, withSelect } from '@wordpress/data';
-import { compose } from '@wordpress/compose';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { store as noticesStore } from '@wordpress/notices';
 
 /**
  * Internal dependencies
@@ -16,60 +15,37 @@ import { compose } from '@wordpress/compose';
 import Notice from './';
 import styles from './style.scss';
 
-class NoticeList extends Component {
-	constructor() {
-		super( ...arguments );
-		this.removeNotice = this.removeNotice.bind( this );
-	}
+function NoticeList() {
+	const { notices } = useSelect( ( select ) => {
+		const { getNotices } = select( noticesStore );
+		return {
+			notices: getNotices(),
+		};
+	}, [] );
 
-	removeNotice( id ) {
-		const { removeNotice } = this.props;
+	const { removeNotice } = useDispatch( noticesStore );
+
+	function onRemoveNotice( id ) {
 		removeNotice( id );
 	}
 
-	render() {
-		const { notices, shouldStack } = this.props;
-
-		if ( ! notices.length ) {
-			return null;
-		}
+	if ( ! notices.length ) {
+		return null;
+	}
 
-		return (
-			<View style={ styles.list } key={ notices.length }>
-				{ shouldStack ? (
-					notices
-						.reverse()
-						.map( ( notice ) => (
-							<Notice
-								{ ...notice }
-								key={ notice.id }
-								onNoticeHidden={ this.removeNotice }
-							></Notice>
-						) )
-				) : (
+	return (
+		<View style={ styles.list }>
+			{ notices.map( ( notice ) => {
+				return (
 					<Notice
-						{ ...notices[ notices.length - 1 ] }
-						onNoticeHidden={ this.removeNotice }
+						{ ...notice }
+						key={ notice.id }
+						onNoticeHidden={ onRemoveNotice }
 					></Notice>
-				) }
-			</View>
-		);
-	}
+				);
+			} ) }
+		</View>
+	);
 }
 
-export default compose( [
-	withSelect( ( select ) => {
-		const { getNotices } = select( 'core/notices' );
-
-		return {
-			notices: getNotices(),
-		};
-	} ),
-	withDispatch( ( dispatch ) => {
-		const { removeNotice } = dispatch( 'core/notices' );
-
-		return {
-			removeNotice,
-		};
-	} ),
-] )( NoticeList );
+export default NoticeList;

package/src/notice/style.native.scss

@@ -33,6 +33,7 @@
 
 .notice {
 	justify-content: center;
+	position: absolute;
 }
 
 .noticeContent {

package/src/palette-edit/index.js

@@ -9,7 +9,10 @@ import { kebabCase } from 'lodash';
 import { useState, useRef, useEffect } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import { lineSolid, moreVertical, plus } from '@wordpress/icons';
-import { __experimentalUseFocusOutside as useFocusOutside } from '@wordpress/compose';
+import {
+	__experimentalUseFocusOutside as useFocusOutside,
+	useDebounce,
+} from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -197,6 +200,9 @@ function PaletteEditListView( {
 			}
 		};
 	}, [] );
+
+	const debounceOnChange = useDebounce( onChange, 100 );
+
 	return (
 		<VStack spacing={ 3 }>
 			<ItemGroup isRounded>
@@ -212,7 +218,7 @@ function PaletteEditListView( {
 							}
 						} }
 						onChange={ ( newElement ) => {
-							onChange(
+							debounceOnChange(
 								elements.map(
 									( currentElement, currentIndex ) => {
 										if ( currentIndex === index ) {

package/src/query-controls/README.md

@@ -51,7 +51,7 @@ const MyQueryControls = () => {
 			selectedCategoryId={ category }
 			onCategoryChange={ ( newCategory ) => updateQuery( { category: newCategory } ) }
 			onNumberOfItemsChange={ ( newNumberOfItems ) =>
-				updateQuery( { numberOfItems: newCategory } )
+				updateQuery( { numberOfItems: newNumberOfItems } )
 			}
 		/>
 	);
@@ -104,7 +104,7 @@ const MyQueryControls = () => {
 			selectedCategories={ selectedCategories }
 			onCategoryChange={ ( category ) => updateQuery( { selectedCategories: category } ) }
 			onNumberOfItemsChange={ ( newNumberOfItems ) =>
-				updateQuery( { numberOfItems: newCategory } )
+				updateQuery( { numberOfItems: newNumberOfItems } )
 			}
 		/>
 	);

package/src/sandbox/index.js

@@ -227,11 +227,11 @@ export default function Sandbox( {
 
 	useEffect( () => {
 		trySandbox();
-	}, [ title, type, styles, scripts ] );
+	}, [ title, styles, scripts ] );
 
 	useEffect( () => {
 		trySandbox( true );
-	}, [ html ] );
+	}, [ html, type ] );
 
 	return (
 		<iframe

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

@@ -96,7 +96,7 @@ export const Select = styled.select< SelectProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;

package/src/surface/styles.js

@@ -10,7 +10,7 @@ import { CONFIG, COLORS } from '../utils';
 
 export const Surface = css`
 	background-color: ${ CONFIG.surfaceColor };
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	position: relative;
 `;
 

package/src/text/hook.js

@@ -105,7 +105,7 @@ export default function useText( props ) {
 				getOptimalTextShade( optimizeReadabilityFor ) === 'dark';
 
 			sx.optimalTextColor = isOptimalTextColorDark
-				? css( { color: COLORS.black } )
+				? css( { color: COLORS.gray[ 900 ] } )
 				: css( { color: COLORS.white } );
 		}
 

package/src/text/styles/text-mixins.native.js

@@ -3,7 +3,7 @@
  */
 import { fontFamily } from './font-family';
 import css from './emotion-css';
-import { G2 } from '../../utils/colors-values';
+import { COLORS } from '../../utils/colors-values';
 
 const fontWeightNormal = `font-weight: 400;`;
 const fontWeightMedium = `font-weight: 500;`;
@@ -81,7 +81,7 @@ const sectionHeading = `
 	font-size: 11px;
 	line-height: 1.4;
 	text-transform: uppercase;
-	color: ${ G2.gray[ 700 ] }
+	color: ${ COLORS.gray[ 700 ] }
 `;
 
 /**

package/src/text/styles.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import { COLORS, CONFIG } from '../utils';
 
 export const Text = css`
-	color: ${ COLORS.darkGray.primary };
+	color: ${ COLORS.gray[ 900 ] };
 	line-height: ${ CONFIG.fontLineHeightBase };
 	margin: 0;
 `;

package/src/text/test/__snapshots__/{index.js.snap → index.tsx.snap}

@@ -1,5 +1,21 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Text should render align 1`] = `
+Snapshot Diff:
+- Received styles
++ Base styles
+
+@@ -3,7 +3,8 @@
+      "color": "#1e1e1e",
+      "font-size": "calc((13 / 13) * 13px)",
+      "font-weight": "normal",
+      "line-height": "1.2",
+      "margin": "0",
++     "text-align": "center",
+    },
+  ]
+`;
+
 exports[`Text should render highlighted words with highlightCaseSensitive 1`] = `
 .emotion-0 {
   color: #1e1e1e;

package/src/text/test/{index.js → index.tsx}

@@ -59,14 +59,20 @@ describe( 'Text', () => {
 
 	test( 'should render as another element', () => {
 		const { container } = render( <Text as="div">Lorem ipsum.</Text> );
-		expect( container.firstChild.nodeName ).toBe( 'DIV' );
+		expect( container.firstChild?.nodeName ).toBe( 'DIV' );
 	} );
 
 	test( 'should render align', () => {
-		const { container } = render(
+		const { container: centerAlignedContainer } = render(
 			<Text align="center">Lorem ipsum.</Text>
 		);
-		expect( container.firstChild ).toHaveStyle( { textAlign: 'center' } );
+		const { container: defaultAlignedContainer } = render(
+			<Text>Lorem ipsum.</Text>
+		);
+
+		expect(
+			defaultAlignedContainer.children[ 0 ]
+		).toMatchStyleDiffSnapshot( centerAlignedContainer.children[ 0 ] );
 	} );
 
 	test( 'should render color', () => {
@@ -89,7 +95,7 @@ describe( 'Text', () => {
 		const wrapper = render(
 			<Text highlightWords={ [ 'm' ] }>Lorem ipsum.</Text>
 		);
-		expect( wrapper.container.firstChild.childNodes ).toHaveLength( 5 );
+		expect( wrapper.container.firstChild?.childNodes ).toHaveLength( 5 );
 		const words = await wrapper.findAllByText( 'm' );
 		expect( words ).toHaveLength( 2 );
 		words.forEach( ( word ) => expect( word.tagName ).toEqual( 'MARK' ) );
@@ -100,7 +106,7 @@ describe( 'Text', () => {
 			<Text highlightWords={ undefined }>Lorem ipsum.</Text>
 		);
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild.childNodes ).toHaveLength( 1 );
+		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render highlighted words with highlightCaseSensitive', () => {
@@ -112,7 +118,7 @@ describe( 'Text', () => {
 
 		expect( container.firstChild ).toMatchSnapshot();
 		// It'll have a length of 1 because there shouldn't be anything but the single span being rendered.
-		expect( container.firstChild.childNodes ).toHaveLength( 1 );
+		expect( container.firstChild?.childNodes ).toHaveLength( 1 );
 	} );
 
 	test( 'should render isBlock', () => {

package/src/toolbar-group/style.scss

@@ -5,6 +5,8 @@
 	display: inline-flex;
 	flex-shrink: 0;
 	flex-wrap: wrap;
+	padding-left: $grid-unit-15 * 0.5; // 6px.
+	padding-right: $grid-unit-15 * 0.5;
 
 	// Unset for nested toolbar groups. Increase specificity.
 	& .components-toolbar-group.components-toolbar-group {
@@ -13,6 +15,24 @@
 	}
 
 	line-height: 0;
+
+	// Size multiple sequential buttons to be optically balanced.
+	// Icons are 36px, as set by a 24px icon and 12px padding.
+	.components-button.components-button, // This needs specificity to override padding values inherited from the button component.
+	.components-button.has-icon.has-icon {
+		min-width: $block-toolbar-height - $grid-unit-15;
+		padding-left: $grid-unit-15 * 0.5; // 6px.
+		padding-right: $grid-unit-15 * 0.5;
+
+		svg {
+			min-width: $button-size-small; // This is the optimal icon size, and we size the whole button after this.
+		}
+
+		&::before {
+			left: 2px;
+			right: 2px;
+		}
+	}
 }
 
 // Legacy toolbar group

package/src/tools-panel/test/__snapshots__/index.js.snap

@@ -64,7 +64,7 @@ exports[`ToolsPanel first and last panel items should apply first/last classes t
   color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
-  color: #050505;
+  color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;

package/src/ui/spinner/component.js

@@ -21,7 +21,7 @@ import { COLORS } from '../../utils/colors-values';
  */
 function Spinner( props, forwardedRef ) {
 	const {
-		color = COLORS.black,
+		color = COLORS.gray[ 900 ],
 		size = BASE_SIZE,
 		...otherProps
 	} = useContextSystem( props, 'Spinner' );