button refactor

ionic/components/button/button.js

@@ -1,21 +0,0 @@
-import { ElementRef} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicComponent_OLD} from 'ionic/config/component'
-
-
-@Directive({
-  selector: 'button, ion-button, [ion-button],.button',
-})
-export class Button {
-  constructor(
-    elementRef: ElementRef
-  ) {
-    this.domElement = elementRef.domElement;
-    this.config = Button.config.invoke(this);
-  }
-}
-new IonicComponent_OLD(Button, {
-   enhanceRawElement: true,
-   propClasses: ['primary', 'secondary', 'danger', 'light', 'stable', 'dark', 'block', 'clear', 'full', 'icon']
-})

ionic/components/button/button.scss

@@ -24,7 +24,8 @@ $button-small-icon-size:          2.1rem !default;
 // Core Button
 // --------------------------------------------------
 
-.button {
+button,
+[button] {
   display: inline-flex;
   flex-shrink: 0;
   flex-flow: row nowrap;
@@ -49,13 +50,7 @@ $button-small-icon-size:          2.1rem !default;
 
   cursor: pointer;
   user-select: none;
-}
 
-
-// Core Button Styling
-// --------------------------------------------------
-
-.button {
   border: 1px solid #ccc;
   padding: $button-padding;
   min-height: $button-height;
@@ -66,84 +61,89 @@ $button-small-icon-size:          2.1rem !default;
   border: transparent;
   border-radius: $button-border-radius;
 
-  &.button-icon {
+  &[icon] {
     font-size: $button-icon-size;
     background: none;
     border: none;
   }
 
-  &.button-large {
+  &[large] {
     padding: 0 $button-large-padding;
     min-width: ($button-large-padding * 4);
     min-height: $button-large-height;
     font-size: $button-large-font-size;
 
-    &.button-icon {
+    &[icon] {
       font-size: $button-large-icon-size;
     }
   }
 
-  &.button-small {
+  &[small] {
     padding: 0 $button-small-padding;
     min-width: ($button-small-padding * 3);
     min-height: $button-small-height;
     font-size: $button-small-font-size;
 
-    &.button-icon {
+    &[icon] {
       font-size: $button-small-icon-size;
     }
   }
-}
 
 
-// Core Button Types
-// --------------------------------------------------
+  // Core Button Types
+  // --------------------------------------------------
 
-.button-clear {
-  border-color: transparent;
-  background: none;
+  &[clear] {
+    border-color: transparent;
+    background: none;
 
-  &.activated {
-    opacity: 0.3;
+    &.activated {
+      opacity: 0.3;
+    }
   }
-}
 
-.button-outline {
-  background: none;
-}
+  &[outline] {
+    background: none;
+  }
 
-.button-block {
-  display: flex;
-  clear: both;
-  margin-right: 0;
-  margin-left: 0;
-
-  &:after {
+  &[block] {
+    display: flex;
     clear: both;
+    margin-right: 0;
+    margin-left: 0;
+    width: 100%;
+
+    &:after {
+      clear: both;
+    }
   }
+
+  &.disabled,
+  &[disabled] {
+    opacity: .4;
+    cursor: default !important;
+    pointer-events: none;
+  }
+
 }
 
-.button-full,
-.button-full > .button {
+[full],
+[full] > button,
+[full] > [button] {
   display: flex;
   margin-right: 0;
   margin-left: 0;
+  width: 100%;
   border-radius: 0;
 
-  &.button-outline.button-outline {
+  &[outline][outline] {
     border-right-width: 0;
     border-left-width: 0;
   }
 }
 
-button.button-block,
-button.button-full,
-.button-full > button.button,
-input.button.button-block  {
-  width: 100%;
-}
-
-.padding > .button.button-block:first-child {
+.padding > button[block]:first-child,
+.padding > [button][block]:first-child {
   margin-top: 0;
 }
 
@@ -164,17 +164,11 @@ input.button.button-block  {
 // Button Misc
 // --------------------------------------------------
 
-a.button {
+a[button] {
+  color: inherit;
   text-decoration: none;
 }
 
-.button.disabled,
-.button[disabled] {
-  opacity: .4;
-  cursor: default !important;
-  pointer-events: none;
-}
-
 
 // Core Button Mixins
 // --------------------------------------------------
@@ -198,14 +192,14 @@ a.button {
 }
 
 @mixin button-clear($fg-color) {
-  &.button-clear {
+  &[clear] {
     background: none;
     color: $fg-color;
   }
 }
 
 @mixin button-outline($fg-color) {
-  &.button-outline {
+  &[outline] {
     border: 1px solid $fg-color;
     background: transparent;
     color: $fg-color;
@@ -222,7 +216,8 @@ a.button {
 
 @each $color, $value in $colors {
 
-  .button-#{$color} {
+  button[#{$color}],
+  [button][#{$color}] {
     @include button-default(get-color($color, base),
                             get-color($color, inverse));
 

ionic/components/button/test/basic/index.js

@@ -1,11 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

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

@@ -1,60 +1,49 @@
 
 <div>
-  <a class="button" href="#">a (default)</a>
-  <button class="button">button (default)</button>
-  <button class="button hover">hover</button>
-  <button class="button activated">activated</button>
+  <a button href="#">a[button]</a>
+  <button>button</button>
+  <button class="hover">hover</button>
+  <button class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-primary" href="#">a.primary</a>
-  <button class="button button-primary">button.primary</button>
-  <button class="button button-primary hover">hover</button>
-  <button class="button button-primary activated">activated</button>
+  <a button primary href="#">a[primary]</a>
+  <button primary>button[primary]</button>
+  <button primary class="hover">hover</button>
+  <button primary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-secondary" href="#">a.secondary</a>
-  <button class="button button-secondary">button.secondary</button>
-  <button class="button button-secondary hover">hover</button>
-  <button class="button button-secondary activated">activated</button>
+  <a button secondary href="#">a[secondary]</a>
+  <button secondary>button[secondary]</button>
+  <button secondary class="hover">hover</button>
+  <button secondary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-danger" href="#">a.danger</a>
-  <button class="button button-danger">button.danger</button>
-  <button class="button button-danger hover">hover</button>
-  <button class="button button-danger activated">activated</button>
+  <a button danger href="#">a[danger]</a>
+  <button danger>button[danger]</button>
+  <button danger class="hover">hover</button>
+  <button danger class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-light" href="#">a.light</a>
-  <button class="button button-light">button.light</button>
-  <button class="button button-light hover">hover</button>
-  <button class="button button-light activated">activated</button>
+  <a button light href="#">a[light]</a>
+  <button light>button[light]</button>
+  <button light class="hover">hover</button>
+  <button light class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-stable" href="#">a.stable</a>
-  <button class="button button-stable">button.stable</button>
-  <button class="button button-stable hover">hover</button>
-  <button class="button button-stable activated">activated</button>
+  <a button stable href="#">a[stable]</a>
+  <button stable>button[stable]</button>
+  <button stable class="hover">hover</button>
+  <button stable class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-dark" href="#">a.dark</a>
-  <button class="button button-dark">button.dark</button>
-  <button class="button button-dark hover">hover</button>
-  <button class="button button-dark activated">activated</button>
-</div>
-
-<h2>With Properties</h2>
-
-<div>
-  <button primary>button.primary</button>
-  <button secondary>button.secondary</button>
-  <button stable>button.stable</button>
-  <button light>button.light</button>
-  <button dark>button.dark</button>
-  <button danger>button.danger</button>
+  <a button dark href="#">a[dark]</a>
+  <button dark>button[dark]</button>
+  <button dark class="hover">hover</button>
+  <button dark class="activated">activated</button>
 </div>

ionic/components/button/test/block/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

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

@@ -2,18 +2,18 @@
 <div class="padding">
 
   <div>
-    <a class="button button-block button-primary" href="#">a.button-block</a>
-    <button class="button button-block button-primary">button.button-block</button>
+    <a button block primary href="#">a[button][block]</a>
+    <button block primary>button[button][block]</button>
   </div>
 
   <div>
-    <a class="button button-block button-outline button-primary" href="#">a.button-block</a>
-    <button class="button button-block button-outline button-primary">button.button-block</button>
+    <a button block outline primary href="#">a[button][block][outline]</a>
+    <button block outline primary>button[block][outline</button>
   </div>
 
   <div>
-    <a class="button button-block button-clear button-primary" href="#">a.button-block</a>
-    <button class="button button-block button-clear button-primary">button.button-block</button>
+    <a button block clear primary href="#">a[button][block][clear]</a>
+    <button block clear primary>button[button][block]</button>
   </div>
 
 </div>

ionic/components/button/test/clear/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/full/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/icons/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/outline/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/sizes/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}