@gitlab/ui 128.13.2 → 128.13.3

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

@@ -34,8 +34,9 @@
 
       // Target the actual Bootstrap dropdown item element
       .dropdown-item {
-        transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
-                    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+        transition:
+          background-color $gl-transition-duration-fast $gl-easing-out-cubic,
+          box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
         @apply gl-rounded-default;
         @apply gl-border-0;
         @apply gl-w-full;

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

@@ -22,7 +22,9 @@
     box-shadow: inset 0 0 0 $gl-border-size-1 var(--gl-control-border-color-hover);
   }
 
-  &:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not([type='color']):read-only {
+  &:not(.gl-form-input-not-readonly):not(:disabled):not(.form-control-plaintext):not(
+      [type="color"]
+    ):read-only {
     background: var(--gl-control-background-color-readonly);
     box-shadow: none;
   }

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

@@ -72,7 +72,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   &::after {
     content: "";
     background-color: var(--gl-icon-color-default);
-    mask-image: url('#{$gl-icon-select-chevron-down}');
+    mask-image: url("#{$gl-icon-select-chevron-down}");
     mask-repeat: no-repeat;
     mask-position: center center;
     pointer-events: none;
@@ -88,7 +88,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
     }
   }
 
-  &:has(>.gl-form-select:disabled) {
+  &:has(> .gl-form-select:disabled) {
     &::after {
       background-color: var(--gl-icon-color-disabled);
 

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

@@ -1,5 +1,5 @@
 $label-max-width: 100%;
-$label-close-button: '.gl-label-close.gl-button';
+$label-close-button: ".gl-label-close.gl-button";
 $label-padding-horizontal: 0.75 * $grid-size;
 $label-padding-horizontal-half: 0.375 * $grid-size;
 
@@ -24,7 +24,10 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   }
 
   &:has(*:first-child:focus) {
-    @include gl-focus($color: var(--label-background-color, var(--gl-background-color-default)), $important: true);
+    @include gl-focus(
+      $color: var(--label-background-color, var(--gl-background-color-default)),
+      $important: true
+    );
   }
 
   .gl-label-link {

package/src/components/base/link/link.scss

@@ -29,7 +29,7 @@
 }
 
 .gl-link-external::after {
-  content: ' ↗';
+  content: " ↗";
   font-size: 1em;
 }
 

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

@@ -82,7 +82,7 @@ $gl-loader-dots-size-xl: 1rem;
   &::before,
   > span,
   &::after {
-    content: '';
+    content: "";
 
     display: inline-block;
     border-radius: 100%;

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

@@ -134,7 +134,7 @@
         @apply gl-mr-2;
         text-rendering: auto;
         -webkit-font-smoothing: antialiased;
-        content: '📎';
+        content: "📎";
       }
     }
   }

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

@@ -184,12 +184,20 @@
         &.top-scrim-light {
           height: 2.25rem;
           border-radius: 0.375rem 0.375rem 0 0;
-          background: linear-gradient(180deg, var(--gl-dropdown-background-color) 0%, var(--gl-color-alpha-0));
+          background: linear-gradient(
+            180deg,
+            var(--gl-dropdown-background-color) 0%,
+            var(--gl-color-alpha-0)
+          );
         }
 
         &.top-scrim-dark {
           height: 0.25rem;
-          background: linear-gradient(180deg, var(--gl-shadow-color-default) 0%, var(--gl-color-alpha-0) 100%);
+          background: linear-gradient(
+            180deg,
+            var(--gl-shadow-color-default) 0%,
+            var(--gl-color-alpha-0) 100%
+          );
         }
       }
     }
@@ -203,7 +211,11 @@
         position: relative;
         top: calc(-2.25rem + #{$dropdown-content-padding});
         border-radius: 0 0 0.375rem 0.375rem;
-        background: linear-gradient(180deg, var(--gl-color-alpha-0) 0%, var(--gl-dropdown-background-color));
+        background: linear-gradient(
+          180deg,
+          var(--gl-color-alpha-0) 0%,
+          var(--gl-dropdown-background-color)
+        );
       }
     }
 

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

@@ -101,8 +101,9 @@
   }
 
   .gl-new-dropdown-item-content {
-    transition: background-color $gl-transition-duration-fast $gl-easing-out-cubic,
-                box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+    transition:
+      background-color $gl-transition-duration-fast $gl-easing-out-cubic,
+      box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
     @apply gl-rounded-default;
     @apply gl-border-0;
     @apply gl-w-full;

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

@@ -16,10 +16,11 @@
 
 .gl-pagination-item {
   border-radius: var(--gl-action-border-radius);
-  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
-              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
-              border-color $gl-transition-duration-medium $gl-easing-out-cubic,
-              box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+  transition:
+    color $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
   @apply gl-flex;
   @apply gl-justify-center;
   @apply gl-p-3;

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

@@ -12,7 +12,7 @@ $path-chevron-right-margin: px-to-rem(14px);
 // Mixins
 @mixin gl-path-chevron {
   @apply gl-bg-inherit;
-  content: '';
+  content: "";
   position: absolute;
   top: $path-chevron-top;
   right: $path-chevron-right;
@@ -79,7 +79,9 @@ $path-chevron-right-margin: px-to-rem(14px);
       display: none;
       z-index: 2;
       right: calc(-0.75rem + 1px);
-      box-shadow: 0 0 0 1px var(--gl-focus-ring-inner-color), 0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color);
+      box-shadow:
+        0 0 0 1px var(--gl-focus-ring-inner-color),
+        0.5px -0.5px 0 2.5px var(--gl-focus-ring-outer-color);
       clip-path: polygon(0% 0%, 0% -30%, 160% 0%, 75% 130%, 100% 100%);
       transform: rotate(45deg) skew(14deg, 14deg) scale(0.99);
     }
@@ -103,7 +105,10 @@ $path-chevron-right-margin: px-to-rem(14px);
     &:focus,
     &:focus:active {
       // Custom focus to account for path shape
-      box-shadow: 5px -3px 0 -2px var(--gl-focus-ring-inner-color), 5px 3px 0 -2px var(--gl-focus-ring-inner-color), 0 0 0 1px var(--gl-focus-ring-inner-color),
+      box-shadow:
+        5px -3px 0 -2px var(--gl-focus-ring-inner-color),
+        5px 3px 0 -2px var(--gl-focus-ring-inner-color),
+        0 0 0 1px var(--gl-focus-ring-inner-color),
         0 0 0 3px var(--gl-focus-ring-outer-color);
       outline: none;
       border-top-right-radius: 1px;

package/src/components/base/progress_bar/progress_bar.scss

@@ -1,7 +1,7 @@
 .gl-progress-bar {
   background-color: var(--gl-progress-bar-track-color);
 }
-  
+
 .gl-progress {
   @apply gl-flex-col;
   @apply gl-justify-center;
@@ -27,4 +27,4 @@
 
 .gl-progress-bar-danger {
   background-color: var(--gl-progress-bar-indicator-color-danger);
-}
+}

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

@@ -24,7 +24,7 @@ table.gl-table {
   }
 
   thead tr th {
-    @apply gl-text-heading gl-font-bold;
+    @apply gl-font-bold gl-text-heading;
 
     .gl-table-th-sort-icon-wrapper {
       @apply gl-ml-2;
@@ -38,7 +38,7 @@ table.gl-table {
       }
     }
 
-    [name='sort-icon'] {
+    [name="sort-icon"] {
       user-select: none;
       color: var(--gl-table-sorting-icon-color);
     }
@@ -68,7 +68,7 @@ table.gl-table {
   @mixin gl-tmp-stacked-override {
     tbody > tr {
       &::after {
-        content: '';
+        content: "";
         @apply gl-h-6;
         @apply gl-w-full;
         @apply gl-block;
@@ -123,7 +123,7 @@ table.gl-table {
   thead th:hover {
     background-color: transparent !important;
 
-    [name='sort-icon'] {
+    [name="sort-icon"] {
       display: flex !important;
     }
   }

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

@@ -1,5 +1,5 @@
 .gl-tabs-wrapper {
-  @apply gl-relative gl-flex gl-flex-wrap gl-border-b;
+  @apply gl-border-b gl-relative gl-flex gl-flex-wrap;
 }
 
 .gl-tabs-nav {
@@ -23,7 +23,7 @@
     border-radius $gl-transition-duration-fast $gl-easing-out-cubic;
 
   &::before {
-    content: '';
+    content: "";
     position: absolute;
     border-bottom: $gl-border-size-2 solid transparent;
     translate: 0 $gl-border-size-2;
@@ -37,8 +37,9 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    &, &::before {
-      transition-duration: .01ms;
+    &,
+    &::before {
+      transition-duration: 0.01ms;
     }
   }
 
@@ -140,7 +141,7 @@
 }
 
 .gl-tabs-fade {
-  @apply gl-absolute gl-top-0 gl-bottom-0 gl-z-2;
+  @apply gl-absolute gl-bottom-0 gl-top-0 gl-z-2;
   @apply gl-w-8;
   @apply gl-p-2;
   @apply gl-flex;
@@ -152,7 +153,7 @@
 }
 
 .gl-tabs-fade-right {
-  @apply gl-justify-end gl-right-0;
+  @apply gl-right-0 gl-justify-end;
   @include gl-bg-gradient-blur(right, var(--gl-background-color-default));
 }
 

package/src/components/base/toast/toast.js

@@ -14,35 +14,37 @@ const DEFAULT_OPTIONS = {
 
 let toastsCount = 0;
 
-function renderTitle(h, toast, options) {
-  const nodes = [
-    h(CloseButton, {
-      class: ['gl-toast-close-button'],
-      on: {
-        click: toast.hide,
-      },
-    }),
-  ];
-  if (options.action) {
-    const { onClick, text, href } = options.action;
-    nodes.unshift(
-      h(
-        'a',
-        {
-          attrs: {
-            role: href ? undefined : 'button',
-            href,
-          },
-          class: ['gl-toast-action'],
-          on: {
-            click: (e) => onClick(e, toast),
-          },
+function renderTitle(toast, options) {
+  return (h) => {
+    const nodes = [
+      h(CloseButton, {
+        class: ['gl-toast-close-button'],
+        on: {
+          click: toast.hide,
         },
-        text,
-      ),
-    );
-  }
-  return nodes;
+      }),
+    ];
+    if (options.action) {
+      const { onClick, text, href } = options.action;
+      nodes.unshift(
+        h(
+          'a',
+          {
+            attrs: {
+              role: href ? undefined : 'button',
+              href,
+            },
+            class: ['gl-toast-action'],
+            on: {
+              click: (e) => onClick(e, toast),
+            },
+          },
+          text,
+        ),
+      );
+    }
+    return nodes;
+  };
 }
 
 function showToast(message, options = {}) {
@@ -73,7 +75,7 @@ function showToast(message, options = {}) {
     ...DEFAULT_OPTIONS,
     ...updatedAutoHideDelay,
     id,
-    title: renderTitle(this.$createElement, toast, options),
+    title: renderTitle(toast, options),
   });
   return toast;
 }

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

@@ -17,7 +17,7 @@
       // Fallback for Firefox
       // Fixes a bug where the view transition
       // doesn’t work properly
-      @supports (-moz-appearance:none) {
+      @supports (-moz-appearance: none) {
         view-transition-name: unset;
       }
 
@@ -33,7 +33,7 @@
     // Fallback for Firefox
     // Fixes a bug where the view transition
     // doesn’t work properly
-    @supports (-moz-appearance:none) {
+    @supports (-moz-appearance: none) {
       transition: all $gl-transition-duration-medium $gl-easing-out-cubic;
     }
   }

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

@@ -8,18 +8,22 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 
 .gl-chart-h-auto {
   .gl-legend-inline {
-      // match the height of gl-legend-tabular (header + body)
-      max-height: $gl-line-height-24 + $legend-body-h;
-      @apply gl-overflow-auto;
+    // match the height of gl-legend-tabular (header + body)
+    max-height: $gl-line-height-24 + $legend-body-h;
+    @apply gl-overflow-auto;
   }
 }
 
 .gl-legend-tabular.gl-legend-b-fade,
 .gl-chart-h-auto .gl-legend-inline.gl-legend-b-fade {
   &::after {
-    background-image: linear-gradient(to bottom, $transparent-rgba, var(--gl-background-color-default));
+    background-image: linear-gradient(
+      to bottom,
+      $transparent-rgba,
+      var(--gl-background-color-default)
+    );
     bottom: 0;
-    content: '';
+    content: "";
     @apply gl-block;
     @apply gl-h-4;
     position: absolute;
@@ -28,9 +32,9 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
 }
 
 .gl-legend-inline {
-    @apply gl-flex;
-    @apply gl-flex-wrap;
-    @apply gl-shrink-0;
+  @apply gl-flex;
+  @apply gl-flex-wrap;
+  @apply gl-shrink-0;
 
   .gl-legend-inline-series {
     @apply gl-flex;

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

@@ -1,9 +1,9 @@
-@use 'sass:map';
+@use "sass:map";
 
 .gl-single-stat {
   @apply gl-leading-1;
 
-  &:hover[tabindex='0'] {
+  &:hover[tabindex="0"] {
     @apply gl-bg-strong;
     @apply gl-rounded-default;
   }

package/src/components/dashboards/dashboard_layout/grid_layout/grid_layout.scss

@@ -1 +1 @@
-@import 'gridstack/dist/gridstack';
+@import "gridstack/dist/gridstack";

package/src/components/regions/empty_state/empty_state.scss

@@ -1,3 +1,3 @@
 .gl-empty-state-content {
-    max-width: 65ch;
+  max-width: 65ch;
 }

package/src/components/utilities/truncate/truncate.scss

@@ -13,7 +13,7 @@
 .gl-truncate-start {
   direction: rtl;
   text-align: left;
-  text-overflow: '';
+  text-overflow: "";
 }
 
 .gl-truncate-end {

package/src/scss/bootstrap.scss

@@ -1,34 +1,34 @@
-@import 'variables';
-@import '../vendor/bootstrap/scss/functions';
-@import '../vendor/bootstrap/scss/variables';
-@import '../vendor/bootstrap/scss/mixins';
-@import '../vendor/bootstrap/scss/root';
-@import '../vendor/bootstrap/scss/reboot';
-@import '../vendor/bootstrap/scss/type';
-@import '../vendor/bootstrap/scss/images';
-@import '../vendor/bootstrap/scss/code';
-@import '../vendor/bootstrap/scss/grid';
-@import '../vendor/bootstrap/scss/tables';
-@import '../vendor/bootstrap/scss/forms';
-@import '../vendor/bootstrap/scss/buttons';
-@import '../vendor/bootstrap/scss/transitions';
-@import '../vendor/bootstrap/scss/dropdown';
-@import '../vendor/bootstrap/scss/button-group';
-@import '../vendor/bootstrap/scss/input-group';
-@import '../vendor/bootstrap/scss/custom-forms';
-@import '../vendor/bootstrap/scss/nav';
-@import '../vendor/bootstrap/scss/navbar';
-@import '../vendor/bootstrap/scss/card';
-@import '../vendor/bootstrap/scss/breadcrumb';
-@import '../vendor/bootstrap/scss/pagination';
-@import '../vendor/bootstrap/scss/badge';
-@import '../vendor/bootstrap/scss/alert';
-@import '../vendor/bootstrap/scss/progress';
-@import '../vendor/bootstrap/scss/media';
-@import '../vendor/bootstrap/scss/list-group';
-@import '../vendor/bootstrap/scss/close';
-@import '../vendor/bootstrap/scss/modal';
-@import '../vendor/bootstrap/scss/tooltip';
-@import '../vendor/bootstrap/scss/popover';
-@import '../vendor/bootstrap/scss/utilities';
-@import '../vendor/bootstrap/scss/print';
+@import "variables";
+@import "../vendor/bootstrap/scss/functions";
+@import "../vendor/bootstrap/scss/variables";
+@import "../vendor/bootstrap/scss/mixins";
+@import "../vendor/bootstrap/scss/root";
+@import "../vendor/bootstrap/scss/reboot";
+@import "../vendor/bootstrap/scss/type";
+@import "../vendor/bootstrap/scss/images";
+@import "../vendor/bootstrap/scss/code";
+@import "../vendor/bootstrap/scss/grid";
+@import "../vendor/bootstrap/scss/tables";
+@import "../vendor/bootstrap/scss/forms";
+@import "../vendor/bootstrap/scss/buttons";
+@import "../vendor/bootstrap/scss/transitions";
+@import "../vendor/bootstrap/scss/dropdown";
+@import "../vendor/bootstrap/scss/button-group";
+@import "../vendor/bootstrap/scss/input-group";
+@import "../vendor/bootstrap/scss/custom-forms";
+@import "../vendor/bootstrap/scss/nav";
+@import "../vendor/bootstrap/scss/navbar";
+@import "../vendor/bootstrap/scss/card";
+@import "../vendor/bootstrap/scss/breadcrumb";
+@import "../vendor/bootstrap/scss/pagination";
+@import "../vendor/bootstrap/scss/badge";
+@import "../vendor/bootstrap/scss/alert";
+@import "../vendor/bootstrap/scss/progress";
+@import "../vendor/bootstrap/scss/media";
+@import "../vendor/bootstrap/scss/list-group";
+@import "../vendor/bootstrap/scss/close";
+@import "../vendor/bootstrap/scss/modal";
+@import "../vendor/bootstrap/scss/tooltip";
+@import "../vendor/bootstrap/scss/popover";
+@import "../vendor/bootstrap/scss/utilities";
+@import "../vendor/bootstrap/scss/print";

package/src/scss/bootstrap_vue.scss

@@ -1,16 +1,16 @@
 // stylelint-disable scss/at-import-partial-extension-blacklist
-@import '../vendor/bootstrap-vue/src/variables.scss';
+@import "../vendor/bootstrap-vue/src/variables.scss";
 // Disabe Tooltip and Popover colored variants which we do not use / support.
 $bv-enable-tooltip-variants: false;
 $bv-enable-popover-variants: false;
 
-@import '../vendor/bootstrap-vue/src/utilities.scss';
+@import "../vendor/bootstrap-vue/src/utilities.scss";
 
-@import '../vendor/bootstrap-vue/src/components/dropdown/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-input/index.scss';
-@import '../vendor/bootstrap-vue/src/components/form-radio/index.scss';
-@import '../vendor/bootstrap-vue/src/components/modal/index.scss';
-@import '../vendor/bootstrap-vue/src/components/popover/index.scss';
-@import '../vendor/bootstrap-vue/src/components/table/index.scss';
-@import '../vendor/bootstrap-vue/src/components/toast/index.scss';
-@import '../vendor/bootstrap-vue/src/components/tooltip/index.scss';
+@import "../vendor/bootstrap-vue/src/components/dropdown/index.scss";
+@import "../vendor/bootstrap-vue/src/components/form-input/index.scss";
+@import "../vendor/bootstrap-vue/src/components/form-radio/index.scss";
+@import "../vendor/bootstrap-vue/src/components/modal/index.scss";
+@import "../vendor/bootstrap-vue/src/components/popover/index.scss";
+@import "../vendor/bootstrap-vue/src/components/table/index.scss";
+@import "../vendor/bootstrap-vue/src/components/toast/index.scss";
+@import "../vendor/bootstrap-vue/src/components/tooltip/index.scss";