@vaadin/avatar 23.2.0 → 23.3.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -37,13 +37,14 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.2.0",
-    "@vaadin/item": "^23.2.0",
-    "@vaadin/list-box": "^23.2.0",
-    "@vaadin/vaadin-lumo-styles": "^23.2.0",
-    "@vaadin/vaadin-material-styles": "^23.2.0",
-    "@vaadin/vaadin-overlay": "^23.2.0",
-    "@vaadin/vaadin-themable-mixin": "^23.2.0"
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/item": "23.3.0-alpha1",
+    "@vaadin/list-box": "23.3.0-alpha1",
+    "@vaadin/tooltip": "23.3.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.3.0-alpha1",
+    "@vaadin/vaadin-overlay": "23.3.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.3.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
@@ -54,5 +55,5 @@
     "web-types.json",
     "web-types.lit.json"
   ],
-  "gitHead": "8b1f5941f26ac41ca038e75e24c8584e331bc7a8"
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

package/src/vaadin-avatar.d.ts

@@ -3,6 +3,7 @@
  * Copyright (c) 2020 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -37,7 +38,7 @@ export interface AvatarI18n {
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  */
-declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))) {
+declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(HTMLElement)))) {
   /**
    * The path to the image
    */
@@ -51,12 +52,13 @@ declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))
 
   /**
    * Full name of the user
-   * used for the title of the avatar.
+   * used for the tooltip of the avatar.
    */
   name: string | null | undefined;
 
   /**
    * Color index used for avatar background.
+   * @attr {number} color-index
    */
   colorIndex: number | null | undefined;
 
@@ -69,12 +71,20 @@ declare class Avatar extends FocusMixin(ElementMixin(ThemableMixin(HTMLElement))
    *
    * ```
    * {
-   *   // Translation of the anonymous user avatar title.
+   *   // Translation of the anonymous user avatar tooltip.
    *   anonymous: 'anonymous'
    * }
    * ```
    */
   i18n: AvatarI18n;
+
+  /**
+   * When true, the avatar has tooltip shown on hover and focus.
+   * The tooltip text is based on the `name` and `abbr` properties.
+   * When neither is provided, `i18n.anonymous` is used instead.
+   * @attr {boolean} with-tooltip
+   */
+  withTooltip: boolean;
 }
 
 declare global {

package/src/vaadin-avatar.js

@@ -5,8 +5,10 @@
  */
 import './vaadin-avatar-icons.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { TooltipController } from '@vaadin/component-base/src/tooltip-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -36,11 +38,12 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes FocusMixin
  * @mixes ElementMixin
  * @mixes ThemableMixin
  */
-class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Avatar extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get template() {
     return html`
       <style>
@@ -120,6 +123,8 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       >
         <text dy=".35em" text-anchor="middle">[[abbr]]</text>
       </svg>
+
+      <slot name="tooltip"></slot>
     `;
   }
 
@@ -149,7 +154,7 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
       /**
        * Full name of the user
-       * used for the title of the avatar.
+       * used for the tooltip of the avatar.
        */
       name: {
         type: String,
@@ -158,6 +163,7 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
       /**
        * Color index used for avatar background.
+       * @attr {number} color-index
        */
       colorIndex: {
         type: Number,
@@ -173,7 +179,7 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
        *
        * ```
        * {
-       *   // Translation of the anonymous user avatar title.
+       *   // Translation of the anonymous user avatar tooltip.
        *   anonymous: 'anonymous'
        * }
        * ```
@@ -190,6 +196,18 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         },
       },
 
+      /**
+       * When true, the avatar has tooltip shown on hover and focus.
+       * The tooltip text is based on the `name` and `abbr` properties.
+       * When neither is provided, `i18n.anonymous` is used instead.
+       * @attr {boolean} with-tooltip
+       */
+      withTooltip: {
+        type: Boolean,
+        value: false,
+        observer: '__withTooltipChanged',
+      },
+
       /** @private */
       __imgVisible: Boolean,
 
@@ -198,11 +216,18 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
       /** @private */
       __abbrVisible: Boolean,
+
+      /** @private */
+      __tooltipNode: Object,
     };
   }
 
   static get observers() {
-    return ['__imgOrAbbrOrNameChanged(img, abbr, name)', '__i18nChanged(i18n.*)'];
+    return [
+      '__imgOrAbbrOrNameChanged(img, abbr, name)',
+      '__i18nChanged(i18n.*)',
+      '__tooltipChanged(__tooltipNode, name, abbr)',
+    ];
   }
 
   /** @protected */
@@ -211,16 +236,19 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
 
     this.__updateVisibility();
 
-    // Should set `anonymous` if name / abbr is not provided
-    if (!this.name && !this.abbr) {
-      this.__setTitle(this.name);
-    }
-
     this.setAttribute('role', 'button');
 
     if (!this.hasAttribute('tabindex')) {
       this.setAttribute('tabindex', '0');
     }
+
+    this._tooltipController = new TooltipController(this);
+    this.addController(this._tooltipController);
+
+    // Should set `anonymous` if name / abbr is not provided
+    if (!this.name && !this.abbr) {
+      this.__setTooltip();
+    }
   }
 
   /** @private */
@@ -253,7 +281,6 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     this.__updateVisibility();
 
     if (abbr && abbr !== this.__generatedAbbr) {
-      this.__setTitle(name ? `${name} (${abbr})` : abbr);
       return;
     }
 
@@ -265,15 +292,40 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
     } else {
       this.abbr = undefined;
     }
+  }
 
-    this.__setTitle(name);
+  /** @private */
+  __tooltipChanged(tooltipNode, name, abbr) {
+    if (tooltipNode) {
+      if (abbr && abbr !== this.__generatedAbbr) {
+        this.__setTooltip(name ? `${name} (${abbr})` : abbr);
+      } else {
+        this.__setTooltip(name);
+      }
+    }
+  }
+
+  /** @private */
+  __withTooltipChanged(withTooltip, oldWithTooltip) {
+    if (withTooltip) {
+      // Create and attach tooltip
+      const tooltipNode = document.createElement('vaadin-tooltip');
+      tooltipNode.setAttribute('slot', 'tooltip');
+      this.appendChild(tooltipNode);
+      this.__tooltipNode = tooltipNode;
+    } else if (oldWithTooltip) {
+      // Cleanup and detach tooltip
+      this.__tooltipNode.target = null;
+      this.__tooltipNode.remove();
+      this.__tooltipNode = null;
+    }
   }
 
   /** @private */
   __i18nChanged(i18n) {
     if (i18n.base && i18n.base.anonymous) {
-      if (this.__oldAnonymous && this.getAttribute('title') === this.__oldAnonymous) {
-        this.__setTitle();
+      if (this.__oldAnonymous && this.__tooltipNode && this.__tooltipNode.text === this.__oldAnonymous) {
+        this.__setTooltip();
       }
 
       this.__oldAnonymous = i18n.base.anonymous;
@@ -288,11 +340,10 @@ class Avatar extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   }
 
   /** @private */
-  __setTitle(title) {
-    if (title) {
-      this.setAttribute('title', title);
-    } else {
-      this.setAttribute('title', this.i18n.anonymous);
+  __setTooltip(tooltip) {
+    const tooltipNode = this.__tooltipNode;
+    if (tooltipNode) {
+      tooltipNode.text = tooltip || this.i18n.anonymous;
     }
   }
 

package/theme/lumo/vaadin-avatar.js

@@ -1,2 +1,3 @@
+import '@vaadin/tooltip/theme/lumo/vaadin-tooltip.js';
 import './vaadin-avatar-styles.js';
 import '../../src/vaadin-avatar.js';

package/theme/material/vaadin-avatar.js

@@ -1,2 +1,3 @@
+import '@vaadin/tooltip/theme/material/vaadin-tooltip.js';
 import './vaadin-avatar-styles.js';
 import '../../src/vaadin-avatar.js';

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -34,7 +34,7 @@
             },
             {
               "name": "name",
-              "description": "Full name of the user\nused for the title of the avatar.",
+              "description": "Full name of the user\nused for the tooltip of the avatar.",
               "value": {
                 "type": [
                   "string",
@@ -54,6 +54,17 @@
                 ]
               }
             },
+            {
+              "name": "with-tooltip",
+              "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
+              "value": {
+                "type": [
+                  "boolean",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
             {
               "name": "theme",
               "description": "The theme variants to apply to the component.",
@@ -92,7 +103,7 @@
               },
               {
                 "name": "name",
-                "description": "Full name of the user\nused for the title of the avatar.",
+                "description": "Full name of the user\nused for the tooltip of the avatar.",
                 "value": {
                   "type": [
                     "string",
@@ -114,12 +125,23 @@
               },
               {
                 "name": "i18n",
-                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar title.\n  anonymous: 'anonymous'\n}\n```",
+                "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
                 "value": {
                   "type": [
                     "AvatarI18n"
                   ]
                 }
+              },
+              {
+                "name": "withTooltip",
+                "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
+                "value": {
+                  "type": [
+                    "boolean",
+                    "null",
+                    "undefined"
+                  ]
+                }
               }
             ],
             "events": []

package/web-types.lit.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/web-types",
   "name": "@vaadin/avatar",
-  "version": "23.2.0",
+  "version": "23.3.0-alpha1",
   "description-markup": "markdown",
   "framework": "lit",
   "framework-config": {
@@ -19,6 +19,13 @@
           "description": "`<vaadin-avatar>` is a Web Component providing avatar displaying functionality.\n\n```html\n<vaadin-avatar img=\"avatars/avatar-1.jpg\"></vaadin-avatar>\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name | Description\n--------- | ---------------\n`abbr`    | The abbreviation element\n`icon`    | The icon element\n\nThe following state attributes are available for styling:\n\nAttribute         | Description\n------------------|-------------\n`focus-ring`      | Set when the avatar is focused using the keyboard.\n`focused`         | Set when the avatar is focused.\n`has-color-index` | Set when the avatar has `colorIndex` and the corresponding custom CSS property exists.\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.",
           "extension": true,
           "attributes": [
+            {
+              "name": "?withTooltip",
+              "description": "When true, the avatar has tooltip shown on hover and focus.\nThe tooltip text is based on the `name` and `abbr` properties.\nWhen neither is provided, `i18n.anonymous` is used instead.",
+              "value": {
+                "kind": "expression"
+              }
+            },
             {
               "name": ".img",
               "description": "The path to the image",
@@ -35,7 +42,7 @@
             },
             {
               "name": ".name",
-              "description": "Full name of the user\nused for the title of the avatar.",
+              "description": "Full name of the user\nused for the tooltip of the avatar.",
               "value": {
                 "kind": "expression"
               }
@@ -49,7 +56,7 @@
             },
             {
               "name": ".i18n",
-              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar title.\n  anonymous: 'anonymous'\n}\n```",
+              "description": "The object used to localize this component.\nTo change the default localization, replace the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous'\n}\n```",
               "value": {
                 "kind": "expression"
               }