@gitlab/ui 123.2.0 → 123.3.1

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/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -324,7 +324,15 @@ var script = {
       });
     },
     handleAutoClose(e) {
-      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && this.$refs.baseDropdown.containsElement(e.target)) {
+      var _this$$refs$baseDropd, _this$$refs$baseDropd2;
+      if (this.autoClose && e.target.closest(ITEM_SELECTOR) && // The optional chaining here is to accommodate specs that use shallow mounting.
+      // Ideally, those specs would either:
+      //  - stub out the `BaseDropdown` component to include a stub `containsElement` method, or
+      //  - use a full mount.
+      //
+      // Unfortunately, GitLab has many specs which do neither of these. So the simpler thing to do
+      // is to optionally chain the method call here.
+      (_this$$refs$baseDropd = (_this$$refs$baseDropd2 = this.$refs.baseDropdown).containsElement) !== null && _this$$refs$baseDropd !== void 0 && _this$$refs$baseDropd.call(_this$$refs$baseDropd2, e.target)) {
         this.closeAndFocus();
       }
     },