feat: add tooltip content-changed event and use it in controller (#10045)

Author: web-padawan

packages/component-base/src/tooltip-controller.js

@@ -14,6 +14,7 @@ export class TooltipController extends SlotController {
     super(host, 'tooltip');
 
     this.setTarget(host);
+    this.__onContentChange = this.__onContentChange.bind(this);
   }
 
   /**
@@ -50,17 +51,21 @@ export class TooltipController extends SlotController {
       tooltipNode.shouldShow = this.shouldShow;
     }
 
-    this.__notifyChange();
+    this.__notifyChange(tooltipNode);
+    tooltipNode.addEventListener('content-changed', this.__onContentChange);
   }
 
   /**
    * Override to notify the host when the tooltip is removed.
    *
+   * @param {Node} tooltipNode
    * @protected
    * @override
    */
-  teardownNode() {
-    this.__notifyChange();
+  teardownNode(tooltipNode) {
+    tooltipNode.removeEventListener('content-changed', this.__onContentChange);
+
+    this.__notifyChange(null);
   }
 
   /**
@@ -159,7 +164,12 @@ export class TooltipController extends SlotController {
   }
 
   /** @private */
-  __notifyChange() {
-    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node: this.node } }));
+  __onContentChange(event) {
+    this.__notifyChange(event.target);
+  }
+
+  /** @private */
+  __notifyChange(node) {
+    this.dispatchEvent(new CustomEvent('tooltip-changed', { detail: { node } }));
   }
 }

packages/component-base/test/tooltip-controller.test.js

@@ -1,5 +1,5 @@
 import { expect } from '@vaadin/chai-plugins';
-import { defineLit, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { defineLit, fire, fixtureSync, nextFrame } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import { PolylitMixin } from '../src/polylit-mixin.js';
 import { TooltipController } from '../src/tooltip-controller.js';
@@ -166,15 +166,15 @@ describe('TooltipController', () => {
       expect(tooltip._position).to.eql('top-start');
     });
 
-    it('should fire tooltip-changed event on the host when the tooltip is added', async () => {
+    it('should fire tooltip-changed event when the tooltip is added', async () => {
       const spy = sinon.spy();
       controller.addEventListener('tooltip-changed', spy);
       host.appendChild(tooltip);
       await nextFrame();
       expect(spy).to.be.calledOnce;
     });
 
-    it('should fire tooltip-changed event on the host when the tooltip is removed', async () => {
+    it('should fire tooltip-changed event when the tooltip is removed', async () => {
       const spy = sinon.spy();
       controller.addEventListener('tooltip-changed', spy);
       host.appendChild(tooltip);
@@ -184,5 +184,32 @@ describe('TooltipController', () => {
       await nextFrame();
       expect(spy).to.be.calledTwice;
     });
+
+    it('should fire tooltip-changed event on tooltip content-changed', async () => {
+      const spy = sinon.spy();
+      controller.addEventListener('tooltip-changed', spy);
+      host.appendChild(tooltip);
+      await nextFrame();
+
+      spy.resetHistory();
+      fire(tooltip, 'content-changed');
+      await nextFrame();
+      expect(spy).to.be.calledOnce;
+    });
+
+    it('should not fire tooltip-changed event on tooltip content-changed after removing', async () => {
+      const spy = sinon.spy();
+      controller.addEventListener('tooltip-changed', spy);
+      host.appendChild(tooltip);
+      await nextFrame();
+
+      host.removeChild(tooltip);
+      await nextFrame();
+
+      spy.resetHistory();
+      fire(tooltip, 'content-changed');
+      await nextFrame();
+      expect(spy).to.be.not.called;
+    });
   });
 });

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

@@ -669,6 +669,7 @@ export const TooltipMixin = (superClass) =>
     /** @private */
     __updateContent() {
       this.__contentNode.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
+      this.dispatchEvent(new CustomEvent('content-changed', { detail: { content: this.__contentNode.textContent } }));
     }
 
     /** @private */
@@ -692,4 +693,10 @@ export const TooltipMixin = (superClass) =>
         });
       }
     }
+
+    /**
+     * Fired when the tooltip text content is changed.
+     *
+     * @event content-changed
+     */
   };

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

@@ -9,6 +9,17 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
 
 export { TooltipPosition } from './vaadin-tooltip-mixin.js';
 
+/**
+ * Fired when the tooltip text content is changed.
+ */
+export type TooltipContentChangedEvent = CustomEvent<{ content: string }>;
+
+export interface TooltipCustomEventMap {
+  'content-changed': TooltipContentChangedEvent;
+}
+
+export interface TooltipEventMap extends HTMLElementEventMap, TooltipCustomEventMap {}
+
 /**
  * `<vaadin-tooltip>` is a Web Component for creating tooltips.
  *
@@ -44,6 +55,8 @@ export { TooltipPosition } from './vaadin-tooltip-mixin.js';
  * `--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
+ *
+ * @fires {CustomEvent} content-changed - Fired when the tooltip text content is changed.
  */
 declare class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(HTMLElement))) {
   /**
@@ -63,6 +76,18 @@ declare class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(HTMLE
    * except for those that have hover delay configured using property.
    */
   static setDefaultHoverDelay(hoverDelay: number): void;
+
+  addEventListener<K extends keyof TooltipEventMap>(
+    type: K,
+    listener: (this: Tooltip, ev: TooltipEventMap[K]) => void,
+    options?: AddEventListenerOptions | boolean,
+  ): void;
+
+  removeEventListener<K extends keyof TooltipEventMap>(
+    type: K,
+    listener: (this: Tooltip, ev: TooltipEventMap[K]) => void,
+    options?: EventListenerOptions | boolean,
+  ): void;
 }
 
 declare global {

packages/tooltip/src/vaadin-tooltip.js

@@ -48,6 +48,8 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * @fires {CustomEvent} content-changed - Fired when the tooltip text content is changed.
+ *
  * @customElement
  * @extends HTMLElement
  * @mixes ElementMixin

packages/tooltip/test/tooltip.test.js

@@ -103,6 +103,23 @@ describe('vaadin-tooltip', () => {
       await nextUpdate(tooltip);
       expect(overlay.hasAttribute('hidden')).to.be.true;
     });
+
+    it('should fire content-changed event when text changes', async () => {
+      const spy = sinon.spy();
+      tooltip.addEventListener('content-changed', spy);
+
+      tooltip.text = 'Foo';
+      await nextUpdate(tooltip);
+      expect(spy.calledOnce).to.be.true;
+      expect(spy.firstCall.args[0].detail).to.deep.equal({ content: 'Foo' });
+
+      spy.resetHistory();
+
+      tooltip.text = null;
+      await nextUpdate(tooltip);
+      expect(spy.calledOnce).to.be.true;
+      expect(spy.firstCall.args[0].detail).to.deep.equal({ content: '' });
+    });
   });
 
   describe('generator', () => {
@@ -147,6 +164,41 @@ describe('vaadin-tooltip', () => {
       await nextUpdate(tooltip);
       expect(overlay.hasAttribute('hidden')).to.be.true;
     });
+
+    it('should fire content-changed event when generator changes', async () => {
+      const spy = sinon.spy();
+      tooltip.addEventListener('content-changed', spy);
+
+      tooltip.generator = () => 'Foo';
+      await nextUpdate(tooltip);
+      expect(spy.calledOnce).to.be.true;
+      expect(spy.firstCall.args[0].detail).to.deep.equal({ content: 'Foo' });
+
+      spy.resetHistory();
+
+      tooltip.generator = () => '';
+      await nextUpdate(tooltip);
+      expect(spy.calledOnce).to.be.true;
+      expect(spy.firstCall.args[0].detail).to.deep.equal({ content: '' });
+    });
+
+    it('should fire content-changed event when context changes', async () => {
+      const spy = sinon.spy();
+      tooltip.addEventListener('content-changed', spy);
+
+      tooltip.context = { text: 'Foo' };
+      tooltip.generator = (context) => context.text;
+      await nextUpdate(tooltip);
+      expect(spy.calledOnce).to.be.true;
+      expect(spy.firstCall.args[0].detail).to.deep.equal({ content: 'Foo' });
+
+      spy.resetHistory();
+
+      tooltip.context = { text: 'Bar' };
+      await nextUpdate(tooltip);
+      expect(spy.calledOnce).to.be.true;
+      expect(spy.firstCall.args[0].detail).to.deep.equal({ content: 'Bar' });
+    });
   });
 
   describe('target', () => {

packages/tooltip/test/typings/tooltip.types.ts

@@ -1,7 +1,7 @@
 import '../../vaadin-tooltip.js';
 import type { ElementMixinClass } from '@vaadin/component-base/src/element-mixin.js';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import { Tooltip, type TooltipPosition } from '../../vaadin-tooltip.js';
+import { Tooltip, type TooltipContentChangedEvent, type TooltipPosition } from '../../vaadin-tooltip.js';
 
 const assertType = <TExpected>(actual: TExpected) => actual;
 
@@ -29,3 +29,9 @@ assertType<(target: HTMLElement, context?: Record<string, unknown>) => boolean>(
 assertType<(delay: number) => void>(Tooltip.setDefaultFocusDelay);
 assertType<(delay: number) => void>(Tooltip.setDefaultHideDelay);
 assertType<(delay: number) => void>(Tooltip.setDefaultHoverDelay);
+
+// Events
+tooltip.addEventListener('content-changed', (event) => {
+  assertType<TooltipContentChangedEvent>(event);
+  assertType<string>(event.detail.content);
+});