Merge branch 'master' into nrobakova/columnSelection-input

Author: zdrawku

CHANGELOG.md

@@ -47,6 +47,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxCombo`:
     - Added `autoFocusSearch` input that allows to manipulate the combo's opening behavior. When the property is `true` (by default), the combo's search input is focused on open. When set to `false`, the focus goes to the combo items container, which can be used to prevent the software keyboard from activating on mobile devices when opening the combo.
 
+- `IgxToast`:
+    - Added functionality for displaying various content into the toast component. It also allows users to access toast styles through its host element.
+
 ### RTL Support
 - `igxSlider` have full right-to-left (RTL) support.
 

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

@@ -121,6 +121,7 @@
 
     %igx-toast--top {
         top: 0;
+        margin-top: 16px;
     }
 
     %igx-toast--middle {
@@ -130,6 +131,7 @@
 
     %igx-toast--bottom {
         bottom: 0;
+        margin-bottom: 16px;
     }
 }
 
@@ -143,7 +145,7 @@
 @mixin igx-toast-typography($type-scale, $categories: (text: 'body-2')) {
     $text: map-get($categories, 'text');
 
-    %igx-toast-display {
+    %igx-toast-display > *{
         @include igx-type-style($type-scale, $text) {
             margin: 0;
         }

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

@@ -36,6 +36,17 @@ You can show hide toast by using `toast.hide()` method.
 
 You can modify the position of the toast by setting `postion="IgxToastPosition.Top"`.
 
+## Toast with different content
+
+```html
+<igx-toast #toast [position]="toastPosition">
+    <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.
+
 ## Toast with events
 
 ```html

projects/igniteui-angular/src/lib/toast/toast.component.html

@@ -1,3 +1,5 @@
-<div [ngClass]="mapPositionToClassName()" *ngIf="this.isVisible" [@animate]="'show'">
-    {{ message }}
+<div #content>
+    <ng-content></ng-content>
 </div>
+<span *ngIf="content.childNodes.length == 0">{{ message }}</span>
+

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

@@ -1,11 +1,9 @@
-import {Component, ViewChild} from '@angular/core';
-import {async, TestBed, fakeAsync, tick} from '@angular/core/testing';
+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 { configureTestSuite } from '../test-utils/configure-suite';
-import { wait } from '../test-utils/ui-interactions.spec';
 
 describe('IgxToast', () => {
     configureTestSuite();
@@ -20,24 +18,32 @@ describe('IgxToast', () => {
             ]
         }).compileComponents();
     }));
-    let fixture, toast, element;
+
+    const baseClass = 'igx-toast';
+    const classes = {
+        top: `${baseClass}--top`,
+        middle: `${baseClass}--middle`,
+        bottom: `${baseClass}--bottom`,
+    };
+
+    let fixture: ComponentFixture<ToastInitializeTestComponent>;
+    let toast: IgxToastComponent;
+
     beforeEach(() => {
         fixture = TestBed.createComponent(ToastInitializeTestComponent);
         toast = fixture.componentInstance.toast;
         toast.isVisible = true;
         fixture.detectChanges();
-        element = fixture.debugElement.query(By.css('.igx-toast--bottom'));
     });
 
-    it('should properly initialize properties', () => {
-        const domToast = fixture.debugElement.query(By.css('igx-toast')).nativeElement;
+    it('should properly initialize', () => {
+        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
         expect(toast.id).toContain('igx-toast-');
         expect(domToast.id).toContain('igx-toast-');
-        expect(toast.message).toBeUndefined();
         expect(toast.displayTime).toBe(4000);
         expect(toast.autoHide).toBeTruthy();
         expect(toast.isVisible).toBeTruthy();
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_BOTTOM]).toBeTruthy();
+        expect(domToast.classList).toContain(classes.bottom);
 
         toast.id = 'customToast';
         fixture.detectChanges();
@@ -49,92 +55,91 @@ describe('IgxToast', () => {
     it('should change toast position to middle', () => {
         toast.position = IgxToastPosition.Middle;
         fixture.detectChanges();
+        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        element = fixture.debugElement.query(By.css('.igx-toast--middle'));
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_MIDDLE]).toBeTruthy();
+        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;
 
-        element = fixture.debugElement.query(By.css('.igx-toast--top'));
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_TOP]).toBeTruthy();
+        expect(domToast.classList).toContain(classes.top);
     });
 
-    it('should change toast position to bottom, the rest should be undefined', () => {
+    it('should change toast position to bottom', () => {
         toast.position = IgxToastPosition.Bottom;
         fixture.detectChanges();
+        const domToast = fixture.debugElement.query(By.css(baseClass)).nativeElement;
 
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_TOP]).toBeUndefined();
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_MIDDLE]).toBeUndefined();
-        expect(element.classes[toast.CSS_CLASSES.IGX_TOAST_BOTTOM]).toBe(true);
+        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 is open', fakeAsync(() => {
+    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);
-        fixture.detectChanges();
+
         expect(toast.isVisible).toBeFalsy();
+        expect(toast.animationState).toBe('invisible');
     }));
 
-    it('should not auto hide seconds after is open', fakeAsync(() => {
+    it('should not auto hide after it\'s open', fakeAsync(() => {
         toast.displayTime = 1000;
         toast.autoHide = false;
 
         toast.show();
 
         expect(toast.isVisible).toBeTruthy();
+        expect(toast.animationState).toBe('visible');
         expect(toast.autoHide).toBeFalsy();
 
         tick(1000);
-        fixture.detectChanges();
+
         expect(toast.isVisible).toBeTruthy();
+        expect(toast.animationState).toBe('visible');
     }));
 
-    it('visibility is properly toggled by its toggle() method.', (async() => {
+    it('visibility is updated by the toggle() method', () => {
         spyOn(toast.onShowing, 'emit');
         spyOn(toast.onShown, 'emit');
         spyOn(toast.onHiding, 'emit');
         spyOn(toast.onHidden, 'emit');
 
+        toast.show();
         expect(toast.isVisible).toBe(true);
-        toast.toggle();
-        await wait();
-        fixture.detectChanges();
+        expect(toast.animationState).toBe('visible');
 
-        expect(toast.isVisible).toBe(false);
-        expect(toast.onShowing.emit).toHaveBeenCalledTimes(0);
-        expect(toast.onShown.emit).toHaveBeenCalledTimes(0);
-        expect(toast.onHiding.emit).toHaveBeenCalledTimes(1);
-        expect(toast.onHidden.emit).toHaveBeenCalledTimes(1);
+        expect(toast.onShowing.emit).toHaveBeenCalledTimes(1);
+        expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
+        expect(toast.onHiding.emit).toHaveBeenCalledTimes(0);
+        expect(toast.onHidden.emit).toHaveBeenCalledTimes(0);
 
         toast.toggle();
-        await wait();
-        fixture.detectChanges();
+        expect(toast.isVisible).toBe(false);
+        expect(toast.animationState).toBe('invisible');
 
-        expect(toast.isVisible).toBe(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();
-        await wait();
-        fixture.detectChanges();
-        expect(toast.isVisible).toBe(false);
-    }));
+    });
 });
+
 @Component({
-    template: `<igx-toast #toast>
-               </igx-toast>`
+    template: `<igx-toast #toast></igx-toast>`
 })
 class ToastInitializeTestComponent {
-    @ViewChild(IgxToastComponent, { static: true }) public toast: IgxToastComponent;
+    @ViewChild(IgxToastComponent, { static: true })
+    public toast: IgxToastComponent;
 }