From 794f1193dbaedce2ec197c3320aa341bc69e4780 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Wed, 11 Jan 2023 10:47:43 -0500
Subject: [PATCH] [SM-303] feat: add fadeIn animation to bit-dialog (#4309)

---
 libs/components/src/dialog/animations.ts              | 11 +++++++++++
 .../src/dialog/dialog/dialog.component.html           |  1 +
 libs/components/src/dialog/dialog/dialog.component.ts |  3 +++
 .../dialog/simple-dialog/simple-dialog.component.html |  1 +
 .../dialog/simple-dialog/simple-dialog.component.ts   |  3 +++
 5 files changed, 19 insertions(+)
 create mode 100644 libs/components/src/dialog/animations.ts

diff --git a/libs/components/src/dialog/animations.ts b/libs/components/src/dialog/animations.ts
new file mode 100644
index 00000000000..56f0c971277
--- /dev/null
+++ b/libs/components/src/dialog/animations.ts
@@ -0,0 +1,11 @@
+import { style, animate, trigger, transition, group } from "@angular/animations";
+
+export const fadeIn = trigger("fadeIn", [
+  transition(":enter", [
+    style({ opacity: 0, transform: "translateY(-50px)" }),
+    group([
+      animate("0.15s linear", style({ opacity: 1 })),
+      animate("0.3s ease-out", style({ transform: "none" })),
+    ]),
+  ]),
+]);
diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html
index 271d923079e..cce5ad3e267 100644
--- a/libs/components/src/dialog/dialog/dialog.component.html
+++ b/libs/components/src/dialog/dialog/dialog.component.html
@@ -1,6 +1,7 @@
 <div
   [ngClass]="width"
   class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
+  @fadeIn
 >
   <div
     class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
diff --git a/libs/components/src/dialog/dialog/dialog.component.ts b/libs/components/src/dialog/dialog/dialog.component.ts
index 09e0d6a0b2b..cc34f4d30ab 100644
--- a/libs/components/src/dialog/dialog/dialog.component.ts
+++ b/libs/components/src/dialog/dialog/dialog.component.ts
@@ -1,9 +1,12 @@
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Component, Input } from "@angular/core";
 
+import { fadeIn } from "../animations";
+
 @Component({
   selector: "bit-dialog",
   templateUrl: "./dialog.component.html",
+  animations: [fadeIn],
 })
 export class DialogComponent {
   @Input() dialogSize: "small" | "default" | "large" = "default";
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
index 8ce31f89a13..0093e5bd73b 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.html
@@ -1,5 +1,6 @@
 <div
   class="tw-my-4 tw-flex tw-max-h-screen tw-w-96 tw-max-w-90vw tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
+  @fadeIn
 >
   <div class="tw-flex tw-flex-col tw-items-center tw-gap-2 tw-px-4 tw-pt-4 tw-text-center">
     <ng-content *ngIf="hasIcon; else elseBlock" select="[bit-dialog-icon]"></ng-content>
diff --git a/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts b/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts
index 48a4d62c833..fa4e359bce0 100644
--- a/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts
+++ b/libs/components/src/dialog/simple-dialog/simple-dialog.component.ts
@@ -1,11 +1,14 @@
 import { Component, ContentChild, Directive } from "@angular/core";
 
+import { fadeIn } from "../animations";
+
 @Directive({ selector: "[bit-dialog-icon]" })
 export class IconDirective {}
 
 @Component({
   selector: "bit-simple-dialog",
   templateUrl: "./simple-dialog.component.html",
+  animations: [fadeIn],
 })
 export class SimpleDialogComponent {
   @ContentChild(IconDirective) icon!: IconDirective;