@gitlab/ui 115.5.0 → 115.6.0

package/dist/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -121,9 +121,18 @@ const plugin = Vue => {
       }
     });
     // Create a mount point (a DIV) and mount it (which triggers the show)
-    const div = document.createElement('div');
-    document.body.appendChild(div);
-    toast.$mount(div);
+    function createMountPoint() {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      toast.$mount(div);
+    }
+
+    // ViewTransition fallback
+    if (!document.startViewTransition) {
+      createMountPoint();
+      return;
+    }
+    document.startViewTransition(createMountPoint);
   };
 
   // Declare BvToast instance property class

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "115.5.0",
+  "version": "115.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -138,28 +138,28 @@
     "cypress-real-events": "^1.14.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.4.0",
-    "esbuild": "^0.18.0",
+    "esbuild": "^0.25.6",
     "fuse.js": "^7.1.0",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "11.0.3",
     "globby": "^14.1.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "30.0.2",
-    "jest-circus": "30.0.2",
-    "jest-environment-jsdom": "30.0.2",
+    "jest": "30.0.4",
+    "jest-circus": "30.0.4",
+    "jest-environment-jsdom": "30.0.4",
     "jest-image-snapshot": "^6.5.1",
     "merge-cobertura": "^1.0.4",
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.3",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.53.2",
-    "playwright-core": "^1.53.2",
+    "playwright": "^1.54.1",
+    "playwright-core": "^1.54.1",
     "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
-    "react": "^18.3.1",
-    "react-dom": "^19.1.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "rollup": "^2.79.2",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-postcss": "4.0.2",

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

@@ -5,10 +5,14 @@
 .b-toaster {
   &.b-toaster-bottom-left {
     .b-toaster-slot {
+      @apply gl-w-auto;
+      @apply gl-flex;
       bottom: $gl-spacing-scale-6;
       left: $gl-spacing-scale-6;
       right: auto;
-      @apply gl-w-auto;
+      flex-direction: column-reverse;
+      gap: $gl-spacing-scale-4;
+      view-transition-name: gl-toast;
 
       @include media-breakpoint-down(xs) {
         @apply gl-w-full;
@@ -60,3 +64,8 @@
     color: inherit !important;
   }
 }
+
+::view-transition-group(gl-toast) {
+  animation-duration: $gl-transition-duration-medium;
+  animation-timing-function: $gl-easing-out-cubic;
+}

package/src/vendor/bootstrap-vue/src/components/toast/_toast.scss

@@ -19,10 +19,6 @@
     background-color: rgba($toast-background-color, $b-toast-background-opacity);
   }
 
-  &:not(:last-child) {
-    margin-bottom: $toast-padding-x;
-  }
-
   &.b-toast-solid {
     .toast {
       background-color: rgba($toast-background-color, 1);

package/src/vendor/bootstrap-vue/src/components/toast/helpers/bv-toast.js

@@ -133,9 +133,19 @@ const plugin = Vue => {
       }
     })
     // Create a mount point (a DIV) and mount it (which triggers the show)
-    const div = document.createElement('div')
-    document.body.appendChild(div)
-    toast.$mount(div)
+    function createMountPoint() {
+      const div = document.createElement('div')
+      document.body.appendChild(div)
+      toast.$mount(div)
+    }
+
+    // ViewTransition fallback
+    if (!document.startViewTransition) {
+      createMountPoint()
+      return
+    }
+
+    document.startViewTransition(createMountPoint)
   }
 
   // Declare BvToast instance property class

package/src/vendor/bootstrap-vue/src/components/toast/index.scss

@@ -1,3 +1,2 @@
 @import "toast";
 @import "toaster";
-@import "toaster-transition";

package/src/vendor/bootstrap-vue/src/components/toast/_toaster-transition.scss

@@ -1,45 +0,0 @@
-// --- <b-toast> custom transition SCSS ---
-
-// PortalVue appears to have issues with transition classes on portaled items
-
-.b-toaster {
-  &.b-toaster-top-right,
-  &.b-toaster-top-left,
-  &.b-toaster-bottom-right,
-  &.b-toaster-bottom-left {
-    .b-toast {
-      &.b-toaster-enter-active,
-      &.b-toaster-leave-active,
-      &.b-toaster-move {
-        transition: transform 0.175s;
-      }
-
-      &.b-toaster-enter {
-      }
-
-      &.b-toaster-enter-to,
-      &.b-toaster-enter-active {
-        .toast.fade {
-          // Delay the appearance of the toast until
-          // the move transition has completed
-          transition-delay: 0.175s;
-        }
-      }
-
-      &.b-toaster-enter-to {
-      }
-
-      &.b-toaster-leave-active {
-        position: absolute;
-        transition-delay: 0.175s;
-
-        .toast.fade {
-          transition-delay: 0s;
-        }
-      }
-
-      &.b-toaster-leave-to {
-      }
-    }
-  }
-}