Switch to using has-icon

WordPress · Aug 15, 2023 · ad3fca9 · ad3fca9
1 parent 716380a
commit ad3fca9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git 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
@@ -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;
 		}
 	}