From 927d8e5612c60afb7c18e4c697dc0e343f28e963 Mon Sep 17 00:00:00 2001
From: Ryan Schmukler <rschmukler@gmail.com>
Date: Thu, 16 Apr 2015 17:40:17 -0400
Subject: [PATCH] feat(list): add ripple to secondary to md-list actions

closes #2340
---
 src/components/list/list.js   |  7 +++++++
 src/components/list/list.scss | 21 +++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/src/components/list/list.js b/src/components/list/list.js
index d1e86033309..43993146e83 100644
--- a/src/components/list/list.js
+++ b/src/components/list/list.js
@@ -131,6 +131,13 @@ function mdListItemDirective($mdAria, $mdConstant) {
 
         if (secondaryItem && secondaryItem.hasAttribute('ng-click')) {
           $mdAria.expect(secondaryItem, 'aria-label');
+          var buttonWrapper = angular.element('<md-button class="md-secondary-container">');
+          buttonWrapper.attr('ng-click', secondaryItem.getAttribute('ng-click'));
+          secondaryItem.removeAttribute('ng-click');
+          secondaryItem.setAttribute('tabindex', '-1');
+          secondaryItem.classList.remove('md-secondary');
+          buttonWrapper.append(secondaryItem);
+          secondaryItem = buttonWrapper[0];
         }
 
         // Check for a secondary item and move it outside
diff --git a/src/components/list/list.scss b/src/components/list/list.scss
index b3ddbe80fd0..2f3c0e2306b 100644
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@@ -72,6 +72,7 @@ md-list-item, md-list-item .md-list-item-inner {
   justify-content: flex-start;
   align-items: center;
 
+
   // Layout for controls in primary or secondary divs, or auto-infered first child
   & > div.md-primary > md-icon,
   & > div.md-secondary > md-icon,
@@ -130,6 +131,21 @@ md-list-item, md-list-item .md-list-item-inner {
   md-switch.md-secondary {
     margin-right: 0;
   }
+
+  button.md-button.md-secondary-container {
+    width: $list-item-primary-icon-width;
+    align-self: center;
+    margin-right: 0px;
+    box-sizing: content-box;
+    border-radius: 50%;
+    min-width: 0px;
+    .md-ripple,
+    .md-ripple-container {
+      border-radius: 50%;
+    }
+  }
+
+  .md-secondary-container,
   .md-secondary {
     margin-left: $list-item-secondary-left-margin;
     position: absolute;
@@ -137,6 +153,11 @@ md-list-item, md-list-item .md-list-item-inner {
     top: 0;
   }
 
+  & > .md-button.md-secondary-container > .md-secondary {
+    margin-left: 0px;
+    position: static;
+  }
+
   & > p, & > .md-list-item-inner > p {
     flex: 1;
     margin: 0;