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');
+ });
});