experiment: add LitElement based version of vaadin-tooltip (#6536)

packages/tooltip/package.json

@@ -21,6 +21,9 @@
   "type": "module",
   "files": [
     "src",
+    "!src/vaadin-lit-tooltip-overlay.js",
+    "!src/vaadin-lit-tooltip.d.ts",
+    "!src/vaadin-lit-tooltip.js",
     "theme",
     "vaadin-*.d.ts",
     "vaadin-*.js",

packages/tooltip/src/vaadin-lit-tooltip-overlay.js

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, LitElement } from 'lit';
+import { defineCustomElement } from '@vaadin/component-base/src/define.js';
+import { DirMixin } from '@vaadin/component-base/src/dir-mixin.js';
+import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { overlayStyles } from '@vaadin/overlay/src/vaadin-overlay-styles.js';
+import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { TooltipOverlayMixin } from './vaadin-tooltip-overlay-mixin.js';
+import { tooltipOverlayStyles } from './vaadin-tooltip-overlay-styles.js';
+
+/**
+ * An element used internally by `<vaadin-tooltip>`. Not intended to be used separately.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes DirMixin
+ * @mixes ThemableMixin
+ * @mixes TooltipOverlayMixin
+ * @private
+ */
+class TooltipOverlay extends TooltipOverlayMixin(DirMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-tooltip-overlay';
+  }
+
+  static get styles() {
+    return [overlayStyles, tooltipOverlayStyles];
+  }
+
+  /** @protected */
+  render() {
+    return html`
+      <div id="backdrop" part="backdrop" hidden></div>
+      <div part="overlay" id="overlay">
+        <div part="content" id="content"><slot></slot></div>
+      </div>
+    `;
+  }
+}
+
+defineCustomElement(TooltipOverlay);

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

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+export * from './vaadin-tooltip.js';

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

@@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright (c) 2022 - 2023 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import './vaadin-lit-tooltip-overlay.js';
+import { css, html, LitElement } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+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 { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
+import { TooltipMixin } from './vaadin-tooltip-mixin.js';
+
+/**
+ * LitElement based version of `<vaadin-tooltip>` web component.
+ *
+ * ## Disclaimer
+ *
+ * This component is an experiment not intended for publishing to npm.
+ * There is no ETA regarding specific Vaadin version where it'll land.
+ * Feel free to try this code in your apps as per Apache 2.0 license.
+ *
+ * @customElement
+ * @extends HTMLElement
+ * @mixes ElementMixin
+ * @mixes ThemePropertyMixin
+ * @mixes TooltipMixin
+ */
+class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(LitElement)))) {
+  static get is() {
+    return 'vaadin-tooltip';
+  }
+
+  static get styles() {
+    return css`
+      :host {
+        display: none;
+      }
+    `;
+  }
+
+  /** @protected */
+  render() {
+    const effectivePosition = this.__effectivePosition;
+
+    return html`
+      <vaadin-tooltip-overlay
+        .renderer="${this._renderer}"
+        .owner="${this}"
+        theme="${ifDefined(this._theme)}"
+        .opened="${this._isConnected && (this.manual ? this.opened : this._autoOpened)}"
+        .positionTarget="${this.target}"
+        .position="${effectivePosition}"
+        ?no-horizontal-overlap="${this.__computeNoHorizontalOverlap(effectivePosition)}"
+        ?no-vertical-overlap="${this.__computeNoVerticalOverlap(effectivePosition)}"
+        .horizontalAlign="${this.__computeHorizontalAlign(effectivePosition)}"
+        .verticalAlign="${this.__computeVerticalAlign(effectivePosition)}"
+        @mouseenter="${this.__onOverlayMouseEnter}"
+        @mouseleave="${this.__onOverlayMouseLeave}"
+        modeless
+      ></vaadin-tooltip-overlay>
+
+      <slot name="sr-label"></slot>
+    `;
+  }
+
+  /** @protected */
+  ready() {
+    super.ready();
+
+    this._overlayElement = this.shadowRoot.querySelector('vaadin-tooltip-overlay');
+  }
+}
+
+defineCustomElement(Tooltip);
+
+export { Tooltip };

packages/tooltip/src/vaadin-tooltip-mixin.js

@@ -297,6 +297,7 @@ export const TooltipMixin = (superClass) =>
         manual: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -306,6 +307,7 @@ export const TooltipMixin = (superClass) =>
         opened: {
           type: Boolean,
           value: false,
+          sync: true,
         },
 
         /**
@@ -358,6 +360,7 @@ export const TooltipMixin = (superClass) =>
         _autoOpened: {
           type: Boolean,
           observer: '__autoOpenedChanged',
+          sync: true,
         },
 
         /**
@@ -386,6 +389,7 @@ export const TooltipMixin = (superClass) =>
         /** @private */
         _isConnected: {
           type: Boolean,
+          sync: true,
         },
 
         /**

packages/tooltip/test/position-styles.js

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-tooltip-overlay',
+  css`
+    [part='overlay'] {
+      width: 50px;
+      border: 1px solid blue;
+    }
+  `,
+);

packages/tooltip/test/tooltip-lit.test.js

@@ -0,0 +1,3 @@
+import './not-animated-styles.js';
+import '../src/vaadin-lit-tooltip.js';
+import './tooltip.common.js';

packages/tooltip/test/tooltip-offset-lit.test.js

@@ -0,0 +1,3 @@
+import './not-animated-styles.js';
+import '../src/vaadin-lit-tooltip.js';
+import './tooltip-offset.common.js';

packages/tooltip/test/tooltip-offset-polymer.test.js

@@ -0,0 +1,3 @@
+import './not-animated-styles.js';
+import '../src/vaadin-tooltip.js';
+import './tooltip-offset.common.js';

packages/tooltip/test/tooltip-offset.test.js → packages/tooltip/test/tooltip-offset.common.js

@@ -1,10 +1,11 @@
 import { expect } from '@esm-bundle/chai';
 import { fire, fixtureSync, nextRender, nextUpdate, oneEvent } from '@vaadin/testing-helpers';
-import { Tooltip } from '../src/vaadin-tooltip.js';
 
 describe('offset', () => {
   let tooltip, target, overlay;
 
+  const Tooltip = customElements.get('vaadin-tooltip');
+
   before(() => {
     Tooltip.setDefaultFocusDelay(0);
     Tooltip.setDefaultHoverDelay(0);
@@ -13,6 +14,7 @@ describe('offset', () => {
 
   beforeEach(async () => {
     tooltip = fixtureSync('<vaadin-tooltip text="tooltip"></vaadin-tooltip>');
+    await nextRender();
     target = fixtureSync('<div style="width: 100px; height: 100px; margin: 100px; outline: 1px solid red;"></div>');
     tooltip.target = target;
     await nextRender();

packages/tooltip/test/tooltip-polymer.test.js

@@ -0,0 +1,3 @@
+import './not-animated-styles.js';
+import '../src/vaadin-tooltip.js';
+import './tooltip.common.js';

packages/tooltip/test/tooltip-position-lit.test.js

@@ -0,0 +1,4 @@
+import './not-animated-styles.js';
+import './position-styles.js';
+import '../src/vaadin-lit-tooltip.js';
+import './tooltip-position.common.js';

packages/tooltip/test/tooltip-position-polymer.test.js

@@ -0,0 +1,4 @@
+import './not-animated-styles.js';
+import './position-styles.js';
+import '../src/vaadin-tooltip.js';
+import './tooltip-position.common.js';

packages/tooltip/test/tooltip-position.test.js → packages/tooltip/test/tooltip-position.common.js

@@ -1,21 +1,11 @@
 import { expect } from '@esm-bundle/chai';
 import { fire, fixtureSync, nextRender, nextUpdate, oneEvent } from '@vaadin/testing-helpers';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { Tooltip } from '../src/vaadin-tooltip.js';
-
-registerStyles(
-  'vaadin-tooltip-overlay',
-  css`
-    [part='overlay'] {
-      width: 50px;
-      border: 1px solid blue;
-    }
-  `,
-);
 
 describe('position', () => {
   let tooltip, target, overlay;
 
+  const Tooltip = customElements.get('vaadin-tooltip');
+
   before(() => {
     Tooltip.setDefaultFocusDelay(0);
     Tooltip.setDefaultHoverDelay(0);
@@ -24,9 +14,9 @@ describe('position', () => {
 
   beforeEach(async () => {
     tooltip = fixtureSync('<vaadin-tooltip text="tooltip"></vaadin-tooltip>');
+    await nextRender();
     target = fixtureSync('<div style="width: 100px; height: 100px; margin: 100px; outline: 1px solid red;"></div>');
     tooltip.target = target;
-    await nextRender();
     overlay = tooltip.shadowRoot.querySelector('vaadin-tooltip-overlay');
   });
 

packages/tooltip/test/tooltip-timers-lit.test.js

@@ -0,0 +1,3 @@
+import './not-animated-styles.js';
+import '../src/vaadin-lit-tooltip.js';
+import './tooltip-timers.common.js';

packages/tooltip/test/tooltip-timers-polymer.test.js

@@ -0,0 +1,3 @@
+import './not-animated-styles.js';
+import '../src/vaadin-tooltip.js';
+import './tooltip-timers.common.js';