Merge pull request #15883 from IgniteUI/rivanova/fix-15848-master

fix(grid-validation): add open/close animations for error tooltip - 20.0.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -1,4 +1,5 @@
-import {
+import { useAnimation } from '@angular/animations';
+import {
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -52,6 +53,7 @@ import { IgxFocusDirective } from '../directives/focus/focus.directive';
 import { IgxInputDirective } from '../directives/input/input.directive';
 import { IgxInputGroupComponent } from '../input-group/input-group.component';
 import { IgxChipComponent } from '../chips/chip.component';
+import { fadeOut, scaleInCenter } from 'igniteui-angular/animations';
 
 /**
  * Providing reference to `IgxGridCellComponent`:
@@ -883,7 +885,9 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
                 modal: false,
                 positionStrategy: new AutoPositionStrategy({
                     horizontalStartPoint: HorizontalAlignment.Center,
-                    horizontalDirection: HorizontalAlignment.Center
+                    horizontalDirection: HorizontalAlignment.Center,
+                    openAnimation: useAnimation(scaleInCenter, { params: { duration: '150ms' } }),
+                    closeAnimation: useAnimation(fadeOut, { params: { duration: '75ms' } })
                 })
             }
         );

projects/igniteui-angular/src/lib/grids/grid/grid-validation.spec.ts

@@ -17,6 +17,7 @@ import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { IGridFormGroupCreatedEventArgs } from '../common/grid.interface';
 import { IgxTreeGridComponent } from '../tree-grid/tree-grid.component';
 import { IgxGridComponent } from './grid.component';
+import { AutoPositionStrategy, HorizontalAlignment, IgxOverlayService, VerticalAlignment } from '../../services/public_api';
 
 describe('IgxGrid - Validation #grid', () => {
 
@@ -187,6 +188,18 @@ describe('IgxGrid - Validation #grid', () => {
             const erorrMessage = cell.errorTooltip.first.elementRef.nativeElement.children[0].textContent;
             expect(erorrMessage).toEqual(' Entry should be at least 4 character(s) long ');
 
+            const overlayService = TestBed.inject(IgxOverlayService);
+            const info = overlayService.getOverlayById(cell.errorTooltip.first.overlayId);
+            const positionSettings = info.settings.positionStrategy.settings;
+
+            expect(info.settings.positionStrategy instanceof AutoPositionStrategy).toBe(true);
+            expect(positionSettings.horizontalStartPoint).toEqual(HorizontalAlignment.Center);
+            expect(positionSettings.horizontalDirection).toEqual(HorizontalAlignment.Center);
+            expect(positionSettings.verticalStartPoint).toEqual(VerticalAlignment.Bottom);
+            expect(positionSettings.verticalDirection).toEqual(VerticalAlignment.Bottom);
+            expect(positionSettings.openAnimation.options.params).toEqual({ duration: '150ms' });
+            expect(positionSettings.closeAnimation.options.params).toEqual({ duration: '75ms' });
+
             cell.errorTooltip.first.close();
             tick();
             fixture.detectChanges();