@gitlab/ui 78.14.1 → 78.15.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [78.15.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.14.1...v78.15.0) (2024-04-16)
+
+
+### Features
+
+* **label:** Reduce label variants ([b411a2d](https://gitlab.com/gitlab-org/gitlab-ui/commit/b411a2d58309acbccfb56b78b8f5e8ce61eadf0e))
+
 ## [78.14.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v78.14.0...v78.14.1) (2024-04-15)
 
 

package/dist/components/base/label/label.js

@@ -1,6 +1,7 @@
 import { labelColorOptions } from '../../../utils/constants';
 import { colorFromBackground } from '../../../utils/utils';
-import CloseButton from '../../shared_components/close_button/close_button';
+import GlButton from '../button/button';
+import GlIcon from '../icon/icon';
 import GlLink from '../link/link';
 import GlTooltip from '../tooltip/tooltip';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -9,9 +10,10 @@ import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 var script = {
   name: 'GlLabel',
   components: {
+    GlButton,
+    GlIcon,
     GlLink,
-    GlTooltip,
-    CloseButton
+    GlTooltip
   },
   props: {
     backgroundColor: {
@@ -29,11 +31,6 @@ var script = {
       required: false,
       default: ''
     },
-    size: {
-      type: String,
-      required: false,
-      default: ''
-    },
     tooltipPlacement: {
       type: String,
       required: false,
@@ -69,7 +66,6 @@ var script = {
     cssClasses() {
       const textColorVariant = colorFromBackground(this.backgroundColor);
       return {
-        'gl-label-sm': this.size === 'sm',
         'gl-label-scoped': this.scoped,
         'gl-label-text-dark': textColorVariant === labelColorOptions.dark,
         'gl-label-text-light': textColorVariant === labelColorOptions.light
@@ -78,7 +74,7 @@ var script = {
     cssVariables() {
       return {
         '--label-background-color': this.backgroundColor,
-        '--label-inset-border': `inset 0 0 0 ${this.size === 'sm' ? '1px' : '2px'} ${this.backgroundColor}`
+        '--label-inset-border': `inset 0 0 0 2px ${this.backgroundColor}`
       };
     },
     scopedKey() {
@@ -87,9 +83,6 @@ var script = {
     scopedValue() {
       return this.title.slice(this.splitScopedLabelIndex + 2);
     },
-    closeIconSize() {
-      return this.size === 'sm' ? 12 : 16;
-    },
     labelComponent() {
       return this.target ? GlLink : 'span';
     },
@@ -128,7 +121,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('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"label":"Remove label","variant":"reset","disabled":_vm.disabled},on:{"click":_vm.onClose}}):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('span',_vm._b({staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c(_vm.labelComponent,{ref:"labelTitle",tag:"component",staticClass:"gl-label-link",attrs:{"href":_vm.target ? _vm.target : false,"tabindex":"0"}},[_c('span',{staticClass:"gl-label-text"},[_vm._v("\n      "+_vm._s(_vm.scopedKey)+"\n    ")]),_vm._v(" "),(_vm.scoped && _vm.scopedValue)?_c('span',{staticClass:"gl-label-text-scoped"},[_vm._v("\n      "+_vm._s(_vm.scopedValue)+"\n    ")]):_vm._e()]),_vm._v(" "),(_vm.showCloseButton)?_c('gl-button',{staticClass:"gl-label-close gl-p-0!",attrs:{"category":"tertiary","size":"small","variant":"reset","aria-label":"Remove label","disabled":_vm.disabled},on:{"click":_vm.onClose}},[_c('gl-icon',{attrs:{"name":"close-xs","size":12}})],1):_vm._e(),_vm._v(" "),(_vm.description)?_c('gl-tooltip',{attrs:{"target":function () { return _vm.tooltipTarget; },"placement":_vm.tooltipPlacement,"boundary":"viewport"}},[(_vm.scoped)?_c('span',{staticClass:"gl-label-tooltip-title"},[_vm._v("Scoped label")]):_vm._e(),_vm._v("\n    "+_vm._s(_vm.description)+"\n  ")]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */