npm - @gitlab/ui - Versions diffs - 94.1.0 → 94.1.1 - Mend

@gitlab/ui 94.1.0 → 94.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "94.1.0",
+  "version": "94.1.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

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

@@ -21,7 +21,7 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
 @mixin gl-avatar {
   @apply gl-inline-flex;
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-shrink-0;
   @apply gl-leading-1;
   @include gl-object-fit-contain;
@@ -33,7 +33,7 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
   @apply gl-w-5;
   @apply gl-h-5;
   font-size: map-get($gl-font-sizes, 100);
-  @include gl-rounded-small;
+  @apply gl-rounded-small;
 }
 @mixin gl-avatar-s24 {
@@ -54,21 +54,21 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
   @apply gl-w-9;
   @apply gl-h-9;
   font-size: map-get($gl-font-sizes, 600);
-  @include gl-rounded-lg;
+  @apply gl-rounded-lg;
 }
 @mixin gl-avatar-s64 {
   @apply gl-w-11;
   @apply gl-h-11;
   font-size: map-get($gl-font-sizes, 700);
-  @include gl-rounded-lg;
+  @apply gl-rounded-lg;
 }
 @mixin gl-avatar-s96 {
   @apply gl-w-13;
   @apply gl-h-13;
   font-size: map-get($gl-font-sizes, 800);
-  @include gl-rounded-lg;
+  @apply gl-rounded-lg;
 }
 .gl-avatar {
@@ -208,7 +208,7 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
 }
 .gl-avatar-circle {
-  @include gl-rounded-full;
+  @apply gl-rounded-full;
 }
 .gl-avatar-identicon {

package/src/components/base/avatar_link/avatar_link.scss CHANGED Viewed

@@ -35,7 +35,7 @@
     outline: none !important;
     .gl-avatar {
-      @include gl-focus;
+      @apply gl-focus;
     }
   }
 }

package/src/components/base/avatars_inline/avatars_inline.scss CHANGED Viewed

@@ -51,7 +51,7 @@
   @apply gl-text-sm;
   @apply gl-px-2;
   @apply gl-leading-normal;
-  @include gl-rounded-pill;
+  @apply gl-rounded-pill;
   background-color: var(--gl-status-neutral-background-color);
   color: var(--gl-status-neutral-text-color);
   height: var(--avatar-size);
@@ -59,6 +59,6 @@
   &.lg {
     @apply gl-text-base;
-    @include gl-rounded-6;
+    @apply gl-rounded-6;
   }
 }

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

@@ -63,7 +63,7 @@ $badge-min-width: $gl-spacing-scale-3;
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-focus;
+      @apply gl-focus;
     }
   }
 }

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

@@ -45,7 +45,7 @@ $breadcrumb-max-width: $grid-size * 16;
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-focus;
+      @apply gl-focus;
     }
   }
 }

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

@@ -92,7 +92,7 @@
   }
   .gl-button-text {
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
     @apply gl-whitespace-nowrap;
     // Added to address a FF bug which causes cut off text: https://bugzilla.mozilla.org/show_bug.cgi?id=1406552
@@ -322,7 +322,7 @@
       &:active,
       &:focus,
       &:focus:active {
-        @include gl-focus;
+        @apply gl-focus;
       }
     }
   }
@@ -498,7 +498,7 @@
     &:focus,
     &:focus:active {
       @apply gl-bg-transparent;
-      @include gl-focus;
+      @apply gl-focus;
     }
     &.disabled,

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

@@ -13,7 +13,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
   position: fixed;
   @apply gl-h-full;
   @apply gl-w-full;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   @include gl-shadow-lg;
   @apply gl-text-base;
   @apply gl-leading-normal;

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

@@ -133,7 +133,7 @@
   .gl-dropdown-button-text {
     @include gl-mr-auto;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
   }

package/src/components/base/dropdown/dropdown_divider.scss CHANGED Viewed

@@ -1,5 +1,5 @@
 @mixin gl-tmp-dropdown-divider-style {
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-h-0;
   @apply gl-my-2;
   @apply gl-mx-0;

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

@@ -3,7 +3,7 @@
   @apply gl-flex;
   @apply gl-grow;
   @apply gl-basis-0;
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-items-center;
   @apply gl-py-2;
   @apply gl-pl-4;
@@ -13,17 +13,17 @@
   @apply gl-rounded-base;
   .input-group-prepend + & {
-    @include gl-rounded-left-none;
+    @apply gl-rounded-l-none;
   }
 }
 .gl-filtered-search-scrollable-container-with-search-button {
-  @include gl-rounded-right-none;
+  @apply gl-rounded-r-none;
 }
 .gl-filtered-search-scrollable {
   @apply gl-flex;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   @apply gl-w-full;
 }

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

@@ -6,13 +6,13 @@
   width: $gl-dropdown-width;
   @apply gl-p-2;
   @apply gl-border-gray-200;
-  @include gl-rounded-lg;
+  @apply gl-rounded-lg;
   @include gl-shadow-md;
 }
 .gl-filtered-search-suggestion-list {
   position: absolute;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   max-height: $gl-max-dropdown-max-height;
   .gl-filtered-search-suggestion,

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

@@ -33,7 +33,7 @@
     &:active,
     &:focus,
     &:focus:active {
-      @include gl-focus;
+      @apply gl-focus;
     }
   }
@@ -76,7 +76,7 @@
     }
     .custom-control-input:not(:disabled):focus ~ .custom-control-label::before {
-      @include gl-focus;
+      @apply gl-focus;
       border-color: var(--gl-control-border-color-focus);
     }

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

@@ -1,6 +1,6 @@
 .gl-infinite-scroll-container {
-  @include gl-overflow-x-hidden;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-x-hidden;
+  @apply gl-overflow-y-auto;
   @apply gl-text-base;
 }

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

@@ -6,9 +6,9 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
 .gl-label {
   @apply gl-items-center;
   background-color: var(--gl-background-color-default);
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-inline-flex;
-  @include gl-rounded-pill;
+  @apply gl-rounded-pill;
   position: relative;
   @include gl-max-w-full;
   @apply gl-text-sm;
@@ -30,7 +30,7 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
   .gl-label-link {
     @apply gl-flex;
     @apply gl-font-normal;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-inherit;
     @include gl-max-w-full;
@@ -71,12 +71,12 @@ $label-padding-horizontal-half: 0.375 * $grid-size;
     margin-left: -$label-padding-horizontal-half;
     margin-right: $label-padding-horizontal-half;
     @apply gl-p-0;
-    @include gl-rounded-full;
+    @apply gl-rounded-full;
     @include gl-shadow-none;
     &:focus,
     &:active {
-      @include gl-focus;
+      @apply gl-focus;
     }
     .gl-icon {

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

@@ -36,7 +36,7 @@ $gl-loader-dots-size-xl: 1rem;
 .gl-spinner {
   position: relative;
   @apply gl-inline-flex;
-  @include gl-rounded-full;
+  @apply gl-rounded-full;
   @apply gl-border-solid;
   @include gl-mx-auto;
   @apply gl-my-0;

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

@@ -108,7 +108,7 @@
     @apply gl-px-4;
     @include gl-inset-border-1-gray-100;
     @apply gl-my-7;
-    @include gl-overflow-auto;
+    @apply gl-overflow-auto;
     code {
       @apply gl-bg-white;

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

@@ -140,7 +140,7 @@
   code {
     @apply gl-bg-white;
-    @include gl-rounded-none;
+    @apply gl-rounded-none;
     @apply gl-text-gray-900;
     @include gl-px-0;
     @include gl-py-0;

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

@@ -9,7 +9,7 @@ $modal-box-shadow: 0 4px 16px $t-gray-a-24;
 }
 body.modal-open {
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
 }
 .gl-modal {

package/src/components/base/nav/nav.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 .nav {
   &-link {
     &:focus-visible {
-      @include gl-focus;
+      @apply gl-focus;
     }
   }
 }

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

@@ -7,7 +7,7 @@
       @include gl-cursor-pointer;
       &:focus {
-        @include gl-focus;
+        @apply gl-focus;
       }
     }
   }
@@ -16,7 +16,7 @@
     @apply gl-hidden;
     @apply gl-bg-white;
     @apply gl-border-1 gl-border-solid gl-border-gray-200;
-    @include gl-rounded-lg;
+    @apply gl-rounded-lg;
     @include gl-shadow-md;
     top: 0;
     left: 0;
@@ -34,14 +34,14 @@
   .gl-new-dropdown-contents {
     position: relative;
     @apply gl-grow;
-    @include gl-overflow-y-auto;
+    @apply gl-overflow-y-auto;
     @apply gl-pl-0;
     @apply gl-mb-0;
     @apply gl-py-2;
     @apply gl-list-none;
     &:focus-visible {
-      @include gl-focus;
+      @apply gl-focus;
     }
     ul {
@@ -72,7 +72,7 @@
   .gl-new-dropdown-button-text {
     @include gl-mr-auto;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
   }

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

@@ -35,7 +35,7 @@ $path-chevron-right-margin: px-to-rem(14px);
     @apply gl-m-0;
     @apply gl-list-none;
     @apply gl-inline-flex;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     margin-left: -1px;
     position: relative;
   }

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

@@ -77,7 +77,7 @@
     }
     &:focus-within {
-      @include gl-focus;
+      @apply gl-focus;
     }
     &.disabled,

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

@@ -39,7 +39,7 @@ table.gl-table {
     }
     &:focus-visible {
-      @include gl-focus;
+      @apply gl-focus;
       position: relative;
       z-index: 1;
     }

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

@@ -158,7 +158,7 @@
 }
 .gl-scrollable-tabs-nav {
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   position: relative;
   @include gl-flex-nowrap;
 }

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

@@ -92,7 +92,7 @@ $toggle-height: 2.5 * $grid-size;
   height: $toggle-height;
   @include gl-outline-none;
   user-select: none;
-  @include gl-rounded-pill;
+  @apply gl-rounded-pill;
   @include gl-transition-slow;
   @apply gl-leading-normal;
@@ -112,7 +112,7 @@ $toggle-height: 2.5 * $grid-size;
   &:active,
   &:focus,
   &:focus:active {
-    @include gl-focus;
+    @apply gl-focus;
   }
   .toggle-loading {
@@ -120,7 +120,7 @@ $toggle-height: 2.5 * $grid-size;
   }
   .toggle-icon {
-    @include gl-rounded-full;
+    @apply gl-rounded-full;
     @apply gl-bg-white;
     position: absolute;
     @apply gl-inline-flex;

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

@@ -1,7 +1,7 @@
 .gl-token {
   @apply gl-text-gray-900;
   @apply gl-bg-gray-100;
-  @include gl-rounded-small;
+  @apply gl-rounded-small;
   @apply gl-pl-3;
   @apply gl-inline-flex;
   @apply gl-flex-col;

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

@@ -10,7 +10,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   .gl-legend-inline {
       // match the height of gl-legend-tabular (header + body)
       max-height: $gl-line-height-24 + $legend-body-h;
-      @include gl-overflow-auto;
+      @apply gl-overflow-auto;
   }
 }
@@ -59,7 +59,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   .gl-legend-tabular-header-cell,
   .gl-legend-tabular-details-cell {
     @apply gl-whitespace-nowrap;
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-text-ellipsis;
     @apply gl-text-right;
     @apply gl-w-1/8;
@@ -73,7 +73,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   .gl-legend-tabular-body {
     height: $legend-body-h;
-    @include gl-overflow-y-auto;
+    @apply gl-overflow-y-auto;
   }
   .gl-legend-tabular-row {
@@ -91,7 +91,7 @@ $legend-body-h: $gl-spacing-scale-13 - $gl-spacing-scale-4;
   }
   .gl-legend-tabular-title-cell {
-    @include gl-overflow-hidden;
+    @apply gl-overflow-hidden;
     @apply gl-w-1/2;
   }
 }

package/src/components/charts/series_label/series_label.scss CHANGED Viewed

@@ -1,7 +1,7 @@
 .gl-series-label-container {
   @apply gl-flex;
   @apply gl-text-base;
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-break-words;
 }
@@ -18,6 +18,6 @@
   // In case there are no spaces in the series label -
   // as there are quite a few possible cases where
   // Prometheus queries return long labels with no spaces.
-  @include gl-overflow-hidden;
+  @apply gl-overflow-hidden;
   @apply gl-break-words;
 }

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

@@ -41,7 +41,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   position: fixed;
   @apply gl-h-full;
   @apply gl-w-full;
-  @include gl-overflow-y-auto;
+  @apply gl-overflow-y-auto;
   @include gl-shadow-lg;
   @apply gl-text-base;
   @apply gl-leading-normal;

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

@@ -5,6 +5,6 @@
   @apply gl-text-gray-500;
   &:focus {
-    @include gl-focus;
+    @apply gl-focus;
   }
 }

package/tailwind.defaults.js CHANGED Viewed

@@ -356,7 +356,8 @@ function addCustomDefinitions({ addComponents, addUtilities }) {
       },
     },
     '.focus': {
-      'box-shadow': '0 0 0 1px var(--white, #fff), 0 0 0 3px var(--blue-400, #428fdc)',
+      'box-shadow':
+        '0 0 0 1px var(--gl-focus-ring-inner-color), 0 0 0 3px var(--gl-focus-ring-outer-color)',
       outline: 'none',
     },
     '.text-align-inherit': {