@gitlab/ui 94.0.0 → 94.1.0

package/src/components/base/new_dropdowns/dropdown_item.scss

@@ -19,41 +19,41 @@
   &:hover,
   &:focus {
     .gl-new-dropdown-item-content {
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
   }
 
   &:active,
   &:focus:active {
     .gl-new-dropdown-item-content {
-      @include gl-bg-gray-100;
+      @apply gl-bg-gray-100;
     }
   }
 
   &[aria-selected="true"] {
     .gl-new-dropdown-item-content {
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
 
     &:hover,
     &:focus {
       .gl-new-dropdown-item-content {
-        @include gl-bg-gray-100;
+        @apply gl-bg-gray-100;
       }
 
       .gl-new-dropdown-item-check-icon {
-        @include gl-text-blue-600
+        @apply gl-text-blue-600
       }
     }
 
     &:active,
     &:focus:active {
       .gl-new-dropdown-item-content {
-        @include gl-bg-gray-200;
+        @apply gl-bg-gray-200;
       }
 
       .gl-new-dropdown-item-check-icon {
-        @include gl-text-blue-700
+        @apply gl-text-blue-700
       }
     }
   }
@@ -80,7 +80,7 @@
     @apply gl-rounded-base;
     @apply gl-border-0;
     @apply gl-w-full;
-    @include gl-bg-transparent;
+    @apply gl-bg-transparent;
     @apply gl-items-center;
     @apply gl-flex;
     @apply gl-text-base;
@@ -90,8 +90,8 @@
     @apply gl-py-0;
     position: relative;
     @apply gl-no-underline;
-    @include gl-text-gray-900;
-    @include gl-text-left;
+    @apply gl-text-gray-900;
+    @apply gl-text-left;
     @apply gl-whitespace-normal;
     @include gl-prefers-reduced-motion-transition;
     transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
@@ -100,7 +100,7 @@
     .gl-new-dropdown-item-check-icon {
       @apply gl-shrink-0;
       @apply gl-mr-3;
-      @include gl-text-blue-500;
+      @apply gl-text-blue-500;
     }
 
     .gl-new-dropdown-item-icon {

package/src/components/base/new_dropdowns/listbox/listbox.scss

@@ -20,7 +20,7 @@ $clear-button-size: 24px;
     }
 
     &::placeholder {
-      @include gl-text-gray-400;
+      @apply gl-text-gray-400;
     }
 
     &::-webkit-search-cancel-button {
@@ -42,7 +42,7 @@ $clear-button-size: 24px;
     position: absolute;
     top: calc(50% - #{$search-icon-size} / 2);
     left: $gl-spacing-scale-4;
-    @include gl-text-gray-500;
+    @apply gl-text-gray-500;
   }
 
   .gl-listbox-search-clear-button {

package/src/components/base/pagination/pagination.scss

@@ -2,7 +2,7 @@
   @apply gl-text-base;
 
   a {
-    @include gl-text-gray-900;
+    @apply gl-text-gray-900;
   }
 
   .page-link {
@@ -17,7 +17,7 @@
     }
 
     &:not(.active):hover {
-      @include gl-text-gray-900;
+      @apply gl-text-gray-900;
       box-shadow: inset 0 0 0 1px $gray-400;
       border-color: $gray-400;
       background: $gray-50;
@@ -25,12 +25,12 @@
     }
 
     &:not(.active):focus {
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
 
     &:not(.active):active,
     &:not(.active).active {
-      @include gl-bg-gray-100;
+      @apply gl-bg-gray-100;
     }
 
     &:not(.active):focus,
@@ -47,9 +47,9 @@
 
   .page-item {
     &:not(.disabled) a.active {
-      @include gl-bg-blue-500;
+      @apply gl-bg-blue-500;
       @apply gl-border-blue-500;
-      @include gl-text-white;
+      @apply gl-text-white;
       @apply gl-z-2;
       @include gl-shadow-none;
 
@@ -59,9 +59,9 @@
     }
 
     &.disabled .page-link {
-      @include gl-bg-gray-10;
+      @apply gl-bg-gray-10;
       @apply gl-border-gray-200;
-      @include gl-text-gray-500;
+      @apply gl-text-gray-500;
     }
   }
 

package/src/components/base/path/path.scss

@@ -146,7 +146,7 @@ $path-chevron-right-margin: px-to-rem(14px);
 
     &-right {
       right: 0;
-      @include gl-text-right;
+      @apply gl-text-right;
       @include gl-bg-gradient-blur(right, var(--path-bg-color));
     }
   }

package/src/components/base/search_box_by_type/search_box_by_type.scss

@@ -2,7 +2,7 @@ $gl-search-box-by-type-search-icon-size: 16px;
 $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 
 .gl-search-box-by-type-search-icon {
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
   @apply gl-w-5;
   position: absolute;
   left: $gl-spacing-scale-3;
@@ -15,7 +15,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 }
 
 .gl-search-box-by-type-loading-icon {
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
   @apply gl-w-5;
   @apply gl-mr-2;
 }
@@ -53,7 +53,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   }
 
   &::placeholder {
-    @include gl-text-gray-400;
+    @apply gl-text-gray-400;
   }
 
   &::-webkit-search-cancel-button {

package/src/components/base/segmented_control/segmented_control.scss

@@ -35,9 +35,9 @@
   .btn-gl-segmented-button {
     @apply gl-text-base;
     @apply gl-leading-normal;
-    @include gl-text-gray-900;
+    @apply gl-text-gray-900;
     @include gl-fill-current-color;
-    @include gl-bg-gray-10;
+    @apply gl-bg-gray-10;
     @include gl-inset-border-y-1-gray-200;
 
     &:first-child {
@@ -50,29 +50,29 @@
 
     &:hover {
       @include gl-inset-border-2-gray-400;
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
 
     &.focus {
       @apply gl-z-1;
       @include gl-btn-gl-segmented-button-focus($gray-400);
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
 
     &.active {
       @apply gl-z-2;
       @include gl-inset-border-2-gray-300;
-      @include gl-bg-white;
+      @apply gl-bg-white;
 
       &:hover {
         @include gl-inset-border-2-gray-400;
-        @include gl-bg-gray-50;
+        @apply gl-bg-gray-50;
       }
 
       &.focus,
       &.focus:hover {
         @include gl-btn-gl-segmented-button-focus($gray-400);
-        @include gl-bg-gray-50;
+        @apply gl-bg-gray-50;
       }
     }
 
@@ -84,7 +84,7 @@
     &[disabled],
     &.disabled:hover,
     &[disabled]:hover {
-      @include gl-text-gray-400;
+      @apply gl-text-gray-400;
       @include gl-inset-border-y-1-gray-200;
       @include gl-z-index-0;
       @include gl-cursor-not-allowed;

package/src/components/base/table/table.scss

@@ -5,9 +5,8 @@ table.gl-table {
   tr {
     th,
     td {
-      @apply gl-border-b-1 gl-p-5 gl-border-b-solid;
+      @apply gl-border-b-1 gl-bg-transparent gl-p-5 gl-border-b-solid;
       border-color: var(--gl-border-color-default);
-      @include gl-bg-transparent;
       @apply gl-leading-normal;
       @apply gl-text-base;
       @apply gl-align-top;
@@ -81,7 +80,7 @@ table.gl-table {
         @apply gl-border-l-1 gl-border-r-1 gl-border-l-solid gl-border-r-solid;
 
         &::before {
-          @include gl-text-left;
+          @apply gl-text-left;
         }
 
         &:first-child {
@@ -94,7 +93,7 @@ table.gl-table {
       }
 
       div {
-        @include gl-text-right;
+        @apply gl-text-right;
         @apply gl-break-words;
       }
     }

package/src/components/base/toast/toast.scss

@@ -27,6 +27,7 @@
     @apply gl-flex;
     @apply gl-items-center;
     @apply gl-justify-between;
+    @apply gl-shadow-md;
     background-color: var(--gl-feedback-strong-background-color);
     color: var(--gl-feedback-strong-text-color);
   }
@@ -43,7 +44,7 @@
   }
 
   .gl-toast-action {
-    @include gl-text-blue-300;
+    @apply gl-text-blue-300;
     @apply gl-p-3;
     @apply gl-m-0;
     @apply gl-ml-5;

package/src/components/base/toggle/toggle.scss

@@ -32,7 +32,7 @@ $toggle-height: 2.5 * $grid-size;
 
     .gl-toggle {
       @include gl-cursor-not-allowed;
-      @include gl-bg-gray-200;
+      @apply gl-bg-gray-200;
 
       .toggle-icon > svg {
         @include gl-fill-gray-200;
@@ -40,7 +40,7 @@ $toggle-height: 2.5 * $grid-size;
     }
 
     .gl-toggle.is-checked {
-      @include gl-bg-blue-200;
+      @apply gl-bg-blue-200;
 
       .toggle-icon > svg {
         @include gl-fill-blue-200;
@@ -49,14 +49,14 @@ $toggle-height: 2.5 * $grid-size;
 
     .gl-toggle-label,
     .gl-description-label {
-      @include gl-text-gray-500;
+      @apply gl-text-gray-500;
     }
   }
 }
 
 .gl-help-label {
   @apply gl-mt-3;
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
   @apply gl-font-normal;
 }
 
@@ -86,7 +86,7 @@ $toggle-height: 2.5 * $grid-size;
   @apply gl-justify-center;
   @apply gl-border-0;
   @include gl-cursor-pointer;
-  @include gl-bg-gray-600;
+  @apply gl-bg-gray-600;
   position: relative;
   width: $toggle-width;
   height: $toggle-height;
@@ -106,7 +106,7 @@ $toggle-height: 2.5 * $grid-size;
   &:active,
   &:focus,
   &:focus:active {
-    @include gl-bg-gray-700;
+    @apply gl-bg-gray-700;
   }
 
   &:active,
@@ -121,7 +121,7 @@ $toggle-height: 2.5 * $grid-size;
 
   .toggle-icon {
     @include gl-rounded-full;
-    @include gl-bg-white;
+    @apply gl-bg-white;
     position: absolute;
     @apply gl-inline-flex;
     @apply gl-items-center;
@@ -140,13 +140,13 @@ $toggle-height: 2.5 * $grid-size;
   }
 
   &.is-checked {
-    @include gl-bg-blue-500;
+    @apply gl-bg-blue-500;
 
     &:hover,
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-bg-blue-600;
+      @apply gl-bg-blue-600;
     }
 
     .toggle-icon {

package/src/components/base/token/token.scss

@@ -1,6 +1,6 @@
 .gl-token {
-  @include gl-text-gray-900;
-  @include gl-bg-gray-100;
+  @apply gl-text-gray-900;
+  @apply gl-bg-gray-100;
   @include gl-rounded-small;
   @apply gl-pl-3;
   @apply gl-inline-flex;
@@ -14,7 +14,7 @@
 }
 
 .gl-token-search-type-variant {
-  @include gl-bg-gray-100;
+  @apply gl-bg-gray-100;
   @apply gl-rounded-tr-none;
   @apply gl-rounded-br-none;
 }

package/src/components/base/token_selector/token_selector.scss

@@ -10,7 +10,7 @@
 }
 
 .gl-token-selector-token-container:focus .gl-token {
-  @include gl-bg-gray-300;
+  @apply gl-bg-gray-300;
 }
 
 .gl-token-selector-input {

package/src/components/base/tooltip/tooltip.scss

@@ -1,8 +1,9 @@
 .gl-tooltip {
   @apply gl-text-sm;
   @apply gl-p-2;
-
+  
   .tooltip-inner {
+    @apply gl-shadow-md;
     @apply gl-rounded-base;
     @apply gl-leading-normal;
     @apply gl-font-normal;

package/src/components/charts/legend/legend.scss

@@ -61,7 +61,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
     @apply gl-whitespace-nowrap;
     @include gl-overflow-hidden;
     @apply gl-text-ellipsis;
-    @include gl-text-right;
+    @apply gl-text-right;
     @apply gl-w-1/8;
   }
 

package/src/components/charts/single_stat/single_stat.scss

@@ -2,7 +2,7 @@
   @apply gl-leading-1;
 
   &:hover[tabindex='0'] {
-    @include gl-bg-gray-50;
+    @apply gl-bg-gray-50;
     @apply gl-rounded-base;
   }
 

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

@@ -1,6 +1,6 @@
 .duo-chat-loader {
   @apply gl-flex;
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
 
   .transition {
     transition: width 0.5s ease;

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

@@ -3,7 +3,7 @@
   position: relative;
 
   code {
-    @include gl-bg-gray-100;
+    @apply gl-bg-gray-100;
   }
 
   pre {
@@ -14,7 +14,7 @@
   pre code {
     @apply gl-text-sm;
     @apply gl-leading-1;
-    @include gl-bg-transparent;
+    @apply gl-bg-transparent;
     white-space: inherit;
   }
 

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

@@ -73,7 +73,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 }
 
 .duo-chat-drawer-footer-sticky {
-  @include gl-bg-white;
+  @apply gl-bg-white;
   bottom: 0;
   position: sticky;
 }
@@ -152,7 +152,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   @apply -gl-mt-2;
 
   .active-command {
-    @include gl-bg-gray-50;
+    @apply gl-bg-gray-50;
     @apply gl-rounded-base;
   }
 

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -1,8 +1,8 @@
 .gl-clear-icon-button {
-  @include gl-bg-transparent;
+  @apply gl-bg-transparent;
   @apply gl-border-none;
   @include gl-cursor-pointer;
-  @include gl-text-gray-500;
+  @apply gl-text-gray-500;
 
   &:focus {
     @include gl-focus;

package/src/index.js

@@ -22,6 +22,15 @@ export { default as GlNavbar } from './components/base/navbar/navbar.vue';
 export { default as GlIntersectionObserver } from './components/utilities/intersection_observer/intersection_observer.vue';
 export { default as GlLink, default as GlDeprecatedLink } from './components/base/link/link.vue';
 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 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';
+export { default as GlAnimatedSortIcon } from './components/base/animated_icon/animated_sort_icon.vue';
+export { default as GlAnimatedStarIcon } from './components/base/animated_icon/animated_star_icon.vue';
+export { default as GlAnimatedTodoIcon } from './components/base/animated_icon/animated_todo_icon.vue';
+export { default as GlAnimatedUploadIcon } from './components/base/animated_icon/animated_upload_icon.vue';
 export { default as GlLoadingIcon } from './components/base/loading_icon/loading_icon.vue';
 export { default as GlModal } from './components/base/modal/modal.vue';
 export { default as GlPagination } from './components/base/pagination/pagination.vue';

package/src/scss/typescale/_index.scss

@@ -1,7 +1,7 @@
 @mixin gl-typescale-ui($selector: 'body') {
   #{$selector} {
     @apply gl-text-base;
-    @include gl-text-gray-900;
+    @apply gl-text-gray-900;
     @include gl-font-regular;
     @apply gl-font-normal;
     @apply gl-leading-normal;
@@ -60,7 +60,7 @@
   .gl-h6 {
     @apply gl-text-base;
     @apply gl-leading-20;
-    @include gl-text-gray-700;
+    @apply gl-text-gray-700;
   }
 
   p,
@@ -93,7 +93,7 @@
   }
 
   blockquote {
-    @include gl-text-gray-700;
+    @apply gl-text-gray-700;
     @apply gl-py-3;
     @apply gl-pl-6;
     @apply gl-my-3;

package/tailwind.defaults.js

@@ -409,9 +409,9 @@ module.exports = {
     boxShadow: {
       DEFAULT: '0 1px 4px 0 #0000004d',
       none: 'none',
-      sm: '0 1px 2px var(--gl-shadow-color-default, #05050629)',
-      md: '0 2px 8px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629)',
-      lg: '0 4px 12px var(--gl-shadow-color-default, #05050629), 0 0 4px var(--gl-shadow-color-default, #05050629)',
+      sm: '0 0 2px var(--gl-shadow-color-default, #05050629), 0 1px 4px var(--gl-shadow-color-default, #05050629),',
+      md: '0 0 1px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 2px 8px var(--gl-shadow-color-default, #05050629)',
+      lg: '0 0 2px var(--gl-shadow-color-default, #05050629), 0 0 2px var(--gl-shadow-color-default, #05050629), 0 4px 12px var(--gl-shadow-color-default, #05050629)',
       'inner-1-blue-500': 'inset 0 0 0 1px var(--blue-500, #1f75cb)',
       'inner-1-gray-100': 'inset 0 0 0 1px var(--gray-100, #dcdcde)',
       'inner-1-gray-200': 'inset 0 0 0 1px var(--gray-200, #bfbfc3)',