@gitlab/ui 79.2.0 → 79.4.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [79.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.3.0...v79.4.0) (2024-04-25)
+
+
+### Bug Fixes
+
+* **GlBreadcrumb:** Fix containerWidth calc with ResizeObserver ([daa8013](https://gitlab.com/gitlab-org/gitlab-ui/commit/daa80133e1e56383fb857c12cc9384c553a2b389))
+* **GlBreadcrumb:** Fix details in resize calc ([4025e2e](https://gitlab.com/gitlab-org/gitlab-ui/commit/4025e2e0af2a41aa843ccd7c6f1fae25fd2ac170))
+* **GlBreadcrumb:** Watch autoResize prop and react to change ([b4808bf](https://gitlab.com/gitlab-org/gitlab-ui/commit/b4808bfaa59646a6155b394d4c22d4a1c85c6cfb))
+
+
+### Features
+
+* **GlBreadcrumb:** Add boolean prop to disable auto-resize ([0dad528](https://gitlab.com/gitlab-org/gitlab-ui/commit/0dad528cb2774c3c7bd9ccdafb7f9c8b00a88c23))
+
+# [79.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.2.0...v79.3.0) (2024-04-25)
+
+
+### Features
+
+* **DesignTokens:** add new text colors and deprecate pilot text colors ([818f109](https://gitlab.com/gitlab-org/gitlab-ui/commit/818f109b4151319a7d51025a8eae9bcf2a6e37e4))
+
 # [79.2.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v79.1.1...v79.2.0) (2024-04-24)
 
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -50,6 +50,14 @@ var script = {
       type: String,
       required: false,
       default: () => translate('GlBreadcrumb.showMoreLabel', 'Show more breadcrumbs')
+    },
+    /**
+     * Allows to disable auto-resize behavior. Items will then overflow their container instead of being collapsed into a dropdown.
+     */
+    autoResize: {
+      type: Boolean,
+      required: false,
+      default: true
     }
   },
   data() {
@@ -97,17 +105,23 @@ var script = {
     items: {
       handler: 'measureAndMakeBreadcrumbsFit',
       deep: true
+    },
+    autoResize(newValue) {
+      if (newValue) this.enableAutoResize();else this.disableAutoResize();
     }
   },
   created() {
     this.debounceMakeBreadcrumbsFit = debounce(this.makeBreadcrumbsFit, 25);
   },
   mounted() {
-    window.addEventListener('resize', this.debounceMakeBreadcrumbsFit);
-    this.measureAndMakeBreadcrumbsFit();
+    if (this.autoResize) {
+      this.enableAutoResize();
+    } else {
+      this.resizeDone = true;
+    }
   },
   beforeDestroy() {
-    window.removeEventListener('resize', this.debounceMakeBreadcrumbsFit);
+    this.disableAutoResize();
   },
   methods: {
     resetItems() {
@@ -132,9 +146,9 @@ var script = {
       this.resizeDone = false;
       this.resetItems();
       const containerWidth = this.$el.clientWidth;
-      const buttonWidth = 50; // px
+      const buttonWidth = 40; // px
 
-      if (this.totalBreadcrumbsWidth + buttonWidth > containerWidth) {
+      if (this.totalBreadcrumbsWidth > containerWidth) {
         // Not all breadcrumb items fit. Start moving items over to the dropdown.
         const startSlicingAt = 0;
 
@@ -158,6 +172,18 @@ var script = {
     },
     getAriaCurrentAttr(index) {
       return this.isLastItem(index) ? 'page' : false;
+    },
+    enableAutoResize() {
+      this.resizeObserver || (this.resizeObserver = new ResizeObserver(this.debounceMakeBreadcrumbsFit));
+      this.resizeObserver.observe(this.$el);
+      this.measureAndMakeBreadcrumbsFit();
+    },
+    disableAutoResize() {
+      if (this.resizeObserver) {
+        this.resizeObserver.unobserve(this.$el);
+        this.resizeObserver = null;
+      }
+      this.resetItems();
     }
   }
 };

package/dist/components/base/pagination/pagination.js

@@ -358,13 +358,13 @@ const __vue_script__ = script;
 var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.isVisible)?_c('nav',{staticClass:"gl-pagination text-nowrap",attrs:{"aria-label":"Pagination"}},[_c('ul',{staticClass:"pagination",class:_vm.wrapperClasses},[_c('li',{staticClass:"page-item",class:{
         disabled: _vm.prevPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
-      },attrs:{"aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
+      },attrs:{"data-testid":"page-item","aria-hidden":_vm.prevPageIsDisabled}},[_c(_vm.prevPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link prev-page-item gl-display-flex",attrs:{"data-testid":"page-link","aria-label":_vm.prevPageAriaLabel,"href":_vm.prevPageHref},on:{"click":function($event){return _vm.handlePrevious($event, _vm.value - 1)}}},[_vm._t("previous",function(){return [_c('gl-icon',{attrs:{"name":"chevron-left"}}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.prevText))])]},null,{ page: _vm.value - 1, disabled: _vm.prevPageIsDisabled })],2)],1),_vm._v(" "),_vm._l((_vm.visibleItems),function(item){return _c('li',{key:item.key,staticClass:"page-item",class:{
         disabled: item.disabled,
         'flex-fill': _vm.isFillAlign,
-      }},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
+      },attrs:{"data-testid":"page-item"}},[_c(item.component,_vm._g(_vm._b({tag:"component",staticClass:"page-link",attrs:{"data-testid":"page-link","size":"md","aria-disabled":item.disabled}},'component',item.attrs,false),item.listeners),[_vm._t(item.slot,function(){return [_vm._v(_vm._s(item.content))]},null,item.slotData)],2)],1)}),_vm._v(" "),_c('li',{staticClass:"page-item",class:{
         disabled: _vm.nextPageIsDisabled,
         'flex-fill': _vm.isFillAlign,
-      },attrs:{"aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
+      },attrs:{"data-testid":"page-item","aria-hidden":_vm.nextPageIsDisabled}},[_c(_vm.nextPageIsDisabled ? 'span' : 'a',{tag:"component",staticClass:"gl-link page-link next-page-item gl-display-flex",attrs:{"data-testid":"page-link","aria-label":_vm.nextPageAriaLabel,"href":_vm.nextPageHref},on:{"click":function($event){return _vm.handleNext($event, _vm.value + 1)}}},[_vm._t("next",function(){return [_c('span',[_vm._v(_vm._s(_vm.nextText))]),_vm._v(" "),_c('gl-icon',{attrs:{"name":"chevron-right"}})]},null,{ page: _vm.value + 1, disabled: _vm.nextPageIsDisabled })],2)],1)],2)]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/tokens/css/tokens.css

@@ -1,12 +1,20 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 16:36:49 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 GMT
  */
 
 :root {
-  --gl-text-tertiary: #89888d;
-  --gl-text-secondary: #737278;
-  --gl-text-primary: #333238;
+  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
+  --gl-text-color-success: #217645; /* Used for text indicating success or validity. */
+  --gl-text-color-danger: #c91c00; /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
+  --gl-text-color-link: #0b5cad; /* Used for default text links. */
+  --gl-text-color-heading: #1f1e24; /* Used for headings level 1-6. */
+  --gl-text-color-strong: #1f1e24; /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: #626168; /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --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-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,12 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 16:36:49 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 GMT
  */
 
 :root.gl-dark {
-  --gl-text-tertiary: #737278;
-  --gl-text-secondary: #89888d;
-  --gl-text-primary: #ececef;
+  --gl-text-color-disabled: #89888d; /* Used for disabled text. */
+  --gl-text-color-link: #63a6e9; /* Used for default text links. */
+  --gl-text-color-heading: #fff; /* Used for headings level 1-6. */
+  --gl-text-color-strong: #fff; /* Used for text with the highest contrast. */
+  --gl-text-color-subtle: #bfbfc3; /* Used for supplemental text that doesn't need to be as prominent as other text. */
+  --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 */
   --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 Wed, 24 Apr 2024 16:36:49 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#133a03";
@@ -199,6 +199,12 @@ 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";
-export const GL_TEXT_SECONDARY = "#89888d";
-export const GL_TEXT_TERTIARY = "#737278";
+export const GL_TEXT_PRIMARY = "#ececef"; // Use text.color.strong 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.
+export const GL_TEXT_COLOR_SUBTLE = "#bfbfc3"; // Used for supplemental text that doesn't need to be as prominent as other text.
+export const GL_TEXT_COLOR_STRONG = "#fff"; // Used for text with the highest contrast.
+export const GL_TEXT_COLOR_HEADING = "#fff"; // Used for headings level 1-6.
+export const GL_TEXT_COLOR_LINK = "#63a6e9"; // Used for default text links.
+export const GL_TEXT_COLOR_DISABLED = "#89888d"; // Used for disabled text.

package/dist/tokens/js/tokens.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 24 Apr 2024 16:36:49 GMT
+ * Generated on Thu, 25 Apr 2024 15:30:17 GMT
  */
 
 export const DATA_VIZ_GREEN_50 = "#ddfab7";
@@ -233,6 +233,14 @@ 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";
-export const GL_TEXT_SECONDARY = "#737278";
-export const GL_TEXT_TERTIARY = "#89888d";
+export const GL_TEXT_PRIMARY = "#333238"; // Use text.color.strong 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.
+export const GL_TEXT_COLOR_SUBTLE = "#626168"; // Used for supplemental text that doesn't need to be as prominent as other text.
+export const GL_TEXT_COLOR_STRONG = "#1f1e24"; // Used for text with the highest contrast.
+export const GL_TEXT_COLOR_HEADING = "#1f1e24"; // Used for headings level 1-6.
+export const GL_TEXT_COLOR_LINK = "#0b5cad"; // Used for default text links.
+export const GL_TEXT_COLOR_DANGER = "#c91c00"; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
+export const GL_TEXT_COLOR_SUCCESS = "#217645"; // Used for text indicating success or validity.
+export const GL_TEXT_COLOR_DISABLED = "#89888d"; // Used for disabled text.

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

@@ -222,7 +222,15 @@
     "t-white-a-08": "rgba(255, 255, 255, 0.08)",
     "text-primary": "#ececef",
     "text-secondary": "#89888d",
-    "text-tertiary": "#737278"
+    "text-tertiary": "#737278",
+    "text-color-default": "#ececef",
+    "text-color-subtle": "#bfbfc3",
+    "text-color-strong": "#fff",
+    "text-color-heading": "#fff",
+    "text-color-link": "#63a6e9",
+    "text-color-danger": "#c91c00",
+    "text-color-success": "#217645",
+    "text-color-disabled": "#89888d"
   },
   "dimension": {
     "line-height-12": "0.75rem",

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

@@ -4800,12 +4800,16 @@
     "primary": {
       "value": "#ececef",
       "$type": "color",
+      "comment": "Use text.color.strong instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
       "isSource": true,
       "original": {
         "value": "#ececef",
         "$type": "color",
+        "comment": "Use text.color.strong instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_PRIMARY",
@@ -4818,12 +4822,16 @@
     "secondary": {
       "value": "#89888d",
       "$type": "color",
+      "comment": "Use text.color.subtle instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
       "isSource": true,
       "original": {
         "value": "#89888d",
         "$type": "color",
+        "comment": "Use text.color.subtle instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_SECONDARY",
@@ -4836,12 +4844,16 @@
     "tertiary": {
       "value": "#737278",
       "$type": "color",
+      "comment": "Use text.color.disabled instead",
+      "deprecated": true,
       "themeable": true,
       "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
       "isSource": true,
       "original": {
         "value": "#737278",
         "$type": "color",
+        "comment": "Use text.color.disabled instead",
+        "deprecated": true,
         "themeable": true
       },
       "name": "TEXT_TERTIARY",
@@ -4850,6 +4862,176 @@
         "text",
         "tertiary"
       ]
+    },
+    "color": {
+      "default": {
+        "value": "#ececef",
+        "$type": "color",
+        "comment": "Used for the default text color.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#ececef",
+          "$type": "color",
+          "comment": "Used for the default text color.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DEFAULT",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "default"
+        ]
+      },
+      "subtle": {
+        "value": "#bfbfc3",
+        "$type": "color",
+        "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#bfbfc3",
+          "$type": "color",
+          "comment": "Used for supplemental text that doesn't need to be as prominent as other text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUBTLE",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "subtle"
+        ]
+      },
+      "strong": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for text with the highest contrast.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for text with the highest contrast.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_STRONG",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "strong"
+        ]
+      },
+      "heading": {
+        "value": "#fff",
+        "$type": "color",
+        "comment": "Used for headings level 1-6.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#fff",
+          "$type": "color",
+          "comment": "Used for headings level 1-6.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_HEADING",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "heading"
+        ]
+      },
+      "link": {
+        "value": "#63a6e9",
+        "$type": "color",
+        "comment": "Used for default text links.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#63a6e9",
+          "$type": "color",
+          "comment": "Used for default text links.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_LINK",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "link"
+        ]
+      },
+      "danger": {
+        "value": "#c91c00",
+        "$type": "color",
+        "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#c91c00",
+          "$type": "color",
+          "comment": "Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DANGER",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "danger"
+        ]
+      },
+      "success": {
+        "value": "#217645",
+        "$type": "color",
+        "comment": "Used for text indicating success or validity.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.tokens.json",
+        "isSource": false,
+        "original": {
+          "value": "#217645",
+          "$type": "color",
+          "comment": "Used for text indicating success or validity.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_SUCCESS",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "success"
+        ]
+      },
+      "disabled": {
+        "value": "#89888d",
+        "$type": "color",
+        "comment": "Used for disabled text.",
+        "themeable": true,
+        "filePath": "/builds/gitlab-org/gitlab-ui/src/tokens/text.dark.tokens.json",
+        "isSource": true,
+        "original": {
+          "value": "#89888d",
+          "$type": "color",
+          "comment": "Used for disabled text.",
+          "themeable": true
+        },
+        "name": "TEXT_COLOR_DISABLED",
+        "attributes": {},
+        "path": [
+          "text",
+          "color",
+          "disabled"
+        ]
+      }
     }
   }
 }

package/dist/tokens/json/tokens.grouped.json

@@ -222,7 +222,15 @@
     "t-white-a-08": "rgba(255, 255, 255, 0.08)",
     "text-primary": "#333238",
     "text-secondary": "#737278",
-    "text-tertiary": "#89888d"
+    "text-tertiary": "#89888d",
+    "text-color-default": "#434248",
+    "text-color-subtle": "#626168",
+    "text-color-strong": "#1f1e24",
+    "text-color-heading": "#1f1e24",
+    "text-color-link": "#0b5cad",
+    "text-color-danger": "#c91c00",
+    "text-color-success": "#217645",
+    "text-color-disabled": "#89888d"
   },
   "dimension": {
     "line-height-12": "0.75rem",