@gitlab/ui 123.1.0 → 123.3.0

package/dist/components/base/button/button.js

@@ -209,6 +209,22 @@ var script = {
       // Vue treats `undefined` as default of `false` for Boolean props,
       // so we must set it as `null` here to be a true tri-state prop
       default: null
+    },
+    /**
+     * Display a count badge next to the button text.
+     */
+    count: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    /**
+     * Screen reader text to provide context for the count value.
+     */
+    countSrText: {
+      type: String,
+      required: false,
+      default: null
     }
   },
   computed: {
@@ -216,7 +232,7 @@ var script = {
       return this.icon !== '';
     },
     hasIconOnly() {
-      return isSlotEmpty(this, 'default') && this.hasIcon;
+      return isSlotEmpty(this, 'default') && this.hasIcon && this.count == null;
     },
     isButtonDisabled() {
       return this.disabled || this.loading;
@@ -321,6 +337,9 @@ var script = {
         return GlLink;
       }
       return this.tag;
+    },
+    hasCount() {
+      return this.count != null && this.count >= 0;
     }
   },
   mounted() {
@@ -359,7 +378,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(_vm.componentIs,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses},'component',_vm.computedPropsAndAttributes,false),_vm.computedListeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default")],2):_vm._e()],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c(_vm.componentIs,_vm._g(_vm._b({directives:[{name:"safe-link",rawName:"v-safe-link:[safeLinkConfig]",arg:_vm.safeLinkConfig}],tag:"component",class:_vm.buttonClasses},'component',_vm.computedPropsAndAttributes,false),_vm.computedListeners),[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-button-icon gl-button-loading-indicator",attrs:{"inline":""}}):_vm._e(),_vm._v(" "),(_vm.hasIcon && !(_vm.hasIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"gl-button-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_vm._t("emoji"),_vm._v(" "),(!_vm.hasIconOnly)?_c('span',{staticClass:"gl-button-text",class:_vm.buttonTextClasses},[_vm._t("default"),_vm._v(" "),(_vm.hasCount)?_c('span',{staticClass:"gl-button-count"},[_vm._v("\n      "+_vm._s(_vm.count)+"\n      "),(_vm.countSrText)?_c('span',{staticClass:"gl-sr-only"},[_vm._v(_vm._s(_vm.countSrText))]):_vm._e()]):_vm._e()],2):_vm._e()],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -17,9 +17,9 @@ var script = {
   inheritAttrs: false,
   props: {
     cssClasses: {
-      type: Array,
+      type: [Array, String, Object],
       required: false,
-      default: () => []
+      default: ''
     },
     /**
      * Space-separated triggers for the popover.
@@ -57,13 +57,28 @@ var script = {
       return this.$scopedSlots.title || this.title;
     },
     customClass() {
-      return ['gl-popover', this.hasTitle && 'has-title', this.showCloseButton && 'has-close-button', ...this.cssClasses].filter(Boolean).join(' ');
+      return ['gl-popover', this.hasTitle && 'has-title', this.showCloseButton && 'has-close-button', ...this.normalizedCssClasses(this.cssClasses)].filter(Boolean).join(' ');
     },
     shouldShowTitle() {
       return this.hasTitle || this.showCloseButton;
     }
   },
   methods: {
+    /**
+     * `cssClasses can be a string, an array, or an object. This method normalizes it to an array
+     */
+    normalizedCssClasses(cssClasses) {
+      if (Array.isArray(cssClasses)) {
+        return cssClasses;
+      }
+      if (typeof cssClasses === 'string') {
+        return cssClasses.trim() ? cssClasses.trim().split(/\s+/) : [];
+      }
+      if (cssClasses && typeof cssClasses === 'object') {
+        return Object.keys(cssClasses).filter(key => cssClasses[key]);
+      }
+      return [];
+    },
     close(e) {
       this.$refs[popoverRefName].doClose();
       /**

package/dist/components/dashboards/dashboard_panel/dashboard_panel.js

@@ -90,9 +90,9 @@ var script = {
      * CSS classes to apply to the title popover (gets passed to the `css-classes` prop of the `GlPopover` component).
      */
     titlePopoverClasses: {
-      type: Array,
+      type: [Array, String, Object],
       required: false,
-      default: () => []
+      default: ''
     },
     /**
      * Set to `true` to show the loading state.

package/dist/components/experimental/experiment_badge/experiment_badge.js

@@ -63,7 +63,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('gl-badge',{ref:"badge",staticClass:"gl-mx-4 hover:gl-cursor-pointer",attrs:{"id":_vm.triggerId,"href":"#","variant":"neutral"}},[_c('span',[_vm._v(_vm._s(_vm.activeType.BADGE))]),_vm._v(" "),_c('gl-popover',{attrs:{"triggers":"hover focus click","show-close-button":"","placement":_vm.popoverPlacement,"target":_vm.triggerId,"css-classes":['!gl-z-9999'],"title":_vm.activeType.POPOVER_TITLE}},[_c('gl-sprintf',{attrs:{"message":_vm.activeType.POPOVER_CONTENT},scopedSlots:_vm._u([{key:"link",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-badge',{ref:"badge",staticClass:"gl-mx-4 hover:gl-cursor-pointer",attrs:{"id":_vm.triggerId,"href":"#","variant":"neutral"}},[_c('span',[_vm._v(_vm._s(_vm.activeType.BADGE))]),_vm._v(" "),_c('gl-popover',{attrs:{"triggers":"hover focus click","show-close-button":"","placement":_vm.popoverPlacement,"target":_vm.triggerId,"css-classes":"!gl-z-9999","title":_vm.activeType.POPOVER_TITLE}},[_c('gl-sprintf',{attrs:{"message":_vm.activeType.POPOVER_CONTENT},scopedSlots:_vm._u([{key:"link",fn:function(ref){
 var content = ref.content;
 return [_c('gl-link',{staticClass:"!gl-text-sm",attrs:{"href":_vm.activeType.HELP_PAGE_URL,"target":"_blank"}},[_vm._v("\n          "+_vm._s(content))])]}},{key:"bullets",fn:function(){return [_c('ul',{staticClass:"gl-mb-0 gl-pl-5"},_vm._l((_vm.activeType.POPOVER_BULLETS),function(item,i){return _c('li',{key:("li-" + i)},[_vm._v("\n            "+_vm._s(item)+"\n          ")])}),0)]},proxy:true},{key:"line-break",fn:function(ref){
 var content = ref.content;