refactor(toast): utilize Overlay Service to display in DOM

Author: simeonoff

CHANGELOG.md

@@ -30,7 +30,11 @@ All notable changes for each version of this project will be documented in this
 - `IgxOverlay`
     - The `PositionSettings` `target` property has been deprecated and moved to `OverlaySettings`.
     - An optional Point/HTML Element parameter `target` has been added to the `position()` method
-    
+- `IgxToast`
+    - The component now utilizes the `IgxOverlayService` to position itself in the DOM.
+    - An additional input property `outlet` has been added to allow users to specify custom Overlay Outlets using the `IgxOverlayOutletDirective`;
+    - The `position` property now accepts values of type `IgxToastPosition` that work with strict templates.
+
 ## 10.1.0
 
 ### General

projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-component.scss

@@ -11,18 +11,7 @@
 
     @extend %igx-toast-display !optional;
 
-    @include m(top) {
-        @extend %igx-toast-display !optional;
-        @extend %igx-toast--top !optional;
-    }
-
-    @include m(middle) {
-        @extend %igx-toast-display !optional;
-        @extend %igx-toast--middle !optional;
-    }
-
-    @include m(bottom) {
-        @extend %igx-toast-display !optional;
-        @extend %igx-toast--bottom !optional;
+    @include m(active) {
+        @extend %igx-toast--active !optional;
     }
 }

projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss

@@ -102,12 +102,10 @@
     ), $variant);
 
     %igx-toast-display {
-        position: fixed;
-        display: flex;
+        position: absolute;
+        display: inline-flex;
         justify-content: center;
         align-items: center;
-        left: 50%;
-        transform: translate3d(-50%, 0, 0);
         margin: $margin;
         padding: $padding;
         min-width: $width;
@@ -117,23 +115,17 @@
         border-radius: --var($theme, 'border-radius');
         box-shadow: map-get($theme, 'shadow');
         backdrop-filter: blur(10px);
-        opacity: 0;
         z-index: 999999;
+        left: -999999px;
+        top: -999999px;
+        opacity: 0;
     }
 
-    %igx-toast--top {
-        top: 0;
-        margin-top: 16px;
-    }
-
-    %igx-toast--middle {
-        top: 50%;
-        transform: translate3d(-50%, -50%, 0);
-    }
-
-    %igx-toast--bottom {
-        bottom: 0;
-        margin-bottom: 16px;
+    %igx-toast--active {
+        position: relative;
+        left: initial;
+        top: initial;
+        opacity: 1;
     }
 }
 

projects/igniteui-angular/src/lib/toast/toast.component.spec.ts

@@ -1,31 +1,30 @@
-import {Component, ViewChild } from '@angular/core';
-import {async, TestBed, fakeAsync, tick, ComponentFixture} from '@angular/core/testing';
-import {By} from '@angular/platform-browser';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {IgxToastComponent, IgxToastModule, IgxToastPosition} from './toast.component';
+import { Component, ViewChild } from '@angular/core';
+import {
+    async,
+    TestBed,
+    fakeAsync,
+    tick,
+    ComponentFixture,
+} from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import {
+    IgxToastComponent,
+    IgxToastModule,
+} from './toast.component';
 import { configureTestSuite } from '../test-utils/configure-suite';
 
 describe('IgxToast', () => {
     configureTestSuite();
     beforeAll(async(() => {
         TestBed.configureTestingModule({
-            declarations: [
-                ToastInitializeTestComponent
-            ],
-            imports: [
-                BrowserAnimationsModule,
-                IgxToastModule
-            ]
+            declarations: [ToastInitializeTestComponent],
+            imports: [BrowserAnimationsModule, IgxToastModule],
         }).compileComponents();
     }));
 
     const baseClass = 'igx-toast';
-    const classes = {
-        top: `${baseClass}--top`,
-        middle: `${baseClass}--middle`,
-        bottom: `${baseClass}--bottom`,
-    };
-
+    const activeClass = 'igx-toast--active';
     let fixture: ComponentFixture<ToastInitializeTestComponent>;
     let toast: IgxToastComponent;
 
@@ -37,13 +36,14 @@ describe('IgxToast', () => {
     });
 
     it('should properly initialize', () => {
-        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
+        const domToast = fixture.debugElement.query(By.css(baseClass))
+            .nativeElement;
         expect(toast.id).toContain('igx-toast-');
         expect(domToast.id).toContain('igx-toast-');
         expect(toast.displayTime).toBe(4000);
         expect(toast.autoHide).toBeTruthy();
         expect(toast.isVisible).toBeTruthy();
-        expect(domToast.classList).toContain(classes.bottom);
+        expect(domToast.classList).toContain(activeClass);
 
         toast.id = 'customToast';
         fixture.detectChanges();
@@ -52,45 +52,17 @@ describe('IgxToast', () => {
         expect(domToast.id).toBe('customToast');
     });
 
-    it('should change toast position to middle', () => {
-        toast.position = IgxToastPosition.Middle;
-        fixture.detectChanges();
-        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
-
-        expect(domToast.classList).toContain(classes.middle);
-    });
-
-    it('should change toast position to top', () => {
-        toast.position = IgxToastPosition.Top;
-        fixture.detectChanges();
-        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
-
-        expect(domToast.classList).toContain(classes.top);
-    });
-
-    it('should change toast position to bottom', () => {
-        toast.position = IgxToastPosition.Bottom;
-        fixture.detectChanges();
-        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
-
-        expect(domToast.classList).not.toContain(classes.top);
-        expect(domToast.classList).not.toContain(classes.middle);
-        expect(domToast.classList).toContain(classes.bottom);
-    });
-
     it('should auto hide 1 second after it\'s open', fakeAsync(() => {
         toast.displayTime = 1000;
 
         toast.show();
 
         expect(toast.isVisible).toBeTruthy();
-        expect(toast.animationState).toBe('visible');
         expect(toast.autoHide).toBeTruthy();
 
         tick(1000);
 
         expect(toast.isVisible).toBeFalsy();
-        expect(toast.animationState).toBe('invisible');
     }));
 
     it('should not auto hide after it\'s open', fakeAsync(() => {
@@ -100,13 +72,11 @@ describe('IgxToast', () => {
         toast.show();
 
         expect(toast.isVisible).toBeTruthy();
-        expect(toast.animationState).toBe('visible');
         expect(toast.autoHide).toBeFalsy();
 
         tick(1000);
 
         expect(toast.isVisible).toBeTruthy();
-        expect(toast.animationState).toBe('visible');
     }));
 
     it('visibility is updated by the toggle() method', () => {
@@ -117,7 +87,6 @@ describe('IgxToast', () => {
 
         toast.show();
         expect(toast.isVisible).toBe(true);
-        expect(toast.animationState).toBe('visible');
 
         expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
         expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
@@ -126,7 +95,6 @@ describe('IgxToast', () => {
 
         toast.toggle();
         expect(toast.isVisible).toBe(false);
-        expect(toast.animationState).toBe('invisible');
 
         expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
         expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
@@ -143,15 +111,13 @@ describe('IgxToast', () => {
         fixture.detectChanges();
 
         expect(toast.isVisible).toBeTruthy();
-        expect(toast.animationState).toBe('visible');
         expect(toast.autoHide).toBeFalsy();
         expect(toast.toastMessage).toBe('Custom Message');
-        expect(fixture.nativeElement.querySelector('igx-toast:first-child').innerText).toBe('Custom Message');
     }));
 });
 
 @Component({
-    template: `<igx-toast #toast></igx-toast>`
+    template: `<igx-toast #toast></igx-toast>`,
 })
 class ToastInitializeTestComponent {
     @ViewChild(IgxToastComponent, { static: true })