Merge pull request #8775 from IgniteUI/dTsvetkov/fix-8207-master

fix(toast): isVisible property binding - master

Author: zdrawku

CHANGELOG.md

@@ -15,6 +15,10 @@ All notable changes for each version of this project will be documented in this
     - Added new property `alignment` that determines the radio group alignment. Available options are `horizontal` (default) and `vertical`.
 - `IgxDialog`
     - Added new `onOpened` and `onClosed` events.
+- `IgxToast`
+    - **Breaking Change** - 
+    `show` and `hide` methods have been deprecated. `open` and `close` should be used instead.
+    `onShowing`,`onShown`,`onHiding` and `onHiden` events have been deprecated. `onOpening`, `onOpened`, `onClosing` and `onClosed`should be used instead.
 - `IgxInputGroup`
     - Added new property `theme` that allows you to set the theme explicitly and at runtime.
 

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

@@ -216,7 +216,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * @ViewChild("toast")
      * private toast: IgxToastComponent;
      * public onSelect(buttongroup){
-     *     this.toast.show()
+     *     this.toast.open()
      * }
      *  //...
      * ```
@@ -233,7 +233,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      *  @ViewChild("toast")
      *  private toast: IgxToastComponent;
      *  public onUnselect(buttongroup){
-     *     this.toast.show()
+     *     this.toast.open()
      * }
      *  //...
      * ```

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -219,17 +219,15 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
             this._overlayId = this.overlayService.attach(this.elementRef, overlaySettings);
         }
 
-        this._collapsed = false;
-        this.cdr.detectChanges();
-
         const openEventArgs: ToggleViewCancelableEventArgs = { cancel: false, owner: this, id: this._overlayId };
         this.onOpening.emit(openEventArgs);
         if (openEventArgs.cancel) {
-            this._collapsed = true;
-            this.cdr.detectChanges();
             return;
         }
 
+        this._collapsed = false;
+        this.cdr.detectChanges();
+
         this.unsubscribe();
 
         this._overlayAppendedSub = this.overlayService.onAppended.pipe(...this._overlaySubFilter).subscribe(() => {

projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts

@@ -411,7 +411,7 @@ export class IgxTimePickerComponent implements
      *  @ViewChild("toast")
      * private toast: IgxToastComponent;
      * public onValueChanged(timepicker){
-     *     this.toast.show()
+     *     this.toast.open()
      * }
      *  //...
      *  ```
@@ -431,7 +431,7 @@ export class IgxTimePickerComponent implements
      *  @ViewChild("toast")
      * private toast: IgxToastComponent;
      * public onValidationFailed(timepicker){
-     *     this.toast.show();
+     *     this.toast.open();
      * }
      *  //...
      *  ```

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

@@ -7,25 +7,25 @@ The Toast component shows application messages in a stylized pop-up box position
 ## Simple Toast
 
 ```html
-<button (click)="toast.show()">Show toast</button>
-<button (click)="toast.hide()">Hide toast</button>
+<button (click)="toast.open()">Show toast</button>
+<button (click)="toast.close()">Hide toast</button>
 
 <igx-toast #toast>Well, hi there!</igx-toast>
 ```
 
 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.
+The toast can be shown by using the `open()` method.
 
-You can hide the toast by using the `hide()` method.
+You can hide the toast by using the `close()` 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*.
 
 *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>
+<button (click)="toast.open()">Show toast</button>
 <igx-toast #toast position="top">Top Positioned Toast</igx-toast>
 ```
 
@@ -43,7 +43,7 @@ You can display various content by placing it between the `igx-toast` tags.
 ## Toast Events
 
 ```html
-<button (click)="toast.show()">Show toast</button>
+<button (click)="toast.open()">Show toast</button>
 
 <igx-toast
     #toast

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

@@ -30,7 +30,6 @@ describe('IgxToast', () => {
     beforeEach(() => {
         fixture = TestBed.createComponent(ToastInitializeTestComponent);
         toast = fixture.componentInstance.toast;
-        toast.isVisible = true;
         fixture.detectChanges();
     });
 
@@ -41,7 +40,6 @@ describe('IgxToast', () => {
         expect(domToast.id).toContain('igx-toast-');
         expect(toast.displayTime).toBe(4000);
         expect(toast.autoHide).toBeTruthy();
-        expect(toast.isVisible).toBeTruthy();
 
         toast.id = 'customToast';
         fixture.detectChanges();
@@ -51,79 +49,59 @@ describe('IgxToast', () => {
     });
 
     it('should auto hide after it\'s open', fakeAsync(() => {
-        spyOn(toast.onHiding, 'emit');
+        spyOn(toast.onClosing, 'emit');
         toast.displayTime = 1000;
 
-        toast.show();
+        toast.open();
         tick(1000);
-        expect(toast.onHiding.emit).toHaveBeenCalled();
+        expect(toast.onClosing.emit).toHaveBeenCalled();
     }));
 
     it('should not auto hide after it\'s open', fakeAsync(() => {
-        spyOn(toast.onHiding, 'emit');
+        spyOn(toast.onClosing, 'emit');
         toast.displayTime = 1000;
         toast.autoHide = false;
 
-        toast.show();
+        toast.open();
         tick(1000);
-        expect(toast.onHiding.emit).not.toHaveBeenCalled();
+        expect(toast.onClosing.emit).not.toHaveBeenCalled();
     }));
 
-    it('should emit onShowing when toast is shown', () => {
-        spyOn(toast.onShowing, 'emit');
-        toast.show();
-        expect(toast.onShowing.emit).toHaveBeenCalled();
+    it('should emit onOpening when toast is shown', () => {
+        spyOn(toast.onOpening, 'emit');
+        toast.open();
+        expect(toast.onOpening.emit).toHaveBeenCalled();
     });
 
     it('should emit onHiding when toast is hidden', () => {
         spyOn(toast.onHiding, 'emit');
-        toast.hide();
+        toast.close();
         expect(toast.onHiding.emit).toHaveBeenCalled();
     });
 
-    it('should emit onShown when toggle onOpened is fired', waitForAsync(() => {
-        spyOn(toast.onShown, 'emit');
+    it('should emit onOpened when toast is opened', () => {
+        expect(toast.isVisible).toBeFalse();
         toast.open();
+        fixture.detectChanges();
+        expect(toast.isVisible).toBeTrue();
+    });
 
-        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.onClosed.subscribe(() => {
-            expect(toast.onHidden.emit).toHaveBeenCalled();
-        });
-    }));
-
-    it('visibility is updated by the toggle() method', waitForAsync((done: DoneFn) => {
-        toast.autoHide = false;
-
-        toast.toggle();
-        toast.onOpened.subscribe(() => {
-            expect(toast.isVisible).toEqual(true);
-        });
-
+    it('visibility is updated by the toggle() method', () => {
+        expect(toast.isVisible).toBeFalse();
         toast.toggle();
-        toast.onClosed.subscribe(() => {
-            expect(toast.isVisible).toEqual(false);
-            done();
-        });
-    }));
+        fixture.detectChanges();
+        expect(toast.isVisible).toBeTrue();
+    });
 
     it('can set message through show method', fakeAsync(() => {
         toast.displayTime = 100;
         toast.autoHide = false;
 
-        toast.show('Custom Message');
+        toast.open('Custom Message');
         tick(100);
         fixture.detectChanges();
-
         expect(toast.isVisible).toBeTruthy();
+
         expect(toast.autoHide).toBeFalsy();
         expect(toast.toastMessage).toBe('Custom Message');
     }));
@@ -136,3 +114,4 @@ class ToastInitializeTestComponent {
     @ViewChild(IgxToastComponent, { static: true })
     public toast: IgxToastComponent;
 }
+