Add menu item classnames (#3251)

* Add menu item label classname * Add text classname prop * Alphabetize props & improve docs
palantir · Dec 20, 2018 · ff71092 · ff71092 · blueprint-bot · Dec 20, 2018
1 parent 8e1e03d
commit ff71092
Showing 1 changed file with 14 additions and 3 deletions.
diff --git 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>