Add subheading and textual reset buttons to tools panel

This is just a quick and dirty trial of rendering something akin to the ToolsPanel enhancement request in #44096
WordPress · Sep 19, 2022 · bd93ba6 · bd93ba6
1 parent 9b79fb1
commit bd93ba6
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 9 deletions.
diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
@@ -27,6 +27,7 @@ export default {
 
 export const _default = () => {
 	const [ height, setHeight ] = useState();
+	const [ maxHeight, setMaxHeight ] = useState();
 	const [ minHeight, setMinHeight ] = useState();
 	const [ width, setWidth ] = useState();
 
@@ -71,14 +72,24 @@ export const _default = () => {
 						hasValue={ () => !! minHeight }
 						label="Minimum height"
 						onDeselect={ () => setMinHeight( undefined ) }
-						isShownByDefault={ true }
 					>
 						<UnitControl
 							label="Minimum height"
 							value={ minHeight }
 							onChange={ ( next ) => setMinHeight( next ) }
 						/>
 					</ToolsPanelItem>
+					<ToolsPanelItem
+						hasValue={ () => !! maxHeight }
+						label="Maximum height"
+						onDeselect={ () => setMaxHeight( undefined ) }
+					>
+						<UnitControl
+							label="Maximum height"
+							value={ maxHeight }
+							onChange={ ( next ) => setMaxHeight( next ) }
+						/>
+					</ToolsPanelItem>
 				</ToolsPanel>
 			</Panel>
 		</PanelWrapperView>

diff --git a/packages/components/src/tools-panel/styles.ts b/packages/components/src/tools-panel/styles.ts
@@ -12,7 +12,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 { baseLabelTypography, COLORS, CONFIG } from '../utils';
 import { space } from '../ui/utils/space';
 
 const toolsPanelGrid = {
@@ -145,3 +145,32 @@ export const ToolsPanelItemPlaceholder = css`
 export const DropdownMenu = css`
 	min-width: 200px;
 `;
+
+// Following provides for rendering "reset" text within a MenuItem.
+export const DefaultControlsItem = css`
+	/**
+	 * This high level of specificity is needed to overcome styles for items
+	 * with no icon or shortcut.
+	 */
+	&&&&& > span {
+		display: flex;
+		/* item text plus icon min-width to match optional items. */
+		min-width: 208px;
+		justify-content: space-between;
+		padding-right: 0;
+	}
+
+	span > span:last-child {
+		flex: 0;
+		color: var( --wp-admin-theme-color-darker-10 );
+		${ baseLabelTypography }
+	}
+
+	&&[aria-disabled='true'] {
+		opacity: 1;
+
+		span > span:last-child {
+			opacity: 0.3;
+		}
+	}
+`;
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.tsx b/packages/components/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';
 
 /**
@@ -26,6 +26,7 @@ import type {
 } from '../types';
 
 const DefaultControlsGroup = ( {
+	itemClassName,
 	items,
 	toggleItem,
 }: ToolsPanelControlsGroupProps ) => {
@@ -34,14 +35,14 @@ const DefaultControlsGroup = ( {
 	}
 
 	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' ),
@@ -59,20 +60,22 @@ const DefaultControlsGroup = ( {
 								);
 							} }
 						>
-							{ label }
+							<span>{ label }</span>
+							<span>{ __( 'Reset' ) }</span>
 						</MenuItem>
 					);
 				}
 
 				return (
 					<MenuItem
 						key={ label }
+						className={ itemClassName }
 						role="menuitemcheckbox"
-						icon={ check }
 						isSelected
 						aria-disabled
 					>
-						{ label }
+						<span>{ label }</span>
+						<span>{ __( 'Reset' ) }</span>
 					</MenuItem>
 				);
 			} ) }
@@ -89,7 +92,7 @@ const OptionalControlsGroup = ( {
 	}
 
 	return (
-		<MenuGroup>
+		<MenuGroup label={ __( 'Tools' ) }>
 			{ items.map( ( [ label, isSelected ] ) => {
 				const itemLabel = isSelected
 					? sprintf(
@@ -147,6 +150,7 @@ const ToolsPanelHeader = (
 ) => {
 	const {
 		areAllOptionalControlsHidden,
+		defaultControlsItemClassName,
 		dropdownMenuClassName,
 		hasMenuItems,
 		headingClassName,
@@ -197,6 +201,7 @@ const ToolsPanelHeader = (
 							<DefaultControlsGroup
 								items={ defaultItems }
 								toggleItem={ toggleItem }
+								itemClassName={ defaultControlsItemClassName }
 							/>
 							<OptionalControlsGroup
 								items={ optionalItems }

diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.ts b/packages/components/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,

diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts
@@ -147,6 +147,7 @@ export type ToolsPanelContext = {
 };
 
 export type ToolsPanelControlsGroupProps = {
+	itemClassName?: string;
 	items: [ string, boolean ][];
 	toggleItem: ( label: string ) => void;
 };