@gitlab/ui 101.15.0 → 101.16.0

package/dist/index.js

@@ -16,6 +16,7 @@ export { default as GlDeprecatedLink, default as GlLink } from './components/bas
 export { default as GlIcon } from './components/base/icon/icon';
 export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon';
 export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon';
+export { default as GlAnimatedLoaderIcon } from './components/base/animated_icon/animated_loader_icon';
 export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon';
 export { default as GlAnimatedSidebarIcon } from './components/base/animated_icon/animated_sidebar_icon';
 export { default as GlAnimatedSmileIcon } from './components/base/animated_icon/animated_smile_icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "101.15.0",
+  "version": "101.16.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/animated_icon/animated_icon.scss

@@ -103,6 +103,27 @@
 }
 
 /* * * * * * * * * * * * * * * * *
+ * animated_loader_icon.vue
+ * * * * * * * * * * * * * * * * */
+.gl-animated-icon-on .gl-animated-loader-shape {
+  animation: gl-animated-loader-on 1.8s $gl-easing-default infinite;
+}
+
+.gl-animated-icon-on .gl-animated-loader-shape-1 {
+  animation-delay: 0.15s;
+}
+
+.gl-animated-icon-on .gl-animated-loader-shape-2 {
+  animation-delay: 0.3s;
+}
+
+@keyframes gl-animated-loader-on {
+  30% { translate: 0 -30%; }
+  60% { translate: 0 2%; }
+  65% { translate: 0 0; }
+}
+
+ /* * * * * * * * * * * * * * * * *
  * animated_notifications_icon.vue
  * * * * * * * * * * * * * * * * */
 

package/src/components/base/animated_icon/animated_loader_icon.vue

@@ -0,0 +1,44 @@
+<script>
+import GlBaseAnimatedIcon from './base_animated_icon.vue';
+
+export default {
+  name: 'GlAnimatedLoaderIcon',
+  extends: GlBaseAnimatedIcon,
+};
+</script>
+<template>
+  <svg
+    :class="iconStateClass"
+    :aria-label="ariaLabel"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <circle
+      class="gl-animated-loader-shape gl-animated-loader-shape-1"
+      cx="8"
+      cy="8"
+      r="2"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <circle
+      class="gl-animated-loader-shape gl-animated-loader-shape-2"
+      cx="14"
+      cy="8"
+      r="2"
+      fill="currentColor"
+      stroke-width="0"
+    />
+    <circle
+      class="gl-animated-loader-shape gl-animated-loader-shape-3"
+      cx="2"
+      cy="8"
+      r="2"
+      fill="currentColor"
+      stroke-width="0"
+    />
+  </svg>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.scss

@@ -3,7 +3,8 @@
   @apply gl-text-gray-500;
 
   .transition {
-    transition: width 0.5s ease;
+    @include gl-prefers-reduced-motion-transition;
+    transition: width 200ms $gl-easing-out-cubic;
   }
 
   .text-enter {
@@ -11,7 +12,8 @@
   }
 
   .text-enter-active {
-    transition: opacity 1s ease-in; // we intentionally overlap this transition with .text-leave-active by 200ms
+    @include gl-prefers-reduced-motion-transition;
+    transition: opacity 400ms $gl-easing-out-cubic; // we intentionally overlap this transition with .text-leave-active by 200ms
   }
 
   .text-enter-to {
@@ -23,40 +25,11 @@
   }
 
   .text-leave-active {
-    transition: opacity 0.7s linear;
+    @include gl-prefers-reduced-motion-transition;
+    transition: opacity 200ms $gl-easing-out-cubic;
   }
 
   .text-leave-to {
     @apply gl-opacity-0;
   }
-
-  &__dot {
-    display: inline-block;
-    width: 0.3rem;
-    height: 0.3rem;
-    background-color: $gray-200;
-    border-radius: 100%;
-    animation: DuoChatLoading 1400ms ease-in-out infinite;
-    animation-fill-mode: both;
-  }
-
-  &__dot--1 {
-    animation-delay: -0.3s;
-  }
-
-  &__dot--2 {
-    animation-delay: -0.15s;
-  }
-}
-
-@keyframes DuoChatLoading {
-  0%,
-  80%,
-  100% {
-    transform: scale(0);
-  }
-
-  40% {
-    transform: scale(1);
-  }
 }

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.vue

@@ -1,6 +1,7 @@
 <script>
 import { translate } from '../../../../../../utils/i18n';
 import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon.vue';
 import { LOADING_TRANSITION_DURATION } from '../../constants';
 
 export const i18n = {
@@ -21,6 +22,7 @@ export default {
   name: 'GlDuoChatLoader',
   components: {
     GlSprintf,
+    GlAnimatedLoaderIcon,
   },
   i18n,
   props: {
@@ -70,12 +72,8 @@ export default {
 </script>
 
 <template>
-  <div class="duo-chat-loader gl-mt-5 gl-flex gl-items-center">
-    <div class="gl-mr-3 gl-flex">
-      <div class="duo-chat-loader__dot duo-chat-loader__dot--1"></div>
-      <div class="duo-chat-loader__dot duo-chat-loader__dot--2"></div>
-      <div class="duo-chat-loader__dot duo-chat-loader__dot--3"></div>
-    </div>
+  <div class="duo-chat-loader gl-mt-5 gl-flex gl-items-center gl-gap-3">
+    <gl-animated-loader-icon :is-on="true" />
     <div>
       <gl-sprintf :message="$options.i18n.LOADER_LOADING_MESSAGE">
         <template #tool>

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -1,7 +1,7 @@
 <script>
 import throttle from 'lodash/throttle';
 import GlIcon from '../../../../../base/icon/icon.vue';
-import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon.vue';
+import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon.vue';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
 import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
@@ -59,7 +59,7 @@ export default {
     GlFormGroup,
     GlFormTextarea,
     GlIcon,
-    GlLoadingIcon,
+    GlAnimatedLoaderIcon,
   },
   directives: {
     SafeHtml,
@@ -315,7 +315,7 @@ export default {
           <documentation-sources v-if="sources" :sources="sources" />
 
           <div class="duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end">
-            <gl-loading-icon v-if="isChunkAndNotCancelled" class="gl-pt-4" variant="dots" inline />
+            <gl-animated-loader-icon v-if="isChunkAndNotCancelled" :is-on="true" />
             <gl-duo-user-feedback
               v-if="isNotChunkOrCancelled"
               :feedback-received="hasFeedback"

package/src/index.js

@@ -23,6 +23,7 @@ export { default as GlLink, default as GlDeprecatedLink } from './components/bas
 export { default as GlIcon } from './components/base/icon/icon.vue';
 export { default as GlAnimatedChevronRightDownIcon } from './components/base/animated_icon/animated_chevron_right_down_icon.vue';
 export { default as GlAnimatedDuoChatIcon } from './components/base/animated_icon/animated_duo_chat_icon.vue';
+export { default as GlAnimatedLoaderIcon } from './components/base/animated_icon/animated_loader_icon.vue';
 export { default as GlAnimatedNotificationIcon } from './components/base/animated_icon/animated_notifications_icon.vue';
 export { default as GlAnimatedSidebarIcon } from './components/base/animated_icon/animated_sidebar_icon.vue';
 export { default as GlAnimatedSmileIcon } from './components/base/animated_icon/animated_smile_icon.vue';