From 1e8de385ff730138de4a416caed0ce5327c60a72 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Thu, 25 Apr 2024 17:00:33 +0300
Subject: [PATCH] feat(Date Picker): add some animation when panel is collapsed

---
 packages/beeq/src/components/panel/bq-panel.tsx   |  6 ++++--
 .../beeq/src/components/panel/scss/bq-panel.scss  |  4 ++++
 .../beeq/src/global/styles/mixins/_keyframes.scss | 15 +++++++++++++++
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/beeq/src/components/panel/bq-panel.tsx b/packages/beeq/src/components/panel/bq-panel.tsx
index 100026825..42e33fa32 100644
--- a/packages/beeq/src/components/panel/bq-panel.tsx
+++ b/packages/beeq/src/components/panel/bq-panel.tsx
@@ -138,10 +138,12 @@ export class BqPanel {
   render() {
     return (
       <div
-        class="bq-panel"
+        class={{
+          'bq-panel': true,
+          'panel-hidden': !this.open,
+        }}
         ref={(el) => (this.panel = el)}
         aria-hidden={!this.open ? 'true' : 'false'}
-        hidden={!this.open}
         part="panel"
       >
         <slot />
diff --git a/packages/beeq/src/components/panel/scss/bq-panel.scss b/packages/beeq/src/components/panel/scss/bq-panel.scss
index b10fd270d..cf91f76c3 100644
--- a/packages/beeq/src/components/panel/scss/bq-panel.scss
+++ b/packages/beeq/src/components/panel/scss/bq-panel.scss
@@ -17,3 +17,7 @@
 
   border-style: var(--bq-panel--border-style);
 }
+
+.panel-hidden {
+  @include animation-fade-out;
+}
diff --git a/packages/beeq/src/global/styles/mixins/_keyframes.scss b/packages/beeq/src/global/styles/mixins/_keyframes.scss
index e41751553..4ae6f6140 100644
--- a/packages/beeq/src/global/styles/mixins/_keyframes.scss
+++ b/packages/beeq/src/global/styles/mixins/_keyframes.scss
@@ -8,6 +8,16 @@
   }
 }
 
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
 @keyframes slide-in {
   from {
     transform: translateY(10px);
@@ -28,6 +38,11 @@
   animation: fade-in $duration $timing-function $delay;
 }
 
+@mixin animation-fade-out($duration: 0.3s, $delay: 0s, $timing-function: ease) {
+  animation: fade-out $duration $timing-function $delay;
+  opacity: 0;
+}
+
 @mixin animation-slide-in($duration: 0.3s, $delay: 0s, $timing-function: ease) {
   animation:
     fade-in $duration $timing-function $delay,