diff --git a/src/AppBar/AppBar.js b/src/AppBar/AppBar.js
index faed5f52f15180..63ffadcd582029 100644
--- a/src/AppBar/AppBar.js
+++ b/src/AppBar/AppBar.js
@@ -5,7 +5,7 @@ import Paper from '../Paper';
import propTypes from '../utils/propTypes';
import warning from 'warning';
-function getStyles(props, context) {
+export function getStyles(props, context) {
const {
appBar,
button: {
@@ -92,6 +92,10 @@ class AppBar extends Component {
* Similiar to the iconElementLeft prop except that this element is displayed on the right of the app bar.
*/
iconElementRight: PropTypes.element,
+ /**
+ * Override the inline-styles of the element displayed on the left side of the app bar.
+ */
+ iconStyleLeft: PropTypes.object,
/**
* Override the inline-styles of the element displayed on the right side of the app bar.
*/
@@ -178,6 +182,7 @@ class AppBar extends Component {
const {
title,
titleStyle,
+ iconStyleLeft,
iconStyleRight,
showMenuIconButton,
iconElementLeft,
@@ -206,6 +211,8 @@ class AppBar extends Component {
style: prepareStyles(Object.assign(styles.title, styles.mainElement, titleStyle)),
}, title);
+ const iconLeftStyle = Object.assign({}, styles.iconButtonStyle, iconStyleLeft);
+
if (showMenuIconButton) {
let iconElementLeftNode = iconElementLeft;
@@ -217,7 +224,7 @@ class AppBar extends Component {
}
menuElementLeft = (
-
+
{iconElementLeftNode}
);
@@ -225,7 +232,7 @@ class AppBar extends Component {
const child = iconClassNameLeft ? '' :
;
menuElementLeft = (
', () => {
const muiTheme = getMuiTheme();
@@ -171,4 +172,39 @@ describe('
', () => {
assert.equal(wrapper.find('Paper').get(0).props.zDepth, 2, 'should have zDepth to 2');
});
+
+ it('menuElementLeft\'s style should be iconButtonStyle', () => {
+ const wrapper = shallowWithContext(
+
+ );
+
+ const menuElementLeft = wrapper.find(IconButton).get(0);
+ const style = menuElementLeft.props.style;
+ const iconButtonStyle = getStyles(wrapper.props(), wrapper.context()).iconButtonStyle;
+ assert.deepEqual(style, iconButtonStyle, 'style should be iconButtonStyle');
+ });
+
+ it('if pass iconStyleLeft={marginTop}, change the marginTop only', () => {
+ const wrapper = shallowWithContext(
+
+ );
+
+ const menuElementLeft = wrapper.find(IconButton).get(0);
+ const style = menuElementLeft.props.style;
+ const iconButtonStyle = getStyles(wrapper.props(), wrapper.context()).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/muiPrepared only', () => {
+ const wrapper = shallowWithContext(
+
foo} iconStyleLeft={{marginTop: 99}} />
+ );
+
+ const menuElementLeft = wrapper.find('div').get(0);
+ const style = menuElementLeft.props.style;
+ const iconButtonStyle = getStyles(wrapper.props(), wrapper.context()).iconButtonStyle;
+ const expectedStyle = Object.assign({}, iconButtonStyle, {marginTop: 99, muiPrepared: true});
+ assert.deepEqual(style, expectedStyle, 'should be change style.marginTop/muiPrepared only');
+ });
});