feat: add dashboard dense mode (#7881)

* feat: add dense mode

* refactor: remove dense property from dashboard and layout

* fix: make dashboard layout extend layout mixin

* chore: add js suffix to import

packages/dashboard/src/vaadin-dashboard-layout-mixin.d.ts

@@ -18,4 +18,9 @@ export declare function DashboardLayoutMixin<T extends Constructor<HTMLElement>>
   base: T,
 ): Constructor<DashboardLayoutMixinClass> & Constructor<ResizeMixinClass> & T;
 
-export declare class DashboardLayoutMixinClass {}
+export declare class DashboardLayoutMixinClass {
+  /**
+   * Whether the dashboard layout is dense.
+   */
+  dense: boolean;
+}

packages/dashboard/src/vaadin-dashboard-layout-mixin.js

@@ -30,6 +30,10 @@ export const DashboardLayoutMixin = (superClass) =>
           display: none !important;
         }
 
+        :host([dense]) #grid {
+          grid-auto-flow: dense;
+        }
+
         #grid {
           box-sizing: border-box;
           padding: 20px;
@@ -91,6 +95,20 @@ export const DashboardLayoutMixin = (superClass) =>
       `;
     }
 
+    static get properties() {
+      return {
+        /**
+         * Whether the dashboard layout is dense.
+         * @type {boolean}
+         */
+        dense: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+      };
+    }
+
     /** @protected */
     ready() {
       super.ready();

packages/dashboard/src/vaadin-dashboard-layout.d.ts

@@ -10,11 +10,12 @@
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { DashboardLayoutMixin } from './vaadin-dashboard-layout-mixin.js';
 
 /**
  * A responsive, grid-based dashboard layout component
  */
-declare class DashboardLayout extends ElementMixin(ThemableMixin(HTMLElement)) {}
+declare class DashboardLayout extends DashboardLayoutMixin(ElementMixin(ThemableMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

packages/dashboard/test/dashboard-layout.test.ts

@@ -553,4 +553,33 @@ describe('dashboard layout', () => {
       });
     });
   });
+
+  describe('dense', () => {
+    beforeEach(async () => {
+      dashboard.appendChild(fixtureSync('<div id="2">Item 2</div>'));
+      childElements = [...dashboard.querySelectorAll('div')];
+      setColspan(childElements[1], 2);
+      dashboard.dense = true;
+      await nextFrame();
+    });
+
+    it('should display the items in dense mode', () => {
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0, 2],
+        [1, 1],
+      ]);
+    });
+
+    it('should retain the order of items', async () => {
+      dashboard.dense = false;
+      await nextFrame();
+      /* prettier-ignore */
+      expectLayout(dashboard, [
+        [0],
+        [1, 1],
+        [2],
+      ]);
+    });
+  });
 });

packages/dashboard/test/typings/dashboard.types.ts

@@ -35,6 +35,7 @@ assertType<ElementMixinClass>(genericDashboard);
 assertType<DashboardLayoutMixinClass>(genericDashboard);
 assertType<Array<DashboardItem | DashboardSectionItem<DashboardItem>> | null | undefined>(genericDashboard.items);
 assertType<boolean>(genericDashboard.editable);
+assertType<boolean>(genericDashboard.dense);
 
 assertType<{
   selectWidget: string;
@@ -112,6 +113,7 @@ narrowedDashboard.addEventListener('dashboard-item-resize-mode-changed', (event)
 /* DashboardLayout */
 const layout = document.createElement('vaadin-dashboard-layout');
 assertType<DashboardLayout>(layout);
+assertType<boolean>(layout.dense);
 
 assertType<ElementMixinClass>(layout);
 assertType<DashboardLayoutMixinClass>(layout);