From e523ee0513b74321c3dea21b30a80726804ddded Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Fri, 9 Nov 2018 16:55:52 -0500
Subject: [PATCH 1/8] fix(toast): update naming to match other animations

---
 core/src/components/toast/animations/ios.enter.ts | 9 +++++----
 core/src/components/toast/animations/ios.leave.ts | 4 ++--
 core/src/components/toast/animations/md.enter.ts  | 8 ++++----
 core/src/components/toast/animations/md.leave.ts  | 4 ++--
 4 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/core/src/components/toast/animations/ios.enter.ts b/core/src/components/toast/animations/ios.enter.ts
index 512fdc6f9ec..0aa72501c94 100644
--- a/core/src/components/toast/animations/ios.enter.ts
+++ b/core/src/components/toast/animations/ios.enter.ts
@@ -7,8 +7,9 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, po
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
-  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
-  wrapperAnimation.addElement(wrapperEle);
+  const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
+
+  wrapperAnimation.addElement(wrapperEl);
 
   const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
   const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
@@ -19,9 +20,9 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, po
       break;
     case 'middle':
       const topPosition = Math.floor(
-        baseEl.clientHeight / 2 - wrapperEle.clientHeight / 2
+        baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2
       );
-      wrapperEle.style.top = `${topPosition}px`;
+      wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
diff --git a/core/src/components/toast/animations/ios.leave.ts b/core/src/components/toast/animations/ios.leave.ts
index 2abb50b25dc..79f853df376 100644
--- a/core/src/components/toast/animations/ios.leave.ts
+++ b/core/src/components/toast/animations/ios.leave.ts
@@ -7,8 +7,8 @@ export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, po
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
-  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
-  wrapperAnimation.addElement(wrapperEle);
+  const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
+  wrapperAnimation.addElement(wrapperEl);
 
   const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
   const top = `calc(10px + var(--ion-safe-area-top, 0px))`;
diff --git a/core/src/components/toast/animations/md.enter.ts b/core/src/components/toast/animations/md.enter.ts
index 176c7e9900d..9fa67cabe2a 100644
--- a/core/src/components/toast/animations/md.enter.ts
+++ b/core/src/components/toast/animations/md.enter.ts
@@ -7,8 +7,8 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
-  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
-  wrapperAnimation.addElement(wrapperEle);
+  const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
+  wrapperAnimation.addElement(wrapperEl);
 
   switch (position) {
     case 'top':
@@ -16,9 +16,9 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
       break;
     case 'middle':
       const topPosition = Math.floor(
-        baseEl.clientHeight / 2 - wrapperEle.clientHeight / 2
+        baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2
       );
-      wrapperEle.style.top = `${topPosition}px`;
+      wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
diff --git a/core/src/components/toast/animations/md.leave.ts b/core/src/components/toast/animations/md.leave.ts
index 321f5187483..0b2db25ad2e 100644
--- a/core/src/components/toast/animations/md.leave.ts
+++ b/core/src/components/toast/animations/md.leave.ts
@@ -7,8 +7,8 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
-  const wrapperEle = baseEl.querySelector('.toast-wrapper') as HTMLElement;
-  wrapperAnimation.addElement(wrapperEle);
+  const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
+  wrapperAnimation.addElement(wrapperEl);
 
   switch (position) {
     case 'top':

From 5adb1e4258ce685e2fd79b5ab546de6c859d668c Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 13 Nov 2018 11:40:42 -0500
Subject: [PATCH 2/8] fix(toast): update animation to use correct safe area

---
 core/src/components/toast/animations/ios.leave.ts | 1 +
 core/src/components/toast/animations/md.enter.ts  | 8 ++++++--
 core/src/components/toast/animations/md.leave.ts  | 8 ++++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/core/src/components/toast/animations/ios.leave.ts b/core/src/components/toast/animations/ios.leave.ts
index 79f853df376..08f02f19c13 100644
--- a/core/src/components/toast/animations/ios.leave.ts
+++ b/core/src/components/toast/animations/ios.leave.ts
@@ -8,6 +8,7 @@ export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, po
 
   const wrapperAnimation = new AnimationC();
   const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
+
   wrapperAnimation.addElement(wrapperEl);
 
   const bottom = `calc(-10px - var(--ion-safe-area-bottom, 0px))`;
diff --git a/core/src/components/toast/animations/md.enter.ts b/core/src/components/toast/animations/md.enter.ts
index 9fa67cabe2a..208366fb2b3 100644
--- a/core/src/components/toast/animations/md.enter.ts
+++ b/core/src/components/toast/animations/md.enter.ts
@@ -8,11 +8,15 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
 
   const wrapperAnimation = new AnimationC();
   const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
+
   wrapperAnimation.addElement(wrapperEl);
 
+  const bottom = `calc(-8px - var(--ion-safe-area-bottom, 0px))`;
+  const top = `calc(8px + var(--ion-safe-area-top, 0px))`;
+
   switch (position) {
     case 'top':
-      wrapperAnimation.fromTo('translateY', '-100%', '0%');
+      wrapperAnimation.fromTo('translateY', '-100%', top);
       break;
     case 'middle':
       const topPosition = Math.floor(
@@ -22,7 +26,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperAnimation.fromTo('translateY', '100%', '0%');
+      wrapperAnimation.fromTo('translateY', '100%', bottom);
       break;
   }
   return Promise.resolve(baseAnimation
diff --git a/core/src/components/toast/animations/md.leave.ts b/core/src/components/toast/animations/md.leave.ts
index 0b2db25ad2e..75224c64d19 100644
--- a/core/src/components/toast/animations/md.leave.ts
+++ b/core/src/components/toast/animations/md.leave.ts
@@ -8,17 +8,21 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
 
   const wrapperAnimation = new AnimationC();
   const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
+
   wrapperAnimation.addElement(wrapperEl);
 
+  const bottom = `calc(-8px - var(--ion-safe-area-bottom, 0px))`;
+  const top = `calc(8px + var(--ion-safe-area-top, 0px))`;
+
   switch (position) {
     case 'top':
-      wrapperAnimation.fromTo('translateY', '0px', '-100%');
+      wrapperAnimation.fromTo('translateY', top, '-100%');
       break;
     case 'middle':
       wrapperAnimation.fromTo('opacity', 0.99, 0);
       break;
     default:
-      wrapperAnimation.fromTo('translateY', `0px`, '100%');
+      wrapperAnimation.fromTo('translateY', bottom, '100%');
       break;
   }
   return Promise.resolve(baseAnimation

From 04337502183d74e361e877616cef7b32e4cc83a6 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 13 Nov 2018 17:35:31 -0500
Subject: [PATCH 3/8] fix(toast): fix the position middle and animations for
 toast

fixes #16271
---
 .../animation-controller/animation-interface.tsx          | 2 +-
 core/src/components/toast/animations/ios.enter.ts         | 8 +++++---
 core/src/components/toast/animations/ios.leave.ts         | 6 ++++--
 core/src/components/toast/animations/md.enter.ts          | 8 +++++---
 core/src/components/toast/animations/md.leave.ts          | 6 ++++--
 core/src/utils/overlays.ts                                | 2 +-
 core/src/utils/transition.ts                              | 2 +-
 7 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/core/src/components/animation-controller/animation-interface.tsx b/core/src/components/animation-controller/animation-interface.tsx
index dbf1ac9c97a..eb658cf80b8 100644
--- a/core/src/components/animation-controller/animation-interface.tsx
+++ b/core/src/components/animation-controller/animation-interface.tsx
@@ -41,7 +41,7 @@ export interface Animation {
   hasCompleted: boolean;
 }
 
-export type AnimationBuilder = (Animation: Animation, baseEl: HTMLElement, opts?: any) => Promise<Animation>;
+export type AnimationBuilder = (Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>;
 
 export interface PlayOptions {
   duration?: number;
diff --git a/core/src/components/toast/animations/ios.enter.ts b/core/src/components/toast/animations/ios.enter.ts
index 0aa72501c94..f738c219674 100644
--- a/core/src/components/toast/animations/ios.enter.ts
+++ b/core/src/components/toast/animations/ios.enter.ts
@@ -3,10 +3,12 @@ import { Animation } from '../../../interface';
 /**
  * iOS Toast Enter Animation
  */
-export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function iosEnterAnimation(AnimationC: Animation, baseEl: ShadowRoot, position: string): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
+
+  const hostEl = baseEl.host || baseEl;
   const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
 
   wrapperAnimation.addElement(wrapperEl);
@@ -20,7 +22,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, po
       break;
     case 'middle':
       const topPosition = Math.floor(
-        baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2
+        hostEl.clientHeight / 2 - wrapperEl.clientHeight / 2
       );
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
@@ -30,7 +32,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, po
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseEl)
+    .addElement(hostEl)
     .easing('cubic-bezier(.155,1.105,.295,1.12)')
     .duration(400)
     .add(wrapperAnimation));
diff --git a/core/src/components/toast/animations/ios.leave.ts b/core/src/components/toast/animations/ios.leave.ts
index 08f02f19c13..9ee06c70ab4 100644
--- a/core/src/components/toast/animations/ios.leave.ts
+++ b/core/src/components/toast/animations/ios.leave.ts
@@ -3,10 +3,12 @@ import { Animation } from '../../../interface';
 /**
  * iOS Toast Leave Animation
  */
-export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function iosLeaveAnimation(AnimationC: Animation, baseEl: ShadowRoot, position: string): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
+
+  const hostEl = baseEl.host || baseEl;
   const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
 
   wrapperAnimation.addElement(wrapperEl);
@@ -26,7 +28,7 @@ export function iosLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, po
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseEl)
+    .addElement(hostEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(300)
     .add(wrapperAnimation));
diff --git a/core/src/components/toast/animations/md.enter.ts b/core/src/components/toast/animations/md.enter.ts
index 208366fb2b3..998f4034b9a 100644
--- a/core/src/components/toast/animations/md.enter.ts
+++ b/core/src/components/toast/animations/md.enter.ts
@@ -3,10 +3,12 @@ import { Animation } from '../../../interface';
 /**
  * MD Toast Enter Animation
  */
-export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function mdEnterAnimation(AnimationC: Animation, baseEl: ShadowRoot, position: string): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
+
+  const hostEl = baseEl.host || baseEl;
   const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
 
   wrapperAnimation.addElement(wrapperEl);
@@ -20,7 +22,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
       break;
     case 'middle':
       const topPosition = Math.floor(
-        baseEl.clientHeight / 2 - wrapperEl.clientHeight / 2
+        hostEl.clientHeight / 2 - wrapperEl.clientHeight / 2
       );
       wrapperEl.style.top = `${topPosition}px`;
       wrapperAnimation.fromTo('opacity', 0.01, 1);
@@ -30,7 +32,7 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseEl)
+    .addElement(hostEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(400)
     .add(wrapperAnimation));
diff --git a/core/src/components/toast/animations/md.leave.ts b/core/src/components/toast/animations/md.leave.ts
index 75224c64d19..6b9468a94e3 100644
--- a/core/src/components/toast/animations/md.leave.ts
+++ b/core/src/components/toast/animations/md.leave.ts
@@ -3,10 +3,12 @@ import { Animation } from '../../../interface';
 /**
  * md Toast Leave Animation
  */
-export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, position: string): Promise<Animation> {
+export function mdLeaveAnimation(AnimationC: Animation, baseEl: ShadowRoot, position: string): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
+
+  const hostEl = baseEl.host || baseEl;
   const wrapperEl = baseEl.querySelector('.toast-wrapper') as HTMLElement;
 
   wrapperAnimation.addElement(wrapperEl);
@@ -26,7 +28,7 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: HTMLElement, pos
       break;
   }
   return Promise.resolve(baseAnimation
-    .addElement(baseEl)
+    .addElement(hostEl)
     .easing('cubic-bezier(.36,.66,.04,1)')
     .duration(300)
     .add(wrapperAnimation));
diff --git a/core/src/utils/overlays.ts b/core/src/utils/overlays.ts
index 27ca1cdb2c0..b1920e60adb 100644
--- a/core/src/utils/overlays.ts
+++ b/core/src/utils/overlays.ts
@@ -132,7 +132,7 @@ function getAppRoot(doc: Document) {
 async function overlayAnimation(
   overlay: OverlayInterface,
   animationBuilder: AnimationBuilder,
-  baseEl: HTMLElement,
+  baseEl: any,
   opts: any
 ): Promise<boolean> {
   if (overlay.animation) {
diff --git a/core/src/utils/transition.ts b/core/src/utils/transition.ts
index f85d9605d54..01938affcc8 100644
--- a/core/src/utils/transition.ts
+++ b/core/src/utils/transition.ts
@@ -216,7 +216,7 @@ export interface TransitionOptions extends NavOptions {
   queue: QueueApi;
   progressCallback?: ((ani: Animation) => void);
   window: Window;
-  baseEl: HTMLElement;
+  baseEl: any;
   enteringEl: HTMLElement;
   leavingEl: HTMLElement | undefined;
 }

From b3225a9c06f42576f049554cd5dd676a3f671ff7 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Tue, 13 Nov 2018 17:35:52 -0500
Subject: [PATCH 4/8] test(core): update tests to latest

---
 .../components/toast/test/basic/index.html    |  2 +-
 core/src/themes/test/css-variables/index.html | 28 +++++++++++++------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 71f11271b33..53972953f37 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -23,7 +23,7 @@
         <ion-button expand="block" id="showBottomToast" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
         <ion-button expand="block" onclick="presentToast('top')">Show Toast Top</ion-button>
         <ion-button expand="block" onclick="presentToast('middle')">Show Toast Middle</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({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.', duration: 2000})">Show Toast with long message</ion-button>
+        <ion-button expand="block" onclick="presentToastWithOptions({message: 'Two-line message<br> with action.', showCloseButton: true, closeButtonText: 'Action'})">Show Toast with long message</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
diff --git a/core/src/themes/test/css-variables/index.html b/core/src/themes/test/css-variables/index.html
index 3fa7a0899f6..d55c00c03f0 100644
--- a/core/src/themes/test/css-variables/index.html
+++ b/core/src/themes/test/css-variables/index.html
@@ -48,9 +48,24 @@
 <body>
   <ion-app>
     <ion-tabs>
-      <ion-tab label="Lists" icon="list">
+      <ion-tab-bar slot="bottom">
+        <ion-tab-button tab="list">
+          <ion-label>Lists</ion-label>
+          <ion-icon name="list"></ion-icon>
+        </ion-tab-button>
+        <ion-tab-button tab="colors">
+          <ion-label>Colors</ion-label>
+          <ion-icon name="brush"></ion-icon>
+        </ion-tab-button>
+        <ion-tab-button tab="other">
+          <ion-label>Other</ion-label>
+          <ion-icon name="more"></ion-icon>
+        </ion-tab-button>
+      </ion-tab-bar>
+
+      <ion-tab tab="list">
         <ion-header>
-          <ion-toolbar>
+          <ion-toolbar color="primary">
             <ion-title>Lists</ion-title>
 
             <div class="right-container">
@@ -280,7 +295,7 @@
         </ion-content>
       </ion-tab>
 
-      <ion-tab label="Colors" icon="brush">
+      <ion-tab tab="colors">
         <ion-header>
           <ion-toolbar>
             <ion-title>Colors</ion-title>
@@ -636,7 +651,7 @@
         </ion-content>
       </ion-tab>
 
-      <ion-tab label="Other" icon="more">
+      <ion-tab tab="other">
         <ion-header>
           <ion-toolbar>
             <ion-title>Other</ion-title>
@@ -656,12 +671,7 @@
           </div>
         </ion-content>
       </ion-tab>
-
-      <ion-tabbar></ion-tabbar>
     </ion-tabs>
-
-
-
   </ion-app>
 
   <script>

From cee89a3a12a09e64e60ae180114c4827f9acfad5 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 14 Nov 2018 11:04:02 -0500
Subject: [PATCH 5/8] test(toast): update e2e test to include other positions

---
 core/src/components/toast/test/basic/e2e.ts   | 49 +++++++++++++++++--
 .../components/toast/test/basic/index.html    |  4 +-
 2 files changed, 48 insertions(+), 5 deletions(-)

diff --git a/core/src/components/toast/test/basic/e2e.ts b/core/src/components/toast/test/basic/e2e.ts
index 311e34b3db7..97441d57299 100644
--- a/core/src/components/toast/test/basic/e2e.ts
+++ b/core/src/components/toast/test/basic/e2e.ts
@@ -5,21 +5,64 @@ test('toast: basic', async () => {
     url: '/src/components/toast/test/basic?ionic:_testing=true'
   });
 
-  const button = await page.find('#showBottomToast');
+  // Show bottom toast
+  let button = await page.find('#showBottomToast');
   await button.click();
 
   let toast = await page.find('ion-toast');
   await toast.waitForVisible();
   await page.waitFor(250);
 
-  let compare = await page.compareScreenshot();
+  let compare = await page.compareScreenshot(`bottom toast`);
   expect(compare).toMatchScreenshot();
 
   await toast.callMethod('dismiss');
   await toast.waitForNotVisible();
   await page.waitFor(250);
 
-  compare = await page.compareScreenshot('dismissed');
+  compare = await page.compareScreenshot('dismissed bottom toast');
+  expect(compare).toMatchScreenshot();
+
+  toast = await page.find('ion-toast');
+  expect(toast).toBeNull();
+
+  // Show middle toast
+  button = await page.find('#showMiddleToast');
+  await button.click();
+
+  toast = await page.find('ion-toast');
+  await toast.waitForVisible();
+  await page.waitFor(250);
+
+  compare = await page.compareScreenshot(`middle toast`);
+  expect(compare).toMatchScreenshot();
+
+  await toast.callMethod('dismiss');
+  await toast.waitForNotVisible();
+  await page.waitFor(250);
+
+  compare = await page.compareScreenshot('dismissed middle toast');
+  expect(compare).toMatchScreenshot();
+
+  toast = await page.find('ion-toast');
+  expect(toast).toBeNull();
+
+  // Show top toast
+  button = await page.find('#showTopToast');
+  await button.click();
+
+  toast = await page.find('ion-toast');
+  await toast.waitForVisible();
+  await page.waitFor(250);
+
+  compare = await page.compareScreenshot(`top toast`);
+  expect(compare).toMatchScreenshot();
+
+  await toast.callMethod('dismiss');
+  await toast.waitForNotVisible();
+  await page.waitFor(250);
+
+  compare = await page.compareScreenshot('dismissed top toast');
   expect(compare).toMatchScreenshot();
 
   toast = await page.find('ion-toast');
diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 53972953f37..6c4c61164d5 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -21,8 +21,8 @@
 
       <ion-content id="content" padding>
         <ion-button expand="block" id="showBottomToast" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
-        <ion-button expand="block" onclick="presentToast('top')">Show Toast Top</ion-button>
-        <ion-button expand="block" onclick="presentToast('middle')">Show Toast Middle</ion-button>
+        <ion-button expand="block" id="showTopToast" onclick="presentToast('top')">Show Toast Top</ion-button>
+        <ion-button expand="block" id="showMiddleToast" onclick="presentToast('middle')">Show Toast Middle</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'Two-line message<br> with action.', showCloseButton: true, closeButtonText: 'Action'})">Show Toast with long message</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>

From 8900112f355a77c16f587096446c06bb10253712 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 14 Nov 2018 11:04:13 -0500
Subject: [PATCH 6/8] fix(toast): use correct animations for MD

---
 core/src/components/toast/animations/md.enter.ts |  8 +++++---
 core/src/components/toast/animations/md.leave.ts | 16 ++--------------
 2 files changed, 7 insertions(+), 17 deletions(-)

diff --git a/core/src/components/toast/animations/md.enter.ts b/core/src/components/toast/animations/md.enter.ts
index 998f4034b9a..8d72e59b9f6 100644
--- a/core/src/components/toast/animations/md.enter.ts
+++ b/core/src/components/toast/animations/md.enter.ts
@@ -13,12 +13,13 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: ShadowRoot, posi
 
   wrapperAnimation.addElement(wrapperEl);
 
-  const bottom = `calc(-8px - var(--ion-safe-area-bottom, 0px))`;
+  const bottom = `calc(8px + var(--ion-safe-area-bottom, 0px))`;
   const top = `calc(8px + var(--ion-safe-area-top, 0px))`;
 
   switch (position) {
     case 'top':
-      wrapperAnimation.fromTo('translateY', '-100%', top);
+      wrapperEl.style.top = top;
+      wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     case 'middle':
       const topPosition = Math.floor(
@@ -28,7 +29,8 @@ export function mdEnterAnimation(AnimationC: Animation, baseEl: ShadowRoot, posi
       wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
     default:
-      wrapperAnimation.fromTo('translateY', '100%', bottom);
+      wrapperEl.style.bottom = bottom;
+      wrapperAnimation.fromTo('opacity', 0.01, 1);
       break;
   }
   return Promise.resolve(baseAnimation
diff --git a/core/src/components/toast/animations/md.leave.ts b/core/src/components/toast/animations/md.leave.ts
index 6b9468a94e3..f07b8359c3f 100644
--- a/core/src/components/toast/animations/md.leave.ts
+++ b/core/src/components/toast/animations/md.leave.ts
@@ -3,7 +3,7 @@ import { Animation } from '../../../interface';
 /**
  * md Toast Leave Animation
  */
-export function mdLeaveAnimation(AnimationC: Animation, baseEl: ShadowRoot, position: string): Promise<Animation> {
+export function mdLeaveAnimation(AnimationC: Animation, baseEl: ShadowRoot): Promise<Animation> {
   const baseAnimation = new AnimationC();
 
   const wrapperAnimation = new AnimationC();
@@ -13,20 +13,8 @@ export function mdLeaveAnimation(AnimationC: Animation, baseEl: ShadowRoot, posi
 
   wrapperAnimation.addElement(wrapperEl);
 
-  const bottom = `calc(-8px - var(--ion-safe-area-bottom, 0px))`;
-  const top = `calc(8px + var(--ion-safe-area-top, 0px))`;
+  wrapperAnimation.fromTo('opacity', 0.99, 0);
 
-  switch (position) {
-    case 'top':
-      wrapperAnimation.fromTo('translateY', top, '-100%');
-      break;
-    case 'middle':
-      wrapperAnimation.fromTo('opacity', 0.99, 0);
-      break;
-    default:
-      wrapperAnimation.fromTo('translateY', bottom, '100%');
-      break;
-  }
   return Promise.resolve(baseAnimation
     .addElement(hostEl)
     .easing('cubic-bezier(.36,.66,.04,1)')

From a6c716a32ce87b37c8c474b7ed713fd13763dd4d Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 14 Nov 2018 11:15:30 -0500
Subject: [PATCH 7/8] fix(toast): update design to match md spec

---
 core/src/components/toast/toast.ios.scss     | 16 +++++++++
 core/src/components/toast/toast.md.scss      | 29 ++++++++---------
 core/src/components/toast/toast.md.vars.scss | 34 ++++++++++++--------
 core/src/components/toast/toast.scss         | 22 +++----------
 core/src/components/toast/toast.tsx          |  7 ++--
 core/src/components/toast/toast.vars.scss    |  3 --
 6 files changed, 59 insertions(+), 52 deletions(-)

diff --git a/core/src/components/toast/toast.ios.scss b/core/src/components/toast/toast.ios.scss
index 596b87f1c41..2babc1dd3f4 100644
--- a/core/src/components/toast/toast.ios.scss
+++ b/core/src/components/toast/toast.ios.scss
@@ -30,10 +30,26 @@
   backdrop-filter: $toast-ios-translucent-filter;
 }
 
+.toast-wrapper.toast-top {
+  @include transform(translate3d(0, -100%, 0));
+
+  top: 0;
+}
+
 .toast-wrapper.toast-middle {
   opacity: .01;
 }
 
+.toast-wrapper.toast-bottom {
+  @include transform(translate3d(0, 100%, 0));
+
+  bottom: 0;
+}
+
 .toast-message {
   @include padding($toast-ios-title-padding-top, $toast-ios-title-padding-end, $toast-ios-title-padding-bottom, $toast-ios-title-padding-start);
 }
+
+.toast-button {
+  font-size: $toast-button-font-size;
+}
\ No newline at end of file
diff --git a/core/src/components/toast/toast.md.scss b/core/src/components/toast/toast.md.scss
index afbfa1f3ef7..5d1566dbd04 100644
--- a/core/src/components/toast/toast.md.scss
+++ b/core/src/components/toast/toast.md.scss
@@ -5,37 +5,36 @@
 // --------------------------------------------------
 
 :host {
+  --button-color: #{ion-color(primary, base)};
   --background: #{$toast-md-background};
-  --color: #{$toast-md-title-color};
+  --color: #{$toast-md-color};
 
-  font-size: $toast-md-title-font-size;
+  font-size: $toast-md-font-size;
 }
 
 .toast-wrapper {
-  @include position-horizontal(0, 0);
+  @include border-radius(4px);
+  @include position-horizontal(8px, 8px);
   @include margin(auto);
 
   display: block;
   position: absolute;
 
-  width: $toast-width;
   max-width: $toast-max-width;
 
-  z-index: $z-index-overlay-wrapper;
-}
+  box-shadow: $toast-md-box-shadow;
 
-.toast-wrapper.toast-top {
-  padding-top: var(--ion-safe-area-top, 0);
-}
+  opacity: .01;
 
-.toast-wrapper.toast-bottom {
-  padding-bottom: var(--ion-safe-area-bottom, 0);
+  z-index: $z-index-overlay-wrapper;
 }
 
-.toast-wrapper.toast-middle {
-  opacity: .01;
+.toast-message {
+  @include padding($toast-md-message-padding-top, $toast-md-message-padding-end, $toast-md-message-padding-bottom, $toast-md-message-padding-start);
+
+  line-height: $toast-md-message-line-height;
 }
 
-.toast-message {
-  @include padding($toast-md-title-padding-top, $toast-md-title-padding-end, $toast-md-title-padding-bottom, $toast-md-title-padding-start);
+.toast-button {
+  --margin-end: 0;
 }
diff --git a/core/src/components/toast/toast.md.vars.scss b/core/src/components/toast/toast.md.vars.scss
index 19b4092351d..c4cc32a08d1 100644
--- a/core/src/components/toast/toast.md.vars.scss
+++ b/core/src/components/toast/toast.md.vars.scss
@@ -3,23 +3,29 @@
 // Material Design Toast
 // --------------------------------------------------
 
-/// @prop - Background of the toast wrapper
-$toast-md-background:                            $text-color-step-150 !default;
+/// @prop - Background of the toast
+$toast-md-background:                              $text-color-step-200 !default;
 
-/// @prop - Color of the toast title
-$toast-md-title-color:                           $background-color !default;
+/// @prop - Box shadow of the toast
+$toast-md-box-shadow:                              0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12) !default;
 
-/// @prop - Font size of the toast title
-$toast-md-title-font-size:                       15px !default;
+/// @prop - Font size of the toast
+$toast-md-font-size:                               14px !default;
 
-/// @prop - Padding top of the toast title
-$toast-md-title-padding-top:                     19px !default;
+/// @prop - Color of the toast
+$toast-md-color:                                   $background-color-step-50 !default;
 
-/// @prop - Padding end of the toast title
-$toast-md-title-padding-end:                     16px !default;
+/// @prop - Font size of the toast message
+$toast-md-message-line-height:                     20px !default;
 
-/// @prop - Padding bottom of the toast title
-$toast-md-title-padding-bottom:                  17px !default;
+/// @prop - Padding top of the toast message
+$toast-md-message-padding-top:                     14px !default;
 
-/// @prop - Padding start of the toast title
-$toast-md-title-padding-start:                   $toast-md-title-padding-end !default;
+/// @prop - Padding end of the toast message
+$toast-md-message-padding-end:                     16px !default;
+
+/// @prop - Padding bottom of the toast message
+$toast-md-message-padding-bottom:                  $toast-md-message-padding-top !default;
+
+/// @prop - Padding start of the toast message
+$toast-md-message-padding-start:                   $toast-md-message-padding-end !default;
diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index 76032e2f6f5..16e1d0ad392 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -4,20 +4,20 @@
 // --------------------------------------------------
 
 :host {
-  --button-color: inherit;
-
   /**
    * @prop --background: Background of the toast
    * @prop --button-color: Color of the button text
    * @prop --color: Color of the toast text
    */
+  --button-color: inherit;
+
   @include position(0, null, null, 0);
 
   display: block;
   position: absolute;
 
-  width: $toast-width;
-  height: $toast-width;
+  width: 100%;
+  height: 100%;
 
   color: var(--color);
 
@@ -38,18 +38,6 @@
   background: var(--background);
 }
 
-.toast-wrapper.toast-top {
-  @include transform(translate3d(0, -100%, 0));
-
-  top: 0;
-}
-
-.toast-wrapper.toast-bottom {
-  @include transform(translate3d(0, 100%, 0));
-
-  bottom: 0;
-}
-
 .toast-container {
   display: flex;
 
@@ -61,8 +49,6 @@
 
 .toast-button {
   color: var(--button-color);
-
-  font-size: $toast-button-font-size;
 }
 
 .toast-message {
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index 82ba9c74d08..c02d973aa67 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -28,9 +28,12 @@ export class Toast implements ComponentInterface, OverlayInterface {
   animation: Animation | undefined;
 
   @Prop({ connect: 'ion-animation-controller' }) animationCtrl!: HTMLIonAnimationControllerElement;
+
   @Prop({ context: 'config' }) config!: Config;
 
-  /** @internal */
+  /**
+   * @internal
+   */
   @Prop() overlayIndex!: number;
 
   /**
@@ -201,7 +204,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
       <div class={wrapperClass}>
         <div class="toast-container">
           {this.message !== undefined &&
-            <div class="toast-message">{this.message}</div>
+            <div class="toast-message" innerHTML={this.message}></div>
           }
           {this.showCloseButton &&
             <ion-button fill="clear" ion-activatable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>
diff --git a/core/src/components/toast/toast.vars.scss b/core/src/components/toast/toast.vars.scss
index 3b860bed7d6..fad777bcc5a 100644
--- a/core/src/components/toast/toast.vars.scss
+++ b/core/src/components/toast/toast.vars.scss
@@ -3,9 +3,6 @@
 // Toast
 // --------------------------------------------------
 
-/// @prop - Width of the toast
-$toast-width:                             100% !default;
-
 /// @prop - Max width of the toast
 $toast-max-width:                         700px !default;
 

From f329bce1f132f6a991a352d7134c4cbc781bace4 Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandy@ionic.io>
Date: Wed, 14 Nov 2018 11:53:35 -0500
Subject: [PATCH 8/8] fix(toast): remove ability to pass html to message

out of scope of this PR, use text string instead
---
 core/src/components/toast/test/basic/index.html | 2 +-
 core/src/components/toast/toast.scss            | 2 ++
 core/src/components/toast/toast.tsx             | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/core/src/components/toast/test/basic/index.html b/core/src/components/toast/test/basic/index.html
index 6c4c61164d5..66a8b9dd6d2 100644
--- a/core/src/components/toast/test/basic/index.html
+++ b/core/src/components/toast/test/basic/index.html
@@ -23,7 +23,7 @@
         <ion-button expand="block" id="showBottomToast" onclick="presentToast('bottom')">Show Toast Bottom</ion-button>
         <ion-button expand="block" id="showTopToast" onclick="presentToast('top')">Show Toast Top</ion-button>
         <ion-button expand="block" id="showMiddleToast" onclick="presentToast('middle')">Show Toast Middle</ion-button>
-        <ion-button expand="block" onclick="presentToastWithOptions({message: 'Two-line message<br> with action.', showCloseButton: true, closeButtonText: 'Action'})">Show Toast with long message</ion-button>
+        <ion-button expand="block" onclick="presentToastWithOptions({message: 'Two-line message\nwith action.', showCloseButton: true, closeButtonText: 'Action'})">Show Toast with long message</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true})">Show Toast with Close Button</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, closeButtonText: 'closing time'})">Show Toast with Custom Close Button Text</ion-button>
         <ion-button expand="block" onclick="presentToastWithOptions({message: 'click to close', showCloseButton: true, translucent: true})">Show Translucent Toast</ion-button>
diff --git a/core/src/components/toast/toast.scss b/core/src/components/toast/toast.scss
index 16e1d0ad392..67b96404f0f 100644
--- a/core/src/components/toast/toast.scss
+++ b/core/src/components/toast/toast.scss
@@ -53,4 +53,6 @@
 
 .toast-message {
   flex: 1;
+
+  white-space: pre;
 }
diff --git a/core/src/components/toast/toast.tsx b/core/src/components/toast/toast.tsx
index c02d973aa67..ffda95d8b73 100644
--- a/core/src/components/toast/toast.tsx
+++ b/core/src/components/toast/toast.tsx
@@ -204,7 +204,7 @@ export class Toast implements ComponentInterface, OverlayInterface {
       <div class={wrapperClass}>
         <div class="toast-container">
           {this.message !== undefined &&
-            <div class="toast-message" innerHTML={this.message}></div>
+            <div class="toast-message">{this.message}</div>
           }
           {this.showCloseButton &&
             <ion-button fill="clear" ion-activatable class="toast-button" onClick={() => this.dismiss(undefined, 'cancel')}>