@gitlab/ui 86.11.0 → 86.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -76,14 +76,15 @@ $badge-min-width: $gl-spacing-scale-3;
|
|
|
76
76
|
* Content inside the badge should shrink when gl-text-truncate class is used on the contents
|
|
77
77
|
* Badge should have a minimal width of 20 pixels (for example when `1` is passed inside the slot)
|
|
78
78
|
*/
|
|
79
|
-
display: inline-
|
|
80
|
-
grid-auto-flow: column;
|
|
81
|
-
grid-template-columns: minmax($badge-min-width, auto);
|
|
79
|
+
display: inline-flex;
|
|
82
80
|
align-items: center;
|
|
83
81
|
justify-content: center;
|
|
84
82
|
gap: $gl-spacing-scale-2;
|
|
85
83
|
padding: $gl-spacing-scale-1 $badge-padding-horizontal;
|
|
86
|
-
|
|
84
|
+
// Enable support for gl-text-truncate
|
|
85
|
+
width: 100%;
|
|
86
|
+
// Mitigate the effect of width: 100%
|
|
87
|
+
max-width: max-content;
|
|
87
88
|
|
|
88
89
|
@media (forced-colors: active) {
|
|
89
90
|
border: 1px solid;
|
|
@@ -95,6 +96,12 @@ $badge-min-width: $gl-spacing-scale-3;
|
|
|
95
96
|
@include gl-flex-shrink-0;
|
|
96
97
|
top: auto;
|
|
97
98
|
}
|
|
99
|
+
|
|
100
|
+
.gl-badge-content {
|
|
101
|
+
display: flex;
|
|
102
|
+
justify-content: center;
|
|
103
|
+
min-width: $badge-min-width;
|
|
104
|
+
}
|
|
98
105
|
}
|
|
99
106
|
|
|
100
107
|
/* Variants */
|
|
@@ -83,6 +83,9 @@ export default {
|
|
|
83
83
|
:class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
|
|
84
84
|
:name="icon"
|
|
85
85
|
/>
|
|
86
|
-
|
|
86
|
+
<!-- eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots -->
|
|
87
|
+
<span v-if="$slots.default" class="gl-badge-content">
|
|
88
|
+
<slot></slot>
|
|
89
|
+
</span>
|
|
87
90
|
</b-badge>
|
|
88
91
|
</template>
|