Allow both shortcuts and icons.

WordPress · Aug 28, 2020 · 4826cbe · 4826cbe
1 parent 165537e
commit 4826cbe
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 20 deletions.
diff --git a/packages/components/src/dropdown-menu/style.scss b/packages/components/src/dropdown-menu/style.scss
@@ -88,7 +88,3 @@
 		}
 	}
 }
-
-.components-dropdown-menu__menu.no-icons  .components-menu-item__button.components-button {
-	padding: 0 $grid-unit-15;
-}
diff --git a/packages/components/src/menu-group/style.scss b/packages/components/src/menu-group/style.scss
@@ -6,6 +6,7 @@
 
 .components-menu-group__label {
 	padding: 0 $grid-unit-10;
+	margin-top: $grid-unit-05;
 	margin-bottom: $grid-unit-15;
 	color: $gray-700;
 	text-transform: uppercase;

diff --git a/packages/components/src/menu-item/index.js b/packages/components/src/menu-item/index.js
@@ -75,12 +75,10 @@ export function MenuItem(
 			{ ...props }
 		>
 			{ children }
-			{ ! icon && (
-				<Shortcut
-					className="components-menu-item__shortcut"
-					shortcut={ shortcut }
-				/>
-			) }
+			<Shortcut
+				className="components-menu-item__shortcut"
+				shortcut={ shortcut }
+			/>
 			{ icon && <Icon icon={ icon } /> }
 		</Button>
 	);

diff --git a/packages/components/src/menu-item/style.scss b/packages/components/src/menu-item/style.scss
@@ -2,20 +2,16 @@
 .components-menu-item__button.components-button {
 	width: 100%;
 
-	// Target plugin icons that can have arbitrary classes by using an aggressive selector.
-	// @todo: is this still necessary?
-	.dashicon,
-	.components-menu-items__item-icon,
-	svg.components-menu-items__item-icon,
-	> span > svg {
-		margin-right: 0;
-		margin-left: auto;
-	}
-
 	.components-menu-items__item-icon {
+		margin-right: -$grid-unit-05; // This optically balances the icon.
+		margin-left: auto;
 		display: inline-block;
 		flex: 0 0 auto;
 	}
+
+	.components-menu-item__shortcut + .components-menu-items__item-icon {
+		margin-left: $grid-unit-10;
+	}
 }
 
 .components-menu-item__info-wrapper {