@gitlab/ui 122.3.0 → 122.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "122.3.0",
+  "version": "122.4.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -96,7 +96,7 @@
     "rollup-plugin-vue/@vue/component-compiler/postcss-modules-sync/generic-names/loader-utils": "3.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/preset-env": "^7.28.3",
@@ -122,9 +122,9 @@
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@vue/compat": "^3.5.20",
-    "@vue/compiler-sfc": "^3.5.20",
-    "@vue/server-renderer": "^3.5.20",
+    "@vue/compat": "^3.5.21",
+    "@vue/compiler-sfc": "^3.5.21",
+    "@vue/server-renderer": "^3.5.21",
     "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.2.6",
@@ -136,7 +136,7 @@
     "axe-playwright": "^2.1.0",
     "babel-loader": "^9.2.1",
     "cypress": "14.5.4",
-    "cypress-real-events": "^1.14.0",
+    "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.5.0",
     "esbuild": "^0.25.9",
@@ -165,7 +165,7 @@
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-svg": "^2.0.0",
     "rollup-plugin-vue": "^5.1.9",
-    "sass": "^1.92.0",
+    "sass": "^1.92.1",
     "sass-loader": "^10.5.2",
     "sass-true": "^9",
     "start-server-and-test": "^2.1.0",

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

@@ -101,7 +101,7 @@ $gl-alert-top-border-size: 2px;
 .gl-alert-actions {
   @apply gl-flex gl-flex-col gl-flex-wrap gl-gap-y-3;
   @apply gl-mt-3;
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @apply gl-flex-row;
   }
 }
@@ -110,7 +110,7 @@ $gl-alert-top-border-size: 2px;
   @apply gl-mr-0 gl-w-full;
   @apply gl-text-base;
   @apply gl-leading-normal;
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @apply gl-mr-3 gl-w-auto;
   }
 }

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

@@ -103,109 +103,109 @@ $gl-avatar-identicon-texts: var(--gl-avatar-fallback-text-color-red),
 }
 
 .gl-sm-avatar-s16 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s16;
   }
 }
 
 .gl-md-avatar-s16 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s16;
   }
 }
 
 .gl-lg-avatar-s16 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s16;
   }
 }
 
 .gl-sm-avatar-s24 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s24;
   }
 }
 
 .gl-md-avatar-s24 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s24;
   }
 }
 
 .gl-lg-avatar-s24 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s24;
   }
 }
 
 .gl-sm-avatar-s32 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s32;
   }
 }
 
 .gl-md-avatar-s32 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s32;
   }
 }
 
 .gl-lg-avatar-s32 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s32;
   }
 }
 
 .gl-sm-avatar-s48 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s48;
   }
 }
 
 .gl-md-avatar-s48 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s48;
   }
 }
 
 .gl-lg-avatar-s48 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s48;
   }
 }
 
 .gl-sm-avatar-s64 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s64;
   }
 }
 
 .gl-md-avatar-s64 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s64;
   }
 }
 
 .gl-lg-avatar-s64 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s64;
   }
 }
 
 .gl-sm-avatar-s96 {
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     @include gl-avatar-s96;
   }
 }
 
 .gl-md-avatar-s96 {
-  @include gl-media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     @include gl-avatar-s96;
   }
 }
 
 .gl-lg-avatar-s96 {
-  @include gl-media-breakpoint-up(lg) {
+  @include gl-container-width-up(lg) {
     @include gl-avatar-s96;
   }
 }

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

@@ -11,7 +11,7 @@
     max-width: $grid-size * 15;
   }
 
-  @include media-breakpoint-down(sm) {
+  @include gl-container-width-down(sm) {
     display: none;
   }
 }

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

@@ -28,7 +28,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-default {
-  @include media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     width: $gl-drawer-width;
   }
 
@@ -39,7 +39,7 @@ $gl-drawer-scrim-gradient: linear-gradient(
 }
 
 .gl-drawer-sidebar {
-  @include media-breakpoint-up(md) {
+  @include gl-container-width-up(md) {
     width: $gl-sidebar-width;
   }
 

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

@@ -64,7 +64,7 @@
   @each $breakpointName, $breakpointSize in $gl-form-input-sizes {
     @if $breakpointName != xs {
       .gl-#{$breakpointName}-form-input-#{$name} {
-        @include gl-media-breakpoint-up($breakpointName) {
+        @include gl-container-width-up($breakpointName) {
           max-width: $size;
         }
       }

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

@@ -106,7 +106,7 @@ See: https://gitlab.com/gitlab-org/gitlab/issues/30055
   @each $breakpointName, $breakpointSize in $gl-form-input-sizes {
     @if $breakpointName != xs {
       .gl-#{$breakpointName}-form-select-#{$name} {
-        @include gl-media-breakpoint-up($breakpointName) {
+        @include gl-container-width-up($breakpointName) {
           max-width: $size;
         }
       }

package/src/components/utilities/truncate_text/truncate_text.scss

@@ -8,7 +8,7 @@
   -webkit-line-clamp: var(--mobile-lines);
   -webkit-box-orient: vertical;
 
-  @include gl-media-breakpoint-up(sm) {
+  @include gl-container-width-up(sm) {
     -webkit-line-clamp: var(--lines);
   }
 }

package/src/scss/mixins.scss

@@ -145,6 +145,77 @@
   }
 }
 
+@mixin gl-container-width-up($name, $containerName: '', $includeMQFallback: true) {
+  $min: map.get($breakpoints, $name);
+  @if $min == null {
+    @error "#{$name} is not a valid breakpoint for this @container query.";
+  }
+  @if $min != 0 {
+    @container #{$containerName} (min-width: #{$min}) {
+      @if & {
+        :where(html.with-gl-container-queries) & {
+          @content
+        }
+      }
+      @else {
+        :where(html.with-gl-container-queries) {
+          @content
+        }
+      }
+    }
+    @if $includeMQFallback {
+      @media (min-width: $min) {
+        @if & {
+          :where(html:not(.with-gl-container-queries)) & {
+            @content;
+          }
+        }
+        @else {
+          :where(html:not(.with-gl-container-queries))  {
+            @content
+          }
+        }
+      }
+    }
+  } @else {
+    @content;
+  }
+}
+
+@mixin gl-container-width-down($name, $containerName: '', $includeMQFallback: true) {
+  $max: map.get($breakpoints, $name);
+  @if ($max == null or $max == 0) {
+    @error "#{$name} is not a valid breakpoint for this @container query.";
+  }
+
+  @container #{$containerName} (width < #{$max}) {
+    @if & {
+      :where(html.with-gl-container-queries) & {
+        @content;
+      }
+    }
+    @else {
+      :where(html.with-gl-container-queries) {
+        @content;
+      }
+    }
+  }
+  @if $includeMQFallback {
+    @media (width < $max) {
+      @if & {
+        :where(html:not(.with-gl-container-queries)) & {
+          @content;
+        }
+      }
+      @else {
+        :where(html:not(.with-gl-container-queries)) {
+          @content;
+        }
+      }
+    }
+  }
+}
+
 /**
 * Helper function to resolve font-size value from $gl-font-sizes and
 * $gl-font-sizes-fixed maps.

package/src/vendor/bootstrap/scss/mixins/_breakpoints.scss

@@ -81,27 +81,6 @@
   }
 }
 
-// Media that spans multiple breakpoint widths.
-// Makes the @content apply between the min and max breakpoints
-@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
-  $min: breakpoint-min($lower, $breakpoints);
-  $max: breakpoint-max($upper, $breakpoints);
-
-  @if $min != null and $max != null {
-    @media (min-width: $min) and (max-width: $max) {
-      @content;
-    }
-  } @else if $max == null {
-    @include media-breakpoint-up($lower, $breakpoints) {
-      @content;
-    }
-  } @else if $min == null {
-    @include media-breakpoint-down($upper, $breakpoints) {
-      @content;
-    }
-  }
-}
-
 // Media between the breakpoint's minimum and maximum widths.
 // No minimum for the smallest breakpoint, and no maximum for the largest one.
 // Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.

package/src/components/regions/dashboard_skeleton/dashboard_skeleton.md

@@ -1,4 +0,0 @@
-## Dashboard Skeleton
-
-This is a skeleton loading component for a dashboards page. Renders three cards, but can be adjusted
-based on the `cards` prop.