@gitlab/ui 126.4.0 → 127.0.0

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

@@ -36,7 +36,7 @@ var script = {
       validator: items => {
         return items.every(item => {
           const keys = Object.keys(item);
-          return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
+          return keys.includes('text') && item.text && (keys.includes('href') || keys.includes('to'));
         });
       }
     },
@@ -230,12 +230,6 @@ var script = {
         this.resizeObserver = null;
       }
       this.resetItems();
-    },
-    hideItemClass(item) {
-      // TODO once https://gitlab.com/gitlab-org/gitlab/-/issues/520089 is addressed:
-      // - Remove this hiding of empty breadcrumbs.
-      // - Tighten `items` validator to require non-empty `text`.
-      return !item.text ? 'gl-hidden' : '';
     }
   }
 };
@@ -244,7 +238,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('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:[_vm.hideItemClass(item), _vm.itemClass],attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({ref:"clipboardButton",staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('nav',{staticClass:"gl-breadcrumbs",style:(_vm.breadcrumbStyle),attrs:{"aria-label":_vm.ariaLabel}},[_c('ol',_vm._g(_vm._b({staticClass:"gl-breadcrumb-list breadcrumb"},'ol',_vm.$attrs,false),_vm.$listeners),[(_vm.hasCollapsible || !_vm.resizeDone)?_c('li',{ref:"dropdown",class:("gl-breadcrumb-item gl-breadcrumb-item-" + _vm.size)},[_c('gl-disclosure-dropdown',{attrs:{"items":_vm.overflowingItems,"toggle-text":_vm.showMoreLabel,"fluid-width":"","text-sr-only":"","no-caret":"","icon":"ellipsis_h","size":_vm.dropdownSize}})],1):_vm._e(),_vm._v(" "),_vm._l((_vm.fittingItems),function(item,index){return _c('gl-breadcrumb-item',{key:index,ref:"breadcrumbs",refInFor:true,class:_vm.itemClass,attrs:{"text":item.text,"href":item.href,"to":item.to,"size":_vm.size,"aria-current":_vm.getAriaCurrentAttr(index)},scopedSlots:_vm._u([{key:"default",fn:function(){return [(item.avatarPath)?_c('gl-avatar',{staticClass:"gl-breadcrumb-avatar-tile gl-border gl-mr-2 !gl-rounded-default",attrs:{"src":item.avatarPath,"size":_vm.avatarSize,"aria-hidden":"true","shape":"rect","data-testid":"avatar"}}):_vm._e(),_c('span',{staticClass:"gl-align-middle"},[_vm._v(_vm._s(item.text))])]},proxy:true}],null,true)})}),_vm._v(" "),(_vm.showClipboardButton)?_c('li',{staticClass:"gl-breadcrumb-clipboard-button"},[_c('clipboard-button',_vm._b({ref:"clipboardButton",staticClass:"gl-ml-2",attrs:{"data-testid":"copy-to-clipboard-button","text":_vm.clipboardButtonText,"size":_vm.dropdownSize}},'clipboard-button',_vm.clipboardTooltipText ? { title: _vm.clipboardTooltipText } : {},false))],1):_vm._e()],2)])};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/base/modal/modal.js

@@ -39,6 +39,14 @@ var script = {
       required: false,
       default: 'h4'
     },
+    /**
+     * HTML tag to use for the modal header. Default is 'div' for accessibility reasons.
+     */
+    headerTag: {
+      type: String,
+      required: false,
+      default: 'div'
+    },
     /**
      * Title text to display in the modal header.
      */
@@ -55,6 +63,14 @@ var script = {
       required: false,
       default: ''
     },
+    /**
+     * HTML tag to use for the modal footer. Default is 'div' for accessibility reasons.
+     */
+    footerTag: {
+      type: String,
+      required: false,
+      default: 'div'
+    },
     /**
      * Configuration object for the primary action button. Should contain 'text' and optionally 'attributes' properties.
      */
@@ -210,7 +226,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-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",function(){return [_c('h2',{staticClass:"modal-title"},[_vm._t("modal-title",function(){return [_vm._v(_vm._s(_vm.title))]})],2)]}),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",function(){return [(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n        "+_vm._s(_vm.actionCancel.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e()]})]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-modal',_vm._g(_vm._b({ref:"modal",attrs:{"id":_vm.modalId,"title-tag":_vm.titleTag,"size":_vm.size,"visible":_vm.visible,"aria-label":_vm.ariaLabel || _vm.title,"header-tag":_vm.headerTag,"footer-tag":_vm.footerTag,"lazy":"","modal-class":['gl-modal', _vm.modalClass]},on:{"shown":_vm.setFocus,"ok":_vm.primary,"cancel":_vm.canceled,"change":function($event){return _vm.$emit('change', $event)}},scopedSlots:_vm._u([{key:"default",fn:function(){return [_vm._t("default")]},proxy:true},{key:"modal-header",fn:function(){return [_vm._t("modal-header",function(){return [_c('h2',{staticClass:"modal-title"},[_vm._t("modal-title",function(){return [_vm._v(_vm._s(_vm.title))]})],2)]}),_vm._v(" "),_c('close-button',{ref:"close-button",attrs:{"label":_vm.dismissLabel},on:{"click":_vm.close}})]},proxy:true},(_vm.shouldRenderModalOk)?{key:"modal-ok",fn:function(){return [_vm._t("modal-ok")]},proxy:true}:null,(_vm.shouldRenderModalCancel)?{key:"modal-cancel",fn:function(){return [_vm._t("modal-cancel")]},proxy:true}:null,(_vm.shouldRenderModalFooter)?{key:"modal-footer",fn:function(){return [_vm._t("modal-footer",function(){return [(_vm.actionCancel)?_c('gl-button',_vm._b({staticClass:"js-modal-action-cancel",on:{"click":_vm.cancel}},'gl-button',_vm.buttonBinding(_vm.actionCancel, 'actionCancel'),false),[_vm._v("\n        "+_vm._s(_vm.actionCancel.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionSecondary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-secondary",on:{"click":_vm.secondary}},'gl-button',_vm.buttonBinding(_vm.actionSecondary, 'actionSecondary'),false),[_vm._v("\n        "+_vm._s(_vm.actionSecondary.text)+"\n      ")]):_vm._e(),_vm._v(" "),(_vm.actionPrimary)?_c('gl-button',_vm._b({staticClass:"js-modal-action-primary",on:{"click":_vm.ok}},'gl-button',_vm.buttonBinding(_vm.actionPrimary, 'actionPrimary'),false),[_vm._v("\n        "+_vm._s(_vm.actionPrimary.text)+"\n      ")]):_vm._e()]})]},proxy:true}:null],null,true)},'b-modal',_vm.$attrs,false),_vm.$listeners))};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/dashboards/dashboard_layout/validators.js

@@ -2,6 +2,11 @@ const dashboardConfigValidator = config => {
   if (config.panels) {
     if (!Array.isArray(config.panels)) return false;
     if (!config.panels.every(panel => panel.id && panel.gridAttributes)) return false;
+
+    // Validate that all panel IDs are unique
+    const panelIds = config.panels.map(panel => panel.id);
+    const uniquePanelIds = new Set(panelIds);
+    if (panelIds.length !== uniquePanelIds.size) return false;
   }
   return true;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "126.4.0",
+  "version": "127.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -131,7 +131,7 @@
     "autoprefixer": "10.4.23",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.8.1",
+    "cypress": "15.8.2",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",
@@ -165,7 +165,7 @@
     "start-server-and-test": "^2.1.3",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.1.1",
+    "style-dictionary": "^5.1.3",
     "style-loader": "^4",
     "tailwindcss": "3.4.19",
     "vue": "2.7.16",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -32,7 +32,9 @@ export default {
       validator: (items) => {
         return items.every((item) => {
           const keys = Object.keys(item);
-          return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
+          return (
+            keys.includes('text') && item.text && (keys.includes('href') || keys.includes('to'))
+          );
         });
       },
     },
@@ -233,12 +235,6 @@ export default {
       }
       this.resetItems();
     },
-    hideItemClass(item) {
-      // TODO once https://gitlab.com/gitlab-org/gitlab/-/issues/520089 is addressed:
-      // - Remove this hiding of empty breadcrumbs.
-      // - Tighten `items` validator to require non-empty `text`.
-      return !item.text ? 'gl-hidden' : '';
-    },
   },
 };
 </script>
@@ -270,7 +266,7 @@ export default {
         :to="item.to"
         :size="size"
         :aria-current="getAriaCurrentAttr(index)"
-        :class="[hideItemClass(item), itemClass]"
+        :class="itemClass"
         ><template #default>
           <gl-avatar
             v-if="item.avatarPath"

package/src/components/base/modal/modal.vue

@@ -44,6 +44,14 @@ export default {
       required: false,
       default: 'h4',
     },
+    /**
+     * HTML tag to use for the modal header. Default is 'div' for accessibility reasons.
+     */
+    headerTag: {
+      type: String,
+      required: false,
+      default: 'div',
+    },
     /**
      * Title text to display in the modal header.
      */
@@ -60,6 +68,14 @@ export default {
       required: false,
       default: '',
     },
+    /**
+     * HTML tag to use for the modal footer. Default is 'div' for accessibility reasons.
+     */
+    footerTag: {
+      type: String,
+      required: false,
+      default: 'div',
+    },
     /**
      * Configuration object for the primary action button. Should contain 'text' and optionally 'attributes' properties.
      */
@@ -228,6 +244,8 @@ export default {
     :size="size"
     :visible="visible"
     :aria-label="ariaLabel || title"
+    :header-tag="headerTag"
+    :footer-tag="footerTag"
     v-bind="$attrs"
     lazy
     :modal-class="['gl-modal', modalClass]"

package/src/components/dashboards/dashboard_layout/validators.js

@@ -2,6 +2,11 @@ export const dashboardConfigValidator = (config) => {
   if (config.panels) {
     if (!Array.isArray(config.panels)) return false;
     if (!config.panels.every((panel) => panel.id && panel.gridAttributes)) return false;
+
+    // Validate that all panel IDs are unique
+    const panelIds = config.panels.map((panel) => panel.id);
+    const uniquePanelIds = new Set(panelIds);
+    if (panelIds.length !== uniquePanelIds.size) return false;
   }
 
   return true;