@vaadin/tooltip 25.0.0-alpha20 → 25.0.0-alpha21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha20",
+  "version": "25.0.0-alpha21",
   "publishConfig": {
     "access": "public"
   },
@@ -34,23 +34,24 @@
   ],
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
-    "@vaadin/a11y-base": "25.0.0-alpha20",
-    "@vaadin/component-base": "25.0.0-alpha20",
-    "@vaadin/overlay": "25.0.0-alpha20",
-    "@vaadin/popover": "25.0.0-alpha20",
-    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha20",
+    "@vaadin/a11y-base": "25.0.0-alpha21",
+    "@vaadin/component-base": "25.0.0-alpha21",
+    "@vaadin/markdown": "25.0.0-alpha21",
+    "@vaadin/overlay": "25.0.0-alpha21",
+    "@vaadin/popover": "25.0.0-alpha21",
+    "@vaadin/vaadin-themable-mixin": "25.0.0-alpha21",
     "lit": "^3.0.0"
   },
   "devDependencies": {
-    "@vaadin/chai-plugins": "25.0.0-alpha20",
-    "@vaadin/test-runner-commands": "25.0.0-alpha20",
+    "@vaadin/chai-plugins": "25.0.0-alpha21",
+    "@vaadin/test-runner-commands": "25.0.0-alpha21",
     "@vaadin/testing-helpers": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha20",
+    "@vaadin/vaadin-lumo-styles": "25.0.0-alpha21",
     "sinon": "^21.0.0"
   },
   "web-types": [
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "c948aae591a30b432f3784000d4677674cae56e0"
+  "gitHead": "8fb9e9710c01449edf623a1aaac4655cdc11a933"
 }

package/src/styles/vaadin-tooltip-overlay-base-styles.js

@@ -25,10 +25,10 @@ export const tooltipOverlayStyles = css`
     box-shadow:
       0 0 0 var(--vaadin-tooltip-border-width, 1px)
         var(--vaadin-tooltip-border-color, var(--vaadin-border-color-secondary)),
-      var(--vaadin-tooltip-box-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
+      var(--vaadin-tooltip-shadow, 0 3px 8px -1px rgba(0, 0, 0, 0.2));
   }
 
-  [part='content'] {
+  :host(:not([markdown])) [part='content'] {
     white-space: pre-wrap;
   }
 

package/src/vaadin-tooltip-mixin.d.ts

@@ -87,4 +87,13 @@ export declare class TooltipMixinClass {
    * String used as a tooltip content.
    */
   text: string | null | undefined;
+
+  /**
+   * When enabled, the tooltip text is rendered as Markdown.
+   *
+   * **Note:** Using Markdown is discouraged if accessibility of the tooltip
+   * content is essential, as semantics of the rendered HTML content
+   * (headers, lists, ...) will not be conveyed to assistive technologies.
+   */
+  markdown: boolean;
 }

package/src/vaadin-tooltip-mixin.js

@@ -328,6 +328,19 @@ export const TooltipMixin = (superClass) =>
           type: String,
         },
 
+        /**
+         * When enabled, the tooltip text is rendered as Markdown.
+         *
+         * **Note:** Using Markdown is discouraged if accessibility of the tooltip
+         * content is essential, as semantics of the rendered HTML content
+         * (headers, lists, ...) will not be conveyed to assistive technologies.
+         */
+        markdown: {
+          type: Boolean,
+          value: false,
+          reflectToAttribute: true,
+        },
+
         /**
          * Element used to link with the `aria-describedby`
          * attribute. When not set, defaults to `target`.
@@ -447,9 +460,8 @@ export const TooltipMixin = (superClass) =>
     updated(props) {
       super.updated(props);
 
-      if (props.has('text') || props.has('generator') || props.has('context')) {
+      if (props.has('text') || props.has('generator') || props.has('context') || props.has('markdown')) {
         this.__updateContent();
-        this.$.overlay.toggleAttribute('hidden', this.__contentNode.textContent.trim() === '');
       }
     }
 
@@ -611,6 +623,20 @@ export const TooltipMixin = (superClass) =>
       }
     }
 
+    /** @protected */
+    __onOverlayMouseDown(event) {
+      // Prevent mousedown listeners from being called when
+      // the tooltip is slotted into the target element
+      event.stopPropagation();
+    }
+
+    /** @protected */
+    __onOverlayClick(event) {
+      // Prevent click listeners from being called when
+      // the tooltip is slotted into the target element
+      event.stopPropagation();
+    }
+
     /** @private */
     __handleMouseLeave() {
       if (this.manual) {
@@ -667,8 +693,17 @@ export const TooltipMixin = (superClass) =>
     }
 
     /** @private */
-    __updateContent() {
-      this.__contentNode.textContent = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
+    async __updateContent() {
+      const content = typeof this.generator === 'function' ? this.generator(this.context) : this.text;
+
+      if (this.markdown && content) {
+        const helpers = await this.constructor.__importMarkdownHelpers();
+        helpers.renderMarkdownToElement(this.__contentNode, content);
+      } else {
+        this.__contentNode.textContent = content || '';
+      }
+
+      this.$.overlay.toggleAttribute('hidden', this.__contentNode.textContent.trim() === '');
       this.dispatchEvent(new CustomEvent('content-changed', { detail: { content: this.__contentNode.textContent } }));
     }
 
@@ -694,6 +729,14 @@ export const TooltipMixin = (superClass) =>
       }
     }
 
+    /** @private **/
+    static __importMarkdownHelpers() {
+      if (!this.__markdownHelpers) {
+        this.__markdownHelpers = import('@vaadin/markdown/src/markdown-helpers.js');
+      }
+      return this.__markdownHelpers;
+    }
+
     /**
      * Fired when the tooltip text content is changed.
      *

package/src/vaadin-tooltip.d.ts

@@ -28,6 +28,19 @@ export interface TooltipEventMap extends HTMLElementEventMap, TooltipCustomEvent
  * <vaadin-tooltip text="Click to save changes" for="confirm"></vaadin-tooltip>
  * ```
  *
+ * ### Markdown Support
+ *
+ * The tooltip supports rendering Markdown content by setting the `markdown` property:
+ *
+ * ```html
+ * <button id="info">Info</button>
+ * <vaadin-tooltip
+ *   text="**Important:** Click to view *detailed* information"
+ *   markdown
+ *   for="info">
+ * </vaadin-tooltip>
+ * ```
+ *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
@@ -41,6 +54,7 @@ export interface TooltipEventMap extends HTMLElementEventMap, TooltipCustomEvent
  *
  * Attribute        | Description
  * -----------------|----------------------------------------
+ * `markdown`       | Reflects the `markdown` property value.
  * `position`       | Reflects the `position` property value.
  *
  * ### Custom CSS Properties

package/src/vaadin-tooltip.js

@@ -20,6 +20,19 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
  * <vaadin-tooltip text="Click to save changes" for="confirm"></vaadin-tooltip>
  * ```
  *
+ * ### Markdown Support
+ *
+ * The tooltip supports rendering Markdown content by setting the `markdown` property:
+ *
+ * ```html
+ * <button id="info">Info</button>
+ * <vaadin-tooltip
+ *   text="**Important:** Click to view *detailed* information"
+ *   markdown
+ *   for="info">
+ * </vaadin-tooltip>
+ * ```
+ *
  * ### Styling
  *
  * The following shadow DOM parts are available for styling:
@@ -33,6 +46,7 @@ import { TooltipMixin } from './vaadin-tooltip-mixin.js';
  *
  * Attribute        | Description
  * -----------------|----------------------------------------
+ * `markdown`       | Reflects the `markdown` property value.
  * `position`       | Reflects the `position` property value.
  *
  * ### Custom CSS Properties
@@ -85,9 +99,12 @@ class Tooltip extends TooltipMixin(ThemePropertyMixin(ElementMixin(PolylitMixin(
         ?no-vertical-overlap="${this.__computeNoVerticalOverlap(effectivePosition)}"
         .horizontalAlign="${this.__computeHorizontalAlign(effectivePosition)}"
         .verticalAlign="${this.__computeVerticalAlign(effectivePosition)}"
+        @click="${this.__onOverlayClick}"
+        @mousedown="${this.__onOverlayMouseDown}"
         @mouseenter="${this.__onOverlayMouseEnter}"
         @mouseleave="${this.__onOverlayMouseLeave}"
         modeless
+        ?markdown="${this.markdown}"
         exportparts="overlay, content"
         ><slot name="overlay"></slot
       ></vaadin-tooltip-overlay>

package/web-types.json

@@ -1,14 +1,14 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha20",
+  "version": "25.0.0-alpha21",
   "description-markup": "markdown",
   "contributions": {
     "html": {
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "attributes": [
             {
               "name": "position",
@@ -98,6 +98,17 @@
                 ]
               }
             },
+            {
+              "name": "markdown",
+              "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -254,6 +265,17 @@
                     "undefined"
                   ]
                 }
+              },
+              {
+                "name": "markdown",
+                "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": [

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/tooltip",
-  "version": "25.0.0-alpha20",
+  "version": "25.0.0-alpha21",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -16,7 +16,7 @@
       "elements": [
         {
           "name": "vaadin-tooltip",
-          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`position`       | Reflects the `position` property value.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
+          "description": "`<vaadin-tooltip>` is a Web Component for creating tooltips.\n\n```html\n<button id=\"confirm\">Confirm</button>\n<vaadin-tooltip text=\"Click to save changes\" for=\"confirm\"></vaadin-tooltip>\n```\n\n### Markdown Support\n\nThe tooltip supports rendering Markdown content by setting the `markdown` property:\n\n```html\n<button id=\"info\">Info</button>\n<vaadin-tooltip\n  text=\"**Important:** Click to view *detailed* information\"\n  markdown\n  for=\"info\">\n</vaadin-tooltip>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name   | Description\n----------- | ---------------\n`overlay`   | The overlay element\n`content`   | The overlay content element\n\nThe following state attributes are available for styling:\n\nAttribute        | Description\n-----------------|----------------------------------------\n`markdown`       | Reflects the `markdown` property value.\n`position`       | Reflects the `position` property value.\n\n### Custom CSS Properties\n\nThe following custom CSS properties are available on the `<vaadin-tooltip>` element:\n\nCustom CSS property              | Description\n---------------------------------|-------------\n`--vaadin-tooltip-offset-top`    | Used as an offset when the tooltip is aligned vertically below the target\n`--vaadin-tooltip-offset-bottom` | Used as an offset when the tooltip is aligned vertically above the target\n`--vaadin-tooltip-offset-start`  | Used as an offset when the tooltip is aligned horizontally after the target\n`--vaadin-tooltip-offset-end`    | Used as an offset when the tooltip is aligned horizontally before the target\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
           "extension": true,
           "attributes": [
             {
@@ -33,6 +33,13 @@
                 "kind": "expression"
               }
             },
+            {
+              "name": "?markdown",
+              "description": "When enabled, the tooltip text is rendered as Markdown.\n\n**Note:** Using Markdown is discouraged if accessibility of the tooltip\ncontent is essential, as semantics of the rendered HTML content\n(headers, lists, ...) will not be conveyed to assistive technologies.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".position",
               "description": "Position of the overlay with respect to the target.\nSupported values: `top-start`, `top`, `top-end`,\n`bottom-start`, `bottom`, `bottom-end`, `start-top`,\n`start`, `start-bottom`, `end-top`, `end`, `end-bottom`.",