[Menu][DropDownMenu][SelectField] Add menuItemStyle and menuItemSelectedStyle properties

src/DropDownMenu/DropDownMenu.js

@@ -121,6 +121,10 @@ class DropDownMenu extends Component {
      * The maximum height of the `Menu` when it is displayed.
      */
     maxHeight: PropTypes.number,
+    /**
+     * Override the inline-styles of menu items.
+     */
+    menuItemStyle: PropTypes.object,
     /**
      * Overrides the styles of `Menu` when the `DropDownMenu` is displayed.
      */
@@ -141,6 +145,10 @@ class DropDownMenu extends Component {
      * Set to true to have the `DropDownMenu` automatically open on mount.
      */
     openImmediately: PropTypes.bool,
+    /**
+     * Override the inline-styles of selected menu items.
+     */
+    selectedMenuItemStyle: PropTypes.object,
     /**
      * Override the inline-styles of the root element.
      */
@@ -268,6 +276,8 @@ class DropDownMenu extends Component {
       menuStyle: menuStyleProp,
       onClose, // eslint-disable-line no-unused-vars
       openImmediately, // eslint-disable-line no-unused-vars
+      menuItemStyle,
+      selectedMenuItemStyle,
       style,
       underlineStyle,
       value,
@@ -330,6 +340,8 @@ class DropDownMenu extends Component {
             style={menuStyle}
             listStyle={listStyle}
             onItemTouchTap={this.handleItemTouchTap}
+            menuItemStyle={menuItemStyle}
+            selectedMenuItemStyle={selectedMenuItemStyle}
           >
             {children}
           </Menu>

src/DropDownMenu/DropDownMenu.spec.js

@@ -60,4 +60,36 @@ describe('<DropDownMenu />', () => {
       }, 0);
     });
   });
+
+  it('passes expected props through to the underlying Menu', () => {
+    const props = {
+      listStyle: {color: 'black'},
+      maxHeight: 10,
+      menuStyle: {color: 'white'},
+      menuItemStyle: {fontWeight: 'bold'},
+      selectedMenuItemStyle: {color: 'blue'},
+      value: 1,
+    };
+
+    const wrapper = shallowWithContext(
+      <DropDownMenu
+        {...props}
+      >
+        <div value={1} primaryText="Never" />
+        <div value={2} primaryText="Every Night" />
+        <div value={3} primaryText="Weeknights" />
+      </DropDownMenu>
+    );
+
+    const menu = wrapper.childAt(1).childAt(0);
+    assert.include(menu.props(), {
+      desktop: true,
+      listStyle: props.listStyle,
+      maxHeight: props.maxHeight,
+      menuItemStyle: props.menuItemStyle,
+      selectedMenuItemStyle: props.selectedMenuItemStyle,
+      style: props.menuStyle,
+      value: props.value,
+    });
+  });
 });

src/Menu/Menu.js

@@ -78,6 +78,10 @@ class Menu extends Component {
      * height.
      */
     maxHeight: PropTypes.number,
+    /**
+     * Override the inline-styles of menu items.
+     */
+    menuItemStyle: PropTypes.object,
     /**
      * If true, `value` must be an array and the menu will support
      * multiple selections.
@@ -111,7 +115,7 @@ class Menu extends Component {
     onItemTouchTap: PropTypes.func,
     /** @ignore */
     onKeyDown: PropTypes.func,
-    /**
+     /**
      * Override the inline-styles of selected menu items.
      */
     selectedMenuItemStyle: PropTypes.object,
@@ -233,6 +237,7 @@ class Menu extends Component {
   cloneMenuItem(child, childIndex, styles, index) {
     const {
       desktop,
+      menuItemStyle,
       selectedMenuItemStyle,
     } = this.props;
 
@@ -243,7 +248,7 @@ class Menu extends Component {
       selectedChildrenStyles = Object.assign(styles.selectedMenuItem, selectedMenuItemStyle);
     }
 
-    const mergedChildrenStyles = Object.assign({}, child.props.style, selectedChildrenStyles);
+    const mergedChildrenStyles = Object.assign({}, child.props.style, menuItemStyle, selectedChildrenStyles);
 
     const isFocused = childIndex === this.state.focusIndex;
     let focusState = 'none';
@@ -475,6 +480,7 @@ class Menu extends Component {
       onItemTouchTap, // eslint-disable-line no-unused-vars
       onEscKeyDown, // eslint-disable-line no-unused-vars
       selectedMenuItemStyle, // eslint-disable-line no-unused-vars
+      menuItemStyle, // eslint-disable-line no-unused-vars
       style,
       value, // eslint-disable-line no-unused-vars
       valueLink, // eslint-disable-line no-unused-vars

src/SelectField/SelectField.js

@@ -91,6 +91,10 @@ class SelectField extends Component {
      * Override the default max-height of the underlying `DropDownMenu` element.
      */
     maxHeight: PropTypes.number,
+    /**
+     * Override the inline-styles of menu items.
+     */
+    menuItemStyle: PropTypes.object,
     /**
      * Override the inline-styles of the underlying `DropDownMenu` element.
      */
@@ -108,6 +112,10 @@ class SelectField extends Component {
     onChange: PropTypes.func,
     /** @ignore */
     onFocus: PropTypes.func,
+    /**
+     * Override the inline-styles of selected menu items.
+     */
+    selectedMenuItemStyle: PropTypes.object,
     /**
      * Override the inline-styles of the root element.
      */
@@ -152,6 +160,8 @@ class SelectField extends Component {
       id,
       underlineDisabledStyle,
       underlineFocusStyle,
+      menuItemStyle,
+      selectedMenuItemStyle,
       underlineStyle,
       errorStyle,
       disabled,
@@ -199,6 +209,8 @@ class SelectField extends Component {
           style={Object.assign(styles.dropDownMenu, menuStyle)}
           labelStyle={Object.assign(styles.label, labelStyle)}
           iconStyle={Object.assign(styles.icon, iconStyle)}
+          menuItemStyle={menuItemStyle}
+          selectedMenuItemStyle={selectedMenuItemStyle}
           underlineStyle={styles.hideDropDownUnderline}
           listStyle={listStyle}
           autoWidth={autoWidth}

src/Snackbar/Snackbar.js

@@ -17,17 +17,27 @@ function getStyles(props, context, state) {
 
   const {open} = state;
 
+  const {position} = props;
+  const positionProperties = {};
+  let transitionOperator = '';
+  if (position === 'top') {
+    positionProperties.top = 0;
+    transitionOperator = '-';
+  } else {
+    positionProperties.bottom = 0;
+  }
+
   const styles = {
     root: {
       position: 'fixed',
+      ...positionProperties,
       left: '50%',
       display: 'flex',
-      bottom: 0,
       zIndex: zIndex.snackbar,
       visibility: open ? 'visible' : 'hidden',
       transform: open ?
         'translate(-50%, 0)' :
-        `translate(-50%, ${desktopSubheaderHeight}px)`,
+        `translate(-50%, ${transitionOperator}${desktopSubheaderHeight}px)`,
       transition: `${transitions.easeOut('400ms', 'transform')}, ${
         transitions.easeOut('400ms', 'visibility')}`,
     },
@@ -92,12 +102,20 @@ class Snackbar extends Component {
      * Controls whether the `Snackbar` is opened or not.
      */
     open: PropTypes.bool.isRequired,
+    /**
+     * Defines if the Snackbar is positioned on bottom or on top of the page
+     */
+    position: PropTypes.oneOf(['top', 'bottom']),
     /**
      * Override the inline-styles of the root element.
      */
     style: PropTypes.object,
   };
 
+  static defaultProps = {
+    position: 'top',
+  };
+
   static contextTypes = {
     muiTheme: PropTypes.object.isRequired,
   };