@gitlab/ui 118.1.2 → 119.0.0

package/dist/tokens/figma/contextual.tokens.json

@@ -3774,7 +3774,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "hover": {
             "$value": "{button.dashed.border.color.default}",
@@ -3784,7 +3785,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "focus": {
             "$value": "{button.dashed.border.color.default}",
@@ -3794,7 +3796,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -3807,7 +3810,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           }
         }
       }

package/dist/tokens/json/tokens.dark.json

@@ -16513,6 +16513,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16527,6 +16528,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.default}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_DEFAULT",
@@ -16549,6 +16551,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16560,6 +16563,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.hover}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_HOVER",
@@ -16582,6 +16586,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16593,6 +16598,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.focus}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_FOCUS",
@@ -16615,6 +16621,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16629,6 +16636,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.active}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_ACTIVE",

package/dist/tokens/json/tokens.json

@@ -16513,6 +16513,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16527,6 +16528,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.default}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_DEFAULT",
@@ -16549,6 +16551,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16560,6 +16563,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.hover}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_HOVER",
@@ -16582,6 +16586,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16593,6 +16598,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.focus}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_FOCUS",
@@ -16615,6 +16621,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16629,6 +16636,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.active}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_ACTIVE",

package/dist/utils/constants.js

@@ -85,7 +85,6 @@ const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   danger: 'danger',
-  dashed: 'dashed',
   link: 'link',
   /**
    * The "reset" variant can be used when customization of GlButton styles is required

package/package.json

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

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

@@ -71,6 +71,7 @@ export default {
       overflowingItems: [], // array of items that didn't fit and were put in a dropdown instead
       totalBreadcrumbsWidth: 0, // the total width of all breadcrumb items combined
       widthPerItem: [], // array with the individual widths of each breadcrumb item
+      dropdownWidth: 0, // the width of the breadcrumb item containing the dropdown toggle
       resizeDone: false, // to apply some CSS only during/after resizing
     };
   },
@@ -140,6 +141,9 @@ export default {
         this.widthPerItem[index] = width;
       });
 
+      // The dropdown gets rendered during `!resizeDone` so we can mesuare its real width here.
+      this.dropdownWidth = this.$refs.dropdown.clientWidth;
+
       this.makeBreadcrumbsFit();
     },
     makeBreadcrumbsFit() {
@@ -147,7 +151,6 @@ export default {
       this.resetItems();
 
       const containerWidth = this.$el.clientWidth;
-      const buttonWidth = this.size === 'sm' ? 40 : 48; // px
 
       if (this.totalBreadcrumbsWidth > containerWidth) {
         // Not all breadcrumb items fit. Start moving items over to the dropdown.
@@ -165,7 +168,7 @@ export default {
           widthNeeded -= this.widthPerItem[index];
 
           // Does it fit now? Then stop.
-          if (widthNeeded + buttonWidth < containerWidth) break;
+          if (widthNeeded + this.dropdownWidth < containerWidth) break;
         }
       }
 
@@ -201,7 +204,11 @@ export default {
 <template>
   <nav class="gl-breadcrumbs" :aria-label="ariaLabel" :style="breadcrumbStyle">
     <ol class="gl-breadcrumb-list breadcrumb" v-bind="$attrs" v-on="$listeners">
-      <li v-if="hasCollapsible" :class="`gl-breadcrumb-item gl-breadcrumb-item-${size}`">
+      <li
+        v-if="hasCollapsible || !resizeDone"
+        ref="dropdown"
+        :class="`gl-breadcrumb-item gl-breadcrumb-item-${size}`"
+      >
         <gl-disclosure-dropdown
           :items="overflowingItems"
           :toggle-text="showMoreLabel"

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

@@ -196,8 +196,7 @@
     }
   }
 
-  &.btn-default-tertiary,
-  &.btn-dashed {
+  &.btn-default-tertiary {
     @include gl-button-theme(
       $color: var(--gl-button-default-tertiary-foreground-color-default),
       $background-color: var(--gl-button-default-tertiary-background-color-default),
@@ -317,7 +316,6 @@
   }
 
   &.btn-default-secondary,
-  &.btn-dashed-secondary,
   &.btn-confirm-secondary,
   &.btn-danger-secondary,
   &.btn-reset-secondary,
@@ -329,7 +327,6 @@
   }
 
   &.btn-default,
-  &.btn-dashed,
   &.btn-confirm,
   &.btn-danger {
     &-tertiary {
@@ -363,25 +360,6 @@
     }
   }
 
-  &.btn-dashed,
-  &.btn-dashed-tertiary {
-    border-style: dashed;
-    border-color: var(--gl-button-dashed-border-color-default);
-
-    &:hover {
-      border-color: var(--gl-button-dashed-border-color-hover);
-    }
-
-    &:focus {
-      border-color: var(--gl-button-dashed-border-color-focus);
-    }
-
-    &:active,
-    &.active {
-      border-color: var(--gl-button-dashed-border-color-active);
-    }
-  }
-
   &.btn-icon {
     @apply gl-leading-normal;
     @apply gl-p-0;

package/src/components/base/button_group/button_group.scss

@@ -41,20 +41,6 @@ $gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;
     }
   }
 
-  // Button separators
-  .btn-dashed {
-    &::before {
-      @apply gl-bg-transparent;
-      border-left: 1px dashed var(--gl-button-dashed-border-color-default);
-    }
-
-    &.disabled::before,
-    &[disabled]::before {
-      @apply gl-bg-transparent;
-      border-left: 1px dashed var(--gl-button-disabled-border-color);
-    }
-  }
-
   // GlButton confirm and danger variants have transparent gap between items
   .btn-confirm,
   .btn-danger {
@@ -130,18 +116,4 @@ $gl-button-group-border-z-index: $gl-button-group-focus-z-index + 1;
       @apply gl-bg-transparent;
     }
   }
-
-  // Dashed button
-  > .gl-button.btn-dashed:not(:first-child),
-  > .btn-group:not(:first-child) > .gl-button.btn-dashed,
-  > .gl-new-dropdown:not(:first-child) > .gl-button.btn-dashed {
-    &::before {
-      border-top: 1px dashed var(--gl-button-dashed-border-color-default);
-    }
-
-    &.disabled::before,
-    &[disabled]::before {
-      border-top: 1px dashed var(--gl-button-disabled-border-color);
-    }
-  }
 }

package/src/tokens/build/figma/contextual.tokens.json

@@ -3774,7 +3774,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "hover": {
             "$value": "{button.dashed.border.color.default}",
@@ -3784,7 +3785,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "focus": {
             "$value": "{button.dashed.border.color.default}",
@@ -3794,7 +3796,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -3807,7 +3810,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           }
         }
       }

package/src/tokens/build/json/tokens.dark.json

@@ -16513,6 +16513,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16527,6 +16528,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.default}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_DEFAULT",
@@ -16549,6 +16551,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16560,6 +16563,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.hover}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_HOVER",
@@ -16582,6 +16586,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16593,6 +16598,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.focus}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_FOCUS",
@@ -16615,6 +16621,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16629,6 +16636,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.active}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_ACTIVE",

package/src/tokens/build/json/tokens.json

@@ -16513,6 +16513,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16527,6 +16528,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.default}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_DEFAULT",
@@ -16549,6 +16551,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16560,6 +16563,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.hover}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_HOVER",
@@ -16582,6 +16586,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16593,6 +16598,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.focus}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_FOCUS",
@@ -16615,6 +16621,7 @@
                 "STROKE_COLOR"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/button.tokens.json",
             "isSource": true,
             "original": {
@@ -16629,6 +16636,7 @@
                   "STROKE_COLOR"
                 ]
               },
+              "$deprecated": true,
               "key": "{button.dashed.border.color.active}"
             },
             "name": "BUTTON_DASHED_BORDER_COLOR_ACTIVE",

package/src/tokens/contextual/button.tokens.json

@@ -1264,7 +1264,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "hover": {
             "$value": "{button.dashed.border.color.default}",
@@ -1274,7 +1275,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "focus": {
             "$value": "{button.dashed.border.color.default}",
@@ -1284,7 +1286,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -1297,7 +1300,8 @@
               "com.figma.scope": [
                 "STROKE_COLOR"
               ]
-            }
+            },
+            "$deprecated": true
           }
         }
       }

package/src/utils/constants.js

@@ -108,7 +108,6 @@ export const buttonVariantOptions = {
   default: 'default',
   confirm: 'confirm',
   danger: 'danger',
-  dashed: 'dashed',
   link: 'link',
   /**
    * The "reset" variant can be used when customization of GlButton styles is required