@wordpress/components 19.9.0 → 19.12.0

package/src/tools-panel/tools-panel-header/component.tsx

@@ -6,6 +6,7 @@ import type { ForwardedRef } from 'react';
 /**
  * WordPress dependencies
  */
+import { speak } from '@wordpress/a11y';
 import { check, reset, moreVertical, plus } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 
@@ -24,11 +25,8 @@ import type {
 	ToolsPanelHeaderProps,
 } from '../types';
 
-const noop = () => {};
-
 const DefaultControlsGroup = ( {
 	items,
-	onClose,
 	toggleItem,
 }: ToolsPanelControlsGroupProps ) => {
 	if ( ! items.length ) {
@@ -38,27 +36,41 @@ const DefaultControlsGroup = ( {
 	return (
 		<MenuGroup>
 			{ items.map( ( [ label, hasValue ] ) => {
-				const icon = hasValue ? reset : check;
-				const itemLabel = hasValue
-					? sprintf(
-							// translators: %s: The name of the control being reset e.g. "Padding".
-							__( 'Reset %s' ),
-							label
-					  )
-					: undefined;
+				if ( hasValue ) {
+					return (
+						<MenuItem
+							key={ label }
+							role="menuitem"
+							icon={ reset }
+							label={ sprintf(
+								// translators: %s: The name of the control being reset e.g. "Padding".
+								__( 'Reset %s' ),
+								label
+							) }
+							onClick={ () => {
+								toggleItem( label );
+								speak(
+									sprintf(
+										// translators: %s: The name of the control being reset e.g. "Padding".
+										__( '%s reset to default' ),
+										label
+									),
+									'assertive'
+								);
+							} }
+						>
+							{ label }
+						</MenuItem>
+					);
+				}
 
 				return (
 					<MenuItem
 						key={ label }
-						icon={ icon }
-						isSelected={ true }
-						disabled={ ! hasValue }
-						label={ itemLabel }
-						onClick={ () => {
-							toggleItem( label );
-							onClose();
-						} }
 						role="menuitemcheckbox"
+						icon={ check }
+						isSelected
+						aria-disabled
 					>
 						{ label }
 					</MenuItem>
@@ -70,7 +82,6 @@ const DefaultControlsGroup = ( {
 
 const OptionalControlsGroup = ( {
 	items,
-	onClose,
 	toggleItem,
 }: ToolsPanelControlsGroupProps ) => {
 	if ( ! items.length ) {
@@ -99,8 +110,26 @@ const OptionalControlsGroup = ( {
 						isSelected={ isSelected }
 						label={ itemLabel }
 						onClick={ () => {
+							if ( isSelected ) {
+								speak(
+									sprintf(
+										// translators: %s: The name of the control being reset e.g. "Padding".
+										__( '%s hidden and reset to default' ),
+										label
+									),
+									'assertive'
+								);
+							} else {
+								speak(
+									sprintf(
+										// translators: %s: The name of the control being reset e.g. "Padding".
+										__( '%s is now visible' ),
+										label
+									),
+									'assertive'
+								);
+							}
 							toggleItem( label );
-							onClose();
 						} }
 						role="menuitemcheckbox"
 					>
@@ -135,12 +164,18 @@ const ToolsPanelHeader = (
 	const defaultItems = Object.entries( menuItems?.default || {} );
 	const optionalItems = Object.entries( menuItems?.optional || {} );
 	const dropDownMenuIcon = areAllOptionalControlsHidden ? plus : moreVertical;
-	const dropDownMenuLabelText = areAllOptionalControlsHidden
-		? _x(
-				'View and add options',
-				'Button label to reveal tool panel options'
-		  )
-		: _x( 'View options', 'Button label to reveal tool panel options' );
+	const dropDownMenuLabelText = sprintf(
+		// translators: %s: The name of the tool e.g. "Color" or "Typography".
+		_x( '%s options', 'Button label to reveal tool panel options' ),
+		labelText
+	);
+	const dropdownMenuDescriptionText = areAllOptionalControlsHidden
+		? __( 'All options are currently hidden' )
+		: undefined;
+
+	const canResetAll = [ ...defaultItems, ...optionalItems ].some(
+		( [ , isSelected ] ) => isSelected
+	);
 
 	return (
 		<HStack { ...headerProps } ref={ forwardedRef }>
@@ -152,26 +187,33 @@ const ToolsPanelHeader = (
 					icon={ dropDownMenuIcon }
 					label={ dropDownMenuLabelText }
 					menuProps={ { className: dropdownMenuClassName } }
-					toggleProps={ { isSmall: true } }
+					toggleProps={ {
+						isSmall: true,
+						describedBy: dropdownMenuDescriptionText,
+					} }
 				>
-					{ ( { onClose = noop } ) => (
+					{ () => (
 						<>
 							<DefaultControlsGroup
 								items={ defaultItems }
-								onClose={ onClose }
 								toggleItem={ toggleItem }
 							/>
 							<OptionalControlsGroup
 								items={ optionalItems }
-								onClose={ onClose }
 								toggleItem={ toggleItem }
 							/>
 							<MenuGroup>
 								<MenuItem
+									aria-disabled={ ! canResetAll }
 									variant={ 'tertiary' }
 									onClick={ () => {
-										resetAll();
-										onClose();
+										if ( canResetAll ) {
+											resetAll();
+											speak(
+												__( 'All options reset' ),
+												'assertive'
+											);
+										}
 									} }
 								>
 									{ __( 'Reset all' ) }

package/src/tools-panel/types.ts

@@ -148,7 +148,6 @@ export type ToolsPanelContext = {
 
 export type ToolsPanelControlsGroupProps = {
 	items: [ string, boolean ][];
-	onClose: () => void;
 	toggleItem: ( label: string ) => void;
 };
 

package/src/tooltip/index.js

@@ -64,7 +64,7 @@ const addPopoverToGrandchildren = ( {
 				className="components-tooltip"
 				aria-hidden="true"
 				animate={ false }
-				noArrow={ true }
+				offset={ 12 }
 			>
 				{ text }
 				<Shortcut
@@ -93,7 +93,13 @@ const emitToChild = ( children, eventName, event ) => {
 };
 
 function Tooltip( props ) {
-	const { children, position, text, shortcut, delay = TOOLTIP_DELAY } = props;
+	const {
+		children,
+		position = 'bottom middle',
+		text,
+		shortcut,
+		delay = TOOLTIP_DELAY,
+	} = props;
 	/**
 	 * Whether a mouse is currently pressed, used in determining whether
 	 * to handle a focus event as displaying the tooltip immediately.

package/src/tooltip/style.scss

@@ -10,16 +10,14 @@
 	background: $gray-900;
 	border-radius: $radius-block-ui;
 	border-width: 0;
+	outline: none;
 	color: $white;
 	white-space: nowrap;
 	text-align: center;
 	line-height: 1.4;
 	font-size: 12px;
 	box-shadow: none;
-
-	> div {
-		padding: $grid-unit-05 $grid-unit-10;
-	}
+	padding: $grid-unit-05 $grid-unit-10;
 }
 
 .components-tooltip__shortcut {

package/src/tooltip/test/index.js

@@ -149,6 +149,9 @@ describe( 'Tooltip', () => {
 			setTimeout( () => {
 				const popoverAfterTimeout = wrapper.find( 'Popover' );
 				expect( popoverAfterTimeout ).toHaveLength( 1 );
+
+				jest.runOnlyPendingTimers();
+				jest.useRealTimers();
 			}, TOOLTIP_DELAY );
 		} );
 
@@ -183,6 +186,9 @@ describe( 'Tooltip', () => {
 			setTimeout( () => {
 				const popoverAfterTimeout = wrapper.find( 'Popover' );
 				expect( popoverAfterTimeout ).toHaveLength( 1 );
+
+				jest.runOnlyPendingTimers();
+				jest.useRealTimers();
 			}, 2000 );
 		} );
 

package/src/tooltip/test/index.native.js

@@ -55,7 +55,7 @@ it( 'displays the message', () => {
 } );
 
 // Skipped until `pointerEvents: 'box-none'` no longer erroneously prevents
-// triggering `onTouch*` on the element: https://git.io/JSHZt
+// triggering `onTouch*` on the element: https://github.com/callstack/react-native-testing-library/issues/897
 it.skip( 'dismisses when the screen is tapped', () => {
 	const screen = render(
 		<TooltipSlot>

package/src/unit-control/index.tsx

@@ -88,7 +88,7 @@ function UnforwardedUnitControl(
 	);
 
 	const [ unit, setUnit ] = useControlledState< string | undefined >(
-		unitProp,
+		units.length === 1 ? units[ 0 ].value : unitProp,
 		{
 			initial: parsedUnit,
 			fallback: '',
@@ -178,10 +178,7 @@ function UnforwardedUnitControl(
 				: undefined;
 			const changeProps = { event, data };
 
-			onChangeProp?.(
-				`${ validParsedQuantity ?? '' }${ validParsedUnit }`,
-				changeProps
-			);
+			// The `onChange` callback already gets called, no need to call it explicitely.
 			onUnitChange?.( validParsedUnit, changeProps );
 
 			setUnit( validParsedUnit );

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

@@ -26,21 +26,11 @@ export const Root = styled.div`
 	position: relative;
 `;
 
-const paddingStyles = ( { disableUnits, size }: InputProps ) => {
-	const paddings = {
-		default: {
-			paddingRight: 8,
-		},
-		small: {
-			paddingRight: 8,
-		},
-		'__unstable-large': {
-			paddingRight: disableUnits ? 16 : 8,
-		},
-	};
+const paddingStyles = ( { disableUnits }: InputProps ) => {
+	if ( disableUnits ) return '';
 
 	return css`
-		${ rtl( paddings[ size ] )() };
+		${ rtl( { paddingRight: 8 } )() };
 	`;
 };
 

package/src/unit-control/test/__snapshots__/index.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UnitControl Basic rendering should render custom className 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ -1,10 +1,10 @@
+  <div
+    class="components-unit-control-wrapper css-aa2xc3-Root e1bagdl33"
+  >
+    <div
+-     class="components-flex components-input-control components-number-control components-unit-control e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
++     class="components-flex components-input-control components-number-control components-unit-control hello e1bagdl32 ep48uk90 em5sgkm7 css-18wzek1-View-Flex-sx-Base-sx-Items-ItemsColumn-Root-rootLabelPositionStyles-Input-ValueInput-arrowStyles-paddingStyles em57xhy0"
+      data-wp-c16t="true"
+      data-wp-component="Flex"
+    >
+      <div
+        class="components-flex-item em5sgkm3 css-1fmchc6-View-Item-sx-Base-LabelWrapper em57xhy0"
+@@ -15,11 +15,11 @@
+        class="components-input-control__container css-1sy20aj-Container-containerDisabledStyles-containerMarginStyles-containerWidthStyles em5sgkm6"
+      >
+        <input
+          autocomplete="off"
+          class="components-input-control__input css-gzm6eu-Input-dragStyles-fontSizeStyles-sizeStyles em5sgkm5"
+-         id="inspector-input-control-1"
++         id="inspector-input-control-2"
+          inputmode="numeric"
+          max="Infinity"
+          min="-Infinity"
+          step="1"
+          type="number"
+`;