Merge branch '2.0' of https://github.com/driftyco/ionic into ins_n_outs

CHANGELOG.md

@@ -1,3 +1,36 @@
+<a name="2.0.0-beta.0"></a>
+# 2.0.0-beta.0
+
+Enjoy!
+
+<3 The Ionic Team
+
+
+
+<a name="2.0.0-alpha.57"></a>
+# [2.0.0-alpha.57](https://github.com/driftyco/ionic/compare/v2.0.0-alpha.56...v2.0.0-alpha.57) (2016-02-10)
+
+
+### Bug Fixes
+
+* **button:** bar-button uses inner span as flexbox ([38a3be4](https://github.com/driftyco/ionic/commit/38a3be4))
+
+### Features
+
+* Improved transitions and animations
+* hairlines width can be configured with a sass variable ([06b3a5b](https://github.com/driftyco/ionic/commit/06b3a5b))
+* **ion-item-sliding:** style icons on top of text in an option button ([4e57fcf](https://github.com/driftyco/ionic/commit/4e57fcf)), closes [#5352](https://github.com/driftyco/ionic/issues/5352)
+
+### Refactor
+
+* **animations:** no longer using Web Animations polyfill ([da18868](https://github.com/driftyco/ionic/commit/da18868))
+
+### Breaking Changes
+
+The Web Animations polyfill is no longer shipped with the framework and may cause build errors.  
+
+Projects will need to be [updated accordingly](https://github.com/driftyco/ionic-conference-app/commit/2ed59e6fd275c4616792c7b2e5aa9da4a20fb188).
+
 <a name="2.0.0-alpha.56"></a>
 # [2.0.0-alpha.56](https://github.com/driftyco/ionic/compare/v2.0.0-alpha.55...v2.0.0-alpha.56) (2016-02-05)
 

README.md

@@ -1,6 +1,6 @@
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
-# Ionic 2: Alpha
+# Ionic 2: Beta
 
 Ionic 2 is the next generation of [Ionic](http://ionicframework.com/), the open-source mobile app development SDK that makes it easy to build top quality mobile apps with web technologies.
 

ionic/components/button/button.ios.scss

@@ -97,7 +97,6 @@ $button-ios-small-icon-font-size:     1.3em !default;
   margin-right: 0;
 }
 
-
 // iOS Full Button
 // --------------------------------------------------
 
@@ -105,11 +104,10 @@ $button-ios-small-icon-font-size:     1.3em !default;
   margin-right: 0;
   margin-left: 0;
   border-radius: 0;
-  border-left: none;
+  border-right-width: 0;
-  border-right: none;
+  border-left-width: 0;
 }
 
-
 // iOS Outline Button
 // --------------------------------------------------
 

ionic/components/button/button.md.scss

@@ -58,7 +58,7 @@ $button-md-small-icon-font-size:           1.4em !default;
               color $button-md-transition-duration $button-md-animation-curve;
 
   &:hover:not(.disable-hover) {
-    background-color: $button-md-clear-hover-background-color;
+    background-color: $button-md-color;
   }
 
   &.activated {
@@ -85,6 +85,10 @@ $button-md-small-icon-font-size:           1.4em !default;
     color: $fg-color;
     background-color: $bg-color;
 
+    &:hover:not(.disable-hover) {
+      background-color: $bg-color;
+    }
+
     &.activated {
       opacity: 1;
       background-color: $bg-color-activated;
@@ -117,28 +121,25 @@ $button-md-small-icon-font-size:           1.4em !default;
   font-size: $button-md-small-icon-font-size;
 }
 
+// Material Design Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-left: 0;
+  margin-right: 0;
+}
 
 // Material Design Full Button
 // --------------------------------------------------
 
 .button-full {
-  border-radius: 0;
   margin-right: 0;
   margin-left: 0;
+  border-radius: 0;
   border-right-width: 0;
   border-left-width: 0;
 }
 
-
-// Material Design Block Button
-// --------------------------------------------------
-
-.button-block {
-  margin-right: 0;
-  margin-left: 0;
-}
-
-
 // Material Design Outline Button
 // --------------------------------------------------
 
@@ -150,6 +151,10 @@ $button-md-small-icon-font-size:           1.4em !default;
   color: $button-md-color;
   box-shadow: none;
 
+  &:hover:not(.disable-hover) {
+    background-color: $button-md-clear-hover-background-color;
+  }
+
   &.activated {
     opacity: 1;
     box-shadow: none;
@@ -173,6 +178,10 @@ $button-md-small-icon-font-size:           1.4em !default;
     background-color: transparent;
     color: $fg-color;
 
+    &:hover:not(.disable-hover) {
+      background-color: $button-md-clear-hover-background-color;
+    }
+
     &.activated {
       background-color: transparent;
     }
@@ -201,7 +210,7 @@ $button-md-small-icon-font-size:           1.4em !default;
   }
 
   &:hover:not(.disable-hover) {
-    color: $button-md-color;
+    background-color: $button-md-clear-hover-background-color;
   }
 
   ion-button-effect {

ionic/components/button/button.scss

@@ -30,16 +30,16 @@ $button-round-border-radius:      64px !default;
 }
 
 .button-inner {
-    width: 100%;
+  display: flex;
-    height: 100%;
+  flex-shrink: 0;
-    display: flex;
+  flex-flow: row nowrap;
-    flex-shrink: 0;
+  align-items: center;
-    flex-flow: row nowrap;
+  justify-content: center;
-    align-items: center;
+  width: 100%;
-    justify-content: center;
+  height: 100%;
 }
 
-a.button {
+a.button, a[button] {
   text-decoration: none;
 }
 
@@ -54,7 +54,7 @@ a.button {
 // --------------------------------------------------
 
 .button-block {
-  display: flex;
+  display: block;
   clear: both;
   width: 100%;
 
@@ -68,6 +68,7 @@ a.button {
 // --------------------------------------------------
 
 .button-full {
+  display: block;
   width: 100%;
 }
 

ionic/components/card/test/map/main.html

@@ -9,17 +9,17 @@
 
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   <button fab fab-right fab-top>
-    <icon pin></icon>
+    <ion-icon name="pin"></ion-icon>
   </button>
 
   <ion-item>
-    <icon item-left large football></icon>
+    <ion-icon item-left large name="football"></ion-icon>
     <h2>Museum of Football</h2>
     <p>11 N. Way St, Madison, WI 53703</p>
   </ion-item>
 
   <ion-item>
-    <icon item-left large wine></icon>
+    <ion-icon item-left large name="wine"></ion-icon>
     <h2>Institute of Fine Cocktails</h2>
     <p>14 S. Hop Avenue, Madison, WI 53703</p>
   </ion-item>
@@ -28,7 +28,7 @@
     <span item-left>18 min</span>
     <span item-left>(2.6 mi)</span>
     <button primary clear item-right>
-      <icon navigate></icon>
+      <ion-icon name="navigate"></ion-icon>
       Start
     </button>
   </ion-item>
@@ -39,17 +39,17 @@
 
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   <button danger fab fab-right fab-top>
-    <icon pin></icon>
+    <ion-icon name="pin"></ion-icon>
   </button>
 
   <ion-item>
-    <icon item-left large cloud></icon>
+    <ion-icon item-left large name="cloud"></ion-icon>
     <h2>Yoshi's Island</h2>
     <p>Iggy Koopa</p>
   </ion-item>
 
   <ion-item>
-    <icon item-left large leaf></icon>
+    <ion-icon item-left large name="leaf"></ion-icon>
     <h2>Forest of Illusion</h2>
     <p>Roy Koopa</p>
   </ion-item>
@@ -58,7 +58,7 @@
     <span item-left>3 hr</span>
     <span item-left>(4.8 mi)</span>
     <button danger clear item-right>
-      <icon navigate></icon>
+      <ion-icon name="navigate"></ion-icon>
       Start
     </button>
   </ion-item>
@@ -69,17 +69,17 @@
 
   <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
   <button secondary fab fab-right fab-top>
-    <icon pin></icon>
+    <ion-icon name="pin"></ion-icon>
   </button>
 
   <ion-item>
-    <icon item-left large information-circle></icon>
+    <ion-icon item-left large name="information-circle"></ion-icon>
     <h2>Museum of Information</h2>
     <p>44 Rue de Info, 75010 Paris, France</p>
   </ion-item>
 
   <ion-item>
-    <icon item-left large leaf></icon>
+    <ion-icon item-left large name="leaf"></ion-icon>
     <h2>General Pharmacy</h2>
     <p>1 Avenue Faux, 75010 Paris, France</p>
   </ion-item>
@@ -88,7 +88,7 @@
     <span item-left secondary>26 min</span>
     <span item-left>(8.1 mi)</span>
     <button secondary clear item-right>
-      <icon navigate></icon>
+      <ion-icon name="navigate"></ion-icon>
       Start
     </button>
   </ion-item>

ionic/components/card/test/social/main.html

@@ -23,11 +23,11 @@
 
   <ion-item>
     <button primary clear item-left>
-      <icon thumbs-up></icon>
+      <ion-icon name="thumbs-up"></ion-icon>
       <div>12 Likes</div>
     </button>
     <button primary clear item-left>
-      <icon text></icon>
+      <ion-icon name="text"></ion-icon>
       <div>4 Comments</div>
     </button>
     <ion-note item-right>
@@ -56,11 +56,11 @@
 
   <ion-item>
     <button primary clear item-left>
-      <icon thumbs-up></icon>
+      <ion-icon name="thumbs-up"></ion-icon>
       <div>30 Likes</div>
     </button>
     <button primary clear item-left>
-      <icon text></icon>
+      <ion-icon name="text"></ion-icon>
       <div>64 Comments</div>
     </button>
     <ion-note item-right>
@@ -88,11 +88,11 @@
 
   <ion-item>
     <button primary clear item-left>
-      <icon thumbs-up></icon>
+      <ion-icon name="thumbs-up"></ion-icon>
       <div>46 Likes</div>
     </button>
     <button primary clear item-left>
-      <icon text></icon>
+      <ion-icon name="text"></ion-icon>
       <div>66 Comments</div>
     </button>
     <ion-note item-right>

ionic/components/label/test/basic/index.ts

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

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

@@ -1,13 +0,0 @@
-
-<ion-toolbar>
-  <ion-title>Icons</ion-title>
-</ion-toolbar>
-
-<ion-content>
-
-  <ion-item>
-    <ion-label>Username</ion-label>
-    <ion-input></ion-input>
-  </ion-item>
-
-</ion-content>

ionic/components/list/test/infinite/index.ts

@@ -1,42 +1,9 @@
-import {ProtoViewRef, ViewContainerRef} from 'angular2/core'
+import {App} from 'ionic/ionic';
-import {Directive, Host, forwardRef} from 'angular2/core';
-
-import {App, List} from 'ionic/ionic';
-
 
 
 @App({
-  templateUrl: 'main.html',
+  templateUrl: 'main.html'
-  directives: [forwardRef(() => ItemCellTemplate)]
 })
 class E2EApp {
-  constructor() {
+  // TODO
-
-    this.items = []
-    for(let i = 0; i < 1000; i++) {
-      this.items.push({
-        title: 'Item ' + i
-      })
-    }
-  }
-}
-
-
-/*
-  Used to find and register headers in a view, and this directive's
-  content will be moved up to the common navbar location, and created
-  using the same context as the view's content area.
-*/
-@Directive({
-  selector: 'template[cell]'
-})
-export class ItemCellTemplate {
-  constructor(@Host() list: List, viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
-    console.log('Item cell template', list, viewContainer, protoViewRef);
-
-    this.protoViewRef = protoViewRef;
-    this.viewContainer = viewContainer;
-
-    list.setItemTemplate(this);
-  }
 }

ionic/components/list/test/infinite/main.html

@@ -1,10 +1,7 @@
-<ion-content padding #content>
+<ion-toolbar><ion-title>Infinite List</ion-title></ion-toolbar>
 
-  <ion-list inset virtual [items]="items" [content]="content">
+<ion-content padding>
-    <ion-item *cell #item>
+
-      {{item.title}}
+TODO
-    </ion-item>
-  </ion-list>
-  <f style="height: 15000px; width: 100%; background-color: green"></f>
 
 </ion-content>

ionic/components/menu/test/disable-swipe/index.ts

@@ -14,13 +14,13 @@ class Page1 {
   toggleLeftMenuSwipeable() {
     this.leftMenuSwipeEnabled = !this.leftMenuSwipeEnabled;
 
-    this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'leftMenu');
+    this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'left');
   }
 
   toggleRightMenuSwipeable() {
     this.rightMenuSwipeEnabled = !this.rightMenuSwipeEnabled;
 
-    this.menu.swipeEnable(this.leftMenuSwipeEnabled, 'rightMenu');
+    this.menu.swipeEnable(this.rightMenuSwipeEnabled, 'right');
   }
 }
 

ionic/components/menu/test/disable-swipe/main.html

@@ -7,11 +7,9 @@
   <ion-content>
 
     <ion-list>
-
       <button ion-item>
         Left Item 1
       </button>
-
     </ion-list>
   </ion-content>
 
@@ -27,11 +25,9 @@
   <ion-content>
 
     <ion-list>
-
       <button ion-item>
         Right Item 1
       </button>
-
     </ion-list>
   </ion-content>
 

ionic/components/modal/test/basic/index.ts

@@ -1,5 +1,5 @@
 import {App, Page, Config, Platform} from 'ionic/ionic';
-import {Modal, ActionSheet, NavController, NavParams, Animation, ViewController} from 'ionic/ionic';
+import {Modal, ActionSheet, NavController, NavParams, Transition, TransitionOptions, ViewController} from 'ionic/ionic';
 
 
 @Page({
@@ -284,10 +284,11 @@ class E2EApp {
 }
 
 
-class FadeIn extends Animation {
+class FadeIn extends Transition {
-  constructor(enteringView, leavingView) {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
-    super(enteringView.pageRef());
+    super(opts);
     this
+      .element(enteringView.pageRef())
       .easing('ease')
       .duration(1000)
       .fromTo('translateY', '0%', '0%')
@@ -295,16 +296,17 @@ class FadeIn extends Animation {
       .before.addClass('show-page');
   }
 }
-Animation.register('my-fade-in', FadeIn);
+Transition.register('my-fade-in', FadeIn);
 
-class FadeOut extends Animation {
+class FadeOut extends Transition {
-  constructor(enteringView, leavingView) {
+  constructor(enteringView: ViewController, leavingView: ViewController, opts: TransitionOptions) {
-    super(leavingView.pageRef());
+    super(opts);
     this
+      .element(leavingView.pageRef())
       .easing('ease')
       .duration(500)
       .fadeOut()
       .before.addClass('show-page');
   }
 }
-Animation.register('my-fade-out', FadeOut);
+Transition.register('my-fade-out', FadeOut);

ionic/components/nav/nav-controller.ts

@@ -416,6 +416,8 @@ export class NavController extends Ion {
       return;
     }
 
+    enteringView.setNav(rootNav);
+
     opts.keyboardClose = false;
     opts.direction = 'forward';
 

ionic/components/nav/test/basic/index.ts

@@ -20,7 +20,7 @@ class MyCmpTest{}
         <button><ion-icon name="star"></ion-icon></button>
       </ion-buttons>
       <ion-buttons end>
-        <button>S1</button>
+        <button>S1g</button>
       </ion-buttons>
     </ion-navbar>
     <ion-content>
@@ -74,7 +74,7 @@ class FirstPage {
 
   setPages() {
     let items = [
-      {page: PrimaryHeaderPage}
+      { page: PrimaryHeaderPage }
     ];
 
     this.nav.setPages(items);
@@ -89,7 +89,7 @@ class FirstPage {
   }
 
   pushFullPage() {
-    this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
+    this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
   }
 
   pushAnother() {
@@ -139,8 +139,8 @@ class FullPage {
 
   setPages() {
     let items = [
-      {page: FirstPage},
+      { page: FirstPage },
-      {page: PrimaryHeaderPage}
+      { page: PrimaryHeaderPage }
     ];
 
     this.nav.setPages(items);
@@ -190,6 +190,9 @@ class FullPage {
   template: `
     <ion-navbar *navbar primary>
       <ion-title>Primary Color Page Header</ion-title>
+      <ion-buttons end>
+        <button>S1g</button>
+      </ion-buttons>
     </ion-navbar>
     <ion-content padding>
       <p><button class="e2eFrom3To2" (click)="nav.pop()">Pop</button></p>
@@ -218,7 +221,7 @@ class PrimaryHeaderPage {
   }
 
   pushFullPage() {
-    this.nav.push(FullPage, { id: 8675309, myData: [1,2,3,4] } );
+    this.nav.push(FullPage, { id: 8675309, myData: [1, 2, 3, 4] });
   }
 
   insert() {

ionic/components/nav/test/insert-views/index.ts

@@ -9,14 +9,14 @@ import {App, Page, NavController} from 'ionic/ionic';
     </ion-navbar>
 
     <ion-content padding>
-    <button block (click)="pushPage()">Push Page</block>
+    <button block (click)="pushPage()">Push Page</button>
     </ion-content>`,
 })
 class FirstPage {
   constructor(nav: NavController) {
     this.nav = nav;
   }
-  pushPage(){
+  pushPage() {
     this.nav.push(SecondPage)
   }
 }
@@ -30,7 +30,7 @@ class FirstPage {
 
     <ion-content padding>
       <h1>Second page</h1>
-    <button block (click)="insertPage()">Insert Page</block>
+    <button block (click)="insertPage()">Insert Page</button>
     </ion-content>
   `
 })
@@ -38,7 +38,7 @@ class SecondPage {
   constructor(nav: NavController) {
     this.nav = nav;
   }
-  insertPage(){
+  insertPage() {
     this.nav.insert(1, InsertPage)
   }
 }
@@ -55,7 +55,7 @@ class SecondPage {
   `
 })
 class InsertPage {
-  constructor() {}
+  constructor() { }
 }
 
 

ionic/components/navbar/navbar.ts

@@ -94,9 +94,11 @@ class ToolbarBackground {
   template:
     '<div class="toolbar-background"></div>' +
     '<button class="back-button bar-button bar-button-default" [hidden]="hideBackButton">' +
-      '<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
+      '<span class="button-inner">' +
-      '<span class="back-button-text">' +
+        '<ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>' +
-        '<span class="back-default">{{_bbText}}</span>' +
+        '<span class="back-button-text">' +
+          '<span class="back-default">{{_bbText}}</span>' +
+        '</span>' +
       '</span>' +
       '<ion-button-effect></ion-button-effect>' +
     '</button>' +

ionic/components/slides/test/basic/index.ts

@@ -22,14 +22,13 @@ class MyApp {
 
     this.http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key='
                   + FLICKR_API_KEY + '&nojsoncallback=1&format=json&tags=' + tags)
-       .map(res => res.json())
       .subscribe(data => {
-        this.images = data.photos.photo.slice(0, 20);
+        this.images = data.json().photos.photo.slice(0, 20);
         setTimeout(() => {
           this.slider.update();
         });
     }, (err) => {
-      alert('Unable to load images');
+      console.info('Unable to load images');
       console.error(err);
     })
   }

ionic/components/tabs/test/basic/index.ts

@@ -23,9 +23,10 @@
     <ion-list>
       <ion-list-header>Tracks</ion-list-header>
 
-      <ion-toggle *ngFor="#i of items" secondary>
+      <ion-item *ngFor="#i of items">
-        Toggle {{i}}
+        <ion-label>Toggle {{i}}</ion-label>
-      </ion-toggle>
+        <ion-toggle secondary></ion-toggle>
+      </ion-item>
     </ion-list>
 
     <ion-list>

ionic/components/toolbar/test/scenarios/main.html

@@ -1,4 +1,3 @@
-
 <ion-toolbar>
   <ion-title>This is the title that never ends. It just goes on and on my friend.</ion-title>
 </ion-toolbar>
@@ -62,9 +61,9 @@
 
 <ion-toolbar>
   <ion-buttons start>
-    <button solid class="activated">
+    <a button solid class="activated">
       <ion-icon name="contact"></ion-icon>
-    </button>
+    </a>
     <button solid class="activated">
       <ion-icon name="contact"></ion-icon>
       Solid
@@ -126,14 +125,27 @@
     </button>
   </ion-buttons>
   <ion-buttons end>
-    <button>
+    <a button href="#">Edit
-      Edit
       <ion-icon name="create"></ion-icon>
-    </button>
+    </a>
   </ion-buttons>
   <ion-title>Icon/Color Attr</ion-title>
 </ion-toolbar>
 
+<ion-toolbar>
+  <ion-buttons start>
+    <button>
+      Go Back
+    </button>
+  </ion-buttons>
+  <ion-buttons end>
+    <a button href="#">
+      Edit
+    </a>
+  </ion-buttons>
+  <ion-title>Text Only</ion-title>
+</ion-toolbar>
+
 
 <ion-toolbar>
   <button menuToggle>
@@ -149,11 +161,11 @@
 
 
 <ion-toolbar>
-<ion-buttons end>
+  <ion-buttons end>
-  <button #button1 (click)="buttonClick(button1)">
+    <button #button1 (click)="buttonClick(button1)">
-    <ion-icon name="star"></ion-icon>
+      <ion-icon name="star"></ion-icon>
-  </button>
+    </button>
-</ion-buttons>
+  </ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
   <button menuToggle right>
     <ion-icon name="menu"></ion-icon>
@@ -167,10 +179,10 @@
     </button>
   </ion-buttons>
   <ion-segment secondary>
-    <ion-segment-button>
+    <ion-segment-button value="something">
       Something
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="else">
       Else
     </ion-segment-button>
   </ion-segment>
@@ -178,13 +190,13 @@
 
 <ion-toolbar>
   <ion-segment>
-    <ion-segment-button>
+    <ion-segment-button value="light">
       Light
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="toolbar">
       Toolbar
     </ion-segment-button>
-    <ion-segment-button>
+    <ion-segment-button value="default">
       Default Segment
     </ion-segment-button>
   </ion-segment>
@@ -195,4 +207,4 @@
   .toolbar {
     border-bottom: 1px solid black;
   }
-</style>
+</style>

ionic/components/toolbar/toolbar-button.scss

@@ -5,11 +5,7 @@
 
 .bar-button {
   position: relative;
-  display: inline-flex;
+  display: inline-block;
-  flex-shrink: 0;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
 
   margin: 0;
   padding: 0;
@@ -19,6 +15,7 @@
 
   text-align: center;
   text-transform: none;
+  line-height: 1;
 
   vertical-align: top; // the better option for most scenarios
   vertical-align: -webkit-baseline-middle; // the best for those that support it
@@ -54,7 +51,7 @@
 .back-button {
   display: none;
   &.show-back-button {
-    display: flex;
+    display: inline-block;
   }
 }
 

ionic/components/toolbar/toolbar.ios.scss

@@ -17,7 +17,7 @@ $toolbar-order-ios: (
 );
 
 $toolbar-ios-padding:                       4px !default;
-$toolbar-ios-height:                        4.4rem !default;
+$toolbar-ios-height:                        44px !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
 $navbar-ios-height:                         $toolbar-ios-height !default;
@@ -62,7 +62,6 @@ ion-navbar-section {
 .toolbar-title {
   font-size: $toolbar-ios-title-font-size;
   font-weight: 600;
-  margin-top: 1px;
   text-align: center;
   pointer-events: auto;
   color: $toolbar-ios-text-color;
@@ -123,10 +122,8 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button {
-  margin-top: 0;
-  margin-bottom: 0;
   padding: 0 5px;
-  min-height: 32px;
+  height: 32px;
   border: 0;
   font-size: $toolbar-ios-button-font-size;
   border-radius: $bar-button-ios-border-radius;
@@ -225,7 +222,6 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-icon-left ion-icon {
-  margin-left: -0.1em;
   padding-right: 0.3em;
   font-size: 1.4em;
   line-height: 0.67;
@@ -257,7 +253,6 @@ ion-buttons[right] {
 
 .back-button {
   margin: 0;
-  margin-top: 2px;
   min-height: 3.2rem;
   line-height: 1;
   order: map-get($toolbar-order-ios, back-button);
@@ -268,8 +263,9 @@ ion-buttons[right] {
 .back-button-icon {
   display: inherit;
   margin: 0;
+  margin-top: -1px;
   min-width: 18px;
-  font-size: 3.3rem;
+  font-size: 3.4rem;
 }
 
 .back-button-text {

ionic/components/toolbar/toolbar.md.scss

@@ -133,7 +133,7 @@ ion-buttons[right] {
   margin-left: 0.2rem;
   margin-right: 0.2rem;
   padding: 0 5px;
-  min-height: 32px;
+  height: 32px;
   border: 0;
   font-size: $toolbar-md-button-font-size;
   border-radius: $bar-button-md-border-radius;
@@ -233,7 +233,6 @@ ion-buttons[right] {
 // --------------------------------------------------
 
 .bar-button-icon-left ion-icon {
-  margin-left: -0.1em;
   padding-right: 0.3em;
   font-size: 1.4em;
   line-height: 0.67;

ionic/components/toolbar/toolbar.ts

@@ -9,7 +9,7 @@ import {Button} from '../button/button';
 /**
  * @private
  */
-export class ToolbarBase extends Ion  {
+export class ToolbarBase extends Ion {
   itemRefs = [];
   titleRef = null;
   titleCmp: any;
@@ -155,9 +155,9 @@ export class ToolbarTitle extends Ion {
     toolbar && toolbar.setTitleCmp(this);
     navbar && navbar.setTitleCmp(this);
   }
-/**
+  /**
- * @private
+   * @private
- */
+   */
   getTitleText() {
     return this.getNativeElement().textContent;
   }

ionic/ionic.ts

@@ -16,6 +16,7 @@ export * from './util/events'
 export * from './util/keyboard'
 
 export * from './animations/animation'
+export * from './transitions/transition'
 
 export * from './translation/translate'
 export * from './translation/translate_pipe'

ionic/platform/cordova.ios.scss

@@ -3,7 +3,7 @@
 // iOS Cordova
 // --------------------------------------------------
 
-$cordova-ios-toolbar-padding:    2rem   !default;
+$cordova-ios-toolbar-padding:    20px   !default;
 
 
 &.platform-cordova.platform-ios {
@@ -30,7 +30,7 @@ $cordova-ios-toolbar-padding:    2rem   !default;
   ion-page.modal > ion-toolbar:first-child ion-segment, {
     min-height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
     height: $toolbar-ios-height + $cordova-ios-toolbar-padding;
-    padding-top: $cordova-ios-toolbar-padding;
+    padding-top: $toolbar-ios-padding + $cordova-ios-toolbar-padding;
   }
 
 }

ionic/platform/storage/sql.ts

@@ -186,7 +186,6 @@ export class SqlStorage extends StorageEngine {
   /**
   * Remove the value in the database for the given key.
   * @param {string} key the key
-  * @param {string} value The value (as a string)
   * @return {Promise} that resolves or rejects with an object of the form { tx: Transaction, res: Result (or err)}
   */
   remove(key: string): Promise<any> {

package.json

@@ -1,7 +1,7 @@
 {
   "private": "true",
   "name": "ionic2",
-  "version": "2.0.0-alpha.56",
+  "version": "2.0.0-beta.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -88,4 +88,4 @@
       "path": "node_modules/ionic-cz-conventional-changelog"
     }
   }
-}
+}

scripts/docs/templates/api_index.template.html

@@ -11,7 +11,7 @@ header_sub_title: Extend Ionic even further with the power of AngularJS
 searchable: false
 ---
 
-# Ionic 2 Components
+# Ionic 2 API Docs
 
 <img class="section-header" src="/img/docs/api-intro-header.png" />