From a1dd63197d64e3e63712aeb192c628ab8b3013b7 Mon Sep 17 00:00:00 2001
From: Ben Biggs <bfletcherbiggs@gmail.com>
Date: Sat, 25 Jan 2020 03:09:09 -0600
Subject: [PATCH] feat(MenuItem): add listClassName prop

---
 react/src/lib/MenuItem/index.js | 26 ++++++++++++++++----------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/react/src/lib/MenuItem/index.js b/react/src/lib/MenuItem/index.js
index 561071d0b9..1d911384b8 100644
--- a/react/src/lib/MenuItem/index.js
+++ b/react/src/lib/MenuItem/index.js
@@ -9,6 +9,7 @@ import { UIDConsumer } from 'react-uid';
 import { ListItem } from '@momentum-ui/react';
 import ListContext from '../ListContext';
 import SelectableContext from '../SelectableContext';
+import { prefix } from '../utils/index';
 
 class MenuItem extends React.Component {
   constructor(props) {
@@ -58,6 +59,7 @@ class MenuItem extends React.Component {
       className,
       isHeader,
       isOpen,
+      itemClassName,
       ...props
     } = this.props;
     const { selectContext } = this.state;
@@ -70,7 +72,7 @@ class MenuItem extends React.Component {
     ]);
 
     return (
-      <UIDConsumer name={id => `md-menu-item-${id}`}>
+      <UIDConsumer name={id => `${prefix}-menu-item-${id}`}>
         {id => (
           <SelectableContext.Provider value={selectContext}>
             <ListContext.Consumer>
@@ -79,26 +81,29 @@ class MenuItem extends React.Component {
                   || listContext
                   && listContext.active
                   && ReactDOM.findDOMNode(this.anchorRef)
-                  && ReactDOM.findDOMNode(this.anchorRef).attributes['data-md-event-key']
-                  && ReactDOM.findDOMNode(this.anchorRef).attributes['data-md-event-key'].value
+                  && ReactDOM.findDOMNode(this.anchorRef).attributes[`data-${prefix}-event-key`]
+                  && ReactDOM.findDOMNode(this.anchorRef).attributes[`data-${prefix}-event-key`].value
                   && listContext.active.includes(
                     ReactDOM.findDOMNode(this.anchorRef)
-                    .attributes['data-md-event-key']
+                    .attributes[`data-${prefix}-event-key`]
                     .value
                   );
 
                 return(
                   <div
                     className={
-                      'md-menu-item' +
-                      `${(className && ` ${className}`) || ''}`
+                      `${prefix}-menu-item` +
+                      `${className && ` ${className}` || ''}`
                     }
                     aria-expanded={cxtActive}
                     aria-haspopup={!!children}
                   >
                     <ListItem
                       active={cxtActive}
-                      className={`${(isHeader && `md-menu-item__header`) || ''}`}
+                      className={
+                        `${isHeader && `md-menu-item__header` || ''}` +
+                        `${itemClassName && ` ${itemClassName}` || ''}`
+                      }
                       focusOnLoad
                       isReadOnly={isHeader}
                       id={id}
@@ -106,9 +111,7 @@ class MenuItem extends React.Component {
                       role="menuitem"
                       {...otherProps}
                     >
-                      {
-                        children
-                      }
+                      {children}
                     </ListItem>
                   </div>
                 );
@@ -130,6 +133,8 @@ MenuItem.propTypes = {
   isHeader: PropTypes.bool,
   /** @prop Determines if MenuItem is open | false */
   isOpen: PropTypes.bool,
+  /** @prop Optional list css class name | '' */
+  itemClassName: PropTypes.string,
   /** @prop Set to keep the MenuItem open | false */
   keepMenuOpen: PropTypes.bool,
   /** @prop Callback function invoked when user taps on MenutItem | null */
@@ -145,6 +150,7 @@ MenuItem.defaultProps = {
   className: '',
   isHeader: false,
   isOpen: false,
+  itemClassName: '',
   keepMenuOpen: false,
   onClick: null,
   parentKeyDown: null,