@wordpress/components 21.1.0 → 21.1.2-next.4d3b314fd5.0

package/src/range-control/types.ts

@@ -290,39 +290,6 @@ export type UseControlledRangeValueArgs = {
 	value: number | null;
 };
 
-export type UseDebouncedHoverInteractionArgs = {
-	/**
-	 *  A callback function invoked when the element is hidden.
-	 *
-	 * @default () => {}
-	 */
-	onHide?: () => void;
-	/**
-	 * A callback function invoked when the mouse is moved out of the element.
-	 *
-	 * @default () => {}
-	 */
-	onMouseLeave?: MouseEventHandler< HTMLInputElement >;
-	/**
-	 * A callback function invoked when the mouse is moved.
-	 *
-	 * @default () => {}
-	 */
-	onMouseMove?: MouseEventHandler< HTMLInputElement >;
-	/**
-	 * A callback function invoked when the element is shown.
-	 *
-	 * @default () => {}
-	 */
-	onShow?: () => void;
-	/**
-	 * Timeout before the element is shown or hidden.
-	 *
-	 * @default 300
-	 */
-	timeout?: number;
-};
-
 export type UseMarksArgs = NumericProps & {
 	marks: RangeMarks;
 	step: number;

package/src/tools-panel/stories/index.js

@@ -29,11 +29,13 @@ export const _default = () => {
 	const [ height, setHeight ] = useState();
 	const [ minHeight, setMinHeight ] = useState();
 	const [ width, setWidth ] = useState();
+	const [ scale, setScale ] = useState();
 
 	const resetAll = () => {
 		setHeight( undefined );
 		setWidth( undefined );
 		setMinHeight( undefined );
+		setScale( undefined );
 	};
 
 	return (
@@ -79,6 +81,31 @@ export const _default = () => {
 							onChange={ ( next ) => setMinHeight( next ) }
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => !! scale }
+						label="Scale"
+						onDeselect={ () => setScale( undefined ) }
+					>
+						<ToggleGroupControl
+							label="Scale"
+							value={ scale }
+							onChange={ ( next ) => setScale( next ) }
+							isBlock
+						>
+							<ToggleGroupControlOption
+								value="cover"
+								label="Cover"
+							/>
+							<ToggleGroupControlOption
+								value="contain"
+								label="Contain"
+							/>
+							<ToggleGroupControlOption
+								value="fill"
+								label="Fill"
+							/>
+						</ToggleGroupControl>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</Panel>
 		</PanelWrapperView>

package/src/tools-panel/styles.ts

@@ -1,6 +1,7 @@
 /**
  * External dependencies
  */
+import styled from '@emotion/styled';
 import { css } from '@emotion/react';
 
 /**
@@ -12,7 +13,7 @@ import {
 	Wrapper as BaseControlWrapper,
 } from '../base-control/styles/base-control-styles';
 import { LabelWrapper } from '../input-control/styles/input-control-styles';
-import { COLORS, CONFIG } from '../utils';
+import { COLORS, CONFIG, rtl } from '../utils';
 import { space } from '../ui/utils/space';
 
 const toolsPanelGrid = {
@@ -145,3 +146,29 @@ export const ToolsPanelItemPlaceholder = css`
 export const DropdownMenu = css`
 	min-width: 200px;
 `;
+
+export const ResetLabel = styled.span`
+	color: var( --wp-admin-theme-color-darker-10 );
+	font-size: 11px;
+	font-weight: 500;
+	line-height: 1.4;
+	${ rtl( { marginLeft: space( 3 ) } ) }
+	text-transform: uppercase;
+`;
+
+export const DefaultControlsItem = css`
+	color: ${ COLORS.gray[ 900 ] };
+
+	&&[aria-disabled='true'] {
+		color: ${ COLORS.gray[ 700 ] };
+		opacity: 1;
+
+		&:hover {
+			color: ${ COLORS.gray[ 700 ] };
+		}
+
+		${ ResetLabel } {
+			opacity: 0.3;
+		}
+	}
+`;

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

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { speak } from '@wordpress/a11y';
-import { check, reset, moreVertical, plus } from '@wordpress/icons';
+import { check, moreVertical, plus } from '@wordpress/icons';
 import { __, _x, sprintf } from '@wordpress/i18n';
 
 /**
@@ -20,12 +20,14 @@ import { HStack } from '../../h-stack';
 import { Heading } from '../../heading';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect, WordPressComponentProps } from '../../ui/context';
+import { ResetLabel } from '../styles';
 import type {
 	ToolsPanelControlsGroupProps,
 	ToolsPanelHeaderProps,
 } from '../types';
 
 const DefaultControlsGroup = ( {
+	itemClassName,
 	items,
 	toggleItem,
 }: ToolsPanelControlsGroupProps ) => {
@@ -33,15 +35,17 @@ const DefaultControlsGroup = ( {
 		return null;
 	}
 
+	const resetSuffix = <ResetLabel aria-hidden>{ __( 'Reset' ) }</ResetLabel>;
+
 	return (
-		<MenuGroup>
+		<MenuGroup label={ __( 'Defaults' ) }>
 			{ items.map( ( [ label, hasValue ] ) => {
 				if ( hasValue ) {
 					return (
 						<MenuItem
 							key={ label }
+							className={ itemClassName }
 							role="menuitem"
-							icon={ reset }
 							label={ sprintf(
 								// translators: %s: The name of the control being reset e.g. "Padding".
 								__( 'Reset %s' ),
@@ -58,6 +62,7 @@ const DefaultControlsGroup = ( {
 									'assertive'
 								);
 							} }
+							suffix={ resetSuffix }
 						>
 							{ label }
 						</MenuItem>
@@ -67,8 +72,8 @@ const DefaultControlsGroup = ( {
 				return (
 					<MenuItem
 						key={ label }
+						className={ itemClassName }
 						role="menuitemcheckbox"
-						icon={ check }
 						isSelected
 						aria-disabled
 					>
@@ -89,7 +94,7 @@ const OptionalControlsGroup = ( {
 	}
 
 	return (
-		<MenuGroup>
+		<MenuGroup label={ __( 'Tools' ) }>
 			{ items.map( ( [ label, isSelected ] ) => {
 				const itemLabel = isSelected
 					? sprintf(
@@ -147,6 +152,7 @@ const ToolsPanelHeader = (
 ) => {
 	const {
 		areAllOptionalControlsHidden,
+		defaultControlsItemClassName,
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,
@@ -197,6 +203,7 @@ const ToolsPanelHeader = (
 							<DefaultControlsGroup
 								items={ defaultItems }
 								toggleItem={ toggleItem }
+								itemClassName={ defaultControlsItemClassName }
 							/>
 							<OptionalControlsGroup
 								items={ optionalItems }

package/src/tools-panel/tools-panel-header/hook.ts

@@ -33,12 +33,17 @@ export function useToolsPanelHeader(
 		return cx( styles.ToolsPanelHeading );
 	}, [ cx ] );
 
+	const defaultControlsItemClassName = useMemo( () => {
+		return cx( styles.DefaultControlsItem );
+	}, [ cx ] );
+
 	const { menuItems, hasMenuItems, areAllOptionalControlsHidden } =
 		useToolsPanelContext();
 
 	return {
 		...otherProps,
 		areAllOptionalControlsHidden,
+		defaultControlsItemClassName,
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,

package/src/tools-panel/types.ts

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