chore(build): rename ionic directory to src and update all references in the build process.

src/components/button/test/basic/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/basic/index.ts

@@ -0,0 +1,21 @@
+import {App, IonicApp} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+    app.setTitle('Basic Buttons');
+
+    this.testingColors = ['primary', 'secondary', 'danger', 'dark'];
+    this.testingColorIndex = 0;
+    this.chgColor();
+  }
+
+  chgColor() {
+    this.btnColor = this.testingColors[this.testingColorIndex];
+    console.log('dynamic btnColor', this.btnColor);
+    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
+  }
+}

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

@@ -0,0 +1,47 @@
+
+<ion-toolbar>
+  <ion-title>Default Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <button><span>Default</span></button>
+    <button class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button primary>Primary</button>
+    <button primary class="activated">Primary.activated</button>
+  </p>
+
+  <p>
+    <button secondary>Secondary</button>
+    <button secondary class="activated">Secondary.activated</button>
+  </p>
+
+  <p>
+    <button danger>Danger</button>
+    <button danger class="activated">Danger.activated</button>
+  </p>
+
+  <p>
+    <button light>Light</button>
+    <button light class="activated">Light.activated</button>
+  </p>
+
+  <p>
+    <button dark>Dark</button>
+    <button dark class="activated">Dark.activated</button>
+  </p>
+
+  <p>
+    <button disabled>Disabled</button>
+  </p>
+
+  <p>
+    <button [color]="btnColor" (click)="chgColor()">Change Color</button>
+    <button outline [color]="btnColor" (click)="chgColor()">Change Color</button>
+  </p>
+
+</ion-content>

src/components/button/test/block/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/block/index.ts

@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  blockButton = true;
+
+  toggleBlock() {
+    this.blockButton = !this.blockButton;
+  }
+}

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

@@ -0,0 +1,42 @@
+
+<ion-toolbar>
+  <ion-title>Block Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <a button block href="#">a[button][block]</a>
+    <button block>button[block]</button>
+  </p>
+
+  <p>
+    <a button block href="#"><ion-icon name="help-circle"></ion-icon> a[button][block] icon</a>
+    <button block><ion-icon name="help-circle"></ion-icon> button[block] icon</button>
+  </p>
+
+  <p>
+    <a button block outline secondary href="#">a[button][block][outline][secondary]</a>
+    <button block outline secondary>button[block][outline][secondary]</button>
+  </p>
+
+  <p>
+    <a button block clear dark href="#">a[button][block][clear][dark]</a>
+    <button block clear dark>button[clear][block][dark]</button>
+  </p>
+
+  <p>
+    <a button block round href="#">a[button][block][round]</a>
+    <button block round>button[block][round]</button>
+  </p>
+
+  <p>
+    <a button block round outline href="#">a[button][block][round][outline]</a>
+    <button block round outline>button[block][round][outline]</button>
+  </p>
+
+  <p>
+    <button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
+  </p>
+
+</ion-content>

src/components/button/test/button.spec.ts

@@ -0,0 +1,222 @@
+import {Button, Config} from '../../../../ionic';
+
+export function run() {
+
+  describe('button', () => {
+
+    it('should ignore certain attributes', () => {
+      let b = mockButton(['_ngcontent', 'button']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-_ngcontent')).toEqual(false);
+      expect(hasClass(b, 'button-button')).toEqual(false);
+    });
+
+    it('should set a different button role', () => {
+      let b = mockButton(['outline', 'small', 'full', 'primary']);
+      b.setRole('bar-button');
+      b._assignCss(true);
+      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+      expect(hasClass(b, 'bar-button-small')).toEqual(true);
+      expect(hasClass(b, 'bar-button-full')).toEqual(true);
+      expect(hasClass(b, 'bar-button-outline-primary')).toEqual(true);
+
+      expect(hasClass(b, 'button-outline')).toEqual(false);
+      expect(hasClass(b, 'button-small')).toEqual(false);
+      expect(hasClass(b, 'button-full')).toEqual(false);
+      expect(hasClass(b, 'button-primary')).toEqual(false);
+    });
+
+    it('should remove button color attributes and add different role', () => {
+      let b = mockButton(['outline', 'small', 'full', 'primary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-outline')).toEqual(true);
+      expect(hasClass(b, 'button-small')).toEqual(true);
+      expect(hasClass(b, 'button-full')).toEqual(true);
+      expect(hasClass(b, 'button-outline-primary')).toEqual(true);
+
+      b._assignCss(false);
+      expect(hasClass(b, 'button-outline')).toEqual(false);
+      expect(hasClass(b, 'button-small')).toEqual(false);
+      expect(hasClass(b, 'button-full')).toEqual(false);
+      expect(hasClass(b, 'button-outline-primary')).toEqual(false);
+    });
+
+    it('should read button color attributes with styles', () => {
+      let b = mockButton(['outline', 'small', 'full', 'primary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-outline')).toEqual(true);
+      expect(hasClass(b, 'button-small')).toEqual(true);
+      expect(hasClass(b, 'button-full')).toEqual(true);
+      expect(hasClass(b, 'button-outline-primary')).toEqual(true);
+
+      b = mockButton(['clear', 'primary', 'secondary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-clear')).toEqual(true);
+      expect(hasClass(b, 'button-clear-primary')).toEqual(true);
+      expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
+
+      b = mockButton(['solid', 'primary', 'secondary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-solid')).toEqual(true);
+      expect(hasClass(b, 'button-primary')).toEqual(true);
+      expect(hasClass(b, 'button-secondary')).toEqual(true);
+
+      b = mockButton(['solid', 'primary', 'secondary']);
+      b.setRole('bar-button');
+      b._assignCss(true);
+      expect(hasClass(b, 'bar-button-solid')).toEqual(true);
+      expect(hasClass(b, 'bar-button-solid-primary')).toEqual(true);
+      expect(hasClass(b, 'bar-button-solid-secondary')).toEqual(true);
+    });
+
+    it('should auto add the default style', () => {
+      let b = mockButton();
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-default')).toEqual(true);
+
+      b = mockButton(['clear']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-default')).toEqual(false);
+      expect(hasClass(b, 'button-clear')).toEqual(true);
+    });
+
+    it('should read button color attributes', () => {
+      let b = mockButton(['primary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-primary')).toEqual(true);
+
+      b = mockButton(['primary', 'secondary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-primary')).toEqual(true);
+      expect(hasClass(b, 'button-secondary')).toEqual(true);
+    });
+
+    it('should read button style attributes', () => {
+      let b = mockButton(['clear']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-clear')).toEqual(true);
+
+      b = mockButton(['outline']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-outline')).toEqual(true);
+
+      b = mockButton(['solid']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-solid')).toEqual(true);      
+
+      b = mockButton(['clear', 'outline', 'small', 'full']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-clear')).toEqual(false);
+      expect(hasClass(b, 'button-outline')).toEqual(true);
+      expect(hasClass(b, 'button-small')).toEqual(true);
+      expect(hasClass(b, 'button-full')).toEqual(true);
+
+      b = mockButton(['outline']);
+      b.setRole('bar-button');
+      b._assignCss(true);
+      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+    });
+
+    it('should read button shape attributes', () => {
+      let b = mockButton(['round']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-round')).toEqual(true);
+
+      b = mockButton(['fab']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-fab')).toEqual(true);
+    });
+
+    it('should read button display attributes', () => {
+      let b = mockButton(['block']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-block')).toEqual(true);
+
+      b = mockButton(['full']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-full')).toEqual(true);
+
+      b = mockButton(['block', 'full']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-block')).toEqual(false);
+      expect(hasClass(b, 'button-full')).toEqual(true);
+    });
+
+    it('should read button size attributes', () => {
+      let b = mockButton(['small']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-small')).toEqual(true);
+
+      b = mockButton(['large']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-large')).toEqual(true);
+
+      b = mockButton(['large', 'small']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-large')).toEqual(false);
+      expect(hasClass(b, 'button-small')).toEqual(true);
+    });
+
+    it('should not add button css class for ion-item attribute', () => {
+      let b = mockButton(['ion-item']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(false);
+    });
+
+    it('should add button css class', () => {
+      let b = mockButton();
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+    });
+
+    it('should add disable-hover css class', () => {
+      let config = new Config({
+        hoverCSS: false
+      });
+      let b = mockButton(null, config);
+
+      expect(hasClass(b, 'disable-hover')).toEqual(true);
+    });
+
+    it('should set defaults', () => {
+      let b = mockButton();
+      expect(b._role).toEqual('button');
+      expect(b._size).toEqual(null);
+      expect(b._colors.length).toEqual(0);
+      expect(b._style).toEqual('default');
+      expect(b._display).toEqual(null);
+    });
+
+  });
+
+  function mockButton(attrs?, config?) {
+    config = config || new Config();
+    let elementRef = {
+      nativeElement: document.createElement('button')
+    };
+    if (attrs) {
+      for (let i = 0; i < attrs.length; i++) {
+        elementRef.nativeElement.setAttribute(attrs[i], '');
+      }
+    }
+    let renderer: any = {
+      setElementClass: function(nativeElement, className, shouldAdd) {
+        nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
+      }
+    };
+    let b = new Button(config, elementRef, renderer, null);
+    b._init = true;
+    return b;
+  }
+
+  function hasClass(button, className) {
+    return button._elementRef.nativeElement.classList.contains(className);
+  }
+
+}

src/components/button/test/clear/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/clear/index.ts

@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  clearButton = true;
+
+  toggleClear() {
+    this.clearButton = !this.clearButton;
+  }
+}

src/components/button/test/clear/main.html

@@ -0,0 +1,42 @@
+
+<ion-toolbar>
+  <ion-title>Clear Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <button clear>Default</button>
+    <button clear class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button clear primary>Primary</button>
+    <button clear primary class="activated">Primary.activated</button>
+  </p>
+
+  <p>
+    <button clear secondary>Secondary</button>
+    <button clear secondary class="activated">Secondary.activated</button>
+  </p>
+
+  <p>
+    <button clear danger>Danger</button>
+    <button clear danger class="activated">Danger.activated</button>
+  </p>
+
+  <p>
+    <button clear light>Light</button>
+    <button clear light class="activated">Light.activated</button>
+  </p>
+
+  <p>
+    <button clear dark>Dark</button>
+    <button clear dark class="activated">Dark.activated</button>
+  </p>
+
+  <p>
+    <button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
+  </p>
+
+</ion-content>

src/components/button/test/dynamic/e2e.ts

@@ -0,0 +1,4 @@
+
+it('should unify buttons', function() {
+  element(by.css('.e2eButtonDynamicUnify')).click();
+});

src/components/button/test/dynamic/index.ts

@@ -0,0 +1,52 @@
+import {App, IonicApp} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  isDestructive: boolean;
+  isSecondary: boolean;
+  isCustom: boolean;
+  isSolid: boolean;
+  isOutline: boolean;
+  isClear: boolean;
+  isClicked: boolean;
+  myColor1: string;
+  myColor2: string;
+  multiColor: Array<string>;
+
+  constructor() {
+		this.reset();
+	}
+
+	unify() {
+	  this.isDestructive = false;
+	  this.isSecondary = false;
+	  this.isCustom = false;
+	  this.isSolid = false;
+	  this.isOutline = false;
+	  this.isClear = false;
+	  this.isClicked = false;
+	  this.myColor1 = 'primary';
+	  this.myColor2 = 'primary';
+	  this.multiColor = ['primary'];
+	}
+
+	reset() {
+	  this.isDestructive = true;
+	  this.isSecondary = true;
+	  this.isCustom = true;
+	  this.isSolid = true;
+	  this.isOutline = true;
+	  this.isClear = true;
+	  this.isClicked = false;
+	  this.myColor1 = 'custom1';
+	  this.myColor2 = 'custom2';
+	  this.multiColor = ['primary','secondary'];
+	}
+
+	toggle() {
+	  this.isClicked = !this.isClicked;
+	}
+}

src/components/button/test/dynamic/main.html

@@ -0,0 +1,25 @@
+
+<ion-toolbar>
+  <ion-buttons start>
+    <button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
+  </ion-buttons>
+  <ion-title>Default Buttons</ion-title>
+  <ion-buttons end>
+    <button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-content padding>
+  <button block [solid]="isSolid">Solid</button>
+  <button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
+  <button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</button>
+  <button block [color]="myColor1" [round]="isCustom">Custom #1</button>
+  <button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
+  <button block primary light [clear]="isClear" [round]="isCustom">Multicolor (Clear)</button>
+  <button block danger dark [outline]="isOutline" [round]="isCustom">Multicolor (Outline)</button>
+  <button block [color]="multiColor" [outline]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Outline (Toggle)</button>
+  <button block [color]="multiColor" [clear]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Clear (Toggle)</button>
+  <hr/>
+  <button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
+  <button block clear danger (click)="reset()">Reset all buttons</button>
+</ion-content>

src/components/button/test/fab/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/fab/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/button/test/fab/main.html

@@ -0,0 +1,24 @@
+
+<button fab fab-left fab-top>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-center fab-top secondary>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-right fab-top danger>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-left fab-bottom light>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-center fab-bottom primary>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-right fab-bottom dark>
+  <ion-icon name="add"></ion-icon>
+</button>

src/components/button/test/full/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/full/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/button/test/full/main.html

@@ -0,0 +1,37 @@
+<ion-toolbar>
+  <ion-title>Full Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content>
+
+  <p>
+    <a button full href="#">a[button][full]</a>
+    <button full>button[full]</button>
+  </p>
+
+  <p>
+    <a button full href="#">
+      <ion-icon name="help-circle"></ion-icon>
+      a[button][full] + icon
+    </a>
+    <button full>
+      <ion-icon name="help-circle"></ion-icon>
+      button[full] + icon
+    </button>
+  </p>
+
+  <p>
+    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
+    <button full outline secondary>button[full][outline][secondary]</button>
+  </p>
+
+  <p>
+    <a button full clear light href="#">a[button][full][clear][light]</a>
+    <button full clear light>button[full][clear][light]</button>
+  </p>
+
+  <p>
+    <a button full clear dark href="#">a[button][full][clear][dark]</a>
+    <button full clear dark>button[full][clear][dark]</button>
+  </p>
+</ion-content>

src/components/button/test/icons/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/icons/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/button/test/icons/main.html

@@ -0,0 +1,101 @@
+
+<ion-toolbar>
+  <ion-title>Buttons Icons</ion-title>
+</ion-toolbar>
+
+<ion-content padding>
+
+  <div>
+    <button>
+      <ion-icon name="home"></ion-icon>
+      Left Icon
+    </button>
+    <a button>
+      <ion-icon name="home"></ion-icon>
+      Left Icon
+    </a>
+  </div>
+
+  <div>
+    <button>
+      Right Icon
+      <ion-icon name="star"></ion-icon>
+    </button>
+    <a button>
+      Right Icon
+      <ion-icon name="star"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button>
+      <ion-icon name="flag"></ion-icon>
+    </button>
+    <a button>
+      <ion-icon name="flag"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button large>
+      <ion-icon name="help-circle"></ion-icon>
+      Left, Large
+    </button>
+    <a button large>
+      <ion-icon name="help-circle"></ion-icon>
+      Left, Large
+    </a>
+  </div>
+
+  <div>
+    <button large>
+      Right, Large
+      <ion-icon name="settings"></ion-icon>
+    </button>
+    <a button large>
+      Right, Large
+      <ion-icon name="settings"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button large>
+      <ion-icon name="heart"></ion-icon>
+    </button>
+    <a button large>
+      <ion-icon name="heart"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button small>
+      <ion-icon name="checkmark"></ion-icon>
+      Left, Small
+    </button>
+    <a button small>
+      <ion-icon name="checkmark"></ion-icon>
+      Left, Small
+    </a>
+  </div>
+
+  <div>
+    <button small>
+      Right, Small
+      <ion-icon name="arrow-forward"></ion-icon>
+    </button>
+    <a button small>
+      Right, Small
+      <ion-icon name="arrow-forward"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button small>
+      <ion-icon name="search"></ion-icon>
+    </button>
+    <a button small>
+      <ion-icon name="search"></ion-icon>
+    </a>
+  </div>
+
+</ion-content>

src/components/button/test/outline/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/outline/index.ts

@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  outlineButton = true;
+
+  toggleOutline() {
+    this.outlineButton = !this.outlineButton;
+  }
+}

src/components/button/test/outline/main.html

@@ -0,0 +1,58 @@
+
+<ion-toolbar>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center" class="outer-content">
+
+  <p>
+    <button outline>Default</button>
+    <button outline class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button outline primary>Primary</button>
+    <button outline primary class="activated">Primary.activated</button>
+  </p>
+
+  <p>
+    <button outline secondary>Secondary</button>
+    <button outline secondary class="activated">Secondary.activated</button>
+  </p>
+
+  <p>
+    <button outline danger>Danger</button>
+    <button outline danger class="activated">Danger.activated</button>
+  </p>
+
+  <p>
+    <button outline light>Light</button>
+    <button outline light class="activated">Light.activated</button>
+  </p>
+
+  <p>
+    <button outline dark>Dark</button>
+    <button outline dark class="activated">Dark.activated</button>
+  </p>
+
+  <p>
+    <button outline block>button[outline][block]</button>
+  </p>
+
+  <p>
+    <button outline block class="activated">[outline][block].activated</button>
+  </p>
+
+  <p>
+    <button outline block secondary>button[outline][block][secondary]</button>
+  </p>
+
+  <p>
+    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
+  </p>
+
+  <p>
+    <button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
+  </p>
+
+</ion-content>

src/components/button/test/raised/index.ts

@@ -0,0 +1,21 @@
+import {App, IonicApp} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+    app.setTitle('Basic Buttons');
+
+    this.testingColors = ['primary', 'secondary', 'danger', 'dark'];
+    this.testingColorIndex = 0;
+    this.chgColor();
+  }
+
+  chgColor() {
+    this.btnColor = this.testingColors[this.testingColorIndex];
+    console.log('dynamic btnColor', this.btnColor);
+    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
+  }
+}

src/components/button/test/raised/main.html

@@ -0,0 +1,41 @@
+
+<ion-toolbar>
+  <ion-title>Raised Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <button raised><span>Default</span></button>
+    <button raised raised class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button raised outline>Outline</button>
+    <button raised outline class="activated">Outline.activated</button>
+  </p>
+
+  <p>
+    <button raised clear>Clear</button>
+    <button raised clear class="activated">Clear.activated</button>
+  </p>
+
+  <p>
+    <button raised fab style="position: relative">FAB</button>
+    <button raised fab style="position: relative" class="activated">FAB</button>
+  </p>
+
+  <p>
+    <button raised round>Round</button>
+    <button raised round class="activated">Round.activated</button>
+  </p>
+
+  <p>
+    <button raised block>Block</button>
+    <button raised block class="activated">Block.activated</button>
+  </p>
+
+  <p>
+    <button raised clear disabled>Clear Disabled</button>
+  </p>
+</ion-content>

src/components/button/test/round/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/round/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/button/test/round/main.html

@@ -0,0 +1,26 @@
+
+<ion-toolbar>
+  <ion-title>Round Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding>
+  <button round>button</button>
+  <button round light>button light</button>
+  <button round secondary>button secondary</button>
+  <button round danger>button danger</button>
+  <button round dark>button dark</button>
+
+  <button round outline>button</button>
+  <button round light outline>button light</button>
+  <button round secondary outline>button secondary</button>
+  <button round danger outline>button danger</button>
+  <button round dark outline>button dark</button>
+
+</ion-content>
+
+<style>
+  button {
+    display: block !important;
+    margin: 8px auto !important;
+  }
+</style>

src/components/button/test/sizes/e2e.ts

@@ -0,0 +1 @@
+

src/components/button/test/sizes/index.ts

@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}

src/components/button/test/sizes/main.html

@@ -0,0 +1,48 @@
+
+<ion-toolbar>
+  <ion-title>Button Sizes</ion-title>
+</ion-toolbar>
+
+<ion-content padding>
+
+  <p>
+    <a button href="#">a[button]</a>
+    <button>button</button>
+  </p>
+
+  <p>
+    <a button small href="#">a[button][small]</a>
+    <button small>button[small]</button>
+  </p>
+
+  <p>
+    <a button outline small href="#">a[button][outline][small]</a>
+    <button outline small>button[outline][small]</button>
+  </p>
+
+  <p>
+    <a button clear small href="#">a[button][clear][small]</a>
+    <button clear small>button[clear][small]</button>
+  </p>
+
+  <p>
+    <button large>[large]</button>
+    <a button large href="#">
+      <span style="font-size:48px">H</span>
+      <span style="font-size:38px">E</span>
+      <span style="font-size:32px">L</span>
+      <span style="font-size:24px">L</span>
+      O</a>
+  </p>
+
+  <p>
+    <a button outline large href="#">a[button][outline][large]</a>
+    <button outline large>button[outline][large]</button>
+  </p>
+
+  <p>
+    <a button clear large href="#">a[clear][large]</a>
+    <button clear large>button[clear][large]</button>
+  </p>
+
+</ion-content>