@gitlab/ui 129.2.0 → 129.3.0

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

@@ -67,8 +67,14 @@ var script = {
       var _this$config$panels;
       return ((_this$config$panels = this.config.panels) === null || _this$config$panels === void 0 ? void 0 : _this$config$panels.length) > 0;
     },
+    dashboardHasTitle() {
+      return this.$scopedSlots.title || Boolean(this.config.title);
+    },
     dashboardHasDescription() {
       return this.$scopedSlots.description || Boolean(this.config.description);
+    },
+    dashboardHasHeader() {
+      return this.$scopedSlots.header || this.$scopedSlots.actions || this.dashboardHasTitle || this.dashboardHasDescription;
     }
   },
   methods: {
@@ -82,7 +88,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',[_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center"},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.dashboardHasHeader)?_c('section',{staticClass:"gl-my-4 gl-flex gl-items-center",attrs:{"data-testid":"header-container"}},[_vm._t("header",function(){return [_c('div',{staticClass:"gl-flex gl-w-full gl-flex-col"},[(_vm.dashboardHasTitle)?_c('div',{staticClass:"gl-flex gl-items-center"},[_vm._t("title",function(){return [_c('h2',{staticClass:"gl-my-0",attrs:{"data-testid":"title"}},[_vm._v(_vm._s(_vm.config.title))])]})],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasDescription)?_c('div',{staticClass:"gl-mt-3 gl-flex"},[_vm._t("description",function(){return [_c('p',{staticClass:"gl-mb-0",attrs:{"data-testid":"description"}},[_vm._v("\n              "+_vm._s(_vm.config.description)+"\n            ")])]})],2):_vm._e()])]}),_vm._v(" "),(_vm.$scopedSlots.actions)?_c('div',{attrs:{"data-testid":"actions-container"}},[_vm._t("actions")],2):_vm._e()],2):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex"},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-grow gl-flex-col"},[_vm._t("alert"),_vm._v(" "),(_vm.$scopedSlots.filters)?_c('section',{staticClass:"gl-flex gl-flex-row gl-flex-wrap gl-gap-5 gl-pb-3 gl-pt-4",attrs:{"data-testid":"filters-container"}},[_vm._t("filters")],2):_vm._e(),_vm._v(" "),(_vm.dashboardHasPanels)?_c('grid-layout',{staticClass:"-gl-mx-3",attrs:{"value":_vm.config,"is-static-grid":_vm.isStaticGrid,"cell-height":_vm.cellHeight,"min-cell-height":_vm.minCellHeight},on:{"input":_vm.emitChanges},scopedSlots:_vm._u([{key:"panel",fn:function(ref){
 var panel = ref.panel;
 return [_vm._t("panel",null,null,{ panel: panel })]}}],null,true)}):_vm._t("empty-state")],2)]),_vm._v(" "),_vm._t("footer")],2)};
 var __vue_staticRenderFns__ = [];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "129.2.0",
+  "version": "129.3.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -101,7 +101,7 @@
     "@cypress/grep": "^4.1.1",
     "@gitlab/fonts": "^1.3.1",
     "@gitlab/svgs": "*",
-    "@jest/test-sequencer": "30.2.0",
+    "@jest/test-sequencer": "30.3.0",
     "@rollup/plugin-commonjs": "^28.0.9",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-replace": "^6.0.3",
@@ -132,7 +132,7 @@
     "autoprefixer": "10.4.27",
     "axe-playwright": "^2.2.2",
     "babel-loader": "^9.2.1",
-    "cypress": "15.11.0",
+    "cypress": "15.12.0",
     "cypress-real-events": "^1.15.0",
     "dompurify": "^3.1.2",
     "emoji-regex": "^10.6.0",

package/src/components/dashboards/dashboard_layout/dashboard_layout.vue

@@ -67,9 +67,20 @@ export default {
     dashboardHasPanels() {
       return this.config.panels?.length > 0;
     },
+    dashboardHasTitle() {
+      return this.$scopedSlots.title || Boolean(this.config.title);
+    },
     dashboardHasDescription() {
       return this.$scopedSlots.description || Boolean(this.config.description);
     },
+    dashboardHasHeader() {
+      return (
+        this.$scopedSlots.header ||
+        this.$scopedSlots.actions ||
+        this.dashboardHasTitle ||
+        this.dashboardHasDescription
+      );
+    },
   },
   methods: {
     emitChanges(newConfig) {
@@ -80,12 +91,16 @@ export default {
 </script>
 <template>
   <div>
-    <section class="gl-my-4 gl-flex gl-items-center">
+    <section
+      v-if="dashboardHasHeader"
+      data-testid="header-container"
+      class="gl-my-4 gl-flex gl-items-center"
+    >
       <!-- @slot Used to render custom dashboard header state. Replaces the default rendering. -->
       <slot name="header">
         <div class="gl-flex gl-w-full gl-flex-col">
           <!-- Dashboard title -->
-          <div class="gl-flex gl-items-center">
+          <div v-if="dashboardHasTitle" class="gl-flex gl-items-center">
             <!-- @slot Used to render custom dashboard titles. Replaces the default rendering. -->
             <slot name="title">
               <h2 data-testid="title" class="gl-my-0">{{ config.title }}</h2>