Merge pull request #8197 from IgniteUI/simeonoff/toast-outlet

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

Author: simeonoff

CHANGELOG.md

@@ -35,6 +35,10 @@ 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
 

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

@@ -8,21 +8,5 @@
 @include b(igx-toast) {
     $this: bem--selector-to-string(&);
     @include register-component(str-slice($this, 2, -1));
-
     @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;
-    }
 }

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

@@ -102,12 +102,9 @@
     ), $variant);
 
     %igx-toast-display {
-        position: fixed;
-        display: flex;
+        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 +114,6 @@
         border-radius: --var($theme, 'border-radius');
         box-shadow: map-get($theme, 'shadow');
         backdrop-filter: blur(10px);
-        opacity: 0;
-        z-index: 999999;
-    }
-
-    %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;
     }
 }
 

projects/igniteui-angular/src/lib/toast/README.md

@@ -1,7 +1,6 @@
 # igx-toast
 
-**igx-toast** IgxToast provides information and warning messages. They could not be dismissed, are non-interactive and can appear on top, middle and the bottom of the screen.  
-A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast.html)
+The Toast component shows application messages in a stylized pop-up box positioned inside the global overlay outlet(default). Toasts can't be dismissed, they are non-interactive and can appear on top, middle, and the bottom of the screen. A walkthrough on how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/toast.html)
 
 # Usage
 
@@ -11,53 +10,49 @@ A walkthrough of how to get started can be found [here](https://www.infragistics
 <button (click)="toast.show()">Show toast</button>
 <button (click)="toast.hide()">Hide toast</button>
 
-<igx-toast #toast
-           message="Something happened!">
-</igx-toast>
+<igx-toast #toast>Well, hi there!</igx-toast>
 ```
-You can set the id of the component by `id="myToast"` or will be automatically generated;
 
-You can be more descriptive and set message `message="Something happened!"`.
+You can set the id of the component by setting the attribute `id` on the component (e.g. `id="myToast"`), or it will be automatically generated for you if you don't provide anything;
+
+The toast can be shown by using the `show()` method.
 
-You can show the toast by using `toast.show()` method.
+You can hide the toast by using the `hide()` method.
 
-You can show hide toast by using `toast.hide()` method.
+## Toast Position
+You can set the `positon` property to `top`, `middle`, or `bottom`, which will position the toast near the top, middle, or bottom of the document*.
 
-## Toast positioned on top
+*By default the toast renders inside a global overlay outlet. You can specify a different overlay outlet by setting the `outlet` property on the toast;
 
 ```html
 <button (click)="toast.show()">Show toast</button>
-
-<igx-toast #toast
-           message="Something happened!"
-           position="IgxToastPosition.Top">
-</igx-toast>
+<igx-toast #toast position="top">Top Positioned Toast</igx-toast>
 ```
 
-You can modify the position of the toast by setting `postion="IgxToastPosition.Top"`.
-
 ## Toast with different content
 
 ```html
-<igx-toast #toast [position]="toastPosition">
+<igx-toast #toast position="bottom">
     <igx-icon>notifications</igx-icon>
     This message will self-destruct in 4 seconds.
 </igx-toast>
 ```
 
-You can display various content by placing it between the igx-toast tags. If so, the message property will be overwritten.
+You can display various content by placing it between the `igx-toast` tags.
 
-## Toast with events
+## Toast Events
 
 ```html
 <button (click)="toast.show()">Show toast</button>
 
-<igx-toast #toast
-           message="Something happened!"
-           (onShowing)="onToastShowing($event)"
-           (onShown)="onToastShown($event)"
-           (onHiding)="onToastShowing($event)"
-           (onHidden)="onToastHidden($event)">
+<igx-toast
+    #toast
+    message="Something happened!"
+    (onShowing)="onToastShowing($event)"
+    (onShown)="onToastShown($event)"
+    (onHiding)="onToastShowing($event)"
+    (onHidden)="onToastHidden($event)"
+>
 </igx-toast>
 ```
 

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

@@ -1,31 +1,29 @@
-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 {
+    waitForAsync,
+    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(() => {
+    beforeAll(waitForAsync(() => {
         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`,
-    };
-
     let fixture: ComponentFixture<ToastInitializeTestComponent>;
     let toast: IgxToastComponent;
 
@@ -37,13 +35,13 @@ 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);
 
         toast.id = 'customToast';
         fixture.detectChanges();
@@ -52,87 +50,70 @@ 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(() => {
+    it('should auto hide after it\'s open', fakeAsync(() => {
+        spyOn(toast.onHiding, 'emit');
         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');
+        expect(toast.onHiding.emit).toHaveBeenCalled();
     }));
 
     it('should not auto hide after it\'s open', fakeAsync(() => {
+        spyOn(toast.onHiding, 'emit');
         toast.displayTime = 1000;
         toast.autoHide = false;
 
         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');
+        expect(toast.onHiding.emit).not.toHaveBeenCalled();
     }));
 
-    it('visibility is updated by the toggle() method', () => {
+    it('should emit onShowing when toast is shown', () => {
         spyOn(toast.onShowing, 'emit');
-        spyOn(toast.onShown, 'emit');
+        toast.show();
+        expect(toast.onShowing.emit).toHaveBeenCalled();
+    });
+
+    it('should emit onHiding when toast is hidden', () => {
         spyOn(toast.onHiding, 'emit');
+        toast.hide();
+        expect(toast.onHiding.emit).toHaveBeenCalled();
+    });
+
+    it('should emit onShown when toggle onOpened is fired', waitForAsync(() => {
+        spyOn(toast.onShown, 'emit');
+        toast.open();
+
+        toast.onOpened.subscribe(() => {
+            expect(toast.onShown.emit).toHaveBeenCalled();
+        });
+    }));
+
+    it('should emit onHidden when toggle onClosed is fired', waitForAsync(() => {
         spyOn(toast.onHidden, 'emit');
+        toast.isVisible = true;
+        toast.close();
 
-        toast.show();
-        expect(toast.isVisible).toBe(true);
-        expect(toast.animationState).toBe('visible');
+        toast.onClosed.subscribe(() => {
+            expect(toast.onHidden.emit).toHaveBeenCalled();
+        });
+    }));
 
-        expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onHiding.emit).toHaveBeenCalledTimes(0);
-        expect(toast.onHidden.emit).toHaveBeenCalledTimes(0);
+    it('visibility is updated by the toggle() method', waitForAsync((done: DoneFn) => {
+        toast.autoHide = false;
 
         toast.toggle();
-        expect(toast.isVisible).toBe(false);
-        expect(toast.animationState).toBe('invisible');
+        toast.onOpened.subscribe(() => {
+            expect(toast.isVisible).toEqual(true);
+        });
 
-        expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onHiding.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onHidden.emit).toHaveBeenCalledTimes(1);
-    });
+        toast.toggle();
+        toast.onClosed.subscribe(() => {
+            expect(toast.isVisible).toEqual(false);
+            done();
+        });
+    }));
 
     it('can set message through show method', fakeAsync(() => {
         toast.displayTime = 100;
@@ -143,15 +124,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 })