@gitlab/ui 86.5.0 → 86.5.1

package/package.json

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

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

@@ -66,14 +66,24 @@ $badge-min-width: $gl-spacing-scale-3;
 /* Basic badge styles */
 
 .gl-badge {
-  @include gl-display-inline-flex;
-  @include gl-align-items-center;
-  @include gl-justify-content-center;
   @include gl-font-sm;
   @include gl-font-weight-normal;
   @include gl-line-height-normal;
+
+  /*
+    CSS Grid is used here to deal with 3 cases:
+      * Badge shouldn't shrink inside flex containers by default
+      * Content inside the badge should shrink when gl-text-truncate class is used on the contents
+      * Badge should have a minimal width of 20 pixels (for example when `1` is passed inside the slot)
+   */
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-template-columns: minmax($badge-min-width, auto);
+  align-items: center;
+  justify-content: center;
   gap: $gl-spacing-scale-2;
   padding: $gl-spacing-scale-1 $badge-padding-horizontal;
+  min-width: fit-content;
 
   @media (forced-colors: active) {
     border: 1px solid;
@@ -85,10 +95,6 @@ $badge-min-width: $gl-spacing-scale-3;
     @include gl-flex-shrink-0;
     top: auto;
   }
-
-  .gl-badge-content {
-    min-width: $badge-min-width;
-  }
 }
 
 /* Variants */

package/src/components/base/badge/badge.vue

@@ -83,10 +83,6 @@ export default {
       :class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
       :name="icon"
     />
-    <!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
-    <span v-if="$slots.default" class="gl-badge-content">
-      <!-- @slot The badge content to display. -->
-      <slot></slot>
-    </span>
+    <slot></slot>
   </b-badge>
 </template>