@gitlab/ui 103.5.0 → 103.6.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [103.6.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v103.5.1...v103.6.0) (2024-11-26)
+
+
+### Features
+
+* **Tailwind:** add status design tokens to Tailwind classes ([b57449f](https://gitlab.com/gitlab-org/gitlab-ui/commit/b57449f522dd4c38c58830cc84735658c12a09be))
+
+## [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)
 
 

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/tokens/tailwind/tokens.cjs

@@ -282,6 +282,32 @@ const brandColors = {
   },
   'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
 };
+const statusBackgroundColors = {
+  'status-neutral':
+    'var(--gl-status-neutral-background-color, var(--gl-color-neutral-100, #dcdcde))',
+  'status-info': 'var(--gl-status-info-background-color, var(--gl-color-blue-100, #cbe2f9))',
+  'status-success': 'var(--gl-status-success-background-color, var(--gl-color-green-100, #c3e6cd))',
+  'status-warning':
+    'var(--gl-status-warning-background-color, var(--gl-color-orange-100, #f5d9a8))',
+  'status-danger': 'var(--gl-status-danger-background-color, var(--gl-color-red-100, #fdd4cd))',
+  'status-brand': 'var(--gl-status-brand-background-color, var(--gl-color-purple-100, #e1d8f9))',
+};
+const statusTextColors = {
+  'status-neutral': 'var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
+  'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #0b5cad))',
+  'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #24663b))',
+  'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #8f4700))',
+  'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #ae1800))',
+  'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5943b6))',
+};
+const statusIconColors = {
+  'status-neutral': 'var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))',
+  'status-info': 'var(--gl-status-info-icon-color, var(--gl-color-blue-500, #1f75cb))',
+  'status-success': 'var(--gl-status-success-icon-color, var(--gl-color-green-500, #108548))',
+  'status-warning': 'var(--gl-status-warning-icon-color, var(--gl-color-orange-500, #ab6100))',
+  'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
+  'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -302,6 +328,7 @@ const colors = {
 const backgroundColor = {
   ...colors,
   ...backgroundColors,
+  ...statusBackgroundColors,
   dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
@@ -317,6 +344,7 @@ const outlineColor = {
 
 const fill = {
   ...colors,
+  ...statusIconColors,
   icon: {
     ...iconColors,
   },
@@ -325,6 +353,7 @@ const fill = {
 const textColor = {
   ...colors,
   ...textColors,
+  ...statusTextColors,
   primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',

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.5.0",
+  "version": "103.6.0",
   "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/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/tokens/build/tailwind/tokens.cjs

@@ -282,6 +282,32 @@ const brandColors = {
   },
   'brand-pink': { '01g': 'var(--gl-color-brand-pink-01g, #ffb9c9)' },
 };
+const statusBackgroundColors = {
+  'status-neutral':
+    'var(--gl-status-neutral-background-color, var(--gl-color-neutral-100, #dcdcde))',
+  'status-info': 'var(--gl-status-info-background-color, var(--gl-color-blue-100, #cbe2f9))',
+  'status-success': 'var(--gl-status-success-background-color, var(--gl-color-green-100, #c3e6cd))',
+  'status-warning':
+    'var(--gl-status-warning-background-color, var(--gl-color-orange-100, #f5d9a8))',
+  'status-danger': 'var(--gl-status-danger-background-color, var(--gl-color-red-100, #fdd4cd))',
+  'status-brand': 'var(--gl-status-brand-background-color, var(--gl-color-purple-100, #e1d8f9))',
+};
+const statusTextColors = {
+  'status-neutral': 'var(--gl-status-neutral-text-color, var(--gl-color-neutral-700, #4c4b51))',
+  'status-info': 'var(--gl-status-info-text-color, var(--gl-color-blue-700, #0b5cad))',
+  'status-success': 'var(--gl-status-success-text-color, var(--gl-color-green-700, #24663b))',
+  'status-warning': 'var(--gl-status-warning-text-color, var(--gl-color-orange-700, #8f4700))',
+  'status-danger': 'var(--gl-status-danger-text-color, var(--gl-color-red-700, #ae1800))',
+  'status-brand': 'var(--gl-status-brand-text-color, var(--gl-color-purple-700, #5943b6))',
+};
+const statusIconColors = {
+  'status-neutral': 'var(--gl-status-neutral-icon-color, var(--gl-color-neutral-500, #737278))',
+  'status-info': 'var(--gl-status-info-icon-color, var(--gl-color-blue-500, #1f75cb))',
+  'status-success': 'var(--gl-status-success-icon-color, var(--gl-color-green-500, #108548))',
+  'status-warning': 'var(--gl-status-warning-icon-color, var(--gl-color-orange-500, #ab6100))',
+  'status-danger': 'var(--gl-status-danger-icon-color, var(--gl-color-red-500, #dd2b0e))',
+  'status-brand': 'var(--gl-status-brand-icon-color, var(--gl-color-purple-500, #7b58cf))',
+};
 
 const colors = {
   inherit: 'inherit',
@@ -302,6 +328,7 @@ const colors = {
 const backgroundColor = {
   ...colors,
   ...backgroundColors,
+  ...statusBackgroundColors,
   dropdown: 'var(--gl-dropdown-background-color, var(--gl-background-color-overlap, #fff))',
 };
 
@@ -317,6 +344,7 @@ const outlineColor = {
 
 const fill = {
   ...colors,
+  ...statusIconColors,
   icon: {
     ...iconColors,
   },
@@ -325,6 +353,7 @@ const fill = {
 const textColor = {
   ...colors,
   ...textColors,
+  ...statusTextColors,
   primary: 'var(--gl-text-primary, #28272d)',
   secondary: 'var(--gl-text-secondary, #737278)',
   tertiary: 'var(--gl-text-tertiary, #89888d)',

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);
 }