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">`

Author: rschmukler

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>