@gitlab/ui 114.1.1 → 114.1.2

package/package.json

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

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

@@ -33,8 +33,9 @@ $breadcrumb-max-width: $grid-size * 16;
     text-decoration-thickness: auto;
     text-decoration-style: solid;
     text-decoration-color: transparent;
-    transition: box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
-                text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
+    transition:
+      box-shadow $gl-transition-duration-medium $gl-easing-out-cubic,
+      text-decoration-color $gl-transition-duration-medium $gl-easing-out-cubic;
     @include gl-prefers-reduced-motion-transition;
 
     &:hover {
@@ -66,4 +67,19 @@ $breadcrumb-max-width: $grid-size * 16;
 
 .gl-breadcrumb-item-md {
   @apply gl-text-base;
+
+  /**
+   * If the last/only item, which is always visible, has a very long title,
+   * it could overflow the breadcrumb component. This CSS makes sure it
+   * shows an ellipsis instead.
+   * But this CSS cannot be active while we do the size calculation, as that
+   * would then not take the real unshrunk width of that item into account.
+   */
+  &.gl-breadcrumb-only-item {
+    @apply gl-max-w-full gl-shrink;
+
+    a {
+      @apply gl-max-w-full gl-overflow-hidden gl-text-ellipsis gl-text-nowrap;
+    }
+  }
 }

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -81,23 +81,11 @@ export default {
     breadcrumbStyle() {
       return this.resizeDone ? {} : { opacity: 0 };
     },
-    itemStyle() {
-      /**
-       * If the last/only item, which is always visible, has a very long title,
-       * it could overflow the breadcrumb component. This CSS makes sure it
-       * shows an ellipsis instead.
-       * But this CSS cannot be active while we do the size calculation, as that
-       * would then not take the real unshrunk width of that item into account.
-       */
+    itemClass() {
       if (this.resizeDone && this.fittingItems.length === 1) {
-        return {
-          'flex-shrink': 1,
-          'text-overflow': 'ellipsis',
-          'overflow-x': 'hidden',
-          'text-wrap': 'nowrap',
-        };
+        return 'gl-breadcrumb-only-item';
       }
-      return {};
+      return '';
     },
     dropdownSize() {
       return this.size === 'sm' ? 'small' : 'medium';
@@ -231,11 +219,10 @@ export default {
         :key="index"
         :text="item.text"
         :href="item.href"
-        :style="itemStyle"
         :to="item.to"
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
-        :class="hideItemClass(item)"
+        :class="[hideItemClass(item), itemClass]"
         ><gl-avatar
           v-if="item.avatarPath"
           :src="item.avatarPath"