enhance(ripple): improvements to API, sideNav list items, and button …

…effects

add md-ripple-active support for nav active state,
add support for ms-ink-color to set a custom ink color, cleans up attribute names and re-arranges code,
rename method to be more consistent with our naming conventions,
add test for custom ripple ink color,
allow invalid entries for md-ink-ripple to be ignored,
change internal code for checkboxes and radio buttons to use md-ink-ripple-checkbox

Close angular#689.

docs/config/template/index.template.html

@@ -28,19 +28,19 @@ <h1 class="md-toolbar-tools" style="padding-top:25px;">
     <md-content flex>
       <div ng-repeat="section in menu.sections">
 
-        <button class="menu-item menu-title"
-          ng-class="{active: menu.isSectionSelected(section)}"
+        <button class="menu-item menu-title md-menu-item"
           ng-click="menu.toggleSelectSection(section)"
-          md-ink-ripple>
+          md-active="menu.isSectionSelected(section)"
+          md-ink-ripple="#bbb">
           {{section.name}}
         </button>
 
-        <a class="menu-item menu-sub-item"
+        <a class="menu-item menu-sub-item md-menu-item"
           ng-show="menu.isSectionSelected(section)"
           ng-repeat="page in section.pages"
-          ng-class="{active: menu.isPageSelected(section, page)}"
           ng-href="#{{page.url}}"
-          md-ink-ripple>
+          md-active="menu.isPageSelected(section, page)"
+          md-ink-ripple="#bbb">
           <span ng-bind="page | humanizeDoc"></span>
         </a>
 

src/components/button/button.js

@@ -68,7 +68,7 @@ function MdButtonDirective($mdInkRipple, $mdTheming, $mdAria) {
   function postLink(scope, element, attr) {
     var node = element[0];
     $mdTheming(element);
-    $mdInkRipple.attachButtonBehavior(element);
+    $mdInkRipple.attachButtonBehavior(scope, element);
 
     var elementHasText = node.textContent.trim();
     if (!elementHasText) {

src/components/checkbox/checkbox.js

@@ -55,7 +55,7 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
     transclude: true,
     require: '?ngModel',
     template: 
-      '<div class="md-container" md-ink-ripple="checkbox">' +
+      '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
         '<div class="md-icon"></div>' +
       '</div>' +
       '<div ng-transclude class="md-label"></div>',

src/components/radioButton/radioButton.js

@@ -197,7 +197,7 @@ function mdRadioButtonDirective($mdAria, $mdUtil, $mdTheming) {
     restrict: 'E',
     require: '^mdRadioGroup',
     transclude: true,
-    template: '<div class="md-container" md-ink-ripple="checkbox">' +
+    template: '<div class="md-container" md-ink-ripple md-ink-ripple-checkbox>' +
                 '<div class="md-off"></div>' +
                 '<div class="md-on"></div>' +
               '</div>' +

src/components/tabs/js/tabItemDirective.js

@@ -94,7 +94,7 @@ function MdTabDirective($mdInkRipple, $compile, $mdAria, $mdUtil, $mdConstant) {
       transcludeTabContent();
       configureAria();
 
-      var detachRippleFn = $mdInkRipple.attachButtonBehavior(element);
+      var detachRippleFn = $mdInkRipple.attachButtonBehavior(scope, element);
       tabsCtrl.add(tabItemCtrl);
       scope.$on('$destroy', function() {
         detachRippleFn();