@gitlab/ui 99.1.0 → 100.0.0

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+# [100.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v99.1.0...v100.0.0) (2024-10-29)
+
+
+### Features
+
+* migrate GlBadge ([02f3e90](https://gitlab.com/gitlab-org/gitlab-ui/commit/02f3e906087dfb5dffe7ca5c34c78c3d24aed185))
+
+
+### BREAKING CHANGES
+
+* Remove GlBadge's router link and nuxt link related
+props.
+
+* Migrates GlBadge so it does not make use of Bootstrap Vue's
+BBadge anymore.
+* Still uses the BLink component if link props are provided.
+* Specs are added for the additional functionality.
+* Docs for the badge include information about the link badge now.
+* Include link badge styling for disabled case.
+* Update GlBadge default story.
+* Removes vendored BBadge code.
+
 # [99.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v99.0.1...v99.1.0) (2024-10-28)
 
 

package/dist/components/base/badge/badge.js

@@ -1,16 +1,24 @@
-import { BBadge } from '../../../vendor/bootstrap-vue/src/components/badge/badge';
+import { BLink } from '../../../vendor/bootstrap-vue/src/components/link/link';
 import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
+const variantClass = {
+  [badgeVariantOptions.muted]: 'badge-muted',
+  [badgeVariantOptions.neutral]: 'badge-neutral',
+  [badgeVariantOptions.info]: 'badge-info',
+  [badgeVariantOptions.success]: 'badge-success',
+  [badgeVariantOptions.warning]: 'badge-warning',
+  [badgeVariantOptions.danger]: 'badge-danger',
+  [badgeVariantOptions.tier]: 'badge-tier'
+};
 var script = {
   name: 'GlBadge',
   components: {
-    BBadge,
+    BLink,
     GlIcon
   },
-  inheritAttrs: false,
   props: {
     /**
      * The variant of the badge.
@@ -47,6 +55,54 @@ var script = {
       type: Boolean,
       default: false,
       required: false
+    },
+    /**
+     * Custom tag to use (unless `href` is defined)
+     */
+    tag: {
+      type: String,
+      required: false,
+      default: 'span'
+    },
+    /**
+     * Creates the badge as link (ignores `tag` property)
+     */
+    href: {
+      type: String,
+      required: false,
+      default: undefined
+    },
+    /**
+     * Sets the `rel` attributes, when `href` is defined
+     */
+    rel: {
+      type: String,
+      required: false,
+      default: null
+    },
+    /**
+     * Sets the `target`, when `href` is defined
+     */
+    target: {
+      type: String,
+      required: false,
+      default: '_self'
+    },
+    /**
+     * Adds the `active` class, when `href` is defined
+     */
+    active: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    /**
+     * Disables the link, when `href` is defined
+     */
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   computed: {
@@ -68,6 +124,34 @@ var script = {
     },
     iconSizeComputed() {
       return badgeIconSizeOptions[this.iconSize];
+    },
+    isLink() {
+      return Boolean(this.href);
+    },
+    computedTag() {
+      return this.isLink ? BLink : this.tag;
+    },
+    computedProps() {
+      if (!this.isLink) return {};
+      const {
+        href,
+        rel,
+        target,
+        active,
+        disabled
+      } = this;
+      return {
+        href,
+        rel,
+        target,
+        active,
+        disabled
+      };
+    },
+    classes() {
+      return ['gl-badge', 'badge', 'badge-pill', variantClass[this.variant], {
+        '!gl-px-2': !this.$scopedSlots.default
+      }];
     }
   }
 };
@@ -76,7 +160,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-badge',_vm._b({staticClass:"gl-badge",class:{ '!gl-px-2': !_vm.$scopedSlots.default },attrs:{"variant":_vm.variant,"role":_vm.role,"aria-label":_vm.ariaLabel,"pill":""}},'b-badge',_vm.$attrs,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.computedTag,_vm._b({tag:"component",class:_vm.classes,attrs:{"role":_vm.role,"aria-label":_vm.ariaLabel}},'component',_vm.computedProps,false),[(_vm.icon)?_c('gl-icon',{staticClass:"gl-badge-icon",class:{ '-gl-ml-2': _vm.isCircularIcon },attrs:{"size":_vm.iconSizeComputed,"name":_vm.icon}}):_vm._e(),_vm._v(" "),(_vm.$slots.default)?_c('span',{staticClass:"gl-badge-content"},[_vm._t("default")],2):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */