feat(dialog): update dialog's show/hide animations to fadeIn/fadeOut #9516 (#9847)

Author: PlamenaMiteva

CHANGELOG.md

@@ -6,7 +6,23 @@ All notable changes for each version of this project will be documented in this
 
 ### New Features
 - `IgxCsvExporterService`, `IgxExcelExporterService`
-    - Exporter services are no longer required to be provided in the application since they are now injected on a root level. 
+    - Exporter services are no longer required to be provided in the application since they are now injected on a root level.
+
+### General
+
+- `IgxDialog`
+    - **Breaking Change** - The default positionSettings open/close animation has been changed to `fadeIn`/`fadeOut`. The open/close animation can be set through the position settings, e.g. change the animation to the previously default open/close animation:
+
+    ```typescript
+    import { slideInBottom, slideOutTop } from 'igniteui-angular';
+
+    @ViewChild('alert', { static: true }) public alert: IgxDialogComponent;
+    public newPositionSettings: PositionSettings = {
+        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
+        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)'} })
+    };
+    this.alert.positionSettings = this.newPositionSettings;
+    ```
 
 ## 12.2.1
 

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

@@ -1,4 +1,3 @@
-import { useAnimation } from '@angular/animations';
 import { CommonModule } from '@angular/common';
 import {
     Component,
@@ -22,7 +21,7 @@ import { IgxRippleModule } from '../directives/ripple/ripple.directive';
 import { IgxDialogActionsDirective, IgxDialogTitleDirective } from './dialog.directives';
 import { IgxToggleModule, IgxToggleDirective } from '../directives/toggle/toggle.directive';
 import { OverlaySettings, GlobalPositionStrategy, NoOpScrollStrategy, PositionSettings } from '../services/public_api';
-import { slideInBottom, slideOutTop } from '../animations/slide/index';
+import {fadeIn, fadeOut} from '../animations/fade/index';
 import { IgxFocusModule } from '../directives/focus/focus.directive';
 import { CancelableEventArgs, IBaseEventArgs } from '../core/utils';
 
@@ -459,8 +458,8 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     protected destroy$ = new Subject<boolean>();
 
     private _positionSettings: PositionSettings = {
-        openAnimation: useAnimation(slideInBottom, { params: { fromPosition: 'translateY(100%)' } }),
-        closeAnimation: useAnimation(slideOutTop, { params: { toPosition: 'translateY(-100%)' } })
+        openAnimation: fadeIn,
+        closeAnimation: fadeOut
     };
 
     private _overlayDefaultSettings: OverlaySettings;