@gitlab/ui 128.13.1 → 128.13.3

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

@@ -80,7 +80,7 @@
       border-color: var(--gl-control-border-color-focus);
     }
 
-    .custom-control-input:checked  ~ .custom-control-label::before {
+    .custom-control-input:checked ~ .custom-control-label::before {
       background-color: var(--gl-control-background-color-selected-default);
       border-color: var(--gl-control-border-color-selected-default);
 
@@ -90,9 +90,9 @@
       }
     }
 
-    .custom-control-input[type='checkbox']:checked ~ .custom-control-label,
-    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label,
-    .custom-control-input[type='radio']:checked ~ .custom-control-label {
+    .custom-control-input[type="checkbox"]:checked ~ .custom-control-label,
+    .custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-label,
+    .custom-control-input[type="radio"]:checked ~ .custom-control-label {
       &::after {
         background: 50% 50% no-repeat;
         background-color: var(--gl-control-indicator-color-selected);
@@ -101,24 +101,24 @@
       }
     }
 
-    .custom-control-input[type='checkbox']:checked ~ .custom-control-label::after {
+    .custom-control-input[type="checkbox"]:checked ~ .custom-control-label::after {
       background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-check}');
+      mask-image: url("#{$gl-icon-check}");
     }
 
-    .custom-control-input[type='checkbox']:indeterminate ~ .custom-control-label::after {
+    .custom-control-input[type="checkbox"]:indeterminate ~ .custom-control-label::after {
       background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-indeterminate}');
+      mask-image: url("#{$gl-icon-indeterminate}");
     }
 
-    .custom-control-input[type='radio']:checked ~ .custom-control-label::after {
+    .custom-control-input[type="radio"]:checked ~ .custom-control-label::after {
       background-color: var(--gl-control-indicator-color-selected);
-      mask-image: url('#{$gl-icon-radio}');
+      mask-image: url("#{$gl-icon-radio}");
     }
 
     .custom-control-input:not(:disabled):checked ~ .custom-control-label:hover,
     .custom-control-input:not(:disabled):hover:checked ~ .custom-control-label {
-      &::before  {
+      &::before {
         background-color: var(--gl-control-background-color-selected-hover);
         border-color: var(--gl-control-border-color-selected-hover);
       }
@@ -185,7 +185,7 @@
     }
 
     .custom-control-input:checked:disabled ~ .custom-control-label,
-    .custom-control-input[type='checkbox']:indeterminate:disabled ~ .custom-control-label {
+    .custom-control-input[type="checkbox"]:indeterminate:disabled ~ .custom-control-label {
       &::before {
         background-color: var(--gl-control-background-color-disabled);
         border-color: var(--gl-control-border-color-disabled);

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/base/toggle/toggle.vue

@@ -95,7 +95,7 @@ export default {
     },
     shouldRenderHelp() {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Boolean(this.$slots.help || this.help);
+      return Boolean(this.$slots.help || this.help) && this.isVerticalLayout;
     },
     toggleClasses() {
       return [
@@ -139,56 +139,55 @@ export default {
 </script>
 
 <template>
-  <div class="gl-toggle-wrapper gl-flex gl-flex-col">
-    <div
-      class="gl-flex"
-      data-testid="toggle-wrapper"
+  <div
+    class="gl-toggle-wrapper gl-mb-0 gl-flex"
+    :class="{
+      'gl-flex-col': isVerticalLayout,
+      'gl-toggle-label-inline': !isVerticalLayout,
+      'is-disabled': disabled,
+    }"
+    data-testid="toggle-wrapper"
+  >
+    <span
+      :id="labelId"
+      :class="toggleClasses"
+      class="gl-toggle-label gl-shrink-0"
+      data-testid="toggle-label"
+    >
+      <!-- @slot The toggle's label. -->
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span
+      v-if="shouldRenderDescription"
+      class="gl-description-label gl-mb-3"
+      data-testid="toggle-description"
+    >
+      <!-- @slot A description text to be shown below the label. Unavailable when the label is positioned on the left. -->
+      <slot name="description">{{ description }}</slot>
+    </span>
+    <input v-if="name" :name="name" :value="value" type="hidden" />
+    <button
+      role="switch"
+      :aria-checked="isChecked"
+      :aria-labelledby="labelId"
+      :aria-describedby="helpId"
+      :aria-disabled="disabled"
       :class="{
-        'gl-flex-col': isVerticalLayout,
-        'gl-toggle-label-inline': !isVerticalLayout,
+        'is-checked': value,
+        'is-disabled': disabled || isLoading,
       }"
+      class="gl-toggle gl-shrink-0"
+      type="button"
+      :disabled="disabled"
+      @click.prevent="toggleFeature"
     >
-      <span
-        :id="labelId"
-        :class="toggleClasses"
-        class="gl-toggle-label gl-shrink-0"
-        data-testid="toggle-label"
-      >
-        <!-- @slot The toggle's label. -->
-        <slot name="label">{{ label }}</slot>
-      </span>
-      <span
-        v-if="shouldRenderDescription"
-        class="gl-description-label gl-mb-3"
-        data-testid="toggle-description"
-      >
-        <!-- @slot A description text to be shown below the label. Unavailable when the label is positioned on the left. -->
-        <slot name="description">{{ description }}</slot>
+      <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />
+      <span v-else class="toggle-icon">
+        <gl-icon :name="icon" :size="12" />
       </span>
-      <input v-if="name" :name="name" :value="value" type="hidden" />
-      <button
-        role="switch"
-        :aria-checked="isChecked"
-        :aria-labelledby="labelId"
-        :aria-describedby="helpId"
-        :aria-disabled="disabled"
-        :class="{
-          'is-checked': value,
-          'is-disabled': disabled || isLoading,
-        }"
-        class="gl-toggle gl-shrink-0"
-        type="button"
-        :disabled="disabled"
-        @click.prevent="toggleFeature"
-      >
-        <gl-loading-icon v-if="isLoading" color="dark" class="toggle-loading" />
-        <span v-else class="toggle-icon">
-          <gl-icon :name="icon" :size="12" />
-        </span>
-      </button>
-    </div>
+    </button>
     <span v-if="shouldRenderHelp" :id="helpId" class="gl-help-label" data-testid="toggle-help">
-      <!-- @slot A help text to be shown below the toggle. -->
+      <!-- @slot A help text to be shown below the toggle. Unavailable when the label is positioned on the left. -->
       <slot name="help">{{ help }}</slot>
     </span>
   </div>

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 {