[Menu][DropDownMenu][SelectField] menuItemStyle & menuItemSelectedSty…

…le (#5389)

* [Menu][DropDownMenu][SelectField] menuItemStyle & menuItemSelectedStyle

* [Menu][DropDownMenu][SelectField] eslint cleaned

* [Snackbar] added prop.position to enable positioning on top of the page

* [Snackbar] position: PropTypes.oneOf([top, bottom])

* menuItemSelectedStyle => selectedMenuItemStyle

* reverted Snackbar to state before  "Snackbar/position" merge

* removed "space typo"

* removed trailing comma (eslint showed it as error so i added it... but travis doesnt like it)

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.
@@ -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}