From 7e529d345f6e78e70fb5028a75c7cad15bacbc23 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 10 Jul 2024 22:25:24 +0000
Subject: [PATCH] feat: use faster animations for modals, popovers, and
 tooltips (#1282)

* feat: use faster animations for modals, popovers, and tooltips

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>

* Update changelog

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>

---------

Signed-off-by: Viraj Sanghvi <virajs@amazon.com>
Signed-off-by: Viraj Sanghvi <vsanghvi@gmail.com>
(cherry picked from commit 3556698e432a9ad426ee95eb760076beb9895796)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
---
 src/components/modal/_modal.scss                       |  2 +-
 src/components/popover/_popover.scss                   | 10 +++++-----
 src/components/tool_tip/_tool_tip.scss                 |  8 --------
 src/global_styling/mixins/_tool_tip.scss               |  2 +-
 .../oui-next/global_styling/mixins/_tool_tip.scss      |  2 +-
 5 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index 6c207d3a76..f4e6326475 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -27,7 +27,7 @@
   border-radius: $ouiBorderRadius;
   z-index: $ouiZModal;
   min-width: $ouiFormMaxWidth;
-  animation: ouiModal $ouiAnimSpeedSlow $ouiAnimSlightBounce;
+  animation: ouiModal $ouiAnimSpeedExtraFast $ouiAnimSlightBounce;
   max-width: calc(100vw - #{$ouiSize});
 
   // Remove the outline from the focusable container
diff --git a/src/components/popover/_popover.scss b/src/components/popover/_popover.scss
index b095a1dcff..b920a7438d 100644
--- a/src/components/popover/_popover.scss
+++ b/src/components/popover/_popover.scss
@@ -51,16 +51,16 @@
   opacity: 0; /* 2 */
   visibility: hidden; /* 2 */
   transition: /* 2 */
-    opacity $ouiAnimSlightBounce $ouiAnimSpeedSlow,
-    visibility $ouiAnimSlightBounce $ouiAnimSpeedSlow;
+    opacity $ouiAnimSlightBounce $ouiAnimSpeedExtraFast,
+    visibility $ouiAnimSlightBounce $ouiAnimSpeedExtraFast;
 
   // Don't animate when using the attached mode like for inputs
   &:not(.ouiPopover__panel-isAttached) {
     transform: translateY(0) translateX(0) translateZ(0); /* 2 */
     transition: /* 2 */
-      opacity $ouiAnimSlightBounce $ouiAnimSpeedSlow,
-      visibility $ouiAnimSlightBounce $ouiAnimSpeedSlow,
-      transform $ouiAnimSlightBounce ($ouiAnimSpeedSlow + 100ms);
+      opacity $ouiAnimSlightBounce $ouiAnimSpeedExtraFast,
+      visibility $ouiAnimSlightBounce $ouiAnimSpeedExtraFast,
+      transform $ouiAnimSlightBounce ($ouiAnimSpeedExtraFast + 100ms);
   }
 
   &.ouiPopover__panel-isOpen {
diff --git a/src/components/tool_tip/_tool_tip.scss b/src/components/tool_tip/_tool_tip.scss
index ccb72ebc81..b27cc1ebda 100644
--- a/src/components/tool_tip/_tool_tip.scss
+++ b/src/components/tool_tip/_tool_tip.scss
@@ -86,47 +86,39 @@
 @keyframes ouiToolTipTop {
   0% {
     opacity: 0;
-    transform: translateY(-$ouiSize);
   }
 
   100% {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
 @keyframes ouiToolTipBottom {
   0% {
     opacity: 0;
-    transform: translateY($ouiSize);
   }
 
   100% {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
 @keyframes ouiToolTipLeft {
   0% {
     opacity: 0;
-    transform: translateX(-$ouiSize);
   }
 
   100% {
     opacity: 1;
-    transform: translateY(0);
   }
 }
 
 @keyframes ouiToolTipRight {
   0% {
     opacity: 0;
-    transform: translateX($ouiSize);
   }
 
   100% {
     opacity: 1;
-    transform: translateY(0);
   }
 }
diff --git a/src/global_styling/mixins/_tool_tip.scss b/src/global_styling/mixins/_tool_tip.scss
index ea10762cfb..d1310dc8c2 100644
--- a/src/global_styling/mixins/_tool_tip.scss
+++ b/src/global_styling/mixins/_tool_tip.scss
@@ -35,7 +35,7 @@
 }
 
 @mixin ouiToolTipAnimation($side: 'top') {
-  animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedSlow ease-out 0s forwards;
+  animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedExtraFast ease-out 0s forwards;
 }
 
 
diff --git a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss
index ea10762cfb..d1310dc8c2 100644
--- a/src/themes/oui-next/global_styling/mixins/_tool_tip.scss
+++ b/src/themes/oui-next/global_styling/mixins/_tool_tip.scss
@@ -35,7 +35,7 @@
 }
 
 @mixin ouiToolTipAnimation($side: 'top') {
-  animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedSlow ease-out 0s forwards;
+  animation: #{map-get($ouiTooltipAnimations, $side)} $ouiAnimSpeedExtraFast ease-out 0s forwards;
 }