experiment: add LitElement based version of vaadin-board (#8489)

packages/board/package.json

@@ -41,7 +41,8 @@
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/a11y-base": "24.7.0-alpha4",
-    "@vaadin/component-base": "24.7.0-alpha4"
+    "@vaadin/component-base": "24.7.0-alpha4",
+    "lit": "^3.0.0"
   },
   "devDependencies": {
     "@vaadin/chai-plugins": "24.7.0-alpha4",

packages/board/src/vaadin-lit-board-row.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+export * from './vaadin-board-row.js';

packages/board/src/vaadin-lit-board-row.js

@@ -0,0 +1,60 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { BoardRowMixin } from './vaadin-board-row-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-board-row>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class BoardRow extends BoardRowMixin(ElementMixin(PolylitMixin(LitElement))) {
+  static get is() {
+    return 'vaadin-board-row';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: stretch;
+        --small-size: var(--vaadin-board-width-small, 600px);
+        --medium-size: var(--vaadin-board-width-medium, 960px);
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+
+      :host ::slotted(*) {
+        box-sizing: border-box;
+        flex-grow: 1;
+        overflow: hidden;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot id="insertionPoint"></slot>`;
+  }
+}
+
+defineCustomElement(BoardRow);
+
+export { BoardRow };

packages/board/src/vaadin-lit-board.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+export * from './vaadin-board.js';

packages/board/src/vaadin-lit-board.js

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright (c) 2000 - 2025 Vaadin Ltd.
+ *
+ * This program is available under Vaadin Commercial License and Service Terms.
+ *
+ *
+ * See https://vaadin.com/commercial-license-and-service-terms for the full
+ * license.
+ */
+import './vaadin-lit-board-row.js';
+import { css, html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { BoardRow } from './vaadin-lit-board-row.js';
+
+/**
+ * LitElement based version of `<vaadin-board>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment and not yet a part of Vaadin platform.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ */
+class Board extends ElementMixin(PolylitMixin(LitElement)) {
+  static get is() {
+    return 'vaadin-board';
+  }
+
+  static get cvdlName() {
+    return 'vaadin-board';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: block;
+      }
+
+      :host([hidden]) {
+        display: none !important;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  /**
+   * Redraws the board and all rows inside it, if necessary.
+   *
+   * In most cases, board will redraw itself if your reconfigure it. If you dynamically change
+   * breakpoints `--vaadin-board-width-small` or `--vaadin-board-width-medium`,
+   * then you need to call this method.
+   */
+  redraw() {
+    [...this.querySelectorAll('*')].filter((node) => node instanceof BoardRow).forEach((row) => row.redraw());
+  }
+}
+
+defineCustomElement(Board);
+
+export { Board };

packages/board/test/basic-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-board.js';
+import './basic.common.js';

packages/board/test/basic-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-board.js';
+import './basic.common.js';

packages/board/test/basic.test.js → packages/board/test/basic.common.js

@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync } from '@vaadin/testing-helpers';
-import '../vaadin-board.js';
 
 describe('vaadin-board', () => {
   let board, tagName;

packages/board/test/board-cols-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-board-row.js';
+import './board-cols.common.js';

packages/board/test/board-cols-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-board-row.js';
+import './board-cols.common.js';

packages/board/test/board-cols.test.js → packages/board/test/board-cols.common.js

@@ -1,7 +1,6 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
-import '../vaadin-board-row.js';
 
 describe('board-cols', () => {
   let row;

packages/board/test/board-row-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-board-row.js';
+import './board-row.common.js';

packages/board/test/board-row-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-board-row.js';
+import './board-row.common.js';

packages/board/test/board-row.test.js → packages/board/test/board-row.common.js

@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync } from '@vaadin/testing-helpers';
-import '../vaadin-board.js';
 
 describe('vaadin-board-row', () => {
   let row;

packages/board/test/light-dom-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-board-row.js';
+import './light-dom.common.js';

packages/board/test/light-dom-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-board-row.js';
+import './light-dom.common.js';

packages/board/test/light-dom.test.js → packages/board/test/light-dom.common.js

@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
-import '../vaadin-board-row.js';
 
 describe('light DOM children', () => {
   let row;

packages/board/test/redraw-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-board.js';
+import './redraw.common.js';

packages/board/test/redraw-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-board.js';
+import './redraw.common.js';

packages/board/test/redraw.test.js → packages/board/test/redraw.common.js

@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { aTimeout, fixtureSync, nextResize } from '@vaadin/testing-helpers';
-import '../vaadin-board.js';
 import { allResized } from './helpers.js';
 
 describe('redraw', () => {

packages/board/test/size-lit.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-lit-board.js';
+import './size.common.js';

packages/board/test/size-polymer.test.js

@@ -0,0 +1,2 @@
+import '../vaadin-board.js';
+import './size.common.js';

packages/board/test/size.test.js → packages/board/test/size.common.js

@@ -1,6 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync } from '@vaadin/testing-helpers';
-import '../vaadin-board.js';
 import { allResized } from './helpers.js';
 
 describe('size', () => {

packages/board/theme/lumo/vaadin-lit-board-row.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-board-row.js';

packages/board/theme/lumo/vaadin-lit-board.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-board-row.js';
+import '../../src/vaadin-lit-board.js';

packages/board/theme/material/vaadin-lit-board-row.js

@@ -0,0 +1 @@
+import '../../src/vaadin-lit-board-row.js';

packages/board/theme/material/vaadin-lit-board.js

@@ -0,0 +1,2 @@
+import './vaadin-lit-board-row.js';
+import '../../src/vaadin-lit-board.js';

packages/board/vaadin-lit-board-row.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-board-row.js';

packages/board/vaadin-lit-board-row.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-board-row.js';
+export * from './src/vaadin-lit-board-row.js';

packages/board/vaadin-lit-board.d.ts

@@ -0,0 +1 @@
+export * from './src/vaadin-board.js';

packages/board/vaadin-lit-board.js

@@ -0,0 +1,2 @@
+import './theme/lumo/vaadin-lit-board.js';
+export * from './src/vaadin-lit-board.js';