[AppBar] Add iconStyleLeft prop (fix mui#3667)

- Add export `getStyles` of app-bar.js for test
alitaheri · Jun 16, 2016 · 6d2147f · 6d2147f
1 parent 711c63a
commit 6d2147f
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 4 deletions.
diff --git 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;
 
@@ -220,15 +227,15 @@ class AppBar extends Component {
         }
 
         menuElementLeft = (
-          <div style={prepareStyles(Object.assign({}, styles.iconButtonStyle))}>
+          <div style={prepareStyles(iconLeftStyle)}>
             {iconElementLeftNode}
           </div>
         );
       } else {
         const child = iconClassNameLeft ? '' : <NavigationMenu style={Object.assign({}, styles.iconButtonIconStyle)} />;
         menuElementLeft = (
           <IconButton
-            style={styles.iconButtonStyle}
+            style={iconLeftStyle}
             iconStyle={styles.iconButtonIconStyle}
             iconClassName={iconClassNameLeft}
             onTouchTap={this.handleTouchTapLeftIconButton}

diff --git a/src/AppBar/AppBar.spec.js b/src/AppBar/AppBar.spec.js
@@ -3,8 +3,9 @@ import React from 'react';
 import sinon from 'sinon';
 import {shallow} from 'enzyme';
 import {assert} from 'chai';
-import AppBar from './AppBar';
+import AppBar, {getStyles} from './AppBar';
 import getMuiTheme from '../styles/getMuiTheme';
+import IconButton from '../IconButton';
 
 describe('<AppBar />', () => {
   const muiTheme = getMuiTheme();
@@ -171,4 +172,39 @@ describe('<AppBar />', () => {
 
     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(
+      <AppBar />
+    );
+
+    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(
+      <AppBar iconStyleLeft={{marginTop: 99}} />
+    );
+
+    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(
+      <AppBar iconElementLeft={<span>foo</span>} 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');
+  });
 });