@gitlab/ui 103.4.1 → 103.5.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [103.5.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.5.0...v103.5.1) (2024-11-26)
+
+
+### Bug Fixes
+
+* **GlIntersperse:** Ignore empty nodes in Vue 3 ([91ec35b](https://gitlab.com/gitlab-org/gitlab-ui/commit/91ec35b664aa9c8a8959247e92dd29c1409e57ea))
+
+# [103.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.4.1...v103.5.0) (2024-11-22)
+
+
+### Features
+
+* **GlAccordion:** add chevron animation ([fee4ef4](https://gitlab.com/gitlab-org/gitlab-ui/commit/fee4ef4dac649ee09ce3f9a9a2610d68fe9a8e88))
+
 ## [103.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.4.0...v103.4.1) (2024-11-22)
 
 

package/dist/components/base/accordion/accordion_item.js

@@ -1,5 +1,6 @@
 import uniqueId from 'lodash/uniqueId';
 import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon';
 import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
@@ -8,7 +9,8 @@ var script = {
   name: 'GlAccordionItem',
   components: {
     BCollapse,
-    GlButton
+    GlButton,
+    GlAnimatedChevronRightDownIcon
   },
   directives: {
     GlCollapseToggle: GlCollapseToggleDirective
@@ -77,9 +79,6 @@ var script = {
     accordion() {
       return this.accordionSetId() || undefined;
     },
-    icon() {
-      return this.isVisible ? 'chevron-down' : 'chevron-right';
-    },
     buttonTitle() {
       return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
     }
@@ -98,7 +97,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('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-flex","icon":_vm.icon}},[_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")])],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-text-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-accordion-item"},[_c(_vm.headerComponent,{tag:"component",staticClass:"gl-accordion-item-header",class:_vm.headerClass},[_c('gl-button',{directives:[{name:"gl-collapse-toggle",rawName:"v-gl-collapse-toggle",value:(_vm.accordionItemId),expression:"accordionItemId"}],attrs:{"variant":"link","button-text-classes":"gl-flex"}},[_c('gl-animated-chevron-right-down-icon',{attrs:{"is-on":_vm.isVisible}}),_vm._v("\n      "+_vm._s(_vm.buttonTitle)+"\n    ")],1)],1),_vm._v(" "),_c('b-collapse',{staticClass:"gl-mt-3 gl-text-base",attrs:{"id":_vm.accordionItemId,"visible":_vm.isVisible,"accordion":_vm.accordion,"data-testid":("accordion-item-collapse-" + _vm.accordionItemId)},model:{value:(_vm.isVisible),callback:function ($$v) {_vm.isVisible=$$v;},expression:"isVisible"}},[_vm._t("default")],2)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/utilities/intersperse/intersperse.js

@@ -1,13 +1,27 @@
+import Vue from 'vue';
 import compose from 'lodash/fp/compose';
 import fill from 'lodash/fp/fill';
 import filter from 'lodash/fp/filter';
 import { insert, intersperse } from '../../../utils/data_utils';
+import { isVnodeEmpty } from '../../../utils/is_slot_empty';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
-const containsWhitespaceOnly = vNode => vNode.text.trim() === '';
-const isTag = vNode => typeof vNode.tag === 'string';
-const filterWhitespaceNodes = filter(vNode => isTag(vNode) || !containsWhitespaceOnly(vNode));
+const filterEmptyNodesVue2 = filter(vNode => typeof vNode.tag === 'string' || vNode.text.trim() !== '');
+const {
+  Fragment
+} = Vue;
+const filterEmptyNodesVue3 = vNode => {
+  return vNode.reduce((acc, node) => {
+    if (Fragment && node.type === Fragment && Array.isArray(node.children)) {
+      acc.push(...node.children);
+    } else {
+      acc.push(node);
+    }
+    return acc;
+  }, []).filter(node => !isVnodeEmpty(node));
+};
+const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
 const insertAfterSecondLastItem = insert(-1);
 const replaceSecondLastItem = fill(-2, -1);
 
@@ -44,7 +58,7 @@ var script = {
       slots,
       data
     } = context;
-    const filterAndSeparate = compose(addLastSeparator(lastSeparator), intersperse(separator), filterWhitespaceNodes);
+    const filterAndSeparate = compose(addLastSeparator(lastSeparator), intersperse(separator), filterEmptyNodes);
     return createElement('span', data, filterAndSeparate(slots().default));
   }
 };

package/dist/utils/is_slot_empty.js

@@ -3,23 +3,28 @@ import Vue from 'vue';
 // Fragment will be available only in Vue.js 3
 const {
   Fragment,
-  Comment
+  Comment,
+  Text
 } = Vue;
 function callIfNeeded(fnOrResult, args) {
   return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
 }
-function isEmpty(vnode) {
+function isVnodeEmpty(vnode) {
   if (!vnode || Comment && vnode.type === Comment) {
     return true;
   }
+  if (Text && vnode.type === Text && !vnode.children.trim()) {
+    // Vue.js 3 text string is located in the children
+    return true;
+  }
   if (Array.isArray(vnode)) {
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.every(isEmpty);
+    return vnode.every(isVnodeEmpty);
   }
   if (Fragment && vnode.type === Fragment) {
     // Vue.js 3 fragment, check children
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.children.every(isEmpty);
+    return vnode.children.every(isVnodeEmpty);
   }
   return false;
 }
@@ -32,7 +37,7 @@ function isSlotEmpty(vueInstance, slot, slotArgs) {
   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);
 
   // eslint-disable-next-line unicorn/no-array-callback-reference
-  return isEmpty(slotContent);
+  return isVnodeEmpty(slotContent);
 }
 
-export { isSlotEmpty };
+export { isSlotEmpty, isVnodeEmpty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "103.4.1",
+  "version": "103.5.1",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -143,16 +143,17 @@
     "axe-core": "^4.2.3",
     "babel-jest": "29.0.1",
     "babel-loader": "^8.0.5",
-    "cypress": "13.15.2",
+    "cypress": "13.16.0",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.0.0",
     "esbuild": "^0.18.0",
     "eslint": "8.57.1",
+    "eslint-formatter-gitlab": "^5.1.0",
     "eslint-import-resolver-jest": "3.0.2",
     "eslint-plugin-cypress": "3.6.0",
-    "eslint-plugin-storybook": "0.10.1",
+    "eslint-plugin-storybook": "0.11.1",
     "gitlab-api-async-iterator": "^1.3.1",
     "glob": "10.3.3",
     "globby": "^11.1.0",
@@ -167,8 +168,8 @@
     "module-alias": "^2.2.2",
     "npm-run-all": "^4.1.5",
     "pikaday": "^1.8.0",
-    "playwright": "^1.48.2",
-    "playwright-core": "^1.48.2",
+    "playwright": "^1.49.0",
+    "playwright-core": "^1.49.0",
     "postcss": "8.4.28",
     "postcss-loader": "^7.0.2",
     "postcss-scss": "4.0.4",

package/src/components/base/accordion/accordion_item.vue

@@ -1,6 +1,7 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
 import { BCollapse } from '../../../vendor/bootstrap-vue/src/components/collapse/collapse';
+import GlAnimatedChevronRightDownIcon from '../animated_icon/animated_chevron_right_down_icon.vue';
 import { GlCollapseToggleDirective } from '../../../directives/collapse_toggle';
 import GlButton from '../button/button.vue';
 
@@ -9,6 +10,7 @@ export default {
   components: {
     BCollapse,
     GlButton,
+    GlAnimatedChevronRightDownIcon,
   },
   directives: {
     GlCollapseToggle: GlCollapseToggleDirective,
@@ -77,9 +79,6 @@ export default {
     accordion() {
       return this.accordionSetId() || undefined;
     },
-    icon() {
-      return this.isVisible ? 'chevron-down' : 'chevron-right';
-    },
     buttonTitle() {
       return this.isVisible && this.titleVisible ? this.titleVisible : this.title;
     },
@@ -102,8 +101,8 @@ export default {
         v-gl-collapse-toggle="accordionItemId"
         variant="link"
         button-text-classes="gl-flex"
-        :icon="icon"
       >
+        <gl-animated-chevron-right-down-icon :is-on="isVisible" />
         {{ buttonTitle }}
       </gl-button>
     </component>

package/src/components/utilities/intersperse/intersperse.vue

@@ -1,15 +1,31 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
+import Vue from 'vue';
 import compose from 'lodash/fp/compose';
 import fill from 'lodash/fp/fill';
 import filter from 'lodash/fp/filter';
-
 import { intersperse, insert } from '../../../utils/data_utils';
+import { isVnodeEmpty } from '../../../utils/is_slot_empty';
+
+const filterEmptyNodesVue2 = filter(
+  (vNode) => typeof vNode.tag === 'string' || vNode.text.trim() !== ''
+);
 
-const containsWhitespaceOnly = (vNode) => vNode.text.trim() === '';
-const isTag = (vNode) => typeof vNode.tag === 'string';
-const filterWhitespaceNodes = filter((vNode) => isTag(vNode) || !containsWhitespaceOnly(vNode));
+const { Fragment } = Vue;
+const filterEmptyNodesVue3 = (vNode) => {
+  return vNode
+    .reduce((acc, node) => {
+      if (Fragment && node.type === Fragment && Array.isArray(node.children)) {
+        acc.push(...node.children);
+      } else {
+        acc.push(node);
+      }
+      return acc;
+    }, [])
+    .filter((node) => !isVnodeEmpty(node));
+};
 
+const filterEmptyNodes = Vue.version.startsWith('3') ? filterEmptyNodesVue3 : filterEmptyNodesVue2;
 const insertAfterSecondLastItem = insert(-1);
 const replaceSecondLastItem = fill(-2, -1);
 
@@ -51,7 +67,7 @@ export default {
     const filterAndSeparate = compose(
       addLastSeparator(lastSeparator),
       intersperse(separator),
-      filterWhitespaceNodes
+      filterEmptyNodes
     );
 
     return createElement('span', data, filterAndSeparate(slots().default));

package/src/index.js

@@ -4,7 +4,6 @@
 // builds. We do this to avoid having the stylesheet included multiple times in Storybook.
 
 // Components
-// ADD COMPONENT EXPORTS - needed for yarn generate:component. Do not remove
 export { default as GlDuoWorkflowPrompt } from './components/experimental/duo/workflow/components/duo_workflow_prompt/duo_workflow_prompt.vue';
 export { default as GlDuoWorkflowPanel } from './components/experimental/duo/workflow/components/duo_workflow_panel/duo_workflow_panel.vue';
 export { default as GlTableLite } from './components/base/table_lite/table_lite.vue';

package/src/scss/components.scss

@@ -2,7 +2,6 @@
 // Import component stylesheets located in components here. i.e.
 // @import '../components/base/dropdown/dropdown'
 //
-// ADD COMPONENT IMPORTS - needed for yarn generate:component. Do not remove
 @import '../components/experimental/duo/chat/duo_chat';
 @import '../components/experimental/duo/chat/components/duo_chat_message/duo_chat_message';
 @import '../components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader';

package/src/utils/is_slot_empty.js

@@ -1,26 +1,31 @@
 import Vue from 'vue';
 
 // Fragment will be available only in Vue.js 3
-const { Fragment, Comment } = Vue;
+const { Fragment, Comment, Text } = Vue;
 
 function callIfNeeded(fnOrResult, args) {
   return fnOrResult instanceof Function ? fnOrResult(args) : fnOrResult;
 }
 
-function isEmpty(vnode) {
+export function isVnodeEmpty(vnode) {
   if (!vnode || (Comment && vnode.type === Comment)) {
     return true;
   }
 
+  if (Text && vnode.type === Text && !vnode.children.trim()) {
+    // Vue.js 3 text string is located in the children
+    return true;
+  }
+
   if (Array.isArray(vnode)) {
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.every(isEmpty);
+    return vnode.every(isVnodeEmpty);
   }
 
   if (Fragment && vnode.type === Fragment) {
     // Vue.js 3 fragment, check children
     // eslint-disable-next-line unicorn/no-array-callback-reference
-    return vnode.children.every(isEmpty);
+    return vnode.children.every(isVnodeEmpty);
   }
 
   return false;
@@ -36,5 +41,5 @@ export function isSlotEmpty(vueInstance, slot, slotArgs) {
     : vueInstance.$scopedSlots[slot]?.(slotArgs);
 
   // eslint-disable-next-line unicorn/no-array-callback-reference
-  return isEmpty(slotContent);
+  return isVnodeEmpty(slotContent);
 }