[ListItem] allowing for nestedindicator with righticonbutton presents

docs/src/app/components/pages/components/List/ExampleNested.jsx

@@ -6,17 +6,27 @@ import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
 import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
 import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
 import ContentSend from 'material-ui/lib/svg-icons/content/send';
+import IconButton from 'material-ui/lib/icon-button';
 
 const ListExampleNested = () => (
   <MobileTearSheet>
     <List subheader="Nested List Items">
-      <ListItem primaryText="Sent mail" leftIcon={<ContentSend />} />
-      <ListItem primaryText="Drafts" leftIcon={<ContentDrafts />} />
+      <ListItem
+        primaryText="Sent mail"
+        leftIcon={<ContentSend />}
+        rightIconButton={<IconButton iconClassName="material-icons">delete</IconButton>}
+      />
+      <ListItem
+        primaryText="Drafts"
+        leftIcon={<ContentDrafts />}
+        rightIconButton={<IconButton iconClassName="material-icons">delete</IconButton>}
+      />
       <ListItem
         primaryText="Inbox"
         leftIcon={<ContentInbox />}
         initiallyOpen={true}
-        primaryTogglesNestedList={true}
+        rightIconButton={<IconButton iconClassName="material-icons">delete</IconButton>}
+        primaryTogglesNestedList={false}
         nestedItems={[
           <ListItem
             key={1}

package.json

@@ -11,6 +11,7 @@
     "prebuild": "rimraf lib",
     "lint": "gulp eslint:src && gulp eslint:docs && gulp eslint:test",
     "build": "babel ./src --out-dir ./lib",
+    "build:watch": "babel ./src --watch --out-dir ./lib",
     "prepublish": "npm run build"
   },
   "keywords": [

src/lists/list-item.jsx

@@ -521,6 +521,13 @@ const ListItem = React.createClass({
         WebkitLineClamp: threeLine ? 2 : null,
         WebkitBoxOrient: threeLine ? 'vertical' : null,
       },
+
+      rightIcons: {
+        display: 'flex',
+        position: 'absolute',
+        right: 0,
+        top: 0,
+      },
     };
 
     let contentChildren = [children];
@@ -567,33 +574,49 @@ const ListItem = React.createClass({
 
     //RightIconButtonElement
     const hasNestListItems = nestedItems.length;
-    const hasRightElement = rightAvatar || rightIcon || rightIconButton || rightToggle;
-    const needsNestedIndicator = hasNestListItems && autoGenerateNestedIndicator && !hasRightElement;
-
-    if (rightIconButton || needsNestedIndicator) {
-      let rightIconButtonElement = rightIconButton;
-      let rightIconButtonHandlers = {
-        onKeyboardFocus: this._handleRightIconButtonKeyboardFocus,
-        onMouseEnter: this._handleRightIconButtonMouseEnter,
-        onMouseLeave: this._handleRightIconButtonMouseLeave,
-        onTouchTap: this._handleRightIconButtonTouchTap,
-        onMouseDown: this._handleRightIconButtonMouseUp,
-        onMouseUp: this._handleRightIconButtonMouseUp,
-      };
-
-      // Create a nested list indicator icon if we don't have an icon on the right
-      if (needsNestedIndicator) {
-        rightIconButtonElement = this.state.open ?
-          <IconButton><OpenIcon /></IconButton> :
-          <IconButton><CloseIcon /></IconButton>;
-        rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle;
-      }
+    const needsNestedIndicator = hasNestListItems && autoGenerateNestedIndicator;
+
+    const rightIcons = [];
+    let rightIconButtonHandlers = {
+      onKeyboardFocus: this._handleRightIconButtonKeyboardFocus,
+      onMouseEnter: this._handleRightIconButtonMouseEnter,
+      onMouseLeave: this._handleRightIconButtonMouseLeave,
+      onTouchTap: this._handleRightIconButtonTouchTap,
+      onMouseDown: this._handleRightIconButtonMouseUp,
+      onMouseUp: this._handleRightIconButtonMouseUp,
+    };
+
+    if (needsNestedIndicator) {
+      let nestedIndicator = this.state.open ?
+        <IconButton><OpenIcon /></IconButton> :
+        <IconButton><CloseIcon /></IconButton>;
+      rightIconButtonHandlers.onTouchTap = this._handleNestedListToggle;
+      rightIcons.push(
+        React.cloneElement(
+          nestedIndicator,
+          {
+            key: rightIcons.length, ...rightIconButtonHandlers,
+          }
+        )
+      );
+    }
+
+    if (rightIconButton) {
+      delete rightIconButtonHandlers.onTouchTap;
+      let rightIconButtonElement = React.cloneElement(
+        rightIconButton,
+        {
+          key: rightIcons.length, ...rightIconButtonHandlers,
+        }
+      );
+      rightIcons.push(rightIconButtonElement);
+    }
 
+    if (rightIcons.length > 0) {
       this._pushElement(
         contentChildren,
-        rightIconButtonElement,
-        this.mergeStyles(styles.rightIconButton),
-        rightIconButtonHandlers
+        <div>{rightIcons}</div>,
+        styles.rightIcons
       );
     }