refactor(): switch to md-prefixed attributes for non-html5 attrs

Closes #657.

BREAKING CHANGE: All non-html5-standard component attributes are now prefixed
with `md-`. Migration instructions:

* **button**:
  - `<md-button noink>` to `<md-button md-no-ink>`
* **divider**:
  - `<md-divider inset>` to `<md-divider md-inset>`
* **linearProgress*:
  - `<md-linear-progress secondary-value="someValue">` to
    `<md-linear-progress md-buffer-value="someValue">`
  - `<md-linear-progress mode="query">` to
    `<md-linear-progress md-mode="query">`.
* **circularProgress**:
  - `<md-circular-progress mode="query">` to
    `<md-circular-progress md-mode="query">`.
  - `<md-circular-progress diameter="60">` to
    `<md-circular-progress md-diameter="60">`.
* **sidenav**:
  - `<md-sidenav is-open="isOpen">` to
    `<md-sidenav md-is-open="isOpen">`
  - `<md-sidenav is-locked-open="isLockedOpen">` to
    `<md-sidenav md-is-locked-open="isLockedOpen>`
  - `<md-sidenav component-id="my-sidenav">` to
    `<md-sidenav md-component-id="my-sidenav>`
* **tabs**:
  - `<md-tabs md-selected="selectedIndex">` to
    `<md-tabs md-md-selected="selectedIndex">`
  - `<md-tabs on-select="doSomething()">` to
    `<md-tabs md-on-select="doSomething()">`
  - `<md-tabs on-deselect="doSomething()">` to
    `<md-tabs md-on-deselect="doSomething()">`
  - `<md-tabs><md-tab active="tabIsActive"></md-tab></md-tabs>` to
    `<md-tabs><md-tab md-active="tabIsActive"></md-tab></md-tabs>`
* **textFloat**:
  - `<md-text-float fid="someId">` to
    `<md-text-float md-fid="someId">`

docs/config/template/index.template.html

@@ -16,8 +16,8 @@
 
   <md-sidenav layout="vertical"
     class="md-sidenav-left md-whiteframe-z2"
-    component-id="left"
-    is-locked-open="$media('md')">
+    md-component-id="left"
+    md-is-locked-open="$media('md')">
 
     <md-toolbar class="md-medium-tall">
       <h1 class="md-toolbar-tools" style="padding-top:25px;">

src/components/button/button.js

@@ -26,9 +26,9 @@ angular.module('material.components.button', [
  * If you supply a `href` or `ng-href` attribute, it will become an `<a>` element. Otherwise, it will
  * become a `<button>` element.
  *
- * @param {boolean=} noink If present, disable ripple ink effects.
+ * @param {boolean=} mdNoInk If present, disable ripple ink effects.
  * @param {boolean=} disabled If present, disable selection.
- * @param {string=} aria-label Publish the button label used by screen-readers for accessibility. Defaults to the button's text.
+ * @param {string=} ariaLabel Publish the button label used by screen-readers for accessibility. Defaults to the button's text.
  *
  * @usage
  * <hljs lang="html">

src/components/button/demoBasicUsage/index.html

@@ -4,7 +4,7 @@
 
     <section layout="vertical" layout-sm="horizontal" layout-align="center center">
       <md-button>{{title1}}</md-button>
-      <md-button noink class="md-primary">Primary (noink)</md-button>
+      <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
       <md-button ng-disabled="isDisabled" class="md-primary">Disabled</md-button>
       <md-button class="md-warn" ng-click="isDisabled = !isDisabled">{{title4}}</md-button>
       <div class="label">flat</div>

src/components/checkbox/checkbox.js

@@ -25,7 +25,7 @@ angular.module('material.components.checkbox', [
  * @param {expression=} ngTrueValue The value to which the expression should be set when selected.
  * @param {expression=} ngFalseValue The value to which the expression should be set when not selected.
  * @param {string=} ngChange Angular expression to be executed when input changes due to user interaction with the input element.
- * @param {boolean=} noink Use of attribute indicates use of ripple ink effects
+ * @param {boolean=} mdNoInk Use of attribute indicates use of ripple ink effects
  * @param {boolean=} disabled Use of attribute indicates the switch is disabled: no ink effects and not selectable
  * @param {string=} ariaLabel Publish the button label used by screen-readers for accessibility. Defaults to the checkbox's text.
  *
@@ -35,7 +35,7 @@ angular.module('material.components.checkbox', [
  *   Finished ?
  * </md-checkbox>
  *
- * <md-checkbox noink ng-model="hasInk" aria-label="No Ink Effects">
+ * <md-checkbox md-no-ink ng-model="hasInk" aria-label="No Ink Effects">
  *   No Ink Effects
  * </md-checkbox>
  *
@@ -56,7 +56,7 @@ function MdCheckboxDirective(inputDirective, $mdInkRipple, $mdAria, $mdConstant,
     transclude: true,
     require: '?ngModel',
     template: 
-      '<div class="md-container" ink-ripple="checkbox">' +
+      '<div class="md-container" md-ink-ripple="checkbox">' +
         '<div class="md-icon"></div>' +
       '</div>' +
       '<div ng-transclude class="md-label"></div>',

src/components/checkbox/demoBasicUsage/index.html

@@ -17,7 +17,7 @@
     Checkbox (Disabled, Checked)
   </md-checkbox>
 
-  <md-checkbox noink aria-label="Checkbox No Ink">
+  <md-checkbox md-no-ink aria-label="Checkbox No Ink">
     Checkbox (No Ink)
   </md-checkbox>
 

src/components/divider/_divider.scss

@@ -3,7 +3,7 @@ md-divider {
   border-top: 1px solid;
   margin: 0;
 
-  &[inset] {
+  &[md-inset] {
     margin-left: $baseline-grid * 10;
   }
 }

src/components/divider/demoBasicUsage/index.html

@@ -44,7 +44,7 @@ <h4>{{item.who}}</h4>
             </p>
           </div>
         </md-item-content>
-        <md-divider inset ng-if="!$last"></md-divider>
+        <md-divider md-inset ng-if="!$last"></md-divider>
       </md-item>
     </md-list>
   </md-content>

src/components/divider/divider.js

@@ -22,12 +22,12 @@ function MdDividerController(){}
  * @description
  * Dividers group and separate content within lists and page layouts using strong visual and spatial distinctions. This divider is a thin rule, lightweight enough to not distract the user from content.
  *
- * @param {boolean=} inset Add this attribute to activate the inset divider style.
+ * @param {boolean=} mdInset Add this attribute to activate the inset divider style.
  * @usage
  * <hljs lang="html">
  * <md-divider></md-divider>
  *
- * <md-divider inset></md-divider>
+ * <md-divider md-inset></md-divider>
  * </hljs>
  *
  */

src/components/progressCircular/_progressCircular.scss

@@ -48,7 +48,7 @@ md-progress-circular {
     border-radius: 50%;
   }
 
-  &[mode=indeterminate] {
+  &[md-mode=indeterminate] {
     .md-wrapper1, .md-wrapper2 {
       transform-origin: 50% 50%;
     }

src/components/progressCircular/demoBasicUsage/index.html

@@ -3,24 +3,24 @@
     <h4 style="margin-top:10px">Determinate</h4>
     <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
     <div layout="vertical" layout-sm="horizontal" layout-align="space-around">
-      <md-progress-circular mode="determinate" value="{{determinateValue}}"></md-progress-circular>
+      <md-progress-circular md-mode="determinate" value="{{determinateValue}}"></md-progress-circular>
     </div>
 
     <h4>Indeterminate</h4>
     <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
     <div layout="vertical" layout-sm="horizontal" layout-align="space-around">
-      <md-progress-circular mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-mode="indeterminate"></md-progress-circular>
     </div>
 
     <h4>Theming</h4>
 
     <div layout="vertical" layout-sm="horizontal" layout-align="space-around">
-      <md-progress-circular md-theme="red" mode="indeterminate"></md-progress-circular>
-      <md-progress-circular md-theme="lime" mode="indeterminate"></md-progress-circular>
-      <md-progress-circular md-theme="orange" mode="indeterminate"></md-progress-circular>
-      <md-progress-circular md-theme="light-green" mode="indeterminate"></md-progress-circular>
-      <md-progress-circular md-theme="blue" mode="indeterminate"></md-progress-circular>
-      <md-progress-circular md-theme="purple" mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="red" md-mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="lime" md-mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="orange" md-mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="light-green" md-mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="blue" md-mode="indeterminate"></md-progress-circular>
+      <md-progress-circular md-theme="purple" md-mode="indeterminate"></md-progress-circular>
     </div>
 
 </div>

src/components/progressCircular/progressCircular.js

@@ -24,19 +24,19 @@ angular.module('material.components.progressCircular', [
  *
  * For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
  *
- * @param {string} mode Select from one of two modes: determinate and indeterminate.
+ * @param {string} mdMode Select from one of two modes: determinate and indeterminate.
  * @param {number=} value In determinate mode, this number represents the percentage of the circular progress. Default: 0
- * @param {number=} diameter This specifies the diamter of the circular progress. Default: 48
+ * @param {number=} mdDiameter This specifies the diamter of the circular progress. Default: 48
  *
  * @usage
  * <hljs lang="html">
- * <md-progress-circular mode="determinate" value="..."></md-progress-circular>
+ * <md-progress-circular md-mode="determinate" value="..."></md-progress-circular>
  *
- * <md-progress-circular mode="determinate" ng-value="..."></md-progress-circular>
+ * <md-progress-circular md-mode="determinate" ng-value="..."></md-progress-circular>
  *
- * <md-progress-circular mode="determinate" value="..." diameter="100"></md-progress-circular>
+ * <md-progress-circular md-mode="determinate" value="..." diameter="100"></md-progress-circular>
  *
- * <md-progress-circular mode="indeterminate"></md-progress-circular>
+ * <md-progress-circular md-mode="indeterminate"></md-progress-circular>
  * </hljs>
  */
 function MdProgressCircularDirective($$rAF, $mdConstant, $mdTheming) {
@@ -83,7 +83,7 @@ function MdProgressCircularDirective($$rAF, $mdConstant, $mdTheming) {
       fix = circle.querySelectorAll('.md-fill.md-fix'),
       i, clamped, fillRotation, fixRotation;
 
-    var diameter = attr.diameter || 48;
+    var diameter = attr.mdDiameter || 48;
     var scale = diameter/48;
 
     circle.style[$mdConstant.CSS.TRANSFORM] = 'scale(' + scale.toString() + ')';

src/components/progressLinear/_progressLinear.scss

@@ -28,13 +28,13 @@ md-progress-linear {
     transition: all 0.2s linear;
   }
 
-  &[mode=determinate] {
+  &[md-mode=determinate] {
     .md-bar1 {
       display: none;
     }
   }
 
-  &[mode=indeterminate] {
+  &[md-mode=indeterminate] {
     .md-bar1 {
       animation: indeterminate1 4s infinite linear;
     }
@@ -44,7 +44,7 @@ md-progress-linear {
     }
   }
 
-  &[mode=buffer] {
+  &[md-mode=buffer] {
     .md-container {
       background-color: transparent !important;
     }
@@ -63,7 +63,7 @@ md-progress-linear {
     }
   }
 
-  &[mode=query] {
+  &[md-mode=query] {
     .md-bar2 {
       animation: query .8s infinite cubic-bezier(0.390, 0.575, 0.565, 1.000);
     }

src/components/progressLinear/demoBasicUsage/index.html

@@ -2,24 +2,24 @@
 
   <h4 style="margin-top:0px">Determinate</h4>
   <p>For operations where the percentage of the operation completed can be determined, use a determinate indicator. They give users a quick sense of how long an operation will take.</p>
-  <md-progress-linear mode="determinate" ng-value="determinateValue" ></md-progress-linear>
+  <md-progress-linear md-mode="determinate" ng-value="determinateValue" ></md-progress-linear>
 
   <h4>Indeterminate</h4>
   <p>For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.</p>
-  <md-progress-linear mode="indeterminate"></md-progress-linear>
+  <md-progress-linear md-mode="indeterminate"></md-progress-linear>
 
   <h4>Buffer</h4>
-  <md-progress-linear mode="buffer" value="{{determinateValue}}" secondaryValue="{{determinateValue2}}"></md-progress-linear>
+  <md-progress-linear md-mode="buffer" value="{{determinateValue}}" md-buffer-value="{{determinateValue2}}"></md-progress-linear>
 
   <h4>Query Indeterminate and Determinate</h4>
-  <md-progress-linear mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
+  <md-progress-linear md-mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
 
   <h4>Themes</h4>
-  <md-progress-linear md-theme="red" mode="determinate" ng-value="determinateValue" ></md-progress-linear>
-  <md-progress-linear md-theme="deep-orange" mode="buffer" value="{{determinateValue}}" secondaryValue="{{determinateValue2}}"></md-progress-linear>
-  <md-progress-linear md-theme="yellow" mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
-  <md-progress-linear md-theme="green" mode="determinate" ng-value="determinateValue" ></md-progress-linear>
-  <md-progress-linear md-theme="blue" mode="buffer" value="{{determinateValue}}" secondaryValue="{{determinateValue2}}"></md-progress-linear>
-  <md-progress-linear md-theme="indigo" mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
+  <md-progress-linear md-theme="red" md-mode="determinate" ng-value="determinateValue" ></md-progress-linear>
+  <md-progress-linear md-theme="deep-orange" md-mode="buffer" value="{{determinateValue}}" md-buffer-value="{{determinateValue2}}"></md-progress-linear>
+  <md-progress-linear md-theme="yellow" md-mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
+  <md-progress-linear md-theme="green" md-mode="determinate" ng-value="determinateValue" ></md-progress-linear>
+  <md-progress-linear md-theme="blue" md-mode="buffer" value="{{determinateValue}}" md-buffer-value="{{determinateValue2}}"></md-progress-linear>
+  <md-progress-linear md-theme="indigo" md-mode="{{mode}}" value="{{determinateValue}}"></md-progress-linear>
 
 </div>

src/components/progressLinear/progressLinear-theme.scss

@@ -11,7 +11,7 @@ md-progress-linear.md-#{$theme-name}-theme {
     background-color: $progress-linear-color;
   }
 
-  &[mode=buffer] {
+  &[md-mode=buffer] {
     .md-dashed:before {
       background: radial-gradient($progress-linear-alt-color 0%, $progress-linear-alt-color 16%, transparent 42%);
     }

src/components/progressLinear/progressLinear.js

@@ -25,21 +25,21 @@ angular.module('material.components.progressLinear', [
  *
  * For operations where the user is asked to wait a moment while something finishes up, and it’s not necessary to expose what's happening behind the scenes and how long it will take, use an indeterminate indicator.
  *
- * @param {string} mode Select from one of four modes: determinate, indeterminate, buffer or query.
+ * @param {string} mdMode Select from one of four modes: determinate, indeterminate, buffer or query.
  * @param {number=} value In determinate and buffer modes, this number represents the percentage of the primary progress bar. Default: 0
- * @param {number=} secondaryValue In the buffer mode, this number represents the precentage of the secondary progress bar. Default: 0
+ * @param {number=} mdBufferValue In the buffer mode, this number represents the precentage of the secondary progress bar. Default: 0
  *
  * @usage
  * <hljs lang="html">
- * <md-progress-linear mode="determinate" value="..."></md-progress-linear>
+ * <md-progress-linear md-mode="determinate" value="..."></md-progress-linear>
  *
- * <md-progress-linear mode="determinate" ng-value="..."></md-progress-linear>
+ * <md-progress-linear md-mode="determinate" ng-value="..."></md-progress-linear>
  *
- * <md-progress-linear mode="indeterminate"></md-progress-linear>
+ * <md-progress-linear md-mode="indeterminate"></md-progress-linear>
  *
- * <md-progress-linear mode="buffer" value="..." secondaryValue="..."></md-progress-linear>
+ * <md-progress-linear md-mode="buffer" value="..." md-buffer-value="..."></md-progress-linear>
  *
- * <md-progress-linear mode="query"></md-progress-linear>
+ * <md-progress-linear md-mode="query"></md-progress-linear>
  * </hljs>
  */
 function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
@@ -68,7 +68,7 @@ function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
       container = angular.element(element[0].querySelector('.md-container'));
 
     attr.$observe('value', function(value) {
-      if (attr.mode == 'query') {
+      if (attr.mdMode == 'query') {
         return;
       }
 
@@ -77,7 +77,7 @@ function MdProgressLinearDirective($$rAF, $mdConstant, $mdTheming) {
       bar2Style[$mdConstant.CSS.TRANSFORM] = transforms[clamped];
     });
 
-    attr.$observe('secondaryvalue', function(value) {
+    attr.$observe('mdBufferValue', function(value) {
       bar1Style[$mdConstant.CSS.TRANSFORM] = transforms[clamp(value)];
     });
 

src/components/progressLinear/progressLinear.spec.js

@@ -33,9 +33,9 @@ describe('mdProgressLinear', function() {
     expect(progress.eq(0).attr('aria-valuenow')).toEqual('50');
   }));
 
-  it('should set transform based on secondaryvalue', inject(function($compile, $rootScope, $mdConstant) {
+  it('should set transform based on buffer value', inject(function($compile, $rootScope, $mdConstant) {
     var element = $compile('<div>' +
-      '<md-progress-linear value="{{progress}}" secondaryvalue="{{progress2}}">' +
+      '<md-progress-linear value="{{progress}}" md-buffer-value="{{progress2}}">' +
       '</md-progress-linear>' +
       '</div>')($rootScope);
 
@@ -52,7 +52,7 @@ describe('mdProgressLinear', function() {
 
   it('should not set transform in query mode', inject(function($compile, $rootScope, $mdConstant) {
     var element = $compile('<div>' +
-      '<md-progress-linear mode="query" value="{{progress}}">' +
+      '<md-progress-linear md-mode="query" value="{{progress}}">' +
       '</md-progress-linear>' +
       '</div>')($rootScope);
 

src/components/radioButton/demoBasicUsage/index.html

@@ -5,7 +5,7 @@
     <md-radio-group ng-model="data.group1">
 
       <md-radio-button value="Apple" aria-label="Label 1">Apple</md-radio-button>
-      <md-radio-button value="Banana" noink> Banana </md-radio-button>
+      <md-radio-button value="Banana" md-no-ink> Banana </md-radio-button>
       <md-radio-button value="Mango" aria-label="Label 3">Mango</md-radio-button>
 
     </md-radio-group>

src/components/radioButton/radioButton.js

@@ -26,7 +26,7 @@ angular.module('material.components.radioButton', [
  * `<md-radio-button>` tags.
  *
  * @param {string} ngModel Assignable angular expression to data-bind to.
- * @param {boolean=} noink Use of attribute indicates flag to disable ink ripple effects.
+ * @param {boolean=} mdNoInk Use of attribute indicates flag to disable ink ripple effects.
  *
  * @usage
  * <hljs lang="html">

src/components/sidenav/demoBasicUsage/index.html

@@ -3,7 +3,7 @@
 
   <section layout="horizontal" flex>
 
-    <md-sidenav class="md-sidenav-left md-whiteframe-z2" component-id="left" is-locked-open="$media('md')">
+    <md-sidenav class="md-sidenav-left md-whiteframe-z2" md-component-id="left" md-is-locked-open="$media('md')">
 
       <md-toolbar class="md-theme-indigo">
         <h1 class="md-toolbar-tools">Sidenav Left</h1>
@@ -44,7 +44,7 @@ <h1 class="md-toolbar-tools">Sidenav Left</h1>
 
     </md-content>
 
-    <md-sidenav class="md-sidenav-right md-whiteframe-z2" component-id="right">
+    <md-sidenav class="md-sidenav-right md-whiteframe-z2" md-component-id="right">
 
       <md-toolbar class="md-theme-light">
         <h1 class="md-toolbar-tools">Sidenav Right</h1>