From a76adcc6cad98ac0228178f79d2f2215aed75d29 Mon Sep 17 00:00:00 2001
From: Julia Miocene <jmiocene@gitlab.com>
Date: Fri, 19 Jul 2024 14:09:44 +0200
Subject: [PATCH] feat(GlListboxItem): Add animation

---
 src/components/base/new_dropdowns/dropdown_item.scss | 9 +++++++++
 src/scss/utility-mixins/animation.scss               | 6 ++++++
 2 files changed, 15 insertions(+)

diff --git a/src/components/base/new_dropdowns/dropdown_item.scss b/src/components/base/new_dropdowns/dropdown_item.scss
index ca9efb1a24..18bfc63bb9 100644
--- a/src/components/base/new_dropdowns/dropdown_item.scss
+++ b/src/components/base/new_dropdowns/dropdown_item.scss
@@ -70,6 +70,12 @@
     }
   }
 
+  &:focus {
+    .gl-new-dropdown-item-content {
+      z-index: 1;
+    }
+  }
+
   .gl-new-dropdown-item-content {
     @apply gl-rounded-base;
     @apply gl-border-0;
@@ -87,6 +93,9 @@
     @include gl-text-gray-900;
     @include gl-text-left;
     @include gl-white-space-normal;
+    @include gl-prefers-reduced-motion-transition;
+    transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
+                box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
 
     .gl-new-dropdown-item-check-icon {
       @include gl-flex-shrink-0;
diff --git a/src/scss/utility-mixins/animation.scss b/src/scss/utility-mixins/animation.scss
index 843f939fa6..76a166e76b 100644
--- a/src/scss/utility-mixins/animation.scss
+++ b/src/scss/utility-mixins/animation.scss
@@ -1,3 +1,9 @@
+@mixin gl-prefers-reduced-motion-transition {
+  @media (prefers-reduced-motion) {
+    transition-duration: .01ms !important;
+  }
+}
+
 @keyframes gl-spinner-rotate {
   0% {
     transform: rotate(0);
-- 
GitLab