fix(listItem): allow for multiple md-secondary items

Fixes #2595. Closes #5958.
angular · Feb 1, 2016 · 3ffa0a2 · 3ffa0a2
1 parent 655eb0f
commit 3ffa0a2
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 15 deletions.
diff --git a/src/components/list/list.js b/src/components/list/list.js
@@ -53,7 +53,7 @@ function mdListDirective($mdTheming) {
  *
  * @description
  * The `<md-list-item>` directive is a container intended for row items in a `<md-list>` container.
- * The `md-2-line` and `md-3-line` classes can be added to a `<md-list-item>` 
+ * The `md-2-line` and `md-3-line` classes can be added to a `<md-list-item>`
  * to increase the height with 22px and 40px respectively.
  *
  * ## CSS
@@ -89,7 +89,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
     controller: 'MdListController',
     compile: function(tEl, tAttrs) {
       // Check for proxy controls (no ng-click on parent, and a control inside)
-      var secondaryItem = tEl[0].querySelector('.md-secondary');
+      var secondaryItems = tEl[0].querySelectorAll('.md-secondary');
       var hasProxiedElement;
       var proxyElement;
 
@@ -110,7 +110,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
           tEl.addClass('md-no-proxy');
         }
       }
-      wrapSecondary();
+      wrapSecondaryItems();
       setupToggleAria();
 
 
@@ -145,10 +145,27 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         tEl.append(container);
       }
 
-      function wrapSecondary() {
+      function wrapSecondaryItems() {
+        if (secondaryItems.length === 1) {
+          wrapSecondaryItem(secondaryItems[0], tEl);
+        } else if (secondaryItems.length > 1) {
+          var secondaryItemsWrapper = angular.element('<div class="md-secondary-container">');
+          angular.forEach(secondaryItems, function(secondaryItem) {
+            wrapSecondaryItem(secondaryItem, secondaryItemsWrapper, true);
+          });
+          tEl.append(secondaryItemsWrapper);
+        }
+      }
+
+      function wrapSecondaryItem(secondaryItem, container, hasSecondaryItemsWrapper) {
         if (secondaryItem && !isButton(secondaryItem) && secondaryItem.hasAttribute('ng-click')) {
           $mdAria.expect(secondaryItem, 'aria-label');
-          var buttonWrapper = angular.element('<md-button class="md-secondary-container md-icon-button">');
+          var buttonWrapper;
+          if (hasSecondaryItemsWrapper) {
+            buttonWrapper = angular.element('<md-button class="md-icon-button">');
+          } else {
+            buttonWrapper = angular.element('<md-button class="md-secondary-container md-icon-button">');
+          }
           copyAttributes(secondaryItem, buttonWrapper[0]);
           secondaryItem.setAttribute('tabindex', '-1');
           secondaryItem.classList.remove('md-secondary');
@@ -158,12 +175,13 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
 
         // Check for a secondary item and move it outside
         if ( secondaryItem && (
-            secondaryItem.hasAttribute('ng-click') ||
-            ( tAttrs.ngClick &&
-            isProxiedElement(secondaryItem) )
-          )) {
+                secondaryItem.hasAttribute('ng-click') ||
+                ( tAttrs.ngClick &&
+                isProxiedElement(secondaryItem) )
+            )) {
+          secondaryItem.classList.remove('md-secondary');
           tEl.addClass('md-with-secondary');
-          tEl.append(secondaryItem);
+          container.append(secondaryItem);
         }
       }
 

diff --git a/src/components/list/list.spec.js b/src/components/list/list.spec.js
@@ -134,11 +134,29 @@ describe('mdListItem directive', function() {
 
   it('moves md-secondary items outside of the button', function() {
     var listItem = setup('<md-list-item ng-click="sayHello()"><p>Hello World</p><md-icon class="md-secondary" ng-click="goWild()"></md-icon></md-list-item>');
-    var firstChild = listItem.children()[0];
-    expect(firstChild.nodeName).toBe('MD-BUTTON');
-    expect(firstChild.childNodes.length).toBe(1);
-    var secondChild = listItem.children()[1];
-    expect(secondChild.nodeName).toBe('MD-BUTTON');
+    var firstChild = listItem.children().eq(0);
+    expect(firstChild[0].nodeName).toBe('MD-BUTTON');
+    expect(firstChild.children().length).toBe(1);
+    var secondChild = listItem.children().eq(1);
+    expect(secondChild[0].nodeName).toBe('MD-BUTTON');
+    expect(secondChild.hasClass('md-secondary-container')).toBeTruthy();
+  });
+
+  it('moves multiple md-secondary items outside of the button', function() {
+    var listItem = setup('<md-list-item ng-click="sayHello()"><p>Hello World</p><md-icon class="md-secondary" ng-click="goWild()"><md-icon class="md-secondary" ng-click="goWild2()"></md-icon></md-list-item>');
+    var firstChild = listItem.children().eq(0);
+    expect(firstChild[0].nodeName).toBe('MD-BUTTON');
+    expect(firstChild.children().length).toBe(1);
+    var secondChild = listItem.children().eq(1);
+    expect(secondChild[0].nodeName).toBe('DIV');
+    expect(secondChild.hasClass('md-secondary-container')).toBeTruthy();
+    expect(secondChild.children().length).toBe(2);
+    var secondaryBtnOne = secondChild.children().eq(0);
+    expect(secondaryBtnOne[0].nodeName).toBe('MD-BUTTON');
+    expect(secondaryBtnOne.hasClass('md-secondary-container')).toBeFalsy();
+    var secondaryBtnTwo = secondChild.children().eq(1);
+    expect(secondaryBtnTwo[0].nodeName).toBe('MD-BUTTON');
+    expect(secondaryBtnTwo.hasClass('md-secondary-container')).toBeFalsy();
   });
 
   it('should detect non-compiled md-buttons', function() {