@wordpress/components 19.8.3 → 19.10.0

package/src/form-file-upload/test/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render as RTLrender, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -14,15 +14,9 @@ import FormFileUpload from '../';
  */
 const { File } = window;
 
-function render( jsx ) {
-	return {
-		user: userEvent.setup( {
-			// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
-			delay: null,
-		} ),
-		...RTLrender( jsx ),
-	};
-}
+const user = userEvent.setup( {
+	advanceTimers: jest.advanceTimersByTime,
+} );
 
 // @testing-library/user-event considers changing <input type="file"> to a string as a change, but it do not occur on real browsers, so the comparisons will be against this result
 const fakePath = expect.objectContaining( {
@@ -32,6 +26,15 @@ const fakePath = expect.objectContaining( {
 } );
 
 describe( 'FormFileUpload', () => {
+	beforeEach( () => {
+		jest.useFakeTimers();
+	} );
+
+	afterEach( () => {
+		jest.runOnlyPendingTimers();
+		jest.useRealTimers();
+	} );
+
 	it( 'should show an Icon Button and a hidden input', () => {
 		render( <FormFileUpload>My Upload Button</FormFileUpload> );
 
@@ -44,7 +47,7 @@ describe( 'FormFileUpload', () => {
 	it( 'should not fire a change event after selecting the same file', async () => {
 		const onChange = jest.fn();
 
-		const { user } = render(
+		render(
 			<FormFileUpload onChange={ onChange }>
 				My Upload Button
 			</FormFileUpload>
@@ -67,7 +70,7 @@ describe( 'FormFileUpload', () => {
 	it( 'should fire a change event after selecting the same file if the value was reset in between', async () => {
 		const onChange = jest.fn();
 
-		const { user } = render(
+		render(
 			<FormFileUpload
 				onClick={ jest.fn( ( e ) => ( e.target.value = '' ) ) }
 				onChange={ onChange }

package/src/heading/hook.ts

@@ -70,7 +70,7 @@ export function useHeading(
 	}
 
 	const textProps = useText( {
-		color: COLORS.darkGray.heading,
+		color: COLORS.gray[ 900 ],
 		size: getHeadingFontSize( level ),
 		isBlock: true,
 		weight: CONFIG.fontWeightHeading as import('react').CSSProperties[ 'fontWeight' ],

package/src/heading/test/__snapshots__/index.js.snap

@@ -5,7 +5,7 @@ exports[`props should render correctly 1`] = `
   color: #1e1e1e;
   line-height: 1.2;
   margin: 0;
-  color: #050505;
+  color: #1e1e1e;
   font-size: calc(1.95 * 13px);
   font-weight: 600;
   display: block;
@@ -27,7 +27,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",
@@ -45,7 +45,7 @@ Snapshot Diff:
 
   Array [
     Object {
-      "color": "#050505",
+      "color": "#1e1e1e",
       "display": "block",
 -     "font-size": "calc(1.25 * 13px)",
 +     "font-size": "calc(1.95 * 13px)",

package/src/input-control/README.md

@@ -18,7 +18,7 @@ const Example = () => {
 	return (
 		<InputControl
 			value={ value }
-			onChange={ ( nextValue ) => setValue( nextValue ) }
+			onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
 		/>
 	);
 };
@@ -105,5 +105,5 @@ Type of the input element to render. Defaults to "text".
 
 The current value of the input.
 
--   Type: `String | Number`
--   Required: Yes
+-   Type: `String`
+-   Required: No

package/src/input-control/index.tsx

@@ -25,7 +25,7 @@ function useUniqueId( idProp?: string ) {
 	return idProp || id;
 }
 
-export function InputControl(
+export function UnforwardedInputControl(
 	{
 		__unstableStateReducer: stateReducer = ( state ) => state,
 		__unstableInputWidth,
@@ -88,6 +88,26 @@ export function InputControl(
 	);
 }
 
-const ForwardedComponent = forwardRef( InputControl );
+/**
+ * InputControl components let users enter and edit text. This is an experimental component
+ * intended to (in time) merge with or replace `TextControl`.
+ *
+ * ```jsx
+ * import { __experimentalInputControl as InputControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/compose';
+ *
+ * const Example = () => {
+ *   const [ value, setValue ] = useState( '' );
+ *
+ *   return (
+ *  	<InputControl
+ *  		value={ value }
+ *  		onChange={ ( nextValue ) => setValue( nextValue ?? '' ) }
+ *  	/>
+ *   );
+ * };
+ * ```
+ */
+export const InputControl = forwardRef( UnforwardedInputControl );
 
-export default ForwardedComponent;
+export default InputControl;

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

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import InputControl from '..';
+
+const meta: ComponentMeta< typeof InputControl > = {
+	title: 'Components (Experimental)/InputControl',
+	component: InputControl,
+	argTypes: {
+		__unstableInputWidth: { control: { type: 'text' } },
+		__unstableStateReducer: { control: { type: null } },
+		onChange: { control: { type: null } },
+		prefix: { control: { type: null } },
+		suffix: { control: { type: null } },
+		type: { control: { type: 'text' } },
+		value: { control: { disable: true } },
+	},
+	parameters: {
+		controls: { expanded: true },
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof InputControl > = ( args ) => (
+	<InputControl { ...args } />
+);
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Value',
+	placeholder: 'Placeholder',
+};
+
+export const WithPrefix = Template.bind( {} );
+WithPrefix.args = {
+	...Default.args,
+	prefix: <span style={ { paddingLeft: 8 } }>@</span>,
+};
+
+export const WithSuffix = Template.bind( {} );
+WithSuffix.args = {
+	...Default.args,
+	suffix: <button style={ { marginRight: 4 } }>Send</button>,
+};
+
+export const WithSideLabel = Template.bind( {} );
+WithSideLabel.args = {
+	...Default.args,
+	labelPosition: 'side',
+};
+
+export const WithEdgeLabel = Template.bind( {} );
+WithEdgeLabel.args = {
+	...Default.args,
+	__unstableInputWidth: '20em',
+	labelPosition: 'edge',
+};

package/src/input-control/styles/input-control-styles.tsx

@@ -105,6 +105,7 @@ export const Container = styled.div< ContainerProps >`
 `;
 
 type InputProps = {
+	__next36pxDefaultSize?: boolean;
 	disabled?: boolean;
 	inputSize?: Size;
 	isDragging?: boolean;
@@ -140,14 +141,17 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	`;
 };
 
-const sizeStyles = ( { inputSize: size }: InputProps ) => {
+const sizeStyles = ( {
+	inputSize: size,
+	__next36pxDefaultSize,
+}: InputProps ) => {
 	const sizes = {
 		default: {
-			height: 30,
+			height: 36,
 			lineHeight: 1,
-			minHeight: 30,
-			paddingLeft: 8,
-			paddingRight: 8,
+			minHeight: 36,
+			paddingLeft: 16,
+			paddingRight: 16,
 		},
 		small: {
 			height: 24,
@@ -165,6 +169,16 @@ const sizeStyles = ( { inputSize: size }: InputProps ) => {
 		},
 	};
 
+	if ( ! __next36pxDefaultSize ) {
+		sizes.default = {
+			height: 30,
+			lineHeight: 1,
+			minHeight: 30,
+			paddingLeft: 8,
+			paddingRight: 8,
+		};
+	}
+
 	const style = sizes[ size as Size ] || sizes.default;
 
 	return css( style );
@@ -210,7 +224,7 @@ export const Input = styled.input< InputProps >`
 		box-sizing: border-box;
 		border: none;
 		box-shadow: none !important;
-		color: ${ COLORS.black };
+		color: ${ COLORS.gray[ 900 ] };
 		display: block;
 		font-family: inherit;
 		margin: 0;
@@ -245,7 +259,6 @@ const labelMargin = ( {
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 	&&& {
 		box-sizing: border-box;
-		color: currentColor;
 		display: block;
 		padding-top: 0;
 		padding-bottom: 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';
 
@@ -26,10 +27,38 @@ export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 export type Size = 'default' | 'small' | '__unstable-large';
 
 interface BaseProps {
+	/**
+	 * Start opting into the larger default height that will become the default size in a future version.
+	 *
+	 * @default false
+	 */
+	__next36pxDefaultSize?: boolean;
 	__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 +68,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 +104,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/menu-item/style.scss

@@ -38,6 +38,16 @@
 			margin-right: 0;
 		}
 	}
+
+	&:disabled,
+	&[aria-disabled="true"] {
+		// Override the button component's tertiary background and color.
+		&.is-tertiary {
+			background: none;
+			color: var(--wp-admin-theme-color-darker-10);
+			opacity: 0.3;
+		}
+	}
 }
 
 .components-menu-item__info-wrapper {

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -27,7 +27,14 @@ const TestScreen = ( { fullScreen, name, navigateTo } ) => {
 	);
 };
 
-jest.useFakeTimers( 'legacy' );
+beforeAll( () => {
+	jest.useFakeTimers( 'legacy' );
+} );
+
+afterAll( () => {
+	jest.runOnlyPendingTimers();
+	jest.useRealTimers();
+} );
 
 it( 'animates height transitioning from non-full-screen to full-screen', async () => {
 	const screen = render(

package/src/mobile/bottom-sheet-select-control/index.native.js

@@ -82,6 +82,7 @@ const BottomSheetSelectControl = ( {
 							customActionButton
 							separatorType="none"
 							label={ item.label }
+							icon={ item.icon }
 							onPress={ onChangeValue( item.value ) }
 							leftAlign={ true }
 							key={ index }

package/src/mobile/html-text-input/style.android.scss

@@ -14,6 +14,7 @@
 	padding-right: $padding;
 	padding-top: $padding;
 	padding-bottom: $padding;
+	margin-top: $padding * 2;
 }
 
 .scrollView {

package/src/mobile/html-text-input/style.ios.scss

@@ -20,4 +20,5 @@ $title-height: 32;
 	padding-top: $padding;
 	padding-bottom: $padding;
 	height: $title-height;
+	margin-top: $padding * 2;
 }

package/src/mobile/link-settings/test/link-settings-navigation.native.js

@@ -9,7 +9,15 @@ import { render, fireEvent, waitFor } from 'test/helpers';
  */
 import LinkSettingsNavigation from '../link-settings-navigation';
 
-jest.useFakeTimers( 'legacy' );
+beforeAll( () => {
+	jest.useFakeTimers( 'legacy' );
+} );
+
+afterAll( () => {
+	jest.runOnlyPendingTimers();
+	jest.useRealTimers();
+} );
+
 jest.spyOn( Keyboard, 'dismiss' );
 
 const subject = (

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"