From ff710927cbd5a2936eb5929acb96b654e6b94977 Mon Sep 17 00:00:00 2001
From: Shelby <spefley@mit.edu>
Date: Thu, 20 Dec 2018 10:47:27 -0800
Subject: [PATCH] Add menu item classnames (#3251)

* Add menu item label classname

* Add text classname prop

* Alphabetize props & improve docs
---
 packages/core/src/components/menu/menuItem.tsx | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/menu/menuItem.tsx b/packages/core/src/components/menu/menuItem.tsx
index 6fb805944e..b0c0c9a4f0 100644
--- a/packages/core/src/components/menu/menuItem.tsx
+++ b/packages/core/src/components/menu/menuItem.tsx
@@ -46,6 +46,11 @@ export interface IMenuItemProps extends IActionProps, ILinkProps {
      */
     label?: string;
 
+    /**
+     * A space-delimited list of class names to pass along to the right-aligned label wrapper element.
+     */
+    labelClassName?: string;
+
     /**
      * Right-aligned label content, useful for displaying hotkeys.
      */
@@ -76,6 +81,11 @@ export interface IMenuItemProps extends IActionProps, ILinkProps {
      * @default "a"
      */
     tagName?: keyof JSX.IntrinsicElements;
+
+    /**
+     * A space-delimited list of class names to pass along to the text wrapper element.
+     */
+    textClassName?: string;
 }
 
 export class MenuItem extends React.PureComponent<IMenuItemProps & React.AnchorHTMLAttributes<HTMLAnchorElement>> {
@@ -101,6 +111,7 @@ export class MenuItem extends React.PureComponent<IMenuItemProps & React.AnchorH
             popoverProps,
             shouldDismissPopover,
             text,
+            textClassName,
             tagName: TagName = "a",
             ...htmlProps
         } = this.props;
@@ -123,7 +134,7 @@ export class MenuItem extends React.PureComponent<IMenuItemProps & React.AnchorH
         const target = (
             <TagName {...htmlProps} {...(disabled ? DISABLED_PROPS : {})} className={anchorClasses}>
                 <Icon icon={icon} />
-                <Text className={Classes.FILL} ellipsize={!multiline}>
+                <Text className={classNames(Classes.FILL, textClassName)} ellipsize={!multiline}>
                     {text}
                 </Text>
                 {this.maybeRenderLabel(labelElement)}
@@ -136,12 +147,12 @@ export class MenuItem extends React.PureComponent<IMenuItemProps & React.AnchorH
     }
 
     private maybeRenderLabel(labelElement?: React.ReactNode) {
-        const { label } = this.props;
+        const { label, labelClassName } = this.props;
         if (label == null && labelElement == null) {
             return null;
         }
         return (
-            <span className={Classes.MENU_ITEM_LABEL}>
+            <span className={classNames(Classes.MENU_ITEM_LABEL, labelClassName)}>
                 {label}
                 {labelElement}
             </span>