Support raw element enhancement

ionic/components/button/button.js

@@ -2,7 +2,7 @@ import {NgElement, Decorator} from 'angular2/angular2'
 import {IonicComponent} from 'ionic/config/component'
 
 @Decorator({
-  selector: 'ion-button, [ion-button],.button',
+  selector: 'button, ion-button, [ion-button],.button',
 })
 export class Button {
   constructor(
@@ -13,5 +13,6 @@ export class Button {
   }
 }
 new IonicComponent(Button, {
+  enhanceRawElement: true,
   propClasses: ['primary', 'secondary', 'danger', 'light', 'stable', 'dark', 'block']
 })

ionic/components/button/test/basic/main.html

@@ -51,10 +51,10 @@
 <h2>With Properties</h2>
 
 <div>
-  <button ion-button primary>button.primary</button>
+  <button primary>button.primary</button>
-  <button ion-button secondary>button.secondary</button>
+  <button secondary>button.secondary</button>
-  <button ion-button stable>button.stable</button>
+  <button stable>button.stable</button>
-  <button ion-button light>button.light</button>
+  <button light>button.light</button>
-  <button ion-button dark>button.dark</button>
+  <button dark>button.dark</button>
-  <button ion-button danger>button.danger</button>
+  <button danger>button.danger</button>
 </div>

ionic/config/component.js

@@ -11,6 +11,7 @@ let platformMode = Platform.getMode();
 export class IonicComponent {
   constructor(ComponentClass, {
     bind,
+    enhanceRawElement,
     delegates,
     propClasses
   }) {
@@ -31,6 +32,11 @@ export class IonicComponent {
 
     this.delegates = delegates || (delegates = {})
     this.propClasses = propClasses || (propClasses = []);
+
+    // Whether to support raw element enhancement (for example, supporting <button>).
+    // We only do this if there is a matching style property on the element
+    this.enhanceRawElement = enhanceRawElement || false;
+
     // for (let delegateName of delegates) {
     //   let delegate = delegates[delegateName]
     // }
@@ -41,18 +47,27 @@ export class IonicComponent {
   }
 
   invoke(instance) {
-    const config = this
+    const config = this;
-
-    dom.addClasses(instance.domElement, this.componentCssName, `${this.componentCssName}-${platformMode}`);
 
     // For each property class, check if it exists on the element and add the
-    // corresponding classname for it
+    // corresponding classname for it, otherwise add it
+    let foundMatchingPropClass = false;
     for (let propClass of this.propClasses) {
       if(dom.hasAttribute(instance.domElement, propClass)) {
         dom.addClass(instance.domElement, `${this.componentCssName}-${propClass}`);
+        foundMatchingPropClass = true;
       }
     }
 
+    // If we want to enhance a raw element (for example, a button),
+    // only do it if we also have a matching prop class
+    if(!foundMatchingPropClass && this.enhanceRawElement) {
+      // Don't enhace this raw element
+      return;
+    }
+
+    // Add the base element classes (ex, button and button-ios)
+    dom.addClasses(instance.domElement, this.componentCssName, `${this.componentCssName}-${platformMode}`);
 
     // Check and apply and property classes (properties that should be
     // converted to class names). For example, <button primary> should