@gitlab/ui 93.4.0 → 94.0.1

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "93.4.0",
+  "version": "94.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -172,8 +172,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.47.1",
-    "playwright-core": "^1.47.1",
+    "playwright": "^1.47.2",
+    "playwright-core": "^1.47.2",
     "plop": "^2.5.4",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",

package/src/components/base/alert/alert.scss

@@ -67,11 +67,11 @@ $gl-alert-top-border-size: 2px;
   }
 
   .gl-link:not(.gl-label-link) {
-    @include gl-text-blue-600;
+    @apply gl-text-blue-600;
     @apply gl-underline;
 
     &:hover {
-      @include gl-text-blue-700;
+      @apply gl-text-blue-700;
     }
   }
 }

package/src/components/base/avatar/avatar.scss

@@ -212,7 +212,7 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
 }
 
 .gl-avatar-identicon {
-  @include gl-text-center;
+  @apply gl-text-center;
   @apply gl-align-top;
   @apply gl-justify-center;
   @apply gl-items-center;

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -6,7 +6,7 @@ $breadcrumb-max-width: $grid-size * 16;
 }
 
 .gl-breadcrumb-list {
-  @include gl-bg-transparent;
+  @apply gl-bg-transparent;
   @apply gl-p-0;
   @apply gl-items-center;
   @apply gl-leading-normal;

package/src/components/base/button/button.scss

@@ -338,7 +338,7 @@
 
   &.btn-success {
     color: var(--gl-color-neutral-0); // The text is white in light and dark mode
-    @include gl-bg-green-500;
+    @apply gl-bg-green-500;
     @include gl-inset-border-1-green-600;
 
     &:hover {
@@ -348,13 +348,13 @@
 
     &:focus {
       @include gl-focus($color: $green-800);
-      @include gl-bg-green-600;
+      @apply gl-bg-green-600;
     }
 
     &:active,
     &.active {
       @include gl-focus($color: $green-900);
-      @include gl-bg-green-700;
+      @apply gl-bg-green-700;
 
       &:focus {
         @include gl-focus($color: $green-900);
@@ -363,33 +363,33 @@
   }
 
   &.btn-success-secondary {
-    @include gl-bg-white;
+    @apply gl-bg-white;
   }
 
   &.btn-success-secondary,
   &.btn-success-tertiary {
-    @include gl-bg-transparent;
-    @include gl-text-green-500;
+    @apply gl-bg-transparent;
+    @apply gl-text-green-500;
     @apply gl-font-normal;
     @include gl-inset-border-1-green-500;
 
     &:hover {
-      @include gl-text-green-700;
+      @apply gl-text-green-700;
       @include gl-button-hover-border($green-700);
       background-color: $green-50;
     }
 
     &:focus {
-      @include gl-text-green-700;
+      @apply gl-text-green-700;
       @include gl-focus($color: $green-700);
-      @include gl-bg-green-50;
+      @apply gl-bg-green-50;
     }
 
     &:active,
     &.active {
-      @include gl-text-green-900;
+      @apply gl-text-green-900;
       @include gl-focus($color: $green-900);
-      @include gl-bg-green-100;
+      @apply gl-bg-green-100;
 
       &:focus {
         @include gl-focus($color: $green-900);
@@ -475,7 +475,7 @@
   }
 
   &.btn-link {
-    @include gl-bg-transparent;
+    @apply gl-bg-transparent;
     @apply gl-border-0;
     @apply gl-text-base;
     @apply gl-leading-normal;
@@ -485,7 +485,7 @@
     @include gl-shadow-none;
 
     &:hover {
-      @include gl-bg-transparent;
+      @apply gl-bg-transparent;
       color: var(--gl-button-link-text-color-hover);
     }
 
@@ -497,13 +497,13 @@
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-bg-transparent;
+      @apply gl-bg-transparent;
       @include gl-focus;
     }
 
     &.disabled,
     &[disabled] {
-      @include gl-bg-transparent;
+      @apply gl-bg-transparent;
       @include gl-shadow-none;
     }
   }
@@ -536,7 +536,7 @@
 
   &.disabled[class*='-tertiary'],
   &[disabled][class*='-tertiary'] {
-    @include gl-bg-transparent;
+    @apply gl-bg-transparent;
     @include gl-shadow-none;
   }
 }

package/src/components/base/datepicker/datepicker.scss

@@ -190,7 +190,7 @@ $pd-week-color: var(--gl-text-color-subtle);
     @apply gl-rounded-base;
     @include gl-shadow-none;
     @apply gl-py-3;
-    @include gl-text-center;
+    @apply gl-text-center;
     @apply gl-leading-normal;
     @apply gl-w-7;
     @apply gl-text-base;

package/src/components/base/dropdown/dropdown.scss

@@ -2,7 +2,7 @@
   .dropdown-menu {
     @apply gl-border-1 gl-border-gray-200;
     @apply gl-rounded-base;
-    @include gl-bg-white;
+    @apply gl-bg-white;
     @apply gl-mt-2;
     @apply gl-mb-2;
     @apply gl-p-0;

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

@@ -1,6 +1,6 @@
 @mixin gl-tmp-dropdown-item-style {
   @apply gl-items-center;
-  @include gl-bg-transparent;
+  @apply gl-bg-transparent;
   @apply gl-border-0;
   @apply gl-flex;
   @apply gl-text-base;
@@ -11,8 +11,8 @@
   position: relative;
   @apply gl-rounded-none;
   @include gl-shadow-none;
-  @include gl-text-gray-900;
-  @include gl-text-left;
+  @apply gl-text-gray-900;
+  @apply gl-text-left;
   @apply gl-w-full;
   @apply gl-whitespace-normal;
 }
@@ -30,7 +30,7 @@
     .gl-dropdown-item-check-icon {
       @apply gl-shrink-0;
       @apply gl-mr-3;
-      @include gl-text-gray-700;
+      @apply gl-text-gray-700;
     }
 
     .gl-dropdown-item-icon {
@@ -44,7 +44,7 @@
 
     .gl-dropdown-item-text-secondary {
       @apply gl-m-0;
-      @include gl-text-gray-700;
+      @apply gl-text-gray-700;
     }
 
     .gl-dropdown-item-text-wrapper {
@@ -56,7 +56,7 @@
 
     // make sure the text color is not overridden
     &.text-danger {
-      @include gl-text-red-500;
+      @apply gl-text-red-500;
     }
 
     &.disable-hover {
@@ -64,7 +64,7 @@
     }
 
     &:disabled {
-      @include gl-text-gray-500;
+      @apply gl-text-gray-500;
 
       .gl-new-dropdown-item-check-icon {
         @apply gl-text-inherit;
@@ -83,13 +83,13 @@
     &:active,
     &:focus,
     &.is-focused {
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
       @apply gl-no-underline;
-      @include gl-text-gray-900;
+      @apply gl-text-gray-900;
 
       // make sure the text color is not overridden
       &.text-danger {
-        @include gl-text-red-500;
+        @apply gl-text-red-500;
       }
 
       .avatar {

package/src/components/base/dropdown/dropdown_section_header.scss

@@ -1,8 +1,8 @@
 @mixin gl-tmp-dropdown-section-header-style {
   @apply gl-text-base;
-  @include gl-text-gray-900;
+  @apply gl-text-gray-900;
   @apply gl-leading-normal;
-  @include gl-text-left;
+  @apply gl-text-left;
   @apply gl-font-bold;
   @apply gl-py-3;
   @apply gl-px-4;

package/src/components/base/filtered_search/filtered_search.scss

@@ -1,5 +1,5 @@
 .gl-filtered-search-scrollable-container {
-  @include gl-bg-white;
+  @apply gl-bg-white;
   @apply gl-flex;
   @apply gl-grow;
   @apply gl-basis-0;

package/src/components/base/filtered_search/filtered_search_suggestion.scss

@@ -3,9 +3,9 @@
 }
 
 .gl-filtered-search-suggestion-active {
-  @include gl-bg-gray-100;
+  @apply gl-bg-gray-100;
   @apply gl-no-underline;
-  @include gl-text-gray-900;
+  @apply gl-text-gray-900;
   @apply gl-outline-none;
   @include gl-focus($inset: true);
 }

package/src/components/base/filtered_search/filtered_search_token.scss

@@ -11,12 +11,12 @@
   &.gl-filtered-search-token-hover {
     &:hover {
       .gl-filtered-search-token-type {
-        @include gl-bg-gray-100;
+        @apply gl-bg-gray-100;
       }
 
       .gl-filtered-search-token-data,
       .gl-filtered-search-token-operator {
-        @include gl-bg-gray-200;
+        @apply gl-bg-gray-200;
       }
     }
   }
@@ -27,7 +27,7 @@
 
   &.gl-filtered-search-token-type {
     @apply gl-h-6;
-    @include gl-bg-gray-50;
+    @apply gl-bg-gray-50;
     @apply gl-rounded-tr-none;
     @apply gl-rounded-br-none;
     @apply gl-py-2;
@@ -37,14 +37,14 @@
 
   &.gl-filtered-search-token-operator {
     @apply gl-h-6;
-    @include gl-bg-gray-50;
+    @apply gl-bg-gray-50;
     @apply gl-mr-1;
     @apply gl-rounded-none;
   }
 
   &.gl-filtered-search-token-data {
     @apply gl-h-6;
-    @include gl-bg-gray-100;
+    @apply gl-bg-gray-100;
     @apply gl-rounded-tr-small;
     @apply gl-rounded-br-small;
 
@@ -55,6 +55,6 @@
 }
 
 .gl-filtered-search-token-operator-description {
-  @include gl-text-gray-600;
+  @apply gl-text-gray-600;
   @include gl-ml-auto;
 }

package/src/components/base/form/form_select/form_select.scss

@@ -17,7 +17,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @apply gl-pl-4;
   @apply gl-h-auto;
   @apply gl-truncate;
-  @include gl-bg-no-repeat;
+  @apply gl-bg-no-repeat;
   @apply gl-border-none;
   appearance: none;
   background-color: var(--gl-control-background-color-default);

package/src/components/base/infinite_scroll/infinite_scroll.scss

@@ -5,7 +5,7 @@
 }
 
 .gl-infinite-scroll-legend {
-  @include gl-text-center;
+  @apply gl-text-center;
   @apply gl-text-sm;
-  @include gl-text-gray-900;
+  @apply gl-text-gray-900;
 }

package/src/components/base/label/label.scss

@@ -146,6 +146,6 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
 
 .gl-label-tooltip-title {
   @apply gl-block;
-  @include gl-text-theme-indigo-300;
+  @apply gl-text-theme-indigo-300;
   @apply gl-font-bold;
 }

package/src/components/base/loading_icon/loading_icon.scss

@@ -30,7 +30,7 @@ $gl-loader-dots-size-xl: 1rem;
 
 .gl-spinner-container {
   @apply gl-leading-0;
-  @include gl-text-center;
+  @apply gl-text-center;
 }
 
 .gl-spinner {
@@ -79,7 +79,7 @@ $gl-loader-dots-size-xl: 1rem;
 
 .gl-dots-loader {
   @apply gl-leading-0;
-  @include gl-text-center;
+  @apply gl-text-center;
 }
 
 .gl-dots-loader {

package/src/components/base/markdown/markdown.scss

@@ -72,7 +72,7 @@
   }
 
   blockquote {
-    @include gl-text-gray-700;
+    @apply gl-text-gray-700;
     @apply gl-py-3;
     @apply gl-pl-6;
     @apply gl-my-3;
@@ -87,17 +87,17 @@
   }
 
   .deletion {
-    @include gl-bg-red-100;
+    @apply gl-bg-red-100;
   }
 
   .addition {
-    @include gl-bg-green-100;
+    @apply gl-bg-green-100;
   }
 
   code {
     @apply gl-rounded-base;
-    @include gl-bg-gray-50;
-    @include gl-text-gray-950;
+    @apply gl-bg-gray-50;
+    @apply gl-text-gray-950;
     @apply gl-px-2;
     @apply gl-py-1;
   }
@@ -111,9 +111,9 @@
     @include gl-overflow-auto;
 
     code {
-      @include gl-bg-white;
+      @apply gl-bg-white;
       @apply gl-rounded-none;
-      @include gl-text-gray-900;
+      @apply gl-text-gray-900;
       @apply gl-p-0;
     }
   }
@@ -156,11 +156,11 @@
     }
 
     thead {
-      @include gl-bg-gray-50;
+      @apply gl-bg-gray-50;
     }
 
     tr:nth-child(even) {
-      @include gl-bg-gray-10;
+      @apply gl-bg-gray-10;
     }
   }
 }

package/src/components/base/markdown/markdown_typescale_demo.html

@@ -139,9 +139,9 @@
   @include gl-px-6;
 
   code {
-    @include gl-bg-white;
+    @apply gl-bg-white;
     @include gl-rounded-none;
-    @include gl-text-gray-900;
+    @apply gl-text-gray-900;
     @include gl-px-0;
     @include gl-py-0;
   }

package/src/components/base/modal/modal.scss

@@ -69,7 +69,7 @@ body.modal-open {
     position: relative;
     @apply gl-p-5;
     @apply gl-py-3;
-    @include gl-text-left;
+    @apply gl-text-left;
     @apply gl-whitespace-normal;
     @apply gl-text-base;
     @apply gl-leading-20;

package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.scss

@@ -7,7 +7,7 @@
     .gl-new-dropdown-item-content {
       &:disabled,
       &[disabled] {
-        @include gl-text-gray-500;
+        @apply gl-text-gray-500;
         cursor: not-allowed;
         background: none;
         text-decoration: none;

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

@@ -14,7 +14,7 @@
 
   .gl-new-dropdown-panel {
     @apply gl-hidden;
-    @include gl-bg-white;
+    @apply gl-bg-white;
     @apply gl-border-1 gl-border-solid gl-border-gray-200;
     @include gl-rounded-lg;
     @include gl-shadow-md;

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));
     }
   }