@gitlab/ui 64.24.1 → 65.0.1

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [65.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v65.0.0...v65.0.1) (2023-08-05)
+
+
+### Bug Fixes
+
+* **button:** correctly detect empty slot for icon only ([bbbc03e](https://gitlab.com/gitlab-org/gitlab-ui/commit/bbbc03ef43139bf023573706894cd9ba60cfce0a))
+
+# [65.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.24.1...v65.0.0) (2023-08-01)
+
+
+### chore
+
+* move dompurify to peer & dev dependency ([f87d3e6](https://gitlab.com/gitlab-org/gitlab-ui/commit/f87d3e6924e9f7e81affc38b913c87a1ec45a59f))
+
+
+### BREAKING CHANGES
+
+* please upgrade to latest dompurify release
+
 ## [64.24.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v64.24.0...v64.24.1) (2023-07-31)
 
 

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

@@ -1,6 +1,7 @@
 import { BButton } from 'bootstrap-vue/esm/index.js';
 import { buttonCategoryOptions, buttonVariantOptions, buttonSizeOptions } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
+import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
 import GlIcon from '../icon/icon';
 import GlLoadingIcon from '../loading_icon/loading_icon';
@@ -75,8 +76,7 @@ var script = {
       return this.icon !== '';
     },
     hasIconOnly() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Object.keys(this.$slots).length === 0 && this.hasIcon;
+      return isSlotEmpty(this, 'default') && this.hasIcon;
     },
     isButtonDisabled() {
       return this.disabled || this.loading;

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

@@ -47,6 +47,7 @@ var script = {
     GlLoadingIcon
   },
   mixins: [ButtonMixin],
+  inheritAttrs: false,
   props: {
     headerText: {
       type: String,
@@ -155,6 +156,16 @@ var script = {
       type: Object,
       required: false,
       default: null
+    },
+    noFlip: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    splitHref: {
+      type: String,
+      required: false,
+      default: ''
     }
   },
   computed: {
@@ -218,7 +229,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-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,"popper-opts":_vm.popperOptions},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_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-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_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-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-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-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-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-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,"popper-opts":_vm.popperOptions,"no-flip":_vm.noFlip,"split-href":_vm.splitHref},scopedSlots:_vm._u([{key:"button-content",fn:function(){return [_vm._t("button-content",function(){return [(_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-dropdown-button-text",class:{ 'gl-sr-only': _vm.textSrOnly }},[_vm._t("button-text",function(){return [_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-dropdown-inner"},[(_vm.hasSlotContents('header') || _vm.headerText)?_c('div',{staticClass:"gl-dropdown-header",class:{ 'gl-border-b-0!': _vm.hideHeaderBorder }},[(_vm.headerText)?_c('p',{staticClass:"gl-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-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-dropdown-footer"},[_vm._t("footer")],2):_vm._e()])])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 31 Jul 2023 07:09:07 GMT
+ * Generated on Sat, 05 Aug 2023 22:20:46 GMT
  */
 
 :root {

package/dist/tokens/css/tokens.dark.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 31 Jul 2023 07:09:07 GMT
+ * Generated on Sat, 05 Aug 2023 22:20:46 GMT
  */
 
 :root {

package/dist/tokens/js/tokens.dark.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 31 Jul 2023 07:09:07 GMT
+ * Generated on Sat, 05 Aug 2023 22:20:46 GMT
  */
 
 export const BLACK = "#fff";

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 31 Jul 2023 07:09:07 GMT
+ * Generated on Sat, 05 Aug 2023 22:20:46 GMT
  */
 
 export const BLACK = "#000";

package/dist/tokens/scss/_tokens.dark.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 31 Jul 2023 07:09:07 GMT
+// Generated on Sat, 05 Aug 2023 22:20:46 GMT
 
 $red-950: #fff4f3;
 $red-900: #fcf1ef;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Mon, 31 Jul 2023 07:09:07 GMT
+// Generated on Sat, 05 Aug 2023 22:20:46 GMT
 
 $brand-gray-05: #2b2838 !default;
 $brand-gray-04: #45424d !default;

package/dist/utils/is_slot_empty.js

@@ -0,0 +1,34 @@
+import Vue from 'vue';
+
+// Fragment will be available only in Vue.js 3
+const {
+  Fragment,
+  Comment
+} = Vue;
+function callIfNeeded(fnOrResult, args) {
+  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
+}
+function isEmpty(vnode) {
+  if (!vnode || Comment && vnode.type === Comment) {
+    return true;
+  }
+  if (Array.isArray(vnode)) {
+    return vnode.every(isEmpty);
+  }
+  if (Fragment && vnode.type === Fragment) {
+    // Vue.js 3 fragment, check children
+    return vnode.children.every(isEmpty);
+  }
+  return false;
+}
+function isSlotEmpty(vueInstance, slot, slotArgs) {
+  var _vueInstance$$scopedS, _vueInstance$$scopedS2;
+  const isVue3 = Boolean(Fragment);
+  const slotContent = isVue3 ?
+  // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
+  // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
+  callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs) : (_vueInstance$$scopedS = (_vueInstance$$scopedS2 = vueInstance.$scopedSlots)[slot]) === null || _vueInstance$$scopedS === void 0 ? void 0 : _vueInstance$$scopedS.call(_vueInstance$$scopedS2, slotArgs);
+  return isEmpty(slotContent);
+}
+
+export { isSlotEmpty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "64.24.1",
+  "version": "65.0.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -65,7 +65,6 @@
   "dependencies": {
     "@floating-ui/dom": "1.2.9",
     "bootstrap-vue": "2.23.1",
-    "dompurify": "^2.4.5",
     "echarts": "^5.3.2",
     "iframe-resizer": "^4.3.2",
     "lodash": "^4.17.20",
@@ -75,6 +74,7 @@
   "peerDependencies": {
     "@gitlab/svgs": "^1.116.0 || ^2.0.0 || ^3.0.0",
     "bootstrap": ">=4.5.3 <=4.6.2",
+    "dompurify": "^2.4.7 || ^3.0.5",
     "emoji-regex": ">=10.0.0",
     "pikaday": "^1.8.0",
     "vue": "^2.6.10"
@@ -91,7 +91,7 @@
     "@gitlab/eslint-plugin": "19.0.0",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.57.0",
+    "@gitlab/svgs": "3.58.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -119,17 +119,18 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "bootstrap": "4.6.2",
     "cypress": "12.17.2",
+    "dompurify": "^2.4.7",
     "emoji-regex": "^10.0.0",
-    "eslint": "8.45.0",
+    "eslint": "8.46.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-storybook": "0.6.12",
     "glob": "^7.2.0",
     "identity-obj-proxy": "^3.0.0",
     "inquirer-select-directory": "^1.2.0",
-    "jest": "^29.6.1",
-    "jest-circus": "29.6.1",
-    "jest-environment-jsdom": "29.6.1",
+    "jest": "^29.6.2",
+    "jest-circus": "29.6.2",
+    "jest-environment-jsdom": "29.6.2",
     "markdownlint-cli": "^0.29.0",
     "mockdate": "^2.0.5",
     "module-alias": "^2.2.2",

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

@@ -211,4 +211,15 @@ describe('button component', () => {
       });
     });
   });
+
+  it('should correctly detect empty content for icon only mode', () => {
+    const DemoComponent = {
+      components: { GlButton },
+      template: `<gl-button icon="ellipsis_h"><slot><span v-if="false">not-rendered</span></slot></gl-button>`,
+    };
+
+    wrapper = mount(DemoComponent);
+
+    expect(wrapper.classes()).toContain('btn-icon');
+  });
 });

package/src/components/base/button/button.vue

@@ -7,6 +7,7 @@ import {
   buttonSizeOptions,
 } from '../../../utils/constants';
 import { logWarning } from '../../../utils/utils';
+import { isSlotEmpty } from '../../../utils/is_slot_empty';
 import { SafeLinkMixin } from '../../mixins/safe_link_mixin';
 import GlIcon from '../icon/icon.vue';
 import GlLoadingIcon from '../loading_icon/loading_icon.vue';
@@ -79,8 +80,7 @@ export default {
       return this.icon !== '';
     },
     hasIconOnly() {
-      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
-      return Object.keys(this.$slots).length === 0 && this.hasIcon;
+      return isSlotEmpty(this, 'default') && this.hasIcon;
     },
     isButtonDisabled() {
       return this.disabled || this.loading;

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

@@ -54,6 +54,7 @@ export default {
     GlLoadingIcon,
   },
   mixins: [ButtonMixin],
+  inheritAttrs: false,
   props: {
     headerText: {
       type: String,
@@ -163,6 +164,16 @@ export default {
       required: false,
       default: null,
     },
+    noFlip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    splitHref: {
+      type: String,
+      required: false,
+      default: '',
+    },
   },
   computed: {
     renderCaret() {
@@ -247,6 +258,8 @@ export default {
     :disabled="disabled || loading"
     :right="right"
     :popper-opts="popperOptions"
+    :no-flip="noFlip"
+    :split-href="splitHref"
     v-on="$listeners"
   >
     <div class="gl-dropdown-inner">

package/src/utils/is_slot_empty.js

@@ -0,0 +1,37 @@
+import Vue from 'vue';
+
+// Fragment will be available only in Vue.js 3
+const { Fragment, Comment } = Vue;
+
+function callIfNeeded(fnOrResult, args) {
+  return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
+}
+
+function isEmpty(vnode) {
+  if (!vnode || (Comment && vnode.type === Comment)) {
+    return true;
+  }
+
+  if (Array.isArray(vnode)) {
+    return vnode.every(isEmpty);
+  }
+
+  if (Fragment && vnode.type === Fragment) {
+    // Vue.js 3 fragment, check children
+    return vnode.children.every(isEmpty);
+  }
+
+  return false;
+}
+
+export function isSlotEmpty(vueInstance, slot, slotArgs) {
+  const isVue3 = Boolean(Fragment);
+
+  const slotContent = isVue3
+    ? // we need to check both $slots and $scopedSlots due to https://github.com/vuejs/core/issues/8869
+      // additionally, in @vue/compat $slot might be a function instead of array of vnodes (sigh)
+      callIfNeeded(vueInstance.$slots[slot] || vueInstance.$scopedSlots[slot], slotArgs)
+    : vueInstance.$scopedSlots[slot]?.(slotArgs);
+
+  return isEmpty(slotContent);
+}

package/src/utils/is_slot_empty.spec.js

@@ -0,0 +1,73 @@
+import { mount } from '@vue/test-utils';
+import { isSlotEmpty } from './is_slot_empty';
+
+describe('is slot empty', () => {
+  const TestComponent = {
+    template: `
+      <div>
+        <slot></slot>
+      </div>
+    `,
+  };
+
+  it('should return true for empty slot', () => {
+    const PassesNothing = {
+      components: { TestComponent },
+      template: '<test-component></test-component>',
+    };
+
+    const wrapper = mount(PassesNothing);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(true);
+  });
+
+  it('should return true for slot with comment', () => {
+    const PassesComment = {
+      components: { TestComponent },
+      template: '<test-component><!-- comment --></test-component>',
+    };
+
+    const wrapper = mount(PassesComment);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(true);
+  });
+
+  it('should return true for slot with multiple comments', () => {
+    const PassesComment = {
+      components: { TestComponent },
+      template: '<test-component><!-- comment --><!-- comment2 --></test-component>',
+    };
+
+    const wrapper = mount(PassesComment);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(true);
+  });
+
+  it('should return false for non-empty slot', () => {
+    const PassesComment = {
+      components: { TestComponent },
+      template: '<test-component>non-empty</test-component>',
+    };
+
+    const wrapper = mount(PassesComment);
+
+    expect(isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default')).toBe(false);
+  });
+
+  it.each([true, false])(
+    'should return %s for conditional slot contents based on slot-scope',
+    (shouldRender) => {
+      const PassesComment = {
+        components: { TestComponent },
+        template:
+          '<test-component><template #default="{ shouldRender }"><span v-if="shouldRender">empty</span></template></test-component>',
+      };
+
+      const wrapper = mount(PassesComment);
+
+      expect(
+        isSlotEmpty(wrapper.findComponent(TestComponent).vm, 'default', { shouldRender })
+      ).toBe(!shouldRender);
+    }
+  );
+});