feat(): add toast component

ionic/components.core.scss

@@ -26,6 +26,7 @@
   "components/show-hide-when/show-hide-when",
   "components/slides/slides",
   "components/spinner/spinner",
+  "components/toast/toast",
   "components/virtual-scroll/virtual-scroll";
 
 

ionic/components.ios.scss

@@ -27,6 +27,7 @@
   "components/select/select.ios",
   "components/tabs/tabs.ios",
   "components/toggle/toggle.ios",
+  "components/toast/toast.ios",
   "components/toolbar/toolbar.ios";
 
 

ionic/components.md.scss

@@ -27,6 +27,7 @@
   "components/select/select.md",
   "components/tabs/tabs.md",
   "components/toggle/toggle.md",
+  "components/toast/toast.md",
   "components/toolbar/toolbar.md";
 
 

ionic/components.ts

@@ -47,5 +47,6 @@ export * from './components/tabs/tabs'
 export * from './components/tabs/tab'
 export * from './components/tap-click/tap-click'
 export * from './components/toggle/toggle'
+export * from './components/toast/toast'
 export * from './components/toolbar/toolbar'
 export * from './components/virtual-scroll/virtual-scroll'

ionic/components/toast/test/basic/e2e.ts

@@ -0,0 +1,8 @@
+
+it('should open action sheet', function() {
+  element(by.css('.e2eOpenActionSheet')).click();
+});
+
+it('should close with backdrop click', function() {
+  element(by.css('.backdrop')).click();
+});

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

@@ -0,0 +1,78 @@
+import {App, Page, Toast, NavController, Platform} from 'ionic-angular';
+
+@Page({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  constructor(
+    private nav: NavController,
+    private platform: Platform)
+  {}
+
+  showToast() {
+    const toast = Toast.create({
+      message: 'User was created successfully',
+    });
+
+    this.nav.present(toast);
+  }
+
+  showLongToast() {
+    const toast = Toast.create({
+      message: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea voluptatibus quibusdam eum nihil optio, ullam accusamus magni, nobis suscipit reprehenderit, sequi quam amet impedit. Accusamus dolorem voluptates laborum dolor obcaecati.',
+    });
+
+    this.nav.present(toast);
+  }
+
+  showDismissDurationToast() {
+     const toast = Toast.create({
+       message: 'I am dismissed after 1.5 seconds',
+       duration: 1500
+     });
+
+     this.nav.present(toast);
+  }
+
+  showToastWithCloseButton() {
+    const toast = Toast.create({
+      message: 'Your internet connection appears to be offline. Data integrity is not gauranteed.',
+      showCloseButton: true,
+      closeButtonText: 'Ok'
+    });
+
+    this.nav.present(toast);
+  }
+
+}
+
+@Page({
+  template: `
+    <ion-toolbar>
+      <ion-buttons start>
+        <button (click)="dismiss()">Close</button>
+      </ion-buttons>
+      <ion-title>Toast</ion-title>
+    </ion-toolbar>
+    <ion-content padding>
+      Hi, I'm Bob, and I'm a modal.
+    </ion-content>
+  `
+})
+class ToastPage {
+  constructor(private viewCtrl: ViewController) { }
+
+  dismiss() {
+    this.viewCtrl.dismiss();
+  }
+}
+
+
+@App({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  constructor() {
+    this.root = E2EPage;
+  }
+}

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

@@ -0,0 +1,11 @@
+<ion-navbar *navbar>
+  <ion-title>Toasts</ion-title>
+</ion-navbar>
+
+<ion-content padding>
+  <button block (click)="showToast()">Show Toast</button>
+  <button block (click)="showLongToast()">Show Long Toast</button>
+  <br />
+  <button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
+  <button block (click)="showToastWithCloseButton()">With closeButtonText</button>
+</ion-content>

ionic/components/toast/toast.ios.scss

@@ -0,0 +1,39 @@
+// iOS Toast
+// --------------------------------------------------
+$toast-ios-text-align:                            left !default;
+$toast-ios-background:                            rgba(0, 0, 0, 0.70) !default;
+$toast-ios-border-radius:                         0.65rem !default;
+
+$toast-ios-title-color:                           #fff !default;
+$toast-ios-title-font-size:                       1.4rem !default;
+$toast-ios-title-padding:                         1.5rem !default;
+
+ion-toast {
+  display: block;
+  height: $toast-width;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: $toast-width;
+  z-index: $z-index-overlay;
+}
+
+.toast-wrapper {
+  background: $toast-ios-background;
+  border-radius: $toast-ios-border-radius;
+  bottom: 10px;
+  display: block;
+  left: 10px;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  right: 10px;
+  transform: translate3d(0, 100%, 0);
+  z-index: $z-index-overlay-wrapper;
+}
+
+.toast-message {
+  color: $toast-ios-title-color;
+  font-size: $toast-ios-title-font-size;
+  padding: $toast-ios-title-padding;
+}

ionic/components/toast/toast.md.scss

@@ -0,0 +1,41 @@
+@import "../../globals.md";
+
+// Material Design Toast
+// --------------------------------------------------
+$toast-md-text-align:                            left !default;
+$toast-md-background:                            #333333 !default;
+$toast-md-group-margin-bottom:                   8px !default;
+
+$toast-md-title-color:                           #fff !default;
+$toast-md-title-font-size:                       1.5rem !default;
+$toast-md-title-padding:                         19px 16px 17px !default;
+
+ion-toast {
+  display: block;
+  height: $toast-width;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: $toast-width;
+  z-index: $z-index-overlay;
+}
+
+.toast-wrapper {
+  background: $toast-md-background;
+  bottom: 0;
+  display: block;
+  left: 0;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  right: 0;
+  transform: translate3d(0, 100%, 0);
+  width: $toast-width;
+  z-index: $z-index-overlay-wrapper;
+}
+
+.toast-message {
+  color: $toast-md-title-color;
+  font-size: $toast-md-title-font-size;
+  padding: $toast-md-title-padding;
+}

ionic/components/toast/toast.scss

@@ -0,0 +1,43 @@
+@import "../../globals.ios";
+
+// Action Sheet
+// --------------------------------------------------
+
+$toast-width:                             100% !default;
+$toast-max-width:                         700px !default;
+
+ion-toast {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: $z-index-overlay;
+  display: block;
+  width: $toast-width;
+  height: $toast-width;
+}
+
+.toast-container {
+  display: flex;
+  align-items: center;
+
+  button {
+    font-size: 1.5rem;
+    padding: 19px 16px 17px;
+  }
+}
+
+.toast-message {
+  flex: 1;
+}
+
+.toast-wrapper {
+  bottom: 0;
+  display: block;
+  left: 0;
+  margin: auto;
+  max-width: $toast-max-width;
+  position: absolute;
+  right: 0;
+  transform: translate3d(0, 100%, 0);
+  z-index: $z-index-overlay-wrapper;
+}