diff --git a/src/app-bar.jsx b/src/app-bar.jsx index 85b476d0972c57..f808ec487ad930 100644 --- a/src/app-bar.jsx +++ b/src/app-bar.jsx @@ -6,7 +6,7 @@ import Paper from './paper'; import PropTypes from './utils/prop-types'; import warning from 'warning'; -function getStyles(props, state) { +export function getStyles(props, state) { const { appBar, button: { @@ -98,6 +98,11 @@ const AppBar = React.createClass({ */ iconElementRight: React.PropTypes.element, + /** + * Override the inline-styles of the element displayed on the left side of the app bar. + */ + iconStyleLeft: React.PropTypes.object, + /** * Override the inline-styles of the element displayed on the right side of the app bar. */ @@ -216,6 +221,7 @@ const AppBar = React.createClass({ const { title, titleStyle, + iconStyleLeft, iconStyleRight, showMenuIconButton, iconElementLeft, @@ -247,6 +253,8 @@ const AppBar = React.createClass({ style: prepareStyles(Object.assign(styles.title, styles.mainElement, titleStyle)), }, title); + const iconLeftStyle = Object.assign({}, styles.iconButtonStyle, iconStyleLeft); + if (showMenuIconButton) { let iconElementLeftNode = iconElementLeft; @@ -260,7 +268,7 @@ const AppBar = React.createClass({ } menuElementLeft = ( -
+
{iconElementLeftNode}
); @@ -268,7 +276,7 @@ const AppBar = React.createClass({ const child = iconClassNameLeft ? '' : ; menuElementLeft = ( ', () => { assert.equal(wrapper.find(Paper).get(0).props.zDepth, 2, 'should have zDepth to 2'); }); + + it('menuElementLeft\'s style should be iconButtonStyle', () => { + const wrapper = shallow( + + ); + + const menuElementLeft = wrapper.find(IconButton).get(0); + const style = menuElementLeft.props.style; + const iconButtonStyle = getStyles(wrapper.props(), wrapper.state()).iconButtonStyle; + assert.deepEqual(style, iconButtonStyle, 'style should be iconButtonStyle'); + }); + + it('if pass iconStyleLeft={marginTop}, change the marginTop only', () => { + const wrapper = shallow( + + ); + + const menuElementLeft = wrapper.find(IconButton).get(0); + const style = menuElementLeft.props.style; + const iconButtonStyle = getStyles(wrapper.props(), wrapper.state()).iconButtonStyle; + const expectedStyle = Object.assign({}, iconButtonStyle, {marginTop: 99}); + assert.deepEqual(style, expectedStyle, 'should be change style.marginTop only'); + }); + + it('if pass iconElementLeft and iconStyleLeft={marginTop}, change the marginTop only', () => { + const wrapper = shallow( + foo} iconStyleLeft={{marginTop: 99}} /> + ); + + const menuElementLeft = wrapper.find('div').get(0); + const style = menuElementLeft.props.style; + const iconButtonStyle = getStyles(wrapper.props(), wrapper.state()).iconButtonStyle; + const expectedStyle = Object.assign({}, iconButtonStyle, {marginTop: 99}); + assert.deepEqual(style, expectedStyle, 'should be change style.marginTop only'); + }); });