Add check for command icons

WordPress · Aug 14, 2023 · 716380a · 716380a
1 parent 45678ad
commit 716380a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/packages/commands/package.json b/packages/commands/package.json
@@ -34,6 +34,7 @@
 		"@wordpress/icons": "file:../icons",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/private-apis": "file:../private-apis",
+		"classnames": "^2.3.1",
 		"cmdk": "^0.2.0",
 		"rememo": "^4.0.2"
 	},

diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { Command, useCommandState } from 'cmdk';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
@@ -53,9 +54,14 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 					>
 						<HStack
 							alignment="left"
-							className="commands-command-menu__item"
+							className={ classnames(
+								'commands-command-menu__item',
+								{
+									'with-no-icon': ! command.icon,
+								}
+							) }
 						>
-							<Icon icon={ command.icon } />
+							{ command.icon && <Icon icon={ command.icon } /> }
 							<span>
 								<TextHighlight
 									text={ command.label }
@@ -123,9 +129,11 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 				>
 					<HStack
 						alignment="left"
-						className="commands-command-menu__item"
+						className={ classnames( 'commands-command-menu__item', {
+							'with-no-icon': ! command.icon,
+						} ) }
 					>
-						<Icon icon={ command.icon } />
+						{ command.icon && <Icon icon={ command.icon } /> }
 						<span>
 							<TextHighlight
 								text={ command.label }