refactor(ripple): move component specific logic

  BREAKING CHANGE: Removed attach(button|tab|checkbox|list)Behavior
    in favor of composing an injectable ripple service specific to
    your target.  $mdInkRipple was too aware of how to configure
    components.  You now have access to $mdButtonInkRipple,
    $mdTabInkRipple, $mdListInkRipple, $mdCheckboxInkRipple.

  Change your code from this:
    ``` javascript
        function MyService($mdInkRipple) {
          //... Included for brevity
          $mdInkRipple.attachButtonBehavior(scope, element, options);
        }
    ```

  To this:
    ``` javascript
        function MyService($mdButtonInkRipple) {
          //... Included for brevity
          $mdButtonInkRipple.attach(scope, element, options);
        }
    ```

src/components/button/button.js

@@ -57,7 +57,7 @@ angular
  *  </md-button>
  * </hljs>
  */
-function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria, $timeout) {
+function MdButtonDirective($mdButtonInkRipple, $mdTheming, $mdAria, $timeout) {
 
   return {
     restrict: 'EA',
@@ -70,7 +70,7 @@ function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria, $timeout) {
   function isAnchor(attr) {
     return angular.isDefined(attr.href) || angular.isDefined(attr.ngHref) || angular.isDefined(attr.ngLink) || angular.isDefined(attr.uiSref);
   }
-  
+
   function getTemplate(element, attr) {
     return isAnchor(attr) ?
            '<a class="md-button" ng-transclude></a>' :
@@ -80,14 +80,14 @@ function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria, $timeout) {
   function postLink(scope, element, attr) {
     var node = element[0];
     $mdTheming(element);
-    $mdInkRipple.attachButtonBehavior(scope, element);
+    $mdButtonInkRipple.attach(scope, element);
 
     var elementHasText = node.textContent.trim();
     if (!elementHasText) {
       $mdAria.expect(element, 'aria-label');
     }
 
-    // For anchor elements, we have to set tabindex manually when the 
+    // For anchor elements, we have to set tabindex manually when the
     // element is disabled
     if (isAnchor(attr) && angular.isDefined(attr.ngDisabled) ) {
       scope.$watch(attr.ngDisabled, function(isDisabled) {

src/components/button/button.spec.js

@@ -144,4 +144,15 @@ describe('md-button', function() {
 
   });
 
+  describe('ripple effects for button', function() {
+
+    it('attaches button ripple effects', inject(function($mdButtonInkRipple, $compile, $rootScope) {
+      spyOn($mdButtonInkRipple, 'attach');
+
+      var button = $compile("<md-button class='md-fab'><md-icon><md-icon></md-button>")($rootScope);
+      $rootScope.$apply();
+
+      expect($mdButtonInkRipple.attach).toHaveBeenCalledWith($rootScope, button);
+    }));
+  });
 });

src/components/list/list.js

@@ -246,12 +246,12 @@ function mdListItemDirective($mdAria, $mdConstant, $timeout) {
  * @module material.components.list
  *
  */
-function MdListController($scope, $element, $mdInkRipple) {
+function MdListController($scope, $element, $mdListInkRipple) {
   var ctrl = this;
   ctrl.attachRipple = attachRipple;
 
   function attachRipple (scope, element) {
     var options = {};
-    $mdInkRipple.attachListControlBehavior(scope, element, options);
+    $mdListInkRipple.attach(scope, element, options);
   }
 }

src/components/select/select.js

@@ -558,7 +558,7 @@ function SelectMenuDirective($parse, $mdUtil, $mdTheming) {
 
 }
 
-function OptionDirective($mdInkRipple, $mdUtil) {
+function OptionDirective($mdButtonInkRipple, $mdUtil) {
 
   return {
     restrict: 'E',
@@ -603,7 +603,7 @@ function OptionDirective($mdInkRipple, $mdUtil) {
       });
     });
 
-    $mdInkRipple.attachButtonBehavior(scope, element);
+    $mdButtonInkRipple.attach(scope, element);
     configureAria();
 
     function setOptionValue(newValue, oldValue) {

src/components/tabs/js/tabsController.js

@@ -360,6 +360,6 @@ function MdTabsController ($scope, $element, $window, $timeout, $mdConstant, $md
 
   function attachRipple (scope, element) {
     var options = { colorElement: angular.element(elements.inkBar) };
-    $mdInkRipple.attachTabBehavior(scope, element, options);
+    $mdTabInkRipple.attach(scope, element, options);
   }
 }

src/core/services/ripple/button_ripple.js

@@ -0,0 +1,45 @@
+(function() {
+  'use strict';
+
+  /**
+   * @ngdoc service
+   * @name $mdButtonInkRipple
+   * @module material.core
+   *
+   * @description
+   * Provides ripple effects for md-button.  See $mdInkRipple service for all possible configuration options.
+   *
+   * @param {object=} scope Scope within the current context
+   * @param {object=} element The element the ripple effect should be applied to
+   * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
+   */
+
+  angular.module('material.core')
+    .factory('$mdButtonInkRipple', MdButtonInkRipple);
+
+  function MdButtonInkRipple($mdInkRipple) {
+    return {
+      attach: attach
+    };
+
+    function attach(scope, element, options) {
+      var elementOptions = optionsForElement(element);
+      return $mdInkRipple.attach(scope, element, angular.extend(elementOptions, options));
+    };
+
+    function optionsForElement(element) {
+      if (element.hasClass('md-icon-button')) {
+        return {
+          isMenuItem: element.hasClass('md-menu-item'),
+          fitRipple: true,
+          center: true
+        };
+      } else {
+        return {
+          isMenuItem: element.hasClass('md-menu-item'),
+          dimBackground: true
+        }
+      }
+    };
+  };
+})();

src/core/services/ripple/button_ripple.spec.js

@@ -0,0 +1,63 @@
+describe('MdButtonInkRipple', function() {
+
+  beforeEach(module('material.core'));
+
+  var $element, $rootScope, $mdButtonInkRipple, $mdInkRipple;
+  beforeEach(inject(function(_$rootScope_, _$mdButtonInkRipple_, _$mdInkRipple_) {
+    $rootScope = _$rootScope_;
+    $mdButtonInkRipple = _$mdButtonInkRipple_;
+    $mdInkRipple = _$mdInkRipple_;
+
+    $element = angular.element('<button></button>');
+    spyOn($mdInkRipple, 'attach');
+  }));
+
+  it('applies the correct ripple configuration for a md-icon-button', function() {
+    $element.addClass('md-icon-button');
+
+    $mdButtonInkRipple.attach($rootScope, $element);
+
+    var expected = {
+      isMenuItem: false,
+      fitRipple: true,
+      center: true
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+
+  it('applies the correct ripple configuration for all other buttons', function() {
+    $mdButtonInkRipple.attach($rootScope, $element);
+
+    var expected = {
+      isMenuItem: false,
+      dimBackground: true
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+
+  it('configures the button as a menu item when it is a md-menu-item', function() {
+    $element.addClass('md-menu-item');
+
+    $mdButtonInkRipple.attach($rootScope, $element);
+
+    var expected = {
+      isMenuItem: true,
+      dimBackground: true
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+
+  it('allows ripple configuration to be overridden', function() {
+    $mdButtonInkRipple.attach($rootScope, $element, { dimBackground: false });
+
+    var expected = {
+      isMenuItem: false,
+      dimBackground: false
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+});

src/core/services/ripple/checkbox_ripple.js

@@ -0,0 +1,33 @@
+(function() {
+  'use strict';
+
+    /**
+   * @ngdoc service
+   * @name $mdCheckboxInkRipple
+   * @module material.core
+   *
+   * @description
+   * Provides ripple effects for md-checkbox.  See $mdInkRipple service for all possible configuration options.
+   *
+   * @param {object=} scope Scope within the current context
+   * @param {object=} element The element the ripple effect should be applied to
+   * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
+   */
+
+  angular.module('material.core')
+    .factory('$mdCheckboxInkRipple', MdCheckboxInkRipple);
+
+  function MdCheckboxInkRipple($mdInkRipple) {
+    return {
+      attach: attach
+    };
+
+    function attach(scope, element, options) {
+      return $mdInkRipple.attach(scope, element, angular.extend({
+        center: true,
+        dimBackground: false,
+        fitRipple: true
+      }, options));
+    };
+  };
+})();

src/core/services/ripple/checkbox_ripple.spec.js

@@ -0,0 +1,38 @@
+describe('MdCheckboxInkRipple', function() {
+
+  beforeEach(module('material.core'));
+
+  var $element, $rootScope, $mdCheckboxInkRipple, $mdInkRipple;
+  beforeEach(inject(function(_$rootScope_, _$mdCheckboxInkRipple_, _$mdInkRipple_) {
+    $rootScope = _$rootScope_;
+    $mdCheckboxInkRipple = _$mdCheckboxInkRipple_;
+    $mdInkRipple = _$mdInkRipple_;
+
+    $element = jasmine.createSpy('element');
+    spyOn($mdInkRipple, 'attach');
+  }));
+
+  it('applies the correct ripple configuration', function() {
+    $mdCheckboxInkRipple.attach($rootScope, $element);
+
+    var expected = {
+      center: true,
+      dimBackground: false,
+      fitRipple: true
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+
+  it('allows ripple configuration to be overridden', function() {
+    $mdCheckboxInkRipple.attach($rootScope, $element, { center: false, fitRipple: false });
+
+    var expected = {
+      center: false,
+      dimBackground: false,
+      fitRipple: false
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+});

src/core/services/ripple/list_ripple.js

@@ -0,0 +1,34 @@
+(function() {
+  'use strict';
+
+  /**
+   * @ngdoc service
+   * @name $mdListInkRipple
+   * @module material.core
+   *
+   * @description
+   * Provides ripple effects for md-list.  See $mdInkRipple service for all possible configuration options.
+   *
+   * @param {object=} scope Scope within the current context
+   * @param {object=} element The element the ripple effect should be applied to
+   * @param {object=} options (Optional) Configuration options to override the defaultripple configuration
+   */
+
+  angular.module('material.core')
+    .factory('$mdListInkRipple', MdListInkRipple);
+
+  function MdListInkRipple($mdInkRipple) {
+    return {
+      attach: attach
+    };
+
+    function attach(scope, element, options) {
+      return $mdInkRipple.attach(scope, element, angular.extend({
+        center: false,
+        dimBackground: true,
+        outline: false,
+        rippleSize: 'full'
+      }, options));
+    };
+  };
+})();

src/core/services/ripple/list_ripple.spec.js

@@ -0,0 +1,40 @@
+describe('MdListInkRipple', function() {
+
+  beforeEach(module('material.core'));
+
+  var $element, $rootScope, $mdListInkRipple, $mdInkRipple;
+  beforeEach(inject(function(_$rootScope_, _$mdListInkRipple_, _$mdInkRipple_) {
+    $rootScope = _$rootScope_;
+    $mdListInkRipple = _$mdListInkRipple_;
+    $mdInkRipple = _$mdInkRipple_;
+
+    $element = jasmine.createSpy('element');
+    spyOn($mdInkRipple, 'attach');
+  }));
+
+  it('applies the correct ripple configuration', function() {
+    $mdListInkRipple.attach($rootScope, $element);
+
+    var expected = {
+      center: false,
+      dimBackground: true,
+      outline: false,
+      rippleSize: 'full'
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+
+  it('allows ripple configuration to be overridden', function() {
+    $mdListInkRipple.attach($rootScope, $element, { center: true, outline: true });
+
+    var expected = {
+      center: true,
+      dimBackground: true,
+      outline: true,
+      rippleSize: 'full'
+    };
+
+    expect($mdInkRipple.attach).toHaveBeenCalledWith($rootScope, $element, expected);
+  });
+});