@gitlab/ui 37.5.0 → 37.5.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [37.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.5.0...v37.5.1) (2022-03-10)
+
+
+### Bug Fixes
+
+* **GlDropdown:** spinner replaces icon when icon dropdown is loading ([027a8a7](https://gitlab.com/gitlab-org/gitlab-ui/commit/027a8a7011c336b7c2562e4e839d4d8b4f7a4fe9))
+
 # [37.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v37.4.2...v37.5.0) (2022-03-10)
 
 

package/dist/components/base/dropdown/dropdown.js

@@ -147,7 +147,7 @@ var script = {
     isIconOnly() {
       var _this$text;
 
-      return Boolean(this.icon && (!((_this$text = this.text) !== null && _this$text !== void 0 && _this$text.length) || this.textSrOnly));
+      return Boolean(this.icon && (!((_this$text = this.text) !== null && _this$text !== void 0 && _this$text.length) || this.textSrOnly) && !this.hasSlotContents('button-text'));
     },
 
     isIconWithText() {
@@ -209,7 +209,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-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",[(_vm.loading)?_c('gl-loading-icon',{staticClass:"gl-mr-2"}):_vm._e(),_vm._v(" "),(_vm.icon)?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",[_vm._v(_vm._s(_vm.buttonText))])],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()])]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-dropdown',_vm._g(_vm._b({ref:"dropdown",staticClass:"gl-new-dropdown",attrs:{"split":_vm.split,"variant":_vm.variant,"size":_vm.buttonSize,"toggle-class":[_vm.toggleButtonClasses],"split-class":_vm.splitButtonClasses,"block":_vm.block,"disabled":_vm.disabled || _vm.loading,"right":_vm.right},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",[(_vm.loading)?_c('gl-loading-icon',{class:{ 'gl-mr-2': !_vm.isIconOnly }}):_vm._e(),_vm._v(" "),(_vm.icon && !(_vm.isIconOnly && _vm.loading))?_c('gl-icon',{staticClass:"dropdown-icon",attrs:{"name":_vm.icon}}):_vm._e(),_vm._v(" "),_c('span',{staticClass:"gl-new-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",[_vm._v(_vm._s(_vm.buttonText))])],2),_vm._v(" "),(_vm.renderCaret)?_c('gl-icon',{staticClass:"gl-button-icon dropdown-chevron",attrs:{"name":"chevron-down"}}):_vm._e()])]},proxy:true}],null,true)},'b-dropdown',_vm.$attrs,false),_vm.$listeners),[_c('div',{staticClass:"gl-new-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-new-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-new-dropdown-header-top"},[_vm._v("\n        "+_vm._s(_vm.headerText)+"\n      ")]):_vm._e(),_vm._v(" "),_vm._t("header")],2):_vm._e(),_vm._v(" "),(_vm.hasHighlightedItemsOrClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-direction-row gl-justify-content-space-between gl-align-items-center"},[(_vm.hasHighlightedItemsContent && _vm.showHighlightedItemsTitle)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-flex-start",class:_vm.highlightedItemsTitleClass},[_c('span',{staticClass:"gl-font-weight-bold",attrs:{"data-testid":"highlighted-items-title"}},[_vm._v(_vm._s(_vm.highlightedItemsTitle))])]):_vm._e(),_vm._v(" "),(_vm.showClearAll)?_c('div',{staticClass:"gl-display-flex gl-flex-grow-1 gl-justify-content-end",class:_vm.clearAllTextClass},[_c('gl-button',{attrs:{"size":"small","category":"tertiary","variant":"link","data-testid":"clear-all-button"},on:{"click":function($event){return _vm.$emit('clear-all', $event)}}},[_vm._v(_vm._s(_vm.clearAllText))])],1):_vm._e()]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-new-dropdown-contents"},[(_vm.hasHighlightedItemsContent)?_c('div',{staticClass:"gl-overflow-visible",attrs:{"data-testid":"highlighted-items"}},[_vm._t("highlighted-items"),_vm._v(" "),_c('gl-dropdown-divider')],2):_vm._e(),_vm._v(" "),_vm._t("default")],2),_vm._v(" "),(_vm.hasSlotContents('footer'))?_c('div',{staticClass:"gl-new-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "37.5.0",
+  "version": "37.5.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/dropdown/dropdown.spec.js

@@ -336,6 +336,7 @@ describe('new dropdown', () => {
       const slots = { 'button-text': mockComponent };
       buildWrapper({ loading: true, icon: 'close' }, slots);
       expect(wrapper.findComponent(mockComponent).exists()).toBe(true);
+      expect(wrapper.text()).toBe('mock');
       expect(findLoadingIcon().exists()).toBe(true);
       expect(findIcon().exists()).toBe(true);
       expect(findCaret().exists()).toBe(true);
@@ -345,12 +346,40 @@ describe('new dropdown', () => {
       const slots = { 'button-content': mockComponent };
       buildWrapper({ loading: true, icon: 'close' }, slots);
       expect(wrapper.findComponent(mockComponent).exists()).toBe(true);
+      expect(wrapper.text()).toBe('mock');
       expect(findLoadingIcon().exists()).toBe(false);
       expect(findIcon().exists()).toBe(false);
       expect(findCaret().exists()).toBe(false);
     });
   });
 
+  describe('icon only dropdown', () => {
+    it('shows the icon and dropdown caret', () => {
+      buildWrapper({ icon: 'paper-airplane' });
+      expect(wrapper.text()).toBe('');
+      expect(findLoadingIcon().exists()).toBe(false);
+      expect(findIcon().exists()).toBe(true);
+      expect(findCaret().exists()).toBe(true);
+    });
+
+    it('shows text for screen readers', () => {
+      buildWrapper({ icon: 'paper-airplane', text: 'screenreader button text', textSrOnly: true });
+      expect(wrapper.text()).toBe('screenreader button text');
+      expect(wrapper.find('span').classes()).toContain('gl-sr-only');
+      expect(findLoadingIcon().exists()).toBe(false);
+      expect(findIcon().exists()).toBe(true);
+      expect(findCaret().exists()).toBe(true);
+    });
+
+    it('shows loading spinner instead of icon when loading', () => {
+      buildWrapper({ icon: 'paper-airplane', loading: true });
+      expect(wrapper.text()).toBe('');
+      expect(findLoadingIcon().exists()).toBe(true);
+      expect(findIcon().exists()).toBe(false);
+      expect(findCaret().exists()).toBe(true);
+    });
+  });
+
   describe('Clear all button', () => {
     it('is not visible by default', () => {
       buildWrapper({});

package/src/components/base/dropdown/dropdown.vue

@@ -151,7 +151,9 @@ export default {
       return !this.split;
     },
     isIconOnly() {
-      return Boolean(this.icon && (!this.text?.length || this.textSrOnly));
+      return Boolean(
+        this.icon && (!this.text?.length || this.textSrOnly) && !this.hasSlotContents('button-text')
+      );
     },
     isIconWithText() {
       return Boolean(this.icon && this.text?.length && !this.textSrOnly);
@@ -282,8 +284,8 @@ export default {
     </div>
     <template #button-content>
       <slot name="button-content">
-        <gl-loading-icon v-if="loading" class="gl-mr-2" />
-        <gl-icon v-if="icon" class="dropdown-icon" :name="icon" />
+        <gl-loading-icon v-if="loading" :class="{ 'gl-mr-2': !isIconOnly }" />
+        <gl-icon v-if="icon && !(isIconOnly && loading)" class="dropdown-icon" :name="icon" />
         <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
           <slot name="button-text">{{ buttonText }}</slot>
         </span>