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

src/DropDownMenu/DropDownMenu.js

@@ -118,6 +118,14 @@ class DropDownMenu extends Component {
      * The maximum height of the `Menu` when it is displayed.
      */
     maxHeight: PropTypes.number,
+    /**
+     * Override the inline-styles of selected menu items.
+     */
+    menuItemSelectedStyle: PropTypes.object,
+    /**
+     * Override the inline-styles of menu items.
+     */
+    menuItemStyle: PropTypes.object,
     /**
      * Overrides the styles of `Menu` when the `DropDownMenu` is displayed.
      */
@@ -253,6 +261,8 @@ class DropDownMenu extends Component {
       maxHeight,
       menuStyle: menuStyleProp,
       openImmediately, // eslint-disable-line no-unused-vars
+      menuItemStyle,
+      menuItemSelectedStyle,
       style,
       underlineStyle,
       value,
@@ -315,6 +325,8 @@ class DropDownMenu extends Component {
             style={menuStyle}
             listStyle={listStyle}
             onItemTouchTap={this.handleItemTouchTap}
+            menuItemStyle={menuItemStyle}
+            menuItemSelectedStyle={menuItemSelectedStyle}
           >
             {children}
           </Menu>

src/DropDownMenu/DropDownMenu.spec.js

@@ -20,4 +20,36 @@ describe('<DropDownMenu />', () => {
 
     assert.strictEqual(wrapper.childAt(0).childAt(0).childAt(0).node, 'Never');
   });
+
+  it('passes expected props through to the underlying Menu', () => {
+    const props = {
+      listStyle: {color: 'black'},
+      maxHeight: 10,
+      menuStyle: {color: 'white'},
+      menuItemStyle: {fontWeight: 'bold'},
+      menuItemSelectedStyle: {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,
+      menuItemSelectedStyle: props.menuItemSelectedStyle,
+      style: props.menuStyle,
+      value: props.value,
+    });
+  });
 });

src/Menu/Menu.js

@@ -78,6 +78,14 @@ class Menu extends Component {
      * height.
      */
     maxHeight: PropTypes.number,
+     /**
+     * Override the inline-styles of selected menu items.
+     */
+    menuItemSelectedStyle: PropTypes.object,
+    /**
+     * 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,10 +119,6 @@ class Menu extends Component {
     onItemTouchTap: PropTypes.func,
     /** @ignore */
     onKeyDown: PropTypes.func,
-    /**
-     * Override the inline-styles of selected menu items.
-     */
-    selectedMenuItemStyle: PropTypes.object,
     /**
      * Override the inline-styles of the root element.
      */
@@ -233,17 +237,18 @@ class Menu extends Component {
   cloneMenuItem(child, childIndex, styles, index) {
     const {
       desktop,
-      selectedMenuItemStyle,
+      menuItemStyle,
+      menuItemSelectedStyle,
     } = this.props;
 
     const selected = this.isChildSelected(child, this.props);
     let selectedChildrenStyles = {};
 
     if (selected) {
-      selectedChildrenStyles = Object.assign(styles.selectedMenuItem, selectedMenuItemStyle);
+      selectedChildrenStyles = Object.assign(styles.selectedMenuItem, menuItemSelectedStyle);
     }
 
-    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';
@@ -450,7 +455,8 @@ class Menu extends Component {
       multiple, // eslint-disable-line no-unused-vars
       onItemTouchTap, // eslint-disable-line no-unused-vars
       onEscKeyDown, // eslint-disable-line no-unused-vars
-      selectedMenuItemStyle, // eslint-disable-line no-unused-vars
+      menuItemSelectedStyle, // 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

@@ -87,6 +87,14 @@ class SelectField extends Component {
      * Override the default max-height of the underlying `DropDownMenu` element.
      */
     maxHeight: PropTypes.number,
+    /**
+     * Override the inline-styles of selected menu items.
+     */
+    menuItemSelectedStyle: PropTypes.object,
+    /**
+     * Override the inline-styles of menu items.
+     */
+    menuItemStyle: PropTypes.object,
     /**
      * Override the inline-styles of the underlying `DropDownMenu` element.
      */
@@ -148,6 +156,8 @@ class SelectField extends Component {
       id,
       underlineDisabledStyle,
       underlineFocusStyle,
+      menuItemStyle,
+      menuItemSelectedStyle,
       underlineStyle,
       errorStyle,
       disabled,
@@ -194,6 +204,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}
+          menuItemSelectedStyle={menuItemSelectedStyle}
           underlineStyle={styles.hideDropDownUnderline}
           autoWidth={autoWidth}
           value={value}