@gitlab/ui 76.1.0 → 77.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "76.1.0",
+  "version": "77.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -136,7 +136,7 @@
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.0.0",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-storybook": "0.8.0",

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

@@ -10,7 +10,7 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 
 .gl-alert {
   @include gl-font-base;
-  @include gl-relative;
+  position: relative;
   padding-inline: calc(#{$gl-spacing-scale-9} + #{$gl-alert-padding-x});
   @include gl-py-5;
 
@@ -33,8 +33,8 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 }
 
 .gl-alert-sticky {
-  @include gl-sticky;
-  @include gl-top-0;
+  position: sticky;
+  top: 0;
 }
 
 .gl-alert-title {
@@ -43,8 +43,8 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 }
 
 .gl-alert-icon-container {
-  @include gl-absolute;
-  @include gl-top-5;
+  position: absolute;
+  top: $gl-spacing-scale-5;
   left: calc(#{$gl-spacing-scale-5} + #{$gl-alert-padding-x});
   @include gl-display-flex;
   @include gl-align-items-center;
@@ -77,8 +77,8 @@ $gl-alert-padding-x: var(--gl-alert-padding-x, 0px);
 
 // This is the replacement for .gl-alert-dismiss
 .gl-dismiss-btn {
-  @include gl-absolute;
-  @include gl-top-4;
+  position: absolute;
+  top: $gl-spacing-scale-4;
   right: calc(#{$gl-spacing-scale-4} + #{$gl-alert-padding-x});
 }
 

package/src/components/base/badge/badge.scss

@@ -89,7 +89,7 @@
     @include gl-h-5;
     @include gl-w-5;
     @include gl-flex-shrink-0;
-    @include gl-top-auto;
+    top: auto;
   }
 }
 

package/src/components/base/banner/banner.scss

@@ -17,9 +17,9 @@
 }
 
 .gl-banner-close {
-  @include gl-absolute;
-  @include gl-top-3;
-  @include gl-right-3;
+  position: absolute;
+  top: $gl-spacing-scale-3;
+  right: $gl-spacing-scale-3;
 }
 
 // Introduction variant

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

@@ -50,12 +50,12 @@
     @include gl-w-5;
     @include gl-flex-shrink-0;
     @include gl-mr-2;
-    @include gl-top-auto;
+    top: auto;
   }
 
   gl-emoji {
     @include gl-mr-2;
-    @include gl-relative;
+    position: relative;
     @include gl-font-lg;
   }
 

package/src/components/base/card/card.scss

@@ -4,7 +4,7 @@
   @include gl-display-flex;
   @include gl-flex-direction-column;
   @include gl-overflow-wrap-break;
-  @include gl-relative;
+  position: relative;
   @include gl-rounded-base;
   @include gl-font-base;
 }

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

@@ -22,10 +22,10 @@ $pd-week-color: $gray-500;
 
 .gl-datepicker-actions {
   @include gl-font-sm;
-  @include gl-absolute;
-  @include gl-top-0;
-  @include gl-bottom-0;
-  @include gl-right-0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
   @include gl-display-flex;
   @include gl-justify-content-center;
   @include gl-align-items-center;
@@ -99,7 +99,7 @@ $pd-week-color: $gray-500;
   }
 
   .pika-select {
-    @include gl-top-0;
+    top: 0;
     @include gl-h-5;
   }
 

package/src/components/base/drawer/drawer.scss

@@ -3,9 +3,9 @@ $gl-sidebar-width: 290px;
 $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white);
 
 .gl-drawer {
-  @include gl-right-0;
+  right: 0;
   @include gl-transition-medium;
-  @include gl-fixed;
+  position: fixed;
   @include gl-h-full;
   @include gl-w-full;
   @include gl-overflow-y-auto;
@@ -17,8 +17,8 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 
   .gl-drawer-header-sticky {
     @include gl-bg-white;
-    @include gl-top-0;
-    @include gl-sticky;
+    top: 0;
+    position: sticky;
   }
 }
 
@@ -67,8 +67,8 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
     top: -$gl-border-size-1;
     @include gl-translate-y-n100;
     content: '';
-    @include gl-left-0;
-    @include gl-absolute;
+    left: 0;
+    position: absolute;
     @include gl-pointer-events-none;
     @include gl-w-full;
     @include gl-h-7;
@@ -77,8 +77,8 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
 
 .gl-drawer-footer-sticky {
   @include gl-bg-white;
-  @include gl-bottom-0;
-  @include gl-sticky;
+  bottom: 0;
+  position: sticky;
 }
 
 .gl-drawer-header {
@@ -116,10 +116,10 @@ $gl-drawer-scrim-gradient: linear-gradient(to bottom, $transparent-rgba, $white)
   &::after {
     background: $gl-drawer-scrim-gradient;
     content: '';
-    @include gl-bottom-0;
+    bottom: 0;
     @include gl-pointer-events-none;
     @include gl-w-full;
-    @include gl-fixed;
+    position: fixed;
     @include gl-h-7;
   }
 }

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

@@ -8,7 +8,7 @@
   @include gl-line-height-normal;
   @include gl-px-5;
   @include gl-py-0;
-  @include gl-relative;
+  position: relative;
   @include gl-rounded-0;
   @include gl-shadow-none;
   @include gl-text-gray-900;

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

@@ -7,7 +7,7 @@
 }
 
 .gl-filtered-search-suggestion-list {
-  @include gl-absolute;
+  position: absolute;
   @include gl-overflow-y-auto;
   max-height: $gl-max-dropdown-max-height;
 

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

@@ -2,7 +2,7 @@
   @include gl-mt-1;
   @include gl-ml-0;
   @include gl-align-self-start;
-  @include gl-static;
+  position: static;
   @include gl-h-auto;
   @include gl-mr-0;
 }
@@ -60,8 +60,8 @@
 
       &::before,
       &::after {
-        @include gl-top-0;
-        @include gl-left-n5;
+        top: 0;
+        left: -$gl-spacing-scale-5;
       }
 
       &::before {

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

@@ -7,7 +7,7 @@ $label-close-button: '.gl-label-close.gl-button';
   @include gl-overflow-hidden;
   @include gl-display-inline-flex;
   @include gl-rounded-pill;
-  @include gl-relative;
+  position: relative;
   @include gl-max-w-full;
   @include gl-font-base;
   box-shadow: var(--label-inset-border) !important;

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

@@ -39,7 +39,7 @@ $gl-loader-dots-size-xl: 1rem;
 }
 
 .gl-spinner {
-  @include gl-relative;
+  position: relative;
   @include gl-display-inline-flex;
   @include gl-rounded-full;
   @include gl-border-solid;

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

@@ -65,7 +65,7 @@ body.modal-open {
     min-height: $modal-body-height;
     line-height: $modal-body-line-height;
     @include gl-bg-white;
-    @include gl-relative;
+    position: relative;
     @include gl-p-5;
     @include gl-py-3;
     @include gl-text-left;

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

@@ -34,7 +34,7 @@
   }
 
   .gl-new-dropdown-contents {
-    @include gl-relative;
+    position: relative;
     @include gl-flex-grow-1;
     @include gl-overflow-y-auto;
     @include gl-pl-0;

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

@@ -81,7 +81,7 @@
     @include gl-line-height-normal;
     @include gl-px-3;
     @include gl-py-0;
-    @include gl-relative;
+    position: relative;
     @include gl-rounded-base;
     @include gl-text-decoration-none;
     @include gl-text-gray-900;

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

@@ -2,7 +2,7 @@ $search-icon-size: 12px;
 $clear-button-size: 24px;
 
 .gl-listbox-search {
-  @include gl-relative;
+  position: relative;
 
   .gl-listbox-search-input {
     @include gl-w-full;
@@ -39,14 +39,14 @@ $clear-button-size: 24px;
   }
 
   .gl-listbox-search-icon {
-    @include gl-absolute;
+    position: absolute;
     top: calc(50% - #{$search-icon-size} / 2);
     left: $gl-spacing-scale-4;
     @include gl-text-gray-500;
   }
 
   .gl-listbox-search-clear-button {
-    @include gl-absolute;
+    position: absolute;
     top: calc(50% - #{$clear-button-size} / 2);
     right: $gl-spacing-scale-3;
   }

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

@@ -23,7 +23,7 @@ $path-chevron-right-margin: px-to-rem(14px);
 
 @mixin gl-path-chevron {
   content: '';
-  @include gl-absolute;
+  position: absolute;
   @include gl-reset-bg;
   top: $path-chevron-top;
   right: $path-chevron-right;
@@ -37,13 +37,13 @@ $path-chevron-right-margin: px-to-rem(14px);
 }
 
 .gl-path-nav {
-  @include gl-relative;
+  position: relative;
   @include gl-display-flex;
 
   .gl-path-nav-list {
     @include gl-p-1;
     @include gl-m-0;
-    @include gl-relative;
+    position: relative;
     @include gl-list-style-none;
     @include gl-display-inline-flex;
     @include gl-overflow-hidden;
@@ -65,7 +65,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     @include gl-pl-5;
     @include gl-py-3;
     @include gl-display-flex;
-    @include gl-relative;
+    position: relative;
     @include gl-font-base;
     @include gl-z-index-0;
     @include gl-border-none;
@@ -122,18 +122,18 @@ $path-chevron-right-margin: px-to-rem(14px);
   .gl-path-fade {
     @include gl-w-8;
     @include gl-h-full;
-    @include gl-bottom-0;
-    @include gl-absolute;
+    bottom: 0;
+    position: absolute;
     @include gl-z-index-2;
     @include gl-text-gray-500;
 
     &-left {
-      @include gl-left-0;
+      left: 0;
       @include gl-bg-gradient-blur(left, var(--path-bg-color));
     }
 
     &-right {
-      @include gl-right-0;
+      right: 0;
       @include gl-text-right;
       @include gl-bg-gradient-blur(right, var(--path-bg-color));
     }

package/src/components/base/search_box_by_click/search_box_by_click.scss

@@ -19,9 +19,9 @@
     }
 
     .gl-search-box-by-click-close-history-button {
-      @include gl-absolute;
-      @include gl-top-0;
-      @include gl-right-2;
+      position: absolute;
+      top: 0;
+      right: $gl-spacing-scale-2;
       @include gl-line-height-0;
       @include gl-shadow-none;
       @include gl-w-auto;
@@ -60,9 +60,9 @@
   }
 
   .gl-search-box-by-click-clear-button {
-    @include gl-absolute;
-    @include gl-top-2;
-    @include gl-right-2;
+    position: absolute;
+    top: $gl-spacing-scale-2;
+    right: $gl-spacing-scale-2;
     @include gl-mr-2;
     @include gl-z-index-3;
   }
@@ -79,6 +79,6 @@
   }
   
   .gl-search-box-by-click-clear-button {
-    @include gl-right-7;
+    right: $gl-spacing-scale-7;
   }
 }

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

@@ -4,14 +4,14 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
 .gl-search-box-by-type-search-icon {
   @include gl-text-gray-500;
   @include gl-w-5;
-  @include gl-absolute;
-  @include gl-left-3;
+  position: absolute;
+  left: $gl-spacing-scale-3;
   top: calc(50% - #{$gl-search-box-by-type-search-icon-size} / 2);
 }
 
 .gl-search-box-by-type {
   @include gl-display-flex;
-  @include gl-relative;
+  position: relative;
 }
 
 .gl-search-box-by-type-loading-icon {
@@ -65,7 +65,7 @@ $gl-search-box-by-type-input-padding: 3.5 * $grid-size;
   @include gl-display-flex;
   @include gl-align-items-center;
   @include gl-line-height-0;
-  @include gl-right-2;
-  @include gl-absolute;
+  right: $gl-spacing-scale-2;
+  position: absolute;
   @include gl-h-full;
 }

package/src/components/base/tabs/tabs/tabs.scss

@@ -94,19 +94,19 @@
 
 .gl-tabs-fade {
   @include gl-w-8;
-  @include gl-bottom-0;
-  @include gl-sticky;
+  bottom: 0;
+  position: sticky;
   @include gl-text-gray-500;
   @include gl-p-2;
 }
 
 .gl-tabs-fade-left {
-  @include gl-left-0;
+  left: 0;
   @include gl-bg-gradient-blur(left, $white);
 }
 
 .gl-tabs-fade-right {
-  @include gl-right-0;
+  right: 0;
   @include gl-bg-gradient-blur(right, $white);
 }
 
@@ -120,6 +120,6 @@
 
 .gl-scrollable-tabs-nav {
   @include gl-overflow-hidden;
-  @include gl-relative;
+  position: relative;
   @include gl-flex-nowrap;
 }

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

@@ -5,15 +5,15 @@
 .b-toaster {
   &.b-toaster-bottom-left {
     .b-toaster-slot {
-      @include gl-bottom-6;
-      @include gl-left-6;
-      @include gl-right-auto;
+      bottom: $gl-spacing-scale-6;
+      left: $gl-spacing-scale-6;
+      right: auto;
       @include gl-w-auto;
 
       @include media-breakpoint-down(xs) {
         @include gl-w-full;
-        @include gl-left-0;
-        @include gl-right-0;
+        left: 0;
+        right: 0;
       }
     }
   }

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

@@ -84,7 +84,7 @@
   @include gl-cursor-pointer;
   @include gl-bg-gray-600;
   @include gl-p-1;
-  @include gl-relative;
+  position: relative;
   @include gl-w-9;
   @include gl-h-6;
   @include gl-outline-none;
@@ -119,11 +119,11 @@
   .toggle-icon {
     @include gl-rounded-full;
     @include gl-bg-white;
-    @include gl-absolute;
+    position: absolute;
     @include gl-display-inline-flex;
     @include gl-align-items-center;
-    @include gl-left-1;
-    @include gl-top-1;
+    left: $gl-spacing-scale-1;
+    top: $gl-spacing-scale-1;
     @include gl-transition-medium;
     @include gl-justify-content-center;
     @include gl-p-1;

package/src/components/charts/heatmap/heatmap.scss

@@ -1,5 +1,5 @@
 .gl-heatmap {
-  @include gl-relative;
+  position: relative;
 
   .gl-legend-inline-series {
     @include gl-pointer-events-none;

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

@@ -3,7 +3,7 @@
 $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
 .gl-legend {
-  @include gl-relative;
+  position: relative;
 }
 
 .gl-chart-h-auto {
@@ -18,11 +18,11 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 .gl-chart-h-auto .gl-legend-inline {
   &::after {
     background-image: linear-gradient(to bottom, $transparent-rgba, var(--white, #{$white}));
-    @include gl-bottom-0;
+    bottom: 0;
     content: '';
     @include gl-display-block;
     @include gl-h-4;
-    @include gl-absolute;
+    position: absolute;
     @include gl-w-full;
   }
 }

package/src/components/charts/tooltip/tooltip.scss

@@ -1,5 +1,5 @@
 .gl-chart-tooltip {
-  @include gl-absolute;
+  position: absolute;
 
   > .popover {
     @include gl-min-w-0;

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

@@ -17,11 +17,11 @@
   }
 
   copy-code {
-    @include gl-absolute;
+    position: absolute;
     @include gl-transition-medium;
     @include gl-opacity-0;
-    @include gl-right-4;
-    @include gl-top-3;
+    right: $gl-spacing-scale-4;
+    top: $gl-spacing-scale-3;
   }
 
   .js-markdown-code.markdown-code-block:hover {

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.spec.js

@@ -107,9 +107,21 @@ describe('DuoChatMessage', () => {
       expect(findUserFeedback().exists()).toBe(true);
     });
 
-    it('proxies the emitted event from the User Feedback component', () => {
-      findUserFeedback().vm.$emit('feedback', 'foo');
-      expect(wrapper.emitted('track-feedback')).toEqual([['foo']]);
+    it('proxies and enhances the emitted event from the User Feedback component', () => {
+      findUserFeedback().vm.$emit('feedback', {
+        feedbackChoices: ['incorrect'],
+        extendedTextFeedback: 'exampleText',
+      });
+      expect(wrapper.emitted('track-feedback')).toEqual([
+        [
+          {
+            feedbackChoices: ['incorrect'],
+            extendedTextFeedback: 'exampleText',
+            didWhat: '',
+            improveWhat: '',
+          },
+        ],
+      ]);
     });
   });