diff --git a/docs/components.json b/docs/components.json index 90066ed1..54a2cb02 100644 --- a/docs/components.json +++ b/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" diff --git a/docs/src/components/menu-item.jsx b/docs/src/components/menu-item.jsx index b7d12e16..ee24da3a 100644 --- a/docs/src/components/menu-item.jsx +++ b/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} /> diff --git a/src/menu-item/get-styles.js b/src/menu-item/get-styles.js index ae18553c..9c7fd7f7 100644 --- a/src/menu-item/get-styles.js +++ b/src/menu-item/get-styles.js @@ -2,7 +2,7 @@ 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) { @@ -10,7 +10,11 @@ const root = (color = colors.theme, iconElement, active, overrideStyle) => { } 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 }; diff --git a/src/menu-item/index.jsx b/src/menu-item/index.jsx index d168cd04..5f6943e8 100644 --- a/src/menu-item/index.jsx +++ b/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,13 +71,14 @@ 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} > @@ -84,13 +86,7 @@ class MenuItem extends Component { <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> ); } diff --git a/src/menu-item/styles.js b/src/menu-item/styles.js index 2657b9c9..07c3162f 100644 --- a/src/menu-item/styles.js +++ b/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' } }; diff --git a/test/menu-item/get-styles.test.js b/test/menu-item/get-styles.test.js index 8736bc17..87838d25 100644 --- a/test/menu-item/get-styles.test.js +++ b/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'); });