@gitlab/ui 79.4.1 → 80.0.1

package/CHANGELOG.md

@@ -1,3 +1,26 @@
+## [80.0.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v80.0.0...v80.0.1) (2024-05-02)
+
+
+### Bug Fixes
+
+* **Dropdown:** Fix disclosure dropdown a11y issues ([34d2c4d](https://gitlab.com/gitlab-org/gitlab-ui/commit/34d2c4d496f66c2c9e9129793e6a0c4189d77ec9))
+
+# [80.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.4.1...v80.0.0) (2024-05-01)
+
+
+### Features
+
+* **CSS:** remove `gl-gap-x/y-*` CSS utility classes ([1ad137a](https://gitlab.com/gitlab-org/gitlab-ui/commit/1ad137a008249acc4983c133e8d3d5136f9b9288))
+* **DesignTokens:** Update to use default for deprecated text.primary ([24c8e3b](https://gitlab.com/gitlab-org/gitlab-ui/commit/24c8e3b8e2f0c753cedf8b37070c8145f8acc37f))
+
+
+### BREAKING CHANGES
+
+* **CSS:** these utility classes were using margin to adjust
+spacing and were causing a conflict with Tailwind utility classes.
+Usage of these utilities should be migrated to Tailwind `gap`
+utilities.
+
 ## [79.4.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.4.0...v79.4.1) (2024-04-25)
 
 

package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js

@@ -218,7 +218,9 @@ var script = {
   computed: {
     disclosureTag() {
       var _this$items;
-      if ((_this$items = this.items) !== null && _this$items !== void 0 && _this$items.length || hasOnlyListItems(this.$scopedSlots)) {
+      if ((_this$items = this.items) !== null && _this$items !== void 0 && _this$items.length ||
+      // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
+      hasOnlyListItems(this.$scopedSlots.default || this.$slots.default)) {
         return 'ul';
       }
       return 'div';

package/dist/components/base/new_dropdowns/disclosure/utils.js

@@ -1,4 +1,6 @@
+import Vue from 'vue';
 import isFunction from 'lodash/isFunction';
+import isString from 'lodash/isString';
 import { DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME } from './constants';
 
 const itemValidator = item => {
@@ -17,23 +19,34 @@ const isValidSlotTagVue2 = vNode => {
   var _vNode$componentOptio;
   return Boolean(vNode) && isListItem(((_vNode$componentOptio = vNode.componentOptions) === null || _vNode$componentOptio === void 0 ? void 0 : _vNode$componentOptio.tag) || vNode.tag);
 };
-const isValidSlotTag = vNode => {
+const isValidSlotTagVue3 = vNode => {
   var _vNode$type;
   return [DISCLOSURE_DROPDOWN_ITEM_NAME, DISCLOSURE_DROPDOWN_GROUP_NAME].includes((_vNode$type = vNode.type) === null || _vNode$type === void 0 ? void 0 : _vNode$type.name) || vNode.type === 'li';
 };
-const hasOnlyListItems = _ref => {
-  let {
-    default: defaultSlot
-  } = _ref;
-  if (!isFunction(defaultSlot)) {
-    return false;
-  }
+const hasOnlyListItemsVue2 = defaultSlot => {
   const nodes = defaultSlot();
   if (!Array.isArray(nodes)) {
     return false;
   }
   const tags = nodes.filter(vNode => vNode.tag);
-  return tags.length && tags.every(tag => isValidSlotTag(tag) || isValidSlotTagVue2(tag));
+  return tags.length && tags.every(tag => isValidSlotTagVue2(tag));
+};
+const hasOnlyListItemsVue3 = defaultSlot => {
+  const nodes = defaultSlot();
+  const fragment = nodes.find(node => Array.isArray(node.children) && node.children.length);
+  const targetNodes = fragment ? fragment.children : nodes;
+  return targetNodes
+  // Remove empty text vNodes
+  .filter(vNode => !isString(vNode.text) || vNode.text.trim().length > 0).every(vNode => isValidSlotTagVue3(vNode));
+};
+const hasOnlyListItems = defaultSlot => {
+  if (!isFunction(defaultSlot)) {
+    return false;
+  }
+  if (Vue.version.startsWith('3')) {
+    return hasOnlyListItemsVue3(defaultSlot);
+  }
+  return hasOnlyListItemsVue2(defaultSlot);
 };
 
 export { hasOnlyListItems, isGroup, isItem, itemsValidator };

package/dist/tokens/css/tokens.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 17:34:16 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 :root {
@@ -14,7 +14,7 @@
   --gl-text-color-default: #434248; /* Used for the default text color. */
   --gl-text-tertiary: #89888d; /* Use text.color.disabled instead */
   --gl-text-secondary: #737278; /* Use text.color.subtle instead */
-  --gl-text-primary: #333238; /* Use text.color.strong instead */
+  --gl-text-primary: #333238; /* Use text.color.default instead */
   --gl-line-height-52: 3.25rem;
   --gl-line-height-44: 2.75rem;
   --gl-line-height-42: 2.625rem;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 17:34:16 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 :root.gl-dark {
@@ -12,7 +12,7 @@
   --gl-text-color-default: #ececef; /* Used for the default text color. */
   --gl-text-tertiary: #737278; /* Use text.color.disabled instead */
   --gl-text-secondary: #89888d; /* Use text.color.subtle instead */
-  --gl-text-primary: #ececef; /* Use text.color.strong instead */
+  --gl-text-primary: #ececef; /* Use text.color.default instead */
   --red-950: #fff4f3;
   --red-900: #fcf1ef;
   --red-800: #fdd4cd;

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 17:34:16 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";
@@ -199,7 +199,7 @@ export const RED_700 = "#fcb5aa";
 export const RED_800 = "#fdd4cd";
 export const RED_900 = "#fcf1ef";
 export const RED_950 = "#fff4f3";
-export const GL_TEXT_PRIMARY = "#ececef"; // Use text.color.strong instead
+export const GL_TEXT_PRIMARY = "#ececef"; // Use text.color.default instead
 export const GL_TEXT_SECONDARY = "#89888d"; // Use text.color.subtle instead
 export const GL_TEXT_TERTIARY = "#737278"; // Use text.color.disabled instead
 export const GL_TEXT_COLOR_DEFAULT = "#ececef"; // Used for the default text color.

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 Apr 2024 17:34:16 GMT
+ * Generated on Thu, 02 May 2024 10:07:41 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";
@@ -233,7 +233,7 @@ export const GL_LINE_HEIGHT_36 = "2.25rem";
 export const GL_LINE_HEIGHT_42 = "2.625rem";
 export const GL_LINE_HEIGHT_44 = "2.75rem";
 export const GL_LINE_HEIGHT_52 = "3.25rem";
-export const GL_TEXT_PRIMARY = "#333238"; // Use text.color.strong instead
+export const GL_TEXT_PRIMARY = "#333238"; // Use text.color.default instead
 export const GL_TEXT_SECONDARY = "#737278"; // Use text.color.subtle instead
 export const GL_TEXT_TERTIARY = "#89888d"; // Use text.color.disabled instead
 export const GL_TEXT_COLOR_DEFAULT = "#434248"; // Used for the default text color.

package/dist/tokens/json/tokens.dark.json

@@ -4800,7 +4800,7 @@
     "primary": {
       "value": "#ececef",
       "$type": "color",
-      "comment": "Use text.color.strong instead",
+      "comment": "Use text.color.default instead",
       "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
@@ -4808,7 +4808,7 @@
       "original": {
         "value": "#ececef",
         "$type": "color",
-        "comment": "Use text.color.strong instead",
+        "comment": "Use text.color.default instead",
         "deprecated": true,
         "themeable": true
       },

package/dist/tokens/json/tokens.json

@@ -4800,7 +4800,7 @@
     "primary": {
       "value": "#333238",
       "$type": "color",
-      "comment": "Use text.color.strong instead",
+      "comment": "Use text.color.default instead",
       "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
@@ -4808,7 +4808,7 @@
       "original": {
         "value": "#333238",
         "$type": "color",
-        "comment": "Use text.color.strong instead",
+        "comment": "Use text.color.default instead",
         "deprecated": true,
         "themeable": true
       },

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

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 25 Apr 2024 17:34:16 GMT
+// Generated on Thu, 02 May 2024 10:07:41 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-link: #63a6e9 !default; // Used for default text links.
@@ -10,7 +10,7 @@ $gl-text-color-subtle: #bfbfc3 !default; // Used for supplemental text that does
 $gl-text-color-default: #ececef !default; // Used for the default text color.
 $gl-text-tertiary: #737278 !default; // Use text.color.disabled instead
 $gl-text-secondary: #89888d !default; // Use text.color.subtle instead
-$gl-text-primary: #ececef !default; // Use text.color.strong instead
+$gl-text-primary: #ececef !default; // Use text.color.default instead
 $red-950: #fff4f3;
 $red-900: #fcf1ef;
 $red-800: #fdd4cd;

package/dist/tokens/scss/_tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 25 Apr 2024 17:34:16 GMT
+// Generated on Thu, 02 May 2024 10:07:41 GMT
 
 $gl-text-color-disabled: #89888d !default; // Used for disabled text.
 $gl-text-color-success: #217645 !default; // Used for text indicating success or validity.
@@ -12,7 +12,7 @@ $gl-text-color-subtle: #626168 !default; // Used for supplemental text that does
 $gl-text-color-default: #434248 !default; // Used for the default text color.
 $gl-text-tertiary: #89888d !default; // Use text.color.disabled instead
 $gl-text-secondary: #737278 !default; // Use text.color.subtle instead
-$gl-text-primary: #333238 !default; // Use text.color.strong instead
+$gl-text-primary: #333238 !default; // Use text.color.default instead
 $gl-line-height-52: 3.25rem;
 $gl-line-height-44: 2.75rem;
 $gl-line-height-42: 2.625rem;