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>
opensearch-project · Jul 10, 2024 · 3556698 · 3556698
1 parent e98bac2
commit 3556698
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 17 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -28,8 +28,9 @@
 - [Next Theme] Set base font size to 18px ([#1221](https://github.com/opensearch-project/oui/pull/1221))
 - [Next Theme] Revert `font-weight` of OuiButton to normal from semi-bold ([#1222](https://github.com/opensearch-project/oui/pull/1222))
 - Convert shorthand palette colors to full 6-char hex ([#1262](https://github.com/opensearch-project/oui/pull/1262))
-- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286))
+- Use faster animations for modals, popovers, and tooltips ([#1282](https://github.com/opensearch-project/oui/pull/1282))
 - Adjust popover and context menu title styles and tooltip padding ([#1283](https://github.com/opensearch-project/oui/pull/1283))
+- Make Super Update Button secondary instead of primary ([#1286](https://github.com/opensearch-project/oui/pull/1286))
 
 ### 🐛 Bug Fixes
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }