RightButton in menu-item

docs/components.json

@@ -3632,6 +3632,17 @@
           "computed": false
         }
       },
+      "rightButton": {
+        "type": {
+          "name": "node"
+        },
+        "required": false,
+        "description": "Right-hand side placed button",
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        }
+      },
       "color": {
         "type": {
           "name": "string"

docs/src/components/menu-item.jsx

@@ -2,9 +2,11 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import _ from 'underscore';
 import MenuItem from '../../../dist/menu-item';
+import IconMenu from '../../../dist/icon-menu';
 import Props from './props';
 import components from '../../components.json';
 import IconReport from '../../../dist/icons/icon-report';
+import IconMore from '../../../dist/icons/icon-more';
 import Paper from '../../../dist/paper';
 
 const usage = '```js\n import MenuItem from \'anchor-ui/menu-item\';';
@@ -18,6 +20,9 @@ const MenuItemDoc = () => {
       alignItems: 'center',
       margin: 0,
       padding: '20px'
+    },
+    wrapper: {
+      maxWidth: '256px'
     }
   };
 
@@ -35,9 +40,25 @@ const MenuItemDoc = () => {
       <section>
         <h1>Examples</h1>
         <Paper style={style.paper}>
-          <MenuItem text="Active Menu item" onClick={() => {}} active />
-          <MenuItem text="Menu item" onClick={() => {}} />
-          <MenuItem icon={<IconReport />} text="Menu item with icon" onClick={() => {}} />
+          <section style={style.wrapper}>
+            <MenuItem text="Active Menu item" onClick={() => {}} active />
+            <MenuItem text="Menu item" onClick={() => {}} />
+            <MenuItem icon={<IconReport />} text="Menu item with icon" onClick={() => {}} />
+            <MenuItem
+              rightButton={
+                <IconMenu
+                  icon={<IconMore />}
+                  header="Items"
+                  dividerText="More items"
+                >
+                  <MenuItem text="Active item" onClick={() => {}} active />
+                  <MenuItem text="Inactive item" onClick={() => {}} />
+                </IconMenu>
+              }
+              text="Menu item with rightButton"
+              onClick={() => {}}
+            />
+          </section>
         </Paper>
       </section>
       <Props props={componentData.props} />

src/menu-item/get-styles.js

@@ -2,15 +2,19 @@ import styles from './styles';
 import combineStyles from '../internal/combine-styles';
 import colors from '../settings/colors';
 
-const root = (color = colors.theme, iconElement, active, overrideStyle) => {
+const root = (color = colors.theme, iconElement, active, rightButton, overrideStyle) => {
   let style = styles.root;
 
   if (iconElement) {
     style = combineStyles(style, { paddingLeft: '40px' });
   }
 
   if (active) {
-    style = combineStyles(style, { color, paddingRight: '40px' });
+    style = combineStyles(style, { color, fontWeight: 'bolder' });
+  }
+
+  if (rightButton) {
+    style = combineStyles(style, { paddingRight: '56px' });
   }
 
   return combineStyles(style, overrideStyle);
@@ -20,12 +24,12 @@ const text = overrideStyle => combineStyles(styles.text, overrideStyle);
 
 const icon = overrideStyle => combineStyles(styles.icon, overrideStyle);
 
-const activeIcon = overrideStyle => combineStyles(styles.activeIcon, overrideStyle);
+const rightButton = overrideStyle => combineStyles(styles.rightButton, overrideStyle);
 
 
 export default {
   root,
   text,
   icon,
-  activeIcon
+  rightButton
 };

src/menu-item/index.jsx

@@ -2,8 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Radium from 'radium';
 import compose from 'recompose/compose';
-import colors from '../settings/colors';
-import IconSuccess from '../icons/icon-success';
 import getStyles from './get-styles';
 import themeable from '../themeable';
 
@@ -28,6 +26,8 @@ class MenuItem extends Component {
     iconStyle: PropTypes.instanceOf(Object),
     /** Closes IconMenu if MenuItem is child */
     closeMenu: PropTypes.func,
+    /** Right-hand side placed button */
+    rightButton: PropTypes.node,
     color: PropTypes.string.isRequired
   };
 
@@ -37,7 +37,8 @@ class MenuItem extends Component {
     style: {},
     textStyle: {},
     iconStyle: {},
-    closeMenu: null
+    closeMenu: null,
+    rightButton: null
   };
 
   static contextTypes = {
@@ -70,27 +71,22 @@ class MenuItem extends Component {
       active,
       closeMenu, // eslint-disable-line no-unused-vars
       onClick, // eslint-disable-line no-unused-vars
+      rightButton,
       color,
       ...custom
     } = this.props;
 
     return (
       <section
-        style={getStyles.root(color, icon, active, style)}
+        style={getStyles.root(color, icon, active, rightButton, style)}
         onClick={this.handleClick}
         {...custom}
       >
         {icon ? <div style={getStyles.icon(iconStyle)}>{icon}</div> : null}
         <p style={getStyles.text(textStyle)}>
           {text}
         </p>
-        {
-          active
-          ? <div style={getStyles.activeIcon(iconStyle)}>
-            <IconSuccess color={color || colors.theme} />
-          </div>
-          : null
-        }
+        {rightButton ? <div style={getStyles.rightButton(iconStyle)}>{rightButton}</div> : null}
       </section>
     );
   }

src/menu-item/styles.js

@@ -38,12 +38,12 @@ const styleSheet = {
     width: '24px',
     height: '24px'
   },
-  activeIcon: {
+  rightButton: {
     position: 'absolute',
-    top: '8px',
+    top: '0',
     right: '8px',
-    height: '24px',
-    width: '24px'
+    height: '40px',
+    width: '40px'
   }
 };
 

test/menu-item/get-styles.test.js

@@ -12,7 +12,7 @@ describe('MenuItem.getStyles', () => {
     });
 
     it('should combine styles', () => {
-      const style = getStyles.root('red', false, false, { color: 'red' });
+      const style = getStyles.root('blue', false, false, null, { color: 'red' });
 
       expect(style).to.have.property('color', 'red');
     });
@@ -26,7 +26,14 @@ describe('MenuItem.getStyles', () => {
     it('should add active styles', () => {
       const style = getStyles.root('red', false, true);
 
-      expect(style).to.have.property('paddingRight', '40px');
+      expect(style).to.have.property('color', 'red');
+      expect(style).to.have.property('fontWeight', 'bolder');
+    });
+
+    it('should add rightButton styles', () => {
+      const style = getStyles.root('red', false, false, true, {});
+
+      expect(style).to.have.property('paddingRight', '56px');
     });
   });
 
@@ -58,15 +65,15 @@ describe('MenuItem.getStyles', () => {
     });
   });
 
-  describe('activeIcon', () => {
+  describe('rightButton', () => {
     it('should get styles', () => {
-      const style = getStyles.activeIcon();
+      const style = getStyles.rightButton();
 
-      expect(style).to.deep.equal(styles.activeIcon);
+      expect(style).to.deep.equal(styles.rightButton);
     });
 
     it('should combine styles', () => {
-      const style = getStyles.activeIcon({ color: 'red' });
+      const style = getStyles.rightButton({ color: 'red' });
 
       expect(style).to.have.property('color', 'red');
     });