chore(): fix overlay demos/tests

CHANGELOG.md

@@ -72,10 +72,10 @@ import {Popup} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(popup: Popup) {
+  constructor(popup: Popup) {
     this.popup = popup;
-}
+  }
-doConfirm() {
+  doConfirm() {
     this.popup.confirm({
       title: "Use this lightsaber?",
       subTitle: "You can't exchange lightsabers",
@@ -87,6 +87,7 @@ doConfirm() {
     }, () => {
       console.error('Not confirmed!');
     });
+  }
 }
 ```
 
@@ -97,10 +98,10 @@ import {Alert, NavController} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(nav: NavController) {
+  constructor(nav: NavController) {
     this.nav = nav;
-}
+  }
-doConfirm() {
+  doConfirm() {
     let alert = Alert.create({
       title: "Use this lightsaber?",
       subTitle: "You can't exchange lightsabers",
@@ -122,6 +123,7 @@ doConfirm() {
     });
 
     this.nav.present(alert);
+  }
 }
 ```
 
@@ -134,10 +136,10 @@ import {Popup} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(popup: Popup) {
+  constructor(popup: Popup) {
     this.popup = popup;
-}
+  }
-doPrompt() {
+  doPrompt() {
     this.popup.prompt({
       title: "New Album",
       template: "Enter a name for this new album you're so keen on adding",
@@ -149,6 +151,8 @@ doPrompt() {
     }, () => {
       console.error('Prompt closed');
     });
+  }
+}
 ```
 
 Now:
@@ -158,10 +162,10 @@ import {Alert, NavController} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(nav: NavController) {
+  constructor(nav: NavController) {
     this.nav = nav;
-}
+  }
-doConfirm() {
+  doConfirm() {
     let alert = Alert.create({
       title: "New Album",
       body: "Enter a name for this new album you're so keen on adding",
@@ -188,6 +192,7 @@ doConfirm() {
     });
 
     this.nav.present(alert);
+  }
 }
 ```
 
@@ -200,10 +205,10 @@ import {ActionSheet} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(actionSheet: ActionSheet) {
+  constructor(actionSheet: ActionSheet) {
     this.actionSheet = actionSheet;
-}
+  }
-doActionMenu() {
+  doActionSheet() {
     this.actionSheet.open({
       buttons: [
         { text: 'Archive' }
@@ -227,21 +232,21 @@ doActionMenu() {
     }).then(actionSheetRef => {
       this.actionSheetRef = actionSheetRef;
     });
-
+  }
 }
 ```
 
 Now:
 
 ```
-import {Alert, NavController} from 'ionic/ionic';
+import {ActionSheet, NavController} from 'ionic/ionic';
 
 @Page(...)
 class MyPage {
-constructor(nav: NavController) {
+  constructor(nav: NavController) {
     this.nav = nav;
-}
+  }
-doActionMenu(ev) {
+  doActionSheet(ev) {
     let actionSheet = ActionSheet.create({
       title: 'Modify your album',
       buttons: [
@@ -269,6 +274,45 @@ doActionMenu(ev) {
     });
 
     this.nav.present(actionSheet);
+  }
+}
+```
+
+##### Modal Refactor
+
+Was:
+
+```
+import {Modal} from 'ionic/ionic';
+
+@Page(...)
+class MyApp {
+
+ constructor(modal: Modal) {
+   this.modal = modal;
+ }
+
+ openContactModal() {
+   this.modal.open(EditUser, { userId: 8675309 });
+ }
+
+}
+```
+
+Now:
+
+```
+import {Modal, NavController} from 'ionic/ionic';
+
+@Page(...)
+class MyPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  presentModal() {
+    let modal = Modal.create(EditUser, { userId: 8675309 });
+    this.nav.present(modal);
+  }
 }
 ```
 

ionic/components/item/test/sliding/index.ts

@@ -1,11 +1,11 @@
-import {App, IonicApp, Popup} from 'ionic/ionic';
+import {App, Page, IonicApp, Alert, NavController} from 'ionic/ionic';
 
 
-@App({
+@Page({
   templateUrl: 'main.html'
 })
-class E2EApp {
+class E2EPage {
-  constructor(private app: IonicApp, private popup: Popup) {
+  constructor(private app: IonicApp, private nav: NavController) {
     this.items = [];
     for (let x = 0; x < 20; x++) {
       this.items.push(x);
@@ -21,32 +21,54 @@ class E2EApp {
   didClick(item) {
     console.log('Clicked, ion-item');
 
-    this.popup.alert({
+    let alert = Alert.create({
-      title: 'Clicked ion-item!'
+      title: 'Clicked ion-item!',
+      buttons: ['Ok']
     });
+    this.nav.present(alert);
   }
 
   archive(item) {
     console.log('Archive, ion-item-options button', item);
 
-    this.popup.alert({
+    let alert = Alert.create({
-      title: 'Archived!'
+      title: 'Archived!',
-    }).then(() => {
+      buttons: [{
+        text: 'Ok',
+        handler: () => {
           item.close();
+        }
+      }]
     });
+    this.nav.present(alert);
   }
 
   del(item) {
     console.log('Delete ion-item-options button', item);
 
-    this.popup.alert({
+    let alert = Alert.create({
-      title: 'Deleted!'
+      title: 'Deleted!',
-    }).then(() => {
+      buttons: [{
+        text: 'Ok',
+        handler: () => {
           item.close();
+        }
+      }]
     });
+    this.nav.present(alert);
   }
 
   reload() {
     window.location.reload();
   }
 }
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}

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

@@ -1,18 +1,21 @@
-import {App, IonicApp, Page, NavController, Popup} from 'ionic/ionic';
+import {App, IonicApp, Page, NavController, Alert} from 'ionic/ionic';
 
 
-@Page({templateUrl: 'page1.html'})
+@Page({
+  templateUrl: 'page1.html'
+})
 class Page1 {
-  constructor(popup: Popup) {
+  constructor(nav: NavController) {
-    this.popup = popup;
+    this.nav = nav;
   }
-  openPopup() {
+  presentAlert() {
-    this.popup.alert({
+    let alert = Alert.create({
       title: "New Friend!",
-      template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
+      body: "Your friend, Obi wan Kenobi, just accepted your friend request!",
-      cssClass: 'my-alert'
+      cssClass: 'my-alert',
+      buttons: ['Ok']
     });
-    console.log('openPopup');
+    this.nav.present(alert);
   }
 }
 

ionic/components/menu/test/basic/page1.html

@@ -48,7 +48,7 @@
   </ion-card>
 
   <p>
-    <button (click)="openPopup()">Open popup</button>
+    <button (click)="presentAlert()">Open alert</button>
   </p>
 
 </ion-content>

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

@@ -198,28 +198,32 @@ class ModalFirstPage {
   }
 
   openActionSheet() {
-    this.actionSheet.open({
+    let actionSheet = ActionSheet.create({
       buttons: [
-        { text: 'Share This' },
+        {
-        { text: 'Move' }
+          text: 'Destructive',
-      ],
+          style: 'destructive',
-      destructiveText: 'Delete',
+          handler: () => {
-      titleText: 'Modify your album',
-      cancelText: 'Cancel',
-      cancel: function() {
-        console.log('Canceled');
-      },
-      destructiveButtonClicked: () => {
             console.log('Destructive clicked');
-      },
-      buttonClicked: function(index) {
-        console.log('Button clicked', index);
-        if(index == 1) { return false; }
-        return true;
           }
-    }).then(actionSheetRef => {
+        },
-      this.actionSheetRef = actionSheetRef;
+        {
+          text: 'Archive',
+          handler: () => {
+            console.log('Archive clicked');
+          }
+        },
+        {
+          text: 'Cancel',
+          style: 'cancel',
+          handler: () => {
+            console.log('cancel this clicked');
+          }
+        }
+      ]
     });
+
+    this.nav.present(actionSheet);
   }
 }
 

ionic/components/nav/nav-router.ts

@@ -82,7 +82,7 @@ export class NavRouter extends RouterOutlet {
     if (pathRecognizer) {
 
       // generate a componentInstruction from the view's PathRecognizer and params
-      let componentInstruction = pathRecognizer.generate(viewCtrl.params.data);
+      let componentInstruction = pathRecognizer.generate(viewCtrl.data);
 
       // create a ResolvedInstruction from the componentInstruction
       let instruction = new ResolvedInstruction(componentInstruction, null);

ionic/components/tabs/tab.ts

@@ -52,8 +52,9 @@ import {Tabs} from './tabs';
  * }
  * ```
  *
- * In other cases, you may not want to navigate to a new component, but just call a method.
+ * In other cases, you may not want to navigate to a new component, but just
- * You can use the `(select)` event to call a method on your class.
+ * call a method. You can use the `(select)` event to call a method on your
+ * class. Below is an example of presenting a modal from one of the tabs.
  *
  * ```html
  * <ion-tabs preloadTabs="false">
@@ -63,15 +64,15 @@ import {Tabs} from './tabs';
  *
  * ```ts
  * export class Tabs {
- *   constructor(modal: Modal){
+ *   constructor(nav: NavController){
- *     this.modal = modal;
+ *     this.nav = nav;
  *   }
  *   chat() {
- *      this.modal.open(ChatPage);
+ *     let modal = Modal.create(ChatPage);
+ *     this.nav.present(modal);
  *   }
  * }
  * ```
- * In this case, when we tap on the tab, we'll open a modal instead of loading a new component.
  *
  *
  * @property {any} [root] - set the root page for this tab

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

@@ -1,6 +1,6 @@
 import {RouteConfig, Location} from 'angular2/router';
 
-import {App, Page, NavController, Modal} from 'ionic/ionic';
+import {App, Page, NavController, Modal, ViewController} from 'ionic/ionic';
 
 
 @Page({
@@ -42,18 +42,22 @@ class SignIn {
       <ion-title>Chat Modal</ion-title>
     </ion-toolbar>
     <ion-content padding>
-      <p><button (click)="close()">Close Modal</button></p>
+      <p><button (click)="viewCtrl.dismiss()">Close Modal</button></p>
     </ion-content>
   `
 })
-class ChatPage {}
+class ChatPage {
+  constructor(viewCtrl: ViewController) {
+    this.viewCtrl = viewCtrl;
+  }
+}
 
 
 @Page({
   templateUrl: './tabs.html'
 })
 class TabsPage {
-  constructor(private modal: Modal) {
+  constructor(private nav: NavController) {
     this.tab1Root = Tab1Page1
     this.tab2Root = Tab2Page1
     this.tab3Root = Tab3Page1
@@ -61,7 +65,8 @@ class TabsPage {
 
   chat() {
     console.log('Chat clicked!');
-    this.modal.open(ChatPage);
+    let modal = Modal.create(ChatPage);
+    this.nav.present(modal);
   }
 
   onTabChange() {