@gitlab/ui 38.8.1 → 38.10.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [38.10.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.9.0...v38.10.0) (2022-04-13)
+
+
+### Bug Fixes
+
+* **GlPopover:** Remove horizontal border ([f40c030](https://gitlab.com/gitlab-org/gitlab-ui/commit/f40c030c429fc76c7dd9dcb3ff7aeaa6f889d653))
+
+
+### Features
+
+* **CSS:** Add new utility CSS classes ([19e3dd6](https://gitlab.com/gitlab-org/gitlab-ui/commit/19e3dd63eef519e85264391cf3a95ecf038c2f07))
+* **GlPopover:** top placement by default ([705dfe4](https://gitlab.com/gitlab-org/gitlab-ui/commit/705dfe412200581620c78011612de451d22ece55))
+
+# [38.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.8.2...v38.9.0) (2022-04-12)
+
+
+### Features
+
+* add a character counter to gl-form-textarea ([1d45d26](https://gitlab.com/gitlab-org/gitlab-ui/commit/1d45d26ad384b85589154100664da2c4eb204499))
+
+## [38.8.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.8.1...v38.8.2) (2022-04-08)
+
+
+### Bug Fixes
+
+* **Label:** Move tooltip to anchor instead of span ([67d0e79](https://gitlab.com/gitlab-org/gitlab-ui/commit/67d0e79bb57409d63e32fd3efffc95dc534c3421))
+
 ## [38.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v38.8.0...v38.8.1) (2022-04-08)
 
 

package/dist/components/base/filtered_search/filtered_search.js

@@ -316,11 +316,6 @@ var script = {
        * @property {array} tokens
        */
       this.$emit('submit', normalizeTokens(_cloneDeep(this.tokens)));
-    },
-
-    clearInput() {
-      this.tokens = initialState();
-      this.$emit('clearInput');
     }
 
   }

package/dist/components/base/form/form_textarea/form_textarea.js

@@ -1,4 +1,6 @@
 import { BFormTextarea } from 'bootstrap-vue/esm/index.js';
+import GlSprintf from '../../../utilities/sprintf/sprintf';
+import { textareaCountOptions } from '../../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const model = {
@@ -7,7 +9,8 @@ const model = {
 };
 var script = {
   components: {
-    BFormTextarea
+    BFormTextarea,
+    GlSprintf
   },
   inheritAttrs: false,
   model,
@@ -28,6 +31,27 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    count: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    countType: {
+      required: false,
+      type: String,
+      default: textareaCountOptions.max,
+      validator: value => Object.keys(textareaCountOptions).includes(value)
+    },
+    characterCountText: {
+      required: false,
+      type: String,
+      default: ''
+    },
+    characterCountOverLimitText: {
+      required: false,
+      type: String,
+      default: ''
     }
   },
   computed: {
@@ -64,6 +88,42 @@ var script = {
 
     keypressEvent() {
       return this.submitOnEnter ? 'keyup' : null;
+    },
+
+    characters() {
+      return this.value.length;
+    },
+
+    remainingCharacters() {
+      if (this.count) {
+        return Math.abs(this.count - this.characters);
+      }
+
+      return null;
+    },
+
+    characterCountClasses() {
+      switch (this.countType) {
+        case textareaCountOptions.max:
+          return {
+            'gl-text-red-500': this.value.length > this.count,
+            'gl-text-gray-500': this.value.length <= this.count
+          };
+
+        case textareaCountOptions.recommended:
+          return 'gl-text-gray-500';
+
+        default:
+          return {};
+      }
+    },
+
+    hasCount() {
+      return this.remainingCharacters != null;
+    },
+
+    characterCountMessage() {
+      return this.characters > this.count ? this.characterCountOverLimitText : this.characterCountText;
     }
 
   },
@@ -81,7 +141,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-form-textarea',_vm._g(_vm._b({staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress($event)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('b-form-textarea',_vm._g(_vm._b({ref:"textarea",staticClass:"gl-form-input gl-form-textarea",attrs:{"no-resize":_vm.noResize,"value":_vm.value},nativeOn:_vm._d({},[_vm.keypressEvent,function($event){return _vm.handleKeyPress($event)}])},'b-form-textarea',_vm.$attrs,false),_vm.listeners)),_vm._v(" "),(_vm.hasCount)?_c('div',[_c('small',{class:_vm.characterCountClasses,attrs:{"aria-live":"polite"}},[_c('gl-sprintf',{attrs:{"message":_vm.characterCountMessage},scopedSlots:_vm._u([{key:"count",fn:function(){return [_vm._v(_vm._s(_vm.remainingCharacters))]},proxy:true}],null,false,2559963941)})],1)]):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -130,7 +130,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({ref:"labelTitle",staticClass:"gl-label",class:_vm.cssClasses,style:(_vm.cssVariables),on:{"click":_vm.onClick}},'span',_vm.$attrs,false),[_c('gl-link',{staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_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.$refs.labelTitle; },"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('gl-link',{ref:"labelTitle",staticClass:"gl-label-link",attrs:{"href":_vm.target}},[_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.$refs.labelTitle.$el; },"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 */

package/dist/components/base/popover/popover.js

@@ -1,6 +1,7 @@
 import { BPopover } from 'bootstrap-vue/esm/index.js';
 import tooltipMixin from '../../mixins/tooltip_mixin';
 import CloseButton from '../../shared_components/close_button/close_button';
+import { popoverPlacements } from '../../../utils/constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const popoverRefName = 'bPopover';
@@ -37,6 +38,11 @@ var script = {
       type: Boolean,
       required: false,
       default: false
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: popoverPlacements.top
     }
   },
   computed: {
@@ -67,7 +73,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-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-popover',_vm._g(_vm._b({ref:_vm.$options.popoverRefName,attrs:{"custom-class":_vm.customClass,"triggers":_vm.triggers,"title":_vm.title,"placement":_vm.placement},scopedSlots:_vm._u([(_vm.shouldShowTitle)?{key:"title",fn:function(){return [_vm._t("title",[_vm._v("\n      "+_vm._s(_vm.title)+"\n    ")]),_vm._v(" "),(_vm.showCloseButton)?_c('close-button',{staticClass:"gl-float-right gl-mt-n2 gl-mr-n3",attrs:{"data-testid":"close-button"},on:{"click":_vm.close}}):_vm._e()]},proxy:true}:null],null,true)},'b-popover',_vm.$attrs,false),_vm.$listeners),[_vm._v(" "),_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */