From ad3fca95d7df66206dae4431d7d3f0a59bfcca2c Mon Sep 17 00:00:00 2001
From: Rich Tabor <hi@richtabor.com>
Date: Tue, 15 Aug 2023 11:27:56 -0400
Subject: [PATCH] Switch to using has-icon

---
 packages/commands/src/components/command-menu.js |  4 ++--
 packages/commands/src/components/style.scss      | 10 +++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/commands/src/components/command-menu.js b/packages/commands/src/components/command-menu.js
index 5914ccc27f944..59d03f10a01bf 100644
--- a/packages/commands/src/components/command-menu.js
+++ b/packages/commands/src/components/command-menu.js
@@ -57,7 +57,7 @@ function CommandMenuLoader( { name, search, hook, setLoader, close } ) {
 							className={ classnames(
 								'commands-command-menu__item',
 								{
-									'with-no-icon': ! command.icon,
+									'has-icon': command.icon,
 								}
 							) }
 						>
@@ -130,7 +130,7 @@ export function CommandMenuGroup( { isContextual, search, setLoader, close } ) {
 					<HStack
 						alignment="left"
 						className={ classnames( 'commands-command-menu__item', {
-							'with-no-icon': ! command.icon,
+							'has-icon': command.icon,
 						} ) }
 					>
 						{ command.icon && <Icon icon={ command.icon } /> }
diff --git a/packages/commands/src/components/style.scss b/packages/commands/src/components/style.scss
index 58d3405474999..93e25a88191b4 100644
--- a/packages/commands/src/components/style.scss
+++ b/packages/commands/src/components/style.scss
@@ -66,7 +66,6 @@
 		cursor: pointer;
 		display: flex;
 		align-items: center;
-		padding: $grid-unit;
 		color: $gray-900;
 		font-size: $default-font-size;
 		min-height: $button-size-next-default-40px;
@@ -90,8 +89,13 @@
 			fill: $gray-900;
 		}
 
-		> .with-no-icon {
-			padding-left: $grid-unit-40; // Align text, even without icons.
+		> div {
+			padding: $grid-unit;
+			padding-left: $grid-unit-50; // Account for commands without icons.
+		}
+
+		> .has-icon {
+			padding-left: $grid-unit;
 		}
 	}