@wordpress/components 21.3.0 → 22.1.0

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

@@ -41,11 +41,11 @@ describe( 'Android', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		fireEvent.press(
-			screen.getByA11yLabel( 'Link to, Search or type URL' )
+			screen.getByLabelText( 'Link to, Search or type URL' )
 		);
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Go back' )
+			screen.getByLabelText( 'Go back' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -58,7 +58,7 @@ describe( 'Android', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Apply' )
+			screen.getByLabelText( 'Apply' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -82,7 +82,7 @@ describe( 'iOS', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Go back' )
+			screen.getByLabelText( 'Go back' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -95,7 +95,7 @@ describe( 'iOS', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Apply' )
+			screen.getByLabelText( 'Apply' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );

package/src/navigator/navigator-screen/component.tsx

@@ -4,12 +4,13 @@
 import type { ForwardedRef } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { motion, MotionProps } from 'framer-motion';
+import { css } from '@emotion/react';
 
 /**
  * WordPress dependencies
  */
 import { focus } from '@wordpress/dom';
-import { useContext, useEffect, useRef } from '@wordpress/element';
+import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
 import {
 	useReducedMotion,
 	useMergeRefs,
@@ -26,6 +27,7 @@ import {
 	useContextSystem,
 	WordPressComponentProps,
 } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 import type { NavigatorScreenProps } from '../types';
@@ -58,6 +60,27 @@ function UnconnectedNavigatorScreen(
 
 	const previousLocation = usePrevious( location );
 
+	const cx = useCx();
+	const classes = useMemo(
+		() =>
+			cx(
+				css( {
+					// Ensures horizontal overflow is visually accessible.
+					overflowX: 'auto',
+					// In case the root has a height, it should not be exceeded.
+					maxHeight: '100%',
+				} ),
+				className
+			),
+		[ className, cx ]
+	);
+
+	const locationRef = useRef( location );
+
+	useEffect( () => {
+		locationRef.current = location;
+	}, [ location ] );
+
 	// Focus restoration
 	const isInitialLocation = location.isInitial && ! location.isBack;
 	useEffect( () => {
@@ -70,7 +93,7 @@ function UnconnectedNavigatorScreen(
 			isInitialLocation ||
 			! isMatch ||
 			! wrapperRef.current ||
-			location.hasRestoredFocus
+			locationRef.current.hasRestoredFocus
 		) {
 			return;
 		}
@@ -102,12 +125,11 @@ function UnconnectedNavigatorScreen(
 			elementToFocus = firstTabbable ?? wrapperRef.current;
 		}
 
-		location.hasRestoredFocus = true;
+		locationRef.current.hasRestoredFocus = true;
 		elementToFocus.focus();
 	}, [
 		isInitialLocation,
 		isMatch,
-		location.hasRestoredFocus,
 		location.isBack,
 		previousLocation?.focusTargetSelector,
 	] );
@@ -122,7 +144,7 @@ function UnconnectedNavigatorScreen(
 		return (
 			<View
 				ref={ mergedWrapperRef }
-				className={ className }
+				className={ classes }
 				{ ...otherProps }
 			>
 				{ children }
@@ -168,7 +190,7 @@ function UnconnectedNavigatorScreen(
 	return (
 		<motion.div
 			ref={ mergedWrapperRef }
-			className={ className }
+			className={ classes }
 			{ ...otherProps }
 			{ ...animatedProps }
 		>

package/src/notice/README.md

@@ -34,7 +34,8 @@ Notices display at the top of the screen, below any toolbars anchored to the top
 Notices are color-coded to indicate the type of message being communicated:
 
 -   **Default** notices have **no background**.
--   **Informational** notices are **blue.**
+-   **Informational** notices are **blue** by default.
+    - If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
 -   **Success** notices are **green.**
 -   **Warning** notices are **yellow\*\***.\*\*
 -   **Error** notices are **red.**

package/src/notice/style.scss

@@ -3,7 +3,7 @@
 	font-family: $default-font;
 	font-size: $default-font-size;
 	background-color: $white;
-	border-left: 4px solid var(--wp-admin-theme-color);
+	border-left: 4px solid $components-color-accent;
 	margin: 5px 15px 2px;
 	padding: 8px 12px;
 	align-items: center;

package/src/number-control/README.md

@@ -44,13 +44,18 @@ If `isDragEnabled` is true, this controls the amount of `px` to have been dragge
 -   Required: No
 -   Default: `10`
 
-### hideHTMLArrows
+### spinControls
 
-If true, the default `input` HTML arrows will be hidden.
+ The type of spin controls to display. These are butons that allow the user to
+ quickly increment and decrement the number.
+ 
+ - 'none' - Do not show spin controls.
+ - 'native' - Use browser's native HTML `input` controls.
+ - 'custom' - Use plus and minus icon buttons.
 
--   Type: `Boolean`
+-   Type: `String`
 -   Required: No
--   Default: `false`
+-   Default: `'native'`
 
 ### isDragEnabled
 

package/src/number-control/index.tsx

@@ -2,23 +2,30 @@
  * External dependencies
  */
 import classNames from 'classnames';
-import type { ForwardedRef } from 'react';
+import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { forwardRef } from '@wordpress/element';
-import { isRTL } from '@wordpress/i18n';
+import { useRef, forwardRef } from '@wordpress/element';
+import { isRTL, __ } from '@wordpress/i18n';
+import { plus as plusIcon, reset as resetIcon } from '@wordpress/icons';
+import { useMergeRefs } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
  */
-import { Input } from './styles/number-control-styles';
+import { Input, SpinButton } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { add, subtract, roundClamp } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../ui/context/wordpress-component';
 import type { NumberControlProps } from './types';
+import { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
+
+const noop = () => {};
 
 function UnforwardedNumberControl(
 	{
@@ -26,6 +33,7 @@ function UnforwardedNumberControl(
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
+		spinControls = 'native',
 		isDragEnabled = true,
 		isShiftStepEnabled = true,
 		label,
@@ -36,10 +44,25 @@ function UnforwardedNumberControl(
 		step = 1,
 		type: typeProp = 'number',
 		value: valueProp,
+		size = 'default',
+		suffix,
+		onChange = noop,
 		...props
 	}: WordPressComponentProps< NumberControlProps, 'input', false >,
-	ref: ForwardedRef< any >
+	forwardedRef: ForwardedRef< any >
 ) {
+	if ( hideHTMLArrows ) {
+		deprecated( 'hideHTMLArrows', {
+			alternative: 'spinControls="none"',
+			since: '6.2',
+			version: '6.3',
+		} );
+		spinControls = 'none';
+	}
+
+	const inputRef = useRef< HTMLInputElement >();
+	const mergedRef = useMergeRefs( [ inputRef, forwardedRef ] );
+
 	const isStepAny = step === 'any';
 	const baseStep = isStepAny ? 1 : ensureNumber( step );
 	const baseValue = roundClamp( 0, min, max, baseStep );
@@ -56,6 +79,23 @@ function UnforwardedNumberControl(
 	const autoComplete = typeProp === 'number' ? 'off' : undefined;
 	const classes = classNames( 'components-number-control', className );
 
+	const spinValue = (
+		value: string | number | undefined,
+		direction: 'up' | 'down',
+		event: KeyboardEvent | MouseEvent | undefined
+	) => {
+		event?.preventDefault();
+		const shift = event?.shiftKey && isShiftStepEnabled;
+		const delta = shift ? ensureNumber( shiftStep ) * baseStep : baseStep;
+		let nextValue = isValueEmpty( value ) ? baseValue : value;
+		if ( direction === 'up' ) {
+			nextValue = add( nextValue, delta );
+		} else if ( direction === 'down' ) {
+			nextValue = subtract( nextValue, delta );
+		}
+		return constrainValue( nextValue, shift ? delta : undefined );
+	};
+
 	/**
 	 * "Middleware" function that intercepts updates from InputControl.
 	 * This allows us to tap into actions to transform the (next) state for
@@ -78,33 +118,11 @@ function UnforwardedNumberControl(
 				type === inputControlActionTypes.PRESS_UP ||
 				type === inputControlActionTypes.PRESS_DOWN
 			) {
-				const enableShift =
-					( event as KeyboardEvent | undefined )?.shiftKey &&
-					isShiftStepEnabled;
-
-				const incrementalValue = enableShift
-					? ensureNumber( shiftStep ) * baseStep
-					: baseStep;
-				let nextValue = isValueEmpty( currentValue )
-					? baseValue
-					: currentValue;
-
-				if ( event?.preventDefault ) {
-					event.preventDefault();
-				}
-
-				if ( type === inputControlActionTypes.PRESS_UP ) {
-					nextValue = add( nextValue, incrementalValue );
-				}
-
-				if ( type === inputControlActionTypes.PRESS_DOWN ) {
-					nextValue = subtract( nextValue, incrementalValue );
-				}
-
 				// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
-				nextState.value = constrainValue(
-					nextValue,
-					enableShift ? incrementalValue : undefined
+				nextState.value = spinValue(
+					currentValue,
+					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
+					event as KeyboardEvent | undefined
 				);
 			}
 
@@ -178,6 +196,18 @@ function UnforwardedNumberControl(
 			return nextState;
 		};
 
+	const buildSpinButtonClickHandler =
+		( direction: 'up' | 'down' ) =>
+		( event: MouseEvent< HTMLButtonElement > ) =>
+			onChange( String( spinValue( valueProp, direction, event ) ), {
+				// Set event.target to the <input> so that consumers can use
+				// e.g. event.target.validity.
+				event: {
+					...event,
+					target: inputRef.current!,
+				},
+			} );
+
 	return (
 		<Input
 			autoComplete={ autoComplete }
@@ -185,12 +215,12 @@ function UnforwardedNumberControl(
 			{ ...props }
 			className={ classes }
 			dragDirection={ dragDirection }
-			hideHTMLArrows={ hideHTMLArrows }
+			hideHTMLArrows={ spinControls !== 'native' }
 			isDragEnabled={ isDragEnabled }
 			label={ label }
 			max={ max }
 			min={ min }
-			ref={ ref }
+			ref={ mergedRef }
 			required={ required }
 			step={ step }
 			type={ typeProp }
@@ -200,6 +230,43 @@ function UnforwardedNumberControl(
 				const baseState = numberControlStateReducer( state, action );
 				return stateReducerProp?.( baseState, action ) ?? baseState;
 			} }
+			size={ size }
+			suffix={
+				spinControls === 'custom' ? (
+					<>
+						{ suffix }
+						<Spacer marginBottom={ 0 } marginRight={ 2 }>
+							<HStack spacing={ 1 }>
+								<SpinButton
+									icon={ plusIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Increment' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinButtonClickHandler(
+										'up'
+									) }
+									size={ size }
+								/>
+								<SpinButton
+									icon={ resetIcon }
+									isSmall
+									aria-hidden="true"
+									aria-label={ __( 'Decrement' ) }
+									tabIndex={ -1 }
+									onClick={ buildSpinButtonClickHandler(
+										'down'
+									) }
+									size={ size }
+								/>
+							</HStack>
+						</Spacer>
+					</>
+				) : (
+					suffix
+				)
+			}
+			onChange={ onChange }
 		/>
 	);
 }

package/src/number-control/styles/number-control-styles.js

@@ -4,13 +4,19 @@
  */
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+
 /**
  * Internal dependencies
  */
 import InputControl from '../../input-control';
+import { COLORS } from '../../utils';
+import Button from '../../button';
+import { space } from '../../ui/utils/space';
 
 const htmlArrowStyles = ( { hideHTMLArrows } ) => {
-	if ( ! hideHTMLArrows ) return ``;
+	if ( ! hideHTMLArrows ) {
+		return ``;
+	}
 
 	return css`
 		input[type='number']::-webkit-outer-spin-button,
@@ -28,3 +34,22 @@ const htmlArrowStyles = ( { hideHTMLArrows } ) => {
 export const Input = styled( InputControl )`
 	${ htmlArrowStyles };
 `;
+
+const spinButtonSizeStyles = ( { size } ) => {
+	if ( size !== 'small' ) {
+		return ``;
+	}
+
+	return css`
+		width: ${ space( 5 ) };
+		min-width: ${ space( 5 ) };
+		height: ${ space( 5 ) };
+	`;
+};
+
+export const SpinButton = styled( Button )`
+	&&&&& {
+		color: ${ COLORS.ui.theme };
+		${ spinButtonSizeStyles }
+	}
+`;

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

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -425,4 +426,53 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '4' );
 		} );
 	} );
+
+	describe( 'custom spin buttons', () => {
+		test.each( [ undefined, 'none', 'native' ] )(
+			'should not appear when spinControls = %s',
+			( spinControls ) => {
+				render( <NumberControl spinControls={ spinControls } /> );
+				expect(
+					screen.queryByLabelText( 'Increment' )
+				).not.toBeInTheDocument();
+				expect(
+					screen.queryByLabelText( 'Decrement' )
+				).not.toBeInTheDocument();
+			}
+		);
+
+		test.each( [
+			[ 'up', '1', {} ],
+			[ 'up', '2', { value: '1' } ],
+			[ 'up', '12', { value: '10', step: '2' } ],
+			[ 'up', '10', { value: '10', max: '10' } ],
+			[ 'down', '-1', {} ],
+			[ 'down', '1', { value: '2' } ],
+			[ 'down', '10', { value: '12', step: '2' } ],
+			[ 'down', '10', { value: '10', min: '10' } ],
+		] )(
+			'should spin %s to %s when props = %o',
+			async ( direction, expectedValue, props ) => {
+				const user = userEvent.setup( {
+					advanceTimers: jest.advanceTimersByTime,
+				} );
+				const onChange = jest.fn();
+				render(
+					<NumberControl
+						{ ...props }
+						spinControls="custom"
+						onChange={ onChange }
+					/>
+				);
+				await user.click(
+					screen.getByLabelText(
+						direction === 'up' ? 'Increment' : 'Decrement'
+					)
+				);
+				expect( onChange ).toHaveBeenCalledWith( expectedValue, {
+					event: expect.anything(),
+				} );
+			}
+		);
+	} );
 } );

package/src/number-control/types.ts

@@ -10,9 +10,21 @@ export type NumberControlProps = Omit<
 	/**
 	 * If true, the default `input` HTML arrows will be hidden.
 	 *
+	 * @deprecated
 	 * @default false
 	 */
 	hideHTMLArrows?: boolean;
+	/**
+	 * The type of spin controls to display. These are butons that allow the
+	 * user to quickly increment and decrement the number.
+	 *
+	 * - 'none' - Do not show spin controls.
+	 * - 'native' - Use browser's native HTML `input` controls.
+	 * - 'custom' - Use plus and minus icon buttons.
+	 *
+	 * @default 'native'
+	 */
+	spinControls?: 'none' | 'native' | 'custom';
 	/**
 	 * If true, enables mouse drag gestures.
 	 *

package/src/palette-edit/index.js

@@ -229,6 +229,9 @@ function PaletteEditListView( {
 				onChange( newElements.length ? newElements : undefined );
 			}
 		};
+		// Disable reason: adding the missing dependency here would cause breaking changes that will require
+		// a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	const debounceOnChange = useDebounce( onChange, 100 );

package/src/panel/style.scss

@@ -91,7 +91,7 @@
 	height: auto;
 
 	&:focus {
-		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 		border-radius: 0;
 	}
 

package/src/popover/README.md

@@ -92,7 +92,7 @@ The element should be stored in state rather than a plain ref to ensure reactive
 
 ### `anchorRect`: `DomRectWithOwnerDocument`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 An object extending a `DOMRect` with an additional optional `ownerDocument` property, used to specify a fixed popover position.
 
@@ -100,7 +100,7 @@ An object extending a `DOMRect` with an additional optional `ownerDocument` prop
 
 ### `anchorRef`: `Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 Used to specify a fixed popover position. It can be an `Element`, a React reference to an `element`, an object with a `top` and a `bottom` properties (both pointing to elements), or a `range`.
 
@@ -157,7 +157,7 @@ When not provided, the `onClose` callback will be called instead.
 
 ### `getAnchorRect`: `( fallbackReferenceElement: Element | null ) => DomRectWithOwnerDocument`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. Please use the `anchor` prop instead._
+_Note: this prop is deprecated. Please use the `anchor` prop instead._
 
 A function returning the same value as the one expected by the `anchorRect` prop, used to specify a dynamic popover position.
 
@@ -171,6 +171,8 @@ Used to customize the header text shown when the popover is toggled to fullscree
 
 ### `isAlternate`: `boolean`
 
+_Note: this prop is deprecated. Please use the `variant` prop with the `'toolbar'` values instead._
+
 Used to enable a different visual style for the popover.
 
 -   Required: No
@@ -212,8 +214,7 @@ Possible values:
 - `yAxis`: `'top' | 'middle' | 'bottom'`
 - `xAxis`: `'left' | 'center' | 'right'`
 - `corner`: `'top' | 'right' | 'bottom' | 'left'`
-
-
+<!-- Break into two separate lists using an HTML comment -->
 -   Required: No
 
 ### `resize`: `boolean`
@@ -223,8 +224,12 @@ Adjusts the size of the popover to prevent its contents from going out of view w
 -   Required: No
 -   Default: `true`
 
-### `range`: `unknown`
+### `variant`: `'toolbar' | 'unstyled'`
 
-_Note: this prop is deprecated and will be removed in WordPress 6.3. It has no effect on the component._
+Specifies the popover's style.
 
+Leave undefined for the default style. Possible values are:
+-   `unstyled`:  The popover is essentially without any visible style, it has no background, border, outline or drop shadow, but the popover contents are still displayed.
+-   `toolbar`: A style that has no elevation, but a high contrast with other elements. This matches the style of the [`Toolbar` component](/packages/components/toolbar/README.md).
+<!-- Break into two separate lists using an HTML comment -->
 -   Required: No