Merge pull request #7716 from IgniteUI/ddincheva/igxToast

IgxToast `show` method take a message parameter

Author: zdrawku

CHANGELOG.md

@@ -5,8 +5,14 @@ All notable changes for each version of this project will be documented in this
 ## 10.1.0
 
 ### New Features
-- `IgxColumn` 
+- `IgxColumn`
     - Added `byHeader` parameter to the `autosize` method which specifies if the autosizing should be based only on the header content width.
+- `IgxToast`
+    - `message` property has been deprecated. You can place the *message text* in the toast content or pass it as parameter to `show` method instead.
+    - An optional string parameter `message` has been added to `show()` method.
+- `IgxSnackbar`
+    - `message` property has been deprecated. You can place the *message text* in the snackbar content or pass it as parameter to `show` method instead.
+    - An optional string parameter `message` has been added to `show()` method.
 
 ## 10.0.0
 
@@ -16,9 +22,9 @@ All notable changes for each version of this project will be documented in this
 - `igx-select`, `igx-combo`, `igx-drop-down`
     - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
-    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface; 
+    - `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
     - `actions` - contains information about the transactions, that caused the emission of the event.
-- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component. 
+- `IgxPaginator` - The input `overlaySettings` was introduced, which allows applying custom overlay settings for the component.
 
 ### New Features
 - `IgxGrid`
@@ -162,9 +168,9 @@ All notable changes for each version of this project will be documented in this
     ```typescript
     public pinningConfiguration: IPinningConfig = { columns: ColumnPinningPosition.End };
     ```
-  - Added new properties for paging:	
-    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.	
-    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.   
+  - Added new properties for paging:
+    - `totalRecords` set to alter the pages count based on total remote records. Keep in mind that If you are using paging and all the data is passed to the grid, the value of totalRecords property will be set by default to the length of the provided data source. If totalRecords is set, it will take precedent over the default length based on the data source.
+    - `pagingMode` - accepts `GridPagingMode` enumeration. If the paging mode is set to remote the grid will not paginate the passed data source, if the paging mode is set to local (which is the default value) the grid will paginate the data source based on the page, perPage and totalRecords values.
     - Added functionality for column selection.
     - `columnSelection` property has been added. It accepts GridSelection mode enumeration. Grid selection mode could be none, single or multiple.
     - `selected` property has been added to the IgxColumnComponent; Allows you to set whether the column is selected.

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

@@ -1,7 +1,7 @@
 <div class="igx-snackbar" *ngIf="isVisible" (@slideInOut.start)="snackbarAnimationStarted($event)" (@slideInOut.done)="snackbarAnimationDone($event)"
     [@slideInOut]="isVisible">
     <div class="igx-snackbar__message" [@fadeInOut]="isVisible">
-        {{ message }}
+        {{ snackbarMessage }}
         <ng-content></ng-content>
     </div>
     <button class="igx-snackbar__button" igxRipple="white" *ngIf="actionText" [@fadeInOut] (click)="triggerAction()">

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

@@ -31,7 +31,6 @@ describe('IgxSnackbar', () => {
 
     it('should properly initialize properties', () => {
         expect(snackbar.id).toContain('igx-snackbar-');
-        expect(snackbar.message).toBeUndefined();
         expect(snackbar.actionText).toBeUndefined();
         expect(snackbar.displayTime).toBe(4000);
         expect(snackbar.autoHide).toBeTruthy();
@@ -115,8 +114,7 @@ describe('IgxSnackbar with custom content', () => {
 
     it('should display a message, a custom content element and a button', () => {
         fixture.componentInstance.text = 'Undo';
-        snackbar.message = 'Item shown';
-        snackbar.isVisible = true;
+        snackbar.show('Item shown');
         fixture.detectChanges();
 
         const messageEl = fixture.debugElement.query(By.css('.igx-snackbar__message'));
@@ -136,6 +134,25 @@ describe('IgxSnackbar with custom content', () => {
         expect(customContentRect.right <= buttonRect.left).toBe(true, 'The custom element is not on the left of the button');
         expect(messageElRect.right <= buttonRect.left).toBe(true, 'The button is not on the right side of the snackbar content');
     });
+
+    it('should be able to set a message though show method', () => {
+        snackbar.autoHide = false;
+        fixture.componentInstance.text = 'Retry';
+        fixture.detectChanges();
+
+        snackbar.show('The message was not send. Would you like to retry?');
+        fixture.detectChanges();
+
+        expect(fixture.nativeElement.querySelector('.igx-snackbar__message').innerText)
+        .toBe('The message was not send. Would you like to retry? Custom content');
+
+        snackbar.show('Another Message?!');
+        fixture.detectChanges();
+
+        expect(snackbar.isVisible).toBe(true);
+        expect(fixture.nativeElement.querySelector('.igx-snackbar__message').innerText)
+        .toBe('Another Message?! Custom content');
+    });
 });
 
 @Component({

projects/igniteui-angular/src/lib/snackbar/snackbar.component.ts

@@ -15,6 +15,7 @@ import {
     Output
 } from '@angular/core';
 import { fadeIn, fadeOut, slideInBottom, slideOutBottom } from '../animations/main';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 
 let NEXT_ID = 0;
 /**
@@ -101,6 +102,7 @@ export class IgxSnackbarComponent {
     @HostBinding('attr.id')
     @Input()
     public id = `igx-snackbar-${NEXT_ID++}`;
+
     /**
      * Sets/gets the `message` attribute.
      * ```html
@@ -110,7 +112,15 @@ export class IgxSnackbarComponent {
      * let message =  this.snackbar.message;
      * ```
      */
-    @Input() public message: string;
+    @DeprecateProperty(`'message' property is deprecated.
+    You can use place the message in the snackbar content or pass a message parameter to the show method instead.`)
+    @Input()
+    public set message(value: string) {
+        this.snackbarMessage = value;
+    }
+    public get message() {
+        return this.snackbarMessage;
+    }
 
     /**
      * Enables/Disables the visibility of the snackbar.
@@ -182,6 +192,13 @@ export class IgxSnackbarComponent {
      * ```
      */
     @Output() public animationDone = new EventEmitter<AnimationEvent>();
+
+    /**
+     * @hidden
+     * @internal
+     */
+    snackbarMessage = '';
+
     /**
      * @hidden
      */
@@ -195,8 +212,9 @@ export class IgxSnackbarComponent {
      * this.snackbar.show();
      * ```
      */
-    public show(): void {
+    public show(message?: string): void {
         clearTimeout(this.timeoutId);
+        if (message !== undefined) { this.snackbarMessage = message; }
         setTimeout(this.timeoutId);
         this.isVisible = true;
 

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

@@ -1,3 +1,3 @@
 <ng-content></ng-content>
-<span>{{ message }}</span>
+<span>{{ toastMessage }}</span>
 

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

@@ -132,8 +132,22 @@ describe('IgxToast', () => {
         expect(toast.onShown.emit).toHaveBeenCalledTimes(1);
         expect(toast.onHiding.emit).toHaveBeenCalledTimes(1);
         expect(toast.onHidden.emit).toHaveBeenCalledTimes(1);
-
     });
+
+    it('can set message through show method', fakeAsync(() => {
+        toast.displayTime = 100;
+        toast.autoHide = false;
+
+        toast.show('Custom Message');
+        tick(100);
+        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({

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

@@ -1,5 +1,6 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { CommonModule } from '@angular/common';
+import { DeprecateProperty } from '../core/deprecateDecorators';
 import {
     Component,
     ElementRef,
@@ -205,10 +206,26 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
     public isVisibleChange = new EventEmitter<boolean>();
 
     /**
-     * @hidden
+     * @deprecated Place your message in the toast content instead.
+     * Sets/gets the message that will be shown by the toast.
+     * ```html
+     * <igx-toast [message] = "Notification"></igx-toast>
+     * ```
+     * ```typescript
+     * let toastMessage = this.toast.message;
+     * ```
+     * @memberof IgxToastComponent
      */
+    @DeprecateProperty(`'message' property is deprecated.
+    You can use place the message in the toast content or pass it as parameter to the show method instead.`)
     @Input()
-    public message = '';
+    public set message(value: string) {
+        this.toastMessage = value;
+    }
+
+    public get message() {
+        return this.toastMessage;
+    }
 
     /**
      * Sets/gets the position of the toast.
@@ -235,6 +252,12 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
         return this.elementRef.nativeElement;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    toastMessage = '';
+
     /**
      * @hidden
      */
@@ -252,8 +275,9 @@ export class IgxToastComponent implements IToggleView, OnInit, OnDestroy {
      * ```
      * @memberof IgxToastComponent
      */
-    public show(): void {
+    public show(message?: string): void {
         clearInterval(this.timeoutId);
+        if (message !== undefined) { this.toastMessage = message; }
         this.onShowing.emit(this);
         this.isVisible = true;
         this.animationState = 'visible';