@gitlab/ui 126.3.0 → 126.3.1

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

@@ -35,6 +35,33 @@ export default {
       required: false,
       default: true,
     },
+    /**
+     * Adjusts the cell height of the grid. Setting this too high can leave unwanted whitespace
+     * between grid panels. Reduce the number to allow for a more compact grid.
+     * For more information, see:
+     * https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/3051
+     */
+    cellHeight: {
+      type: Number,
+      required: false,
+
+      /* Magic number:
+       * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
+       * This means text/content with our spacing scale can fit up to 49px without scrolling.
+       */
+      default: 137,
+      validator: (value) => value > 0,
+    },
+    /**
+     * Sets a default minimum height for grid panels. This can still be overriden on a per-panel
+     * basis by setting `value.panels[].gridAttributes.minHeight`
+     */
+    minCellHeight: {
+      type: Number,
+      required: false,
+      default: 1,
+      validator: (value) => value > 0,
+    },
   },
   data() {
     return {
@@ -143,15 +170,11 @@ export default {
           margin: '8px',
           // CSS Selector for finding the drag handle element
           handle: '.grid-stack-item-handle',
-          /* Magic number:
-           * After allowing for padding, and the panel title row, this leaves us with minimum 48px height for the cell content.
-           * This means text/content with our spacing scale can fit up to 49px without scrolling.
-           */
-          cellHeight: '137px',
           // Setting 1 in minRow prevents the grid collapsing when all panels are removed
           minRow: 1,
           // Define the number of columns for anything below a set width, defaults to fill the available space
           columnOpts: { breakpoints: [{ w: breakpoints.md, c: 1 }] },
+          cellHeight: this.cellHeight,
           alwaysShowResizeHandle: true,
           animate: true,
           float: true,
@@ -194,7 +217,7 @@ export default {
         y: yPos,
         w: width,
         h: height,
-        minH: minHeight,
+        minH: minHeight || this.minCellHeight,
         minW: minWidth,
         maxH: maxHeight,
         maxW: maxWidth,