fix(list): Don't wrap secondary buttons in a button.

We currently wrap many `.md-secondary` items in an extra button
for accessibility purposes. However, there is no need to wrap an
existing button inside an additional one as it creates odd
behavior and styling.

Additionally, fix some styles so that secondary buttons render
properly (position was off due to margins).

Lastly, add some new demo code to show how to use this functionality.

Fixes #3176. Closes #5721

Author: topherfangio

src/components/list/demoListControls/index.html

@@ -1,4 +1,5 @@
 <md-list ng-controller="ListCtrl" ng-cloak>
+
   <md-subheader class="md-no-sticky">Single Action Checkboxes</md-subheader>
   <md-list-item ng-repeat="topping in toppings">
     <p> {{ topping.name }} </p>
@@ -7,6 +8,18 @@
 
   <md-divider></md-divider>
 
+  <md-subheader class="md-no-sticky">Secondary Buttons</md-subheader>
+  <md-list-item class="secondary-button-padding">
+    <p>Clicking the button to the right will fire the secondary action</p>
+    <md-button class="md-secondary" ng-click="doSecondaryAction($event)">More Info</md-button>
+  </md-list-item>
+  <md-list-item class="secondary-button-padding" ng-click="doPrimaryAction($event)">
+    <p>Click anywhere to fire the primary action, or the button to fire the secondary</p>
+    <md-button class="md-secondary" ng-click="doSecondaryAction($event)">More Info</md-button>
+  </md-list-item>
+
+  <md-divider></md-divider>
+
   <md-subheader class="md-no-sticky">Clickable Items with Secondary Controls</md-subheader>
   <md-list-item ng-click="navigateTo(setting.extraScreen, $event)" ng-repeat="setting in settings">
     <md-icon md-svg-icon="{{setting.icon}}"></md-icon>

src/components/list/demoListControls/script.js

@@ -53,6 +53,17 @@ angular.module('listDemo2', ['ngMaterial'])
     );
   };
 
+  $scope.doPrimaryAction = function(event) {
+    $mdDialog.show(
+      $mdDialog.alert()
+        .title('Primary Action')
+        .content('Primary actions can be used for one click actions')
+        .ariaLabel('Primary click demo')
+        .ok('Awesome!')
+        .targetEvent(event)
+    );
+  };
+
   $scope.doSecondaryAction = function(event) {
     $mdDialog.show(
       $mdDialog.alert()

src/components/list/demoListControls/style.css

@@ -12,3 +12,8 @@ md-list-item .md-list-item-inner > .md-list-item-inner > p {
     -ms-user-select: none; /* IE 10+ */
     user-select: none; /* Likely future */
 }
+
+/* Add some right padding so that the text doesn't overlap the buttons */
+.secondary-button-padding p {
+    padding-right: 100px;
+}

src/components/list/list.js

@@ -150,7 +150,7 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         tEl[0].setAttribute('tabindex', '-1');
         tEl.append(container);
 
-        if (secondaryItem && secondaryItem.hasAttribute('ng-click')) {
+        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">');
           buttonWrapper.attr('ng-click', secondaryItem.getAttribute('ng-click'));
@@ -176,6 +176,12 @@ function mdListItemDirective($mdAria, $mdConstant, $mdUtil, $timeout) {
         return proxiedTypes.indexOf(el.nodeName.toLowerCase()) != -1;
       }
 
+      function isButton(el) {
+        var nodeName = el.nodeName.toUpperCase();
+
+        return nodeName == "MD-BUTTON" || nodeName == "BUTTON";
+      }
+
       return postLink;
 
       function postLink($scope, $element, $attr, ctrl) {

src/components/list/list.scss

@@ -171,15 +171,15 @@ md-list-item, md-list-item .md-list-item-inner {
 
   .md-secondary-container,
   .md-secondary {
-    margin-left: $list-item-secondary-left-margin;
     position: absolute;
-    right: $list-item-padding-horizontal;
     top: 50%;
+    right: $list-item-padding-horizontal;
+    margin: 0 0 0 $list-item-secondary-left-margin;
     transform: translate3d(0, -50%, 0);
   }
 
   & > .md-button.md-secondary-container > .md-secondary {
-    margin-left: 0px;
+    margin-left: 0;
     position: static;
   }
 

src/components/list/list.spec.js

@@ -157,4 +157,56 @@ describe('mdListItem directive', function() {
     expect(listItem.hasClass('md-no-proxy')).toBeTruthy();
   });
 
+  describe('with a clickable item', function() {
+
+    it('should wrap secondary icons in a md-button', function() {
+      var listItem = setup(
+        '<md-list-item ng-click="something()">' +
+        '  <p>Content Here</p>' +
+        '  <md-icon class="md-secondary" ng-click="heart()">heart</md-icon>' +
+        '</md-list-item>'
+      );
+
+      var buttons = listItem.find('md-button');
+
+      // Check that we wrapped the icon
+      expect(listItem[0].querySelector('md-button > md-icon')).toBeTruthy();
+
+      // Check the button actions
+      expect(buttons[0].attributes['ng-click'].value).toBe("something()");
+      expect(buttons[1].attributes['ng-click'].value).toBe("heart()");
+    });
+
+    it('should not wrap secondary buttons in a md-button', function() {
+      var listItem = setup(
+        '<md-list-item ng-click="something()">' +
+        '  <p>Content Here</p>' +
+        '  <button class="md-secondary" ng-click="like()">Like</button>' +
+        '</md-list-item>'
+      );
+
+      // There should only be 1 md-button (the wrapper) and one button (the unwrapped one)
+      expect(listItem.find('md-button').length).toBe(1);
+      expect(listItem.find('button').length).toBe(1);
+
+      // Check that we didn't wrap the button in an md-button
+      expect(listItem[0].querySelector('md-button button')).toBeFalsy();
+    });
+
+    it('should not wrap secondary md-buttons in a md-button', function() {
+      var listItem = setup(
+        '<md-list-item ng-click="something()">' +
+        '  <p>Content Here</p>' +
+        '  <md-button class="md-secondary" ng-click="like()">Like</md-button>' +
+        '</md-list-item>'
+      );
+
+      // There should be 2 md-buttons that are siblings
+      expect(listItem.find('md-button').length).toBe(2);
+
+      // Check that we didn't wrap the md-button in an md-button
+      expect(listItem[0].querySelector('md-button md-button')).toBeFalsy();
+    });
+  });
+
 });