From dbb19521fcaafa918c1218578de1272748006170 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 2 Sep 2021 18:22:01 +1000
Subject: [PATCH 01/14] Separate default and optional controls in menu

Default and optional controls will now be displayed via separate menu groups and behave slightly differently. Default controls will always be shown and display a checkmark when empty or a minus icon when customized.
---
 .../tools-panel-header/component.js           | 73 +++++++++++++------
 .../tools-panel/tools-panel-header/hook.js    |  3 +-
 .../src/tools-panel/tools-panel-item/hook.js  | 22 +++++-
 .../src/tools-panel/tools-panel/hook.js       | 39 ++++++++--
 4 files changed, 107 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index 09331069378493..d31a50242b0665 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { check, moreVertical } from '@wordpress/icons';
+import { check, minus, moreVertical } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -27,6 +27,9 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 		return null;
 	}
 
+	const defaultItems = Object.entries( menuItems?.default || {} );
+	const optionalItems = Object.entries( menuItems?.optional || {} );
+
 	return (
 		<h2 { ...headerProps } ref={ forwardedRef }>
 			{ labelText }
@@ -34,26 +37,54 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 				<DropdownMenu icon={ moreVertical } label={ labelText }>
 					{ ( { onClose } ) => (
 						<>
-							<MenuGroup label={ __( 'Display options' ) }>
-								{ Object.entries( menuItems ).map(
-									( [ label, isSelected ] ) => {
-										return (
-											<MenuItem
-												key={ label }
-												icon={ isSelected && check }
-												isSelected={ isSelected }
-												onClick={ () => {
-													toggleItem( label );
-													onClose();
-												} }
-												role="menuitemcheckbox"
-											>
-												{ label }
-											</MenuItem>
-										);
-									}
-								) }
-							</MenuGroup>
+							{ !! defaultItems?.length && (
+								<MenuGroup>
+									{ defaultItems.map(
+										( [ label, hasValue ] ) => {
+											const icon = hasValue
+												? minus
+												: check;
+											return (
+												<MenuItem
+													key={ label }
+													icon={ icon }
+													isSelected={ true }
+													disabled={ ! hasValue }
+													onClick={ () => {
+														toggleItem( label );
+														onClose();
+													} }
+													role="menuitemcheckbox"
+												>
+													{ label }
+												</MenuItem>
+											);
+										}
+									) }
+								</MenuGroup>
+							) }
+							{ !! optionalItems?.length && (
+								<MenuGroup>
+									{ optionalItems.map(
+										( [ label, isSelected ] ) => {
+											return (
+												<MenuItem
+													key={ label }
+													icon={ isSelected && check }
+													isSelected={ isSelected }
+													onClick={ () => {
+														toggleItem( label );
+														onClose();
+													} }
+													role="menuitemcheckbox"
+												>
+													{ label }
+												</MenuItem>
+											);
+										}
+									) }
+								</MenuGroup>
+							) }
 							<MenuGroup>
 								<MenuItem
 									onClick={ () => {
diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.js b/packages/components/src/tools-panel/tools-panel-header/hook.js
index a3c2644ba7475e..c903c24725e725 100644
--- a/packages/components/src/tools-panel/tools-panel-header/hook.js
+++ b/packages/components/src/tools-panel/tools-panel-header/hook.js
@@ -22,8 +22,7 @@ export function useToolsPanelHeader( props ) {
 		return cx( styles.ToolsPanelHeader, className );
 	}, [ className ] );
 
-	const { menuItems } = useToolsPanelContext();
-	const hasMenuItems = !! Object.entries( menuItems ).length;
+	const { menuItems, hasMenuItems } = useToolsPanelContext();
 
 	return {
 		...otherProps,
diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.js b/packages/components/src/tools-panel/tools-panel-item/hook.js
index 069e25ec26bc3a..c3afee86ca3092 100644
--- a/packages/components/src/tools-panel/tools-panel-item/hook.js
+++ b/packages/components/src/tools-panel/tools-panel-item/hook.js
@@ -35,6 +35,7 @@ export function useToolsPanelItem( props ) {
 		menuItems,
 		registerPanelItem,
 		deregisterPanelItem,
+		flagItemCustomization,
 		isResetting,
 	} = useToolsPanelContext();
 
@@ -55,10 +56,20 @@ export function useToolsPanelItem( props ) {
 	}, [ panelId ] );
 
 	const isValueSet = hasValue();
+	const wasValueSet = usePrevious( isValueSet );
+
+	// If this item represents a default control it will need to notify the
+	// panel when a custom value has been set.
+	useEffect( () => {
+		if ( isShownByDefault && isValueSet && ! wasValueSet ) {
+			flagItemCustomization( label );
+		}
+	}, [ isValueSet, wasValueSet, isShownByDefault, label ] );
 
 	// Note: `label` is used as a key when building menu item state in
 	// `ToolsPanel`.
-	const isMenuItemChecked = menuItems[ label ];
+	const menuGroup = isShownByDefault ? 'default' : 'optional';
+	const isMenuItemChecked = menuItems[ menuGroup ][ label ];
 	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
 
 	// Determine if the panel item's corresponding menu is being toggled and
@@ -77,9 +88,16 @@ export function useToolsPanelItem( props ) {
 		}
 	}, [ isMenuItemChecked, wasMenuItemChecked, isValueSet, isResetting ] );
 
+	// The item is shown if it is a default control regardless of whether it
+	// has a value. Optional items are shown when they are checked or have
+	// a value.
+	const isShown = isShownByDefault
+		? menuItems[ menuGroup ][ label ] !== undefined
+		: isMenuItemChecked;
+
 	return {
 		...otherProps,
-		isShown: isMenuItemChecked,
+		isShown,
 		className: classes,
 	};
 }
diff --git a/packages/components/src/tools-panel/tools-panel/hook.js b/packages/components/src/tools-panel/tools-panel/hook.js
index 02e0d23f3f4a5a..edea7fa11906e9 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.js
+++ b/packages/components/src/tools-panel/tools-panel/hook.js
@@ -55,6 +55,20 @@ export function useToolsPanel( props ) {
 		}
 	};
 
+	// Force a menu item to be checked.
+	// This is intended for use with default panel items. They are displayed
+	// separately to optional items and have different display states,
+	//.we need to update that when their value is customized.
+	const flagItemCustomization = ( label, group = 'default' ) => {
+		setMenuItems( {
+			...menuItems,
+			[ group ]: {
+				...menuItems[ group ],
+				[ label ]: true,
+			},
+		} );
+	};
+
 	// Manage and share display state of menu items representing child controls.
 	const [ menuItems, setMenuItems ] = useState( {} );
 
@@ -72,10 +86,11 @@ export function useToolsPanel( props ) {
 
 	// Setup menuItems state as panel items register themselves.
 	useEffect( () => {
-		const items = {};
+		const items = { default: {}, optional: {} };
 
 		panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
-			items[ label ] = isShownByDefault || hasValue();
+			const group = isShownByDefault ? 'default' : 'optional';
+			items[ group ][ label ] = hasValue();
 		} );
 
 		setMenuItems( items );
@@ -84,9 +99,20 @@ export function useToolsPanel( props ) {
 	// Toggle the checked state of a menu item which is then used to determine
 	// display of the item within the panel.
 	const toggleItem = ( label ) => {
+		const currentItem = panelItems.find( ( item ) => item.label === label );
+
+		if ( ! currentItem ) {
+			return;
+		}
+
+		const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional';
+
 		setMenuItems( {
 			...menuItems,
-			[ label ]: ! menuItems[ label ],
+			[ menuGroup ]: {
+				...menuItems[ menuGroup ],
+				[ label ]: ! menuItems[ menuGroup ][ label ],
+			},
 		} );
 	};
 
@@ -98,10 +124,11 @@ export function useToolsPanel( props ) {
 		}
 
 		// Turn off display of all non-default items.
-		const resetMenuItems = {};
+		const resetMenuItems = { default: {}, optional: {} };
 
 		panelItems.forEach( ( { label, isShownByDefault } ) => {
-			resetMenuItems[ label ] = !! isShownByDefault;
+			const group = isShownByDefault ? 'default' : 'optional';
+			resetMenuItems[ group ][ label ] = false;
 		} );
 
 		setMenuItems( resetMenuItems );
@@ -112,6 +139,8 @@ export function useToolsPanel( props ) {
 		menuItems,
 		registerPanelItem,
 		deregisterPanelItem,
+		flagItemCustomization,
+		hasMenuItems: panelItems.length,
 		isResetting: isResetting.current,
 	};
 

From 2ea5214425b5390f501d912db9d6b20c7ae85843 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 3 Sep 2021 17:19:20 +1000
Subject: [PATCH 02/14] Set min-width on ToolsPanel dropdown menu

---
 .../src/tools-panel/tools-panel-header/component.js         | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index d31a50242b0665..790aa9efd5da38 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -34,7 +34,11 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 		<h2 { ...headerProps } ref={ forwardedRef }>
 			{ labelText }
 			{ hasMenuItems && (
-				<DropdownMenu icon={ moreVertical } label={ labelText }>
+				<DropdownMenu
+					icon={ moreVertical }
+					label={ labelText }
+					menuProps={ { style: { minWidth: '200px' } } }
+				>
 					{ ( { onClose } ) => (
 						<>
 							{ !! defaultItems?.length && (

From 077db3a426b73f4a25c43797e7d5ea3df71b533e Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 6 Sep 2021 16:29:08 +1000
Subject: [PATCH 03/14] Make reset all a tertiary button as per design

---
 .../components/src/tools-panel/tools-panel-header/component.js   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index 790aa9efd5da38..620db4c983d274 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -91,6 +91,7 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 							) }
 							<MenuGroup>
 								<MenuItem
+									variant={ 'tertiary' }
 									onClick={ () => {
 										resetAll();
 										onClose();

From 484d402c76e911d3eaba504123785b6af0b81d93 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 6 Sep 2021 16:31:15 +1000
Subject: [PATCH 04/14] Add aria-labels to tools panel menu items

---
 .../tools-panel-header/component.js           | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index 620db4c983d274..73af46f2beff77 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { check, minus, moreVertical } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -13,6 +13,20 @@ import MenuItem from '../../menu-item';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect } from '../../ui/context';
 
+const getAriaLabel = ( label, isSelected ) => {
+	return isSelected
+		? sprintf(
+				// translators: %s: The name of the control being hidden and reset e.g. "Padding".
+				__( 'Hide and reset %s' ),
+				label
+		  )
+		: sprintf(
+				// translators: %s: The name of the control to display e.g. "Padding".
+				__( 'Show %s' ),
+				label
+		  );
+};
+
 const ToolsPanelHeader = ( props, forwardedRef ) => {
 	const {
 		hasMenuItems,
@@ -48,12 +62,22 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 											const icon = hasValue
 												? minus
 												: check;
+
+											const itemLabel = hasValue
+												? sprintf(
+														// translators: %s: The name of the control being reset e.g. "Padding".
+														__( 'Reset %s' ),
+														label
+												  )
+												: undefined;
+
 											return (
 												<MenuItem
 													key={ label }
 													icon={ icon }
 													isSelected={ true }
 													disabled={ ! hasValue }
+													label={ itemLabel }
 													onClick={ () => {
 														toggleItem( label );
 														onClose();
@@ -71,11 +95,17 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 								<MenuGroup>
 									{ optionalItems.map(
 										( [ label, isSelected ] ) => {
+											const itemLabel = getAriaLabel(
+												label,
+												isSelected
+											);
+
 											return (
 												<MenuItem
 													key={ label }
 													icon={ isSelected && check }
 													isSelected={ isSelected }
+													label={ itemLabel }
 													onClick={ () => {
 														toggleItem( label );
 														onClose();

From 8f5a03639f485fb97f99a7fef0116da7d28f46b3 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 7 Sep 2021 23:58:15 +1000
Subject: [PATCH 05/14] Fix bug where menuItems is undefined on initial render

---
 .../components/src/tools-panel/test/index.js  | 30 +++++++++++++++++--
 .../src/tools-panel/tools-panel-item/hook.js  |  4 +--
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/tools-panel/test/index.js b/packages/components/src/tools-panel/test/index.js
index cf5b7621f7760b..1364ab347fd8f9 100644
--- a/packages/components/src/tools-panel/test/index.js
+++ b/packages/components/src/tools-panel/test/index.js
@@ -257,7 +257,7 @@ describe( 'ToolsPanel', () => {
 			expect( control ).toBeInTheDocument();
 		} );
 
-		it( 'should prevent panel item rendering when toggled off via menu item', async () => {
+		it( 'should prevent optional panel item rendering when toggled off via menu item', async () => {
 			renderPanel();
 			await selectMenuItem( controlProps.label );
 			const control = screen.queryByText( 'Example control' );
@@ -265,7 +265,7 @@ describe( 'ToolsPanel', () => {
 			expect( control ).not.toBeInTheDocument();
 		} );
 
-		it( 'should prevent shown by default item rendering when toggled off via menu item', async () => {
+		it( 'should continue to render shown by default item after it is toggled off via menu item', async () => {
 			render(
 				<ToolsPanel { ...defaultProps }>
 					<ToolsPanelItem
@@ -284,7 +284,31 @@ describe( 'ToolsPanel', () => {
 			await selectMenuItem( controlProps.label );
 			const resetControl = screen.queryByText( 'Default control' );
 
-			expect( resetControl ).not.toBeInTheDocument();
+			expect( resetControl ).toBeInTheDocument();
+		} );
+
+		it( 'should render appropriate menu groups', async () => {
+			const { container } = render(
+				<ToolsPanel { ...defaultProps }>
+					<ToolsPanelItem
+						{ ...controlProps }
+						isShownByDefault={ true }
+					>
+						<div>Default control</div>
+					</ToolsPanelItem>
+					<ToolsPanelItem { ...altControlProps }>
+						<div>Optional control</div>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			);
+			openDropdownMenu();
+
+			const menuGroups = container.querySelectorAll(
+				'.components-menu-group'
+			);
+
+			// Groups should be: default controls, optional controls & reset all.
+			expect( menuGroups.length ).toEqual( 3 );
 		} );
 	} );
 
diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.js b/packages/components/src/tools-panel/tools-panel-item/hook.js
index c3afee86ca3092..6b7b5cfd3023de 100644
--- a/packages/components/src/tools-panel/tools-panel-item/hook.js
+++ b/packages/components/src/tools-panel/tools-panel-item/hook.js
@@ -69,7 +69,7 @@ export function useToolsPanelItem( props ) {
 	// Note: `label` is used as a key when building menu item state in
 	// `ToolsPanel`.
 	const menuGroup = isShownByDefault ? 'default' : 'optional';
-	const isMenuItemChecked = menuItems[ menuGroup ][ label ];
+	const isMenuItemChecked = menuItems?.[ menuGroup ]?.[ label ];
 	const wasMenuItemChecked = usePrevious( isMenuItemChecked );
 
 	// Determine if the panel item's corresponding menu is being toggled and
@@ -92,7 +92,7 @@ export function useToolsPanelItem( props ) {
 	// has a value. Optional items are shown when they are checked or have
 	// a value.
 	const isShown = isShownByDefault
-		? menuItems[ menuGroup ][ label ] !== undefined
+		? menuItems?.[ menuGroup ]?.[ label ] !== undefined
 		: isMenuItemChecked;
 
 	return {

From 77accb04de3b113d414fa4a04a271125ed45ad4a Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 7 Sep 2021 23:59:16 +1000
Subject: [PATCH 06/14] Tweak display add default controls to story

Adds default controls so that the updated behaviour separating default and optional controls into menu groups can be seen via the story.
---
 packages/components/src/tools-panel/stories/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/tools-panel/stories/index.js b/packages/components/src/tools-panel/stories/index.js
index fe735390cce2fb..32e009a8940806 100644
--- a/packages/components/src/tools-panel/stories/index.js
+++ b/packages/components/src/tools-panel/stories/index.js
@@ -41,6 +41,7 @@ export const _default = () => {
 						hasValue={ () => !! width }
 						label="Width"
 						onDeselect={ () => setWidth( undefined ) }
+						isShownByDefault={ true }
 					>
 						<UnitControl
 							label="Width"
@@ -53,6 +54,7 @@ export const _default = () => {
 						hasValue={ () => !! height }
 						label="Height"
 						onDeselect={ () => setHeight( undefined ) }
+						isShownByDefault={ true }
 					>
 						<UnitControl
 							label="Height"

From 48a86b858d1627e73cf5cd2d6f4b4ddc7bdc3166 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 8 Sep 2021 00:09:25 +1000
Subject: [PATCH 07/14] Apply min-width via CSS class

---
 packages/components/src/tools-panel/styles.js                | 4 ++++
 .../src/tools-panel/tools-panel-header/component.js          | 3 ++-
 .../components/src/tools-panel/tools-panel-header/hook.js    | 5 +++++
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/tools-panel/styles.js b/packages/components/src/tools-panel/styles.js
index d9c7a985c011fc..102efdcf99b7b7 100644
--- a/packages/components/src/tools-panel/styles.js
+++ b/packages/components/src/tools-panel/styles.js
@@ -62,3 +62,7 @@ export const ToolsPanelItem = css`
 		max-width: 100%;
 	}
 `;
+
+export const DropdownMenu = css`
+	min-width: 200px;
+`;
diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index 73af46f2beff77..10061cfd8b4300 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -29,6 +29,7 @@ const getAriaLabel = ( label, isSelected ) => {
 
 const ToolsPanelHeader = ( props, forwardedRef ) => {
 	const {
+		dropdownMenuClassName,
 		hasMenuItems,
 		label: labelText,
 		menuItems,
@@ -51,7 +52,7 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 				<DropdownMenu
 					icon={ moreVertical }
 					label={ labelText }
-					menuProps={ { style: { minWidth: '200px' } } }
+					menuProps={ { className: dropdownMenuClassName } }
 				>
 					{ ( { onClose } ) => (
 						<>
diff --git a/packages/components/src/tools-panel/tools-panel-header/hook.js b/packages/components/src/tools-panel/tools-panel-header/hook.js
index c903c24725e725..462d515b7b6fa2 100644
--- a/packages/components/src/tools-panel/tools-panel-header/hook.js
+++ b/packages/components/src/tools-panel/tools-panel-header/hook.js
@@ -22,10 +22,15 @@ export function useToolsPanelHeader( props ) {
 		return cx( styles.ToolsPanelHeader, className );
 	}, [ className ] );
 
+	const dropdownMenuClassName = useMemo( () => {
+		return cx( styles.DropdownMenu );
+	}, [] );
+
 	const { menuItems, hasMenuItems } = useToolsPanelContext();
 
 	return {
 		...otherProps,
+		dropdownMenuClassName,
 		hasMenuItems,
 		menuItems,
 		className: classes,

From 92108c82f5805a5fc3b932f4b514fb4b5fededcc Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 8 Sep 2021 00:47:31 +1000
Subject: [PATCH 08/14] Refactor default and optional control menu groups

---
 .../tools-panel-header/component.js           | 162 ++++++++++--------
 1 file changed, 86 insertions(+), 76 deletions(-)

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index 10061cfd8b4300..b62817a14a6e05 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -13,18 +13,82 @@ import MenuItem from '../../menu-item';
 import { useToolsPanelHeader } from './hook';
 import { contextConnect } from '../../ui/context';
 
-const getAriaLabel = ( label, isSelected ) => {
-	return isSelected
-		? sprintf(
-				// translators: %s: The name of the control being hidden and reset e.g. "Padding".
-				__( 'Hide and reset %s' ),
-				label
-		  )
-		: sprintf(
-				// translators: %s: The name of the control to display e.g. "Padding".
-				__( 'Show %s' ),
-				label
-		  );
+const DefaultControlsGroup = ( { items, onClose, toggleItem } ) => {
+	if ( ! items.length ) {
+		return null;
+	}
+
+	return (
+		<MenuGroup>
+			{ items.map( ( [ label, hasValue ] ) => {
+				const icon = hasValue ? minus : check;
+				const itemLabel = hasValue
+					? sprintf(
+							// translators: %s: The name of the control being reset e.g. "Padding".
+							__( 'Reset %s' ),
+							label
+					  )
+					: undefined;
+
+				return (
+					<MenuItem
+						key={ label }
+						icon={ icon }
+						isSelected={ true }
+						disabled={ ! hasValue }
+						label={ itemLabel }
+						onClick={ () => {
+							toggleItem( label );
+							onClose();
+						} }
+						role="menuitemcheckbox"
+					>
+						{ label }
+					</MenuItem>
+				);
+			} ) }
+		</MenuGroup>
+	);
+};
+
+const OptionalControlsGroup = ( { items, onClose, toggleItem } ) => {
+	if ( ! items.length ) {
+		return null;
+	}
+
+	return (
+		<MenuGroup>
+			{ items.map( ( [ label, isSelected ] ) => {
+				const itemLabel = isSelected
+					? sprintf(
+							// translators: %s: The name of the control being hidden and reset e.g. "Padding".
+							__( 'Hide and reset %s' ),
+							label
+					  )
+					: sprintf(
+							// translators: %s: The name of the control to display e.g. "Padding".
+							__( 'Show %s' ),
+							label
+					  );
+
+				return (
+					<MenuItem
+						key={ label }
+						icon={ isSelected && check }
+						isSelected={ isSelected }
+						label={ itemLabel }
+						onClick={ () => {
+							toggleItem( label );
+							onClose();
+						} }
+						role="menuitemcheckbox"
+					>
+						{ label }
+					</MenuItem>
+				);
+			} ) }
+		</MenuGroup>
+	);
 };
 
 const ToolsPanelHeader = ( props, forwardedRef ) => {
@@ -56,70 +120,16 @@ const ToolsPanelHeader = ( props, forwardedRef ) => {
 				>
 					{ ( { onClose } ) => (
 						<>
-							{ !! defaultItems?.length && (
-								<MenuGroup>
-									{ defaultItems.map(
-										( [ label, hasValue ] ) => {
-											const icon = hasValue
-												? minus
-												: check;
-
-											const itemLabel = hasValue
-												? sprintf(
-														// translators: %s: The name of the control being reset e.g. "Padding".
-														__( 'Reset %s' ),
-														label
-												  )
-												: undefined;
-
-											return (
-												<MenuItem
-													key={ label }
-													icon={ icon }
-													isSelected={ true }
-													disabled={ ! hasValue }
-													label={ itemLabel }
-													onClick={ () => {
-														toggleItem( label );
-														onClose();
-													} }
-													role="menuitemcheckbox"
-												>
-													{ label }
-												</MenuItem>
-											);
-										}
-									) }
-								</MenuGroup>
-							) }
-							{ !! optionalItems?.length && (
-								<MenuGroup>
-									{ optionalItems.map(
-										( [ label, isSelected ] ) => {
-											const itemLabel = getAriaLabel(
-												label,
-												isSelected
-											);
-
-											return (
-												<MenuItem
-													key={ label }
-													icon={ isSelected && check }
-													isSelected={ isSelected }
-													label={ itemLabel }
-													onClick={ () => {
-														toggleItem( label );
-														onClose();
-													} }
-													role="menuitemcheckbox"
-												>
-													{ label }
-												</MenuItem>
-											);
-										}
-									) }
-								</MenuGroup>
-							) }
+							<DefaultControlsGroup
+								items={ defaultItems }
+								onClose={ onClose }
+								toggleItem={ toggleItem }
+							/>
+							<OptionalControlsGroup
+								items={ optionalItems }
+								onClose={ onClose }
+								toggleItem={ toggleItem }
+							/>
 							<MenuGroup>
 								<MenuItem
 									variant={ 'tertiary' }

From 760539432222b47d36708fcd5c2f10056ba554eb Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 8 Sep 2021 00:50:37 +1000
Subject: [PATCH 09/14] Move shared menu items generation logic to helper
 function

---
 .../src/tools-panel/tools-panel/hook.js       | 27 +++++++++----------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/tools-panel/tools-panel/hook.js b/packages/components/src/tools-panel/tools-panel/hook.js
index edea7fa11906e9..b2b7d35fc6bf5e 100644
--- a/packages/components/src/tools-panel/tools-panel/hook.js
+++ b/packages/components/src/tools-panel/tools-panel/hook.js
@@ -10,6 +10,17 @@ import * as styles from '../styles';
 import { useContextSystem } from '../../ui/context';
 import { useCx } from '../../utils/hooks/use-cx';
 
+const generateMenuItems = ( { panelItems, reset } ) => {
+	const menuItems = { default: {}, optional: {} };
+
+	panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
+		const group = isShownByDefault ? 'default' : 'optional';
+		menuItems[ group ][ label ] = reset ? false : hasValue();
+	} );
+
+	return menuItems;
+};
+
 export function useToolsPanel( props ) {
 	const { className, resetAll, panelId, ...otherProps } = useContextSystem(
 		props,
@@ -86,13 +97,7 @@ export function useToolsPanel( props ) {
 
 	// Setup menuItems state as panel items register themselves.
 	useEffect( () => {
-		const items = { default: {}, optional: {} };
-
-		panelItems.forEach( ( { hasValue, isShownByDefault, label } ) => {
-			const group = isShownByDefault ? 'default' : 'optional';
-			items[ group ][ label ] = hasValue();
-		} );
-
+		const items = generateMenuItems( { panelItems, reset: false } );
 		setMenuItems( items );
 	}, [ panelItems ] );
 
@@ -124,13 +129,7 @@ export function useToolsPanel( props ) {
 		}
 
 		// Turn off display of all non-default items.
-		const resetMenuItems = { default: {}, optional: {} };
-
-		panelItems.forEach( ( { label, isShownByDefault } ) => {
-			const group = isShownByDefault ? 'default' : 'optional';
-			resetMenuItems[ group ][ label ] = false;
-		} );
-
+		const resetMenuItems = generateMenuItems( { panelItems, reset: true } );
 		setMenuItems( resetMenuItems );
 	};
 

From 56e55e51d741c05c51b99b259b15ef9afe71bdec Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 8 Sep 2021 00:57:05 +1000
Subject: [PATCH 10/14] Add new check and reset icons

---
 .../src/tools-panel/tools-panel-header/component.js  |  6 +++---
 packages/icons/src/index.js                          |  2 ++
 packages/icons/src/library/check-small.js            | 12 ++++++++++++
 packages/icons/src/library/reset.js                  | 12 ++++++++++++
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 packages/icons/src/library/check-small.js
 create mode 100644 packages/icons/src/library/reset.js

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index b62817a14a6e05..ad6168a03eedc4 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { check, minus, moreVertical } from '@wordpress/icons';
+import { checkSmall, reset, moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -21,7 +21,7 @@ const DefaultControlsGroup = ( { items, onClose, toggleItem } ) => {
 	return (
 		<MenuGroup>
 			{ items.map( ( [ label, hasValue ] ) => {
-				const icon = hasValue ? minus : check;
+				const icon = hasValue ? reset : checkSmall;
 				const itemLabel = hasValue
 					? sprintf(
 							// translators: %s: The name of the control being reset e.g. "Padding".
@@ -74,7 +74,7 @@ const OptionalControlsGroup = ( { items, onClose, toggleItem } ) => {
 				return (
 					<MenuItem
 						key={ label }
-						icon={ isSelected && check }
+						icon={ isSelected && checkSmall }
 						isSelected={ isSelected }
 						label={ itemLabel }
 						onClick={ () => {
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index bd12e43bd1a7f3..63cdf4e5230989 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -31,6 +31,7 @@ export { default as captureVideo } from './library/capture-video';
 export { default as category } from './library/category';
 export { default as chartBar } from './library/chart-bar';
 export { default as check } from './library/check';
+export { default as checkSmall } from './library/check-small';
 export { default as chevronDown } from './library/chevron-down';
 export { default as chevronLeft } from './library/chevron-left';
 export { default as chevronRight } from './library/chevron-right';
@@ -172,6 +173,7 @@ export { default as receipt } from './library/receipt';
 export { default as redo } from './library/redo';
 export { default as removeBug } from './library/remove-bug';
 export { default as replace } from './library/replace';
+export { default as reset } from './library/reset';
 export { default as resizeCornerNE } from './library/resize-corner-n-e';
 export { default as reusableBlock } from './library/reusable-block';
 export { default as symbol } from './library/symbol';
diff --git a/packages/icons/src/library/check-small.js b/packages/icons/src/library/check-small.js
new file mode 100644
index 00000000000000..34fddf20803d3b
--- /dev/null
+++ b/packages/icons/src/library/check-small.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+const checkSmall = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
+	</SVG>
+);
+
+export default checkSmall;
diff --git a/packages/icons/src/library/reset.js b/packages/icons/src/library/reset.js
new file mode 100644
index 00000000000000..05fc4b93854543
--- /dev/null
+++ b/packages/icons/src/library/reset.js
@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/primitives';
+
+const reset = (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path d="M7 11.5h10V13H7z" />
+	</SVG>
+);
+
+export default reset;

From 3b0c6d5e1ca3421d700c3967cb84854e86715e8e Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 14 Sep 2021 15:58:12 +1000
Subject: [PATCH 11/14] Replace existing check icon

Instead of adding a second smaller check icon, we are replacing the existing check icon as it is not widely used.
---
 .../src/tools-panel/tools-panel-header/component.js  |  6 +++---
 packages/icons/src/index.js                          |  1 -
 packages/icons/src/library/check-small.js            | 12 ------------
 packages/icons/src/library/check.js                  |  2 +-
 4 files changed, 4 insertions(+), 17 deletions(-)
 delete mode 100644 packages/icons/src/library/check-small.js

diff --git a/packages/components/src/tools-panel/tools-panel-header/component.js b/packages/components/src/tools-panel/tools-panel-header/component.js
index ad6168a03eedc4..2a1e82e2338f71 100644
--- a/packages/components/src/tools-panel/tools-panel-header/component.js
+++ b/packages/components/src/tools-panel/tools-panel-header/component.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { checkSmall, reset, moreVertical } from '@wordpress/icons';
+import { check, reset, moreVertical } from '@wordpress/icons';
 import { __, sprintf } from '@wordpress/i18n';
 
 /**
@@ -21,7 +21,7 @@ const DefaultControlsGroup = ( { items, onClose, toggleItem } ) => {
 	return (
 		<MenuGroup>
 			{ items.map( ( [ label, hasValue ] ) => {
-				const icon = hasValue ? reset : checkSmall;
+				const icon = hasValue ? reset : check;
 				const itemLabel = hasValue
 					? sprintf(
 							// translators: %s: The name of the control being reset e.g. "Padding".
@@ -74,7 +74,7 @@ const OptionalControlsGroup = ( { items, onClose, toggleItem } ) => {
 				return (
 					<MenuItem
 						key={ label }
-						icon={ isSelected && checkSmall }
+						icon={ isSelected && check }
 						isSelected={ isSelected }
 						label={ itemLabel }
 						onClick={ () => {
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 63cdf4e5230989..7af5cecf77f98a 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -31,7 +31,6 @@ export { default as captureVideo } from './library/capture-video';
 export { default as category } from './library/category';
 export { default as chartBar } from './library/chart-bar';
 export { default as check } from './library/check';
-export { default as checkSmall } from './library/check-small';
 export { default as chevronDown } from './library/chevron-down';
 export { default as chevronLeft } from './library/chevron-left';
 export { default as chevronRight } from './library/chevron-right';
diff --git a/packages/icons/src/library/check-small.js b/packages/icons/src/library/check-small.js
deleted file mode 100644
index 34fddf20803d3b..00000000000000
--- a/packages/icons/src/library/check-small.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const checkSmall = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
-	</SVG>
-);
-
-export default checkSmall;
diff --git a/packages/icons/src/library/check.js b/packages/icons/src/library/check.js
index c4cca5af773b37..c4419ebea67f5d 100644
--- a/packages/icons/src/library/check.js
+++ b/packages/icons/src/library/check.js
@@ -5,7 +5,7 @@ import { SVG, Path } from '@wordpress/primitives';
 
 const check = (
 	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-		<Path d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z" />
+		<Path d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" />
 	</SVG>
 );
 

From 622206a77837b84a0dc55993b961845bea5d45bd Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 14 Sep 2021 16:18:14 +1000
Subject: [PATCH 12/14] Replace minus icon with the new reset icon

---
 .../mobile/bottom-sheet/stepper-cell/stepper.ios.js  |  4 ++--
 packages/icons/CHANGELOG.md                          |  4 ++++
 packages/icons/src/index.js                          |  1 -
 packages/icons/src/library/minus.js                  | 12 ------------
 4 files changed, 6 insertions(+), 15 deletions(-)
 delete mode 100644 packages/icons/src/library/minus.js

diff --git a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
index 328f9496c4c0b9..fa2318a9fd7282 100644
--- a/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
+++ b/packages/components/src/mobile/bottom-sheet/stepper-cell/stepper.ios.js
@@ -7,7 +7,7 @@ import { Text, TouchableOpacity, View } from 'react-native';
  * WordPress dependencies
  */
 import { withPreferredColorScheme } from '@wordpress/compose';
-import { Icon, minus, plus } from '@wordpress/icons';
+import { Icon, plus, reset } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -46,7 +46,7 @@ function Stepper( {
 				onPressOut={ onPressOut }
 				style={ [ buttonStyle, isMinValue ? { opacity: 0.4 } : null ] }
 			>
-				<Icon icon={ minus } size={ 24 } color={ buttonStyle.color } />
+				<Icon icon={ reset } size={ 24 } color={ buttonStyle.color } />
 			</TouchableOpacity>
 			<TouchableOpacity
 				testID={ 'Increment' }
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index a841d3143a6a86..7102a054babc6f 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Breaking Change
+
+-   Removed the `minus` icon, which was only used once in the block editor, in favor of the new `reset` icon which offers a more refined vector.
+
 ## 5.0.0 (2021-07-29)
 
 ### Breaking Change
diff --git a/packages/icons/src/index.js b/packages/icons/src/index.js
index 7af5cecf77f98a..a30d76f5c54860 100644
--- a/packages/icons/src/index.js
+++ b/packages/icons/src/index.js
@@ -120,7 +120,6 @@ export { default as media } from './library/media';
 export { default as mediaAndText } from './library/media-and-text';
 export { default as megaphone } from './library/megaphone';
 export { default as menu } from './library/menu';
-export { default as minus } from './library/minus';
 export { default as mobile } from './library/mobile';
 export { default as more } from './library/more';
 export { default as moreHorizontal } from './library/more-horizontal';
diff --git a/packages/icons/src/library/minus.js b/packages/icons/src/library/minus.js
deleted file mode 100644
index 4f2f3653a9fe04..00000000000000
--- a/packages/icons/src/library/minus.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { SVG, Path } from '@wordpress/primitives';
-
-const minus = (
-	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24">
-		<Path d="M4 9h12v2H4V9z" />
-	</SVG>
-);
-
-export default minus;

From d3b2022c3bbea7299cd0450aa3ca3e210681ed65 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 14 Sep 2021 17:24:47 +1000
Subject: [PATCH 13/14] Update color palette snapshots to use new check icon

---
 .../components/color-palette/test/__snapshots__/control.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
index 3d30e7664ae887..abf30378e091d4 100644
--- a/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
+++ b/packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
@@ -80,7 +80,7 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
+                d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
               />
             </svg>
           </div>

From 11c3386fa1624e140d5e3f81c944060ff395ee26 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 14 Sep 2021 17:34:24 +1000
Subject: [PATCH 14/14] Update color palette snapshots - take 2

---
 .../src/color-palette/test/__snapshots__/index.js.snap      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/color-palette/test/__snapshots__/index.js.snap b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
index 7bf8892b02e943..c75cd0d1cd0138 100644
--- a/packages/components/src/color-palette/test/__snapshots__/index.js.snap
+++ b/packages/components/src/color-palette/test/__snapshots__/index.js.snap
@@ -365,7 +365,7 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <Path
-                    d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
+                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                   />
                 </SVG>
               }
@@ -388,10 +388,10 @@ exports[`ColorPalette should render a dynamic toolbar of colors 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <Path
-                    d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
+                    d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                   >
                     <path
-                      d="M18.3 5.6L9.9 16.9l-4.6-3.4-.9 1.2 5.8 4.3 9.3-12.6z"
+                      d="M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z"
                     />
                   </Path>
                 </svg>