feat: use faster animations for modals, popovers, and tooltips (#1282) (

#1289) * 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 3556698) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
opensearch-project · Jul 12, 2024 · bb19179 · bb19179
1 parent ccebda7
commit bb19179
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 16 deletions.
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;
 }