[v4] [core] fix(MenuItem): remove left margin when no icon (#5023)

palantir · Nov 11, 2021 · 71e94fa · 71e94fa
1 parent e1937da
commit 71e94fa
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 6 deletions.
diff --git a/packages/core/src/components/menu/menuItem.tsx b/packages/core/src/components/menu/menuItem.tsx
@@ -156,6 +156,8 @@ export class MenuItem extends AbstractPureComponent2<MenuItemProps & React.Ancho
             htmlTitle,
             ...htmlProps
         } = this.props;
+
+        const hasIcon = icon != null;
         const hasSubmenu = children != null;
 
         const intentClass = Classes.intentClass(intent);
@@ -180,11 +182,13 @@ export class MenuItem extends AbstractPureComponent2<MenuItemProps & React.Ancho
                 ...(disabled ? DISABLED_PROPS : {}),
                 className: anchorClasses,
             },
-            // wrap icon in a <span> in case `icon` is a custom element rather than a built-in icon identifier,
-            // so that we always render this class
-            <span className={Classes.MENU_ITEM_ICON}>
-                <Icon icon={icon} />
-            </span>,
+            hasIcon ? (
+                // wrap icon in a <span> in case `icon` is a custom element rather than a built-in icon identifier,
+                // so that we always render this class
+                <span className={Classes.MENU_ITEM_ICON}>
+                    <Icon icon={icon} />
+                </span>
+            ) : undefined,
             <Text className={classNames(Classes.FILL, textClassName)} ellipsize={!multiline} title={htmlTitle}>
                 {text}
             </Text>,

diff --git a/packages/docs-app/src/examples/core-examples/menuItemExample.tsx b/packages/docs-app/src/examples/core-examples/menuItemExample.tsx
@@ -26,6 +26,7 @@ export function MenuItemExample(props: IExampleProps) {
     const [disabled, setDisabled] = React.useState(false);
     const [selected, setSelected] = React.useState(false);
     const [intent, setIntent] = React.useState<Intent>("none");
+    const [iconEnabled, setIconEnabled] = React.useState(true);
     const [submenuEnabled, setSubmenuEnabled] = React.useState(false);
 
     const options = (
@@ -34,6 +35,7 @@ export function MenuItemExample(props: IExampleProps) {
             <Switch label="Large" checked={large} onChange={handleBooleanChange(setLarge)} />
             <Switch label="Disabled" checked={disabled} onChange={handleBooleanChange(setDisabled)} />
             <Switch label="Selected" checked={selected} onChange={handleBooleanChange(setSelected)} />
+            <Switch label="Enable icon" checked={iconEnabled} onChange={handleBooleanChange(setIconEnabled)} />
             <Switch label="Enable submenu" checked={submenuEnabled} onChange={handleBooleanChange(setSubmenuEnabled)} />
             <IntentSelect intent={intent} onChange={handleValueChange(setIntent)} />
         </>
@@ -46,7 +48,7 @@ export function MenuItemExample(props: IExampleProps) {
                     disabled={disabled}
                     selected={selected}
                     text="Settings"
-                    icon="cog"
+                    icon={iconEnabled ? "cog" : undefined}
                     intent={intent}
                     labelElement={submenuEnabled ? undefined : "⌘,"}
                     children={