@vaadin/avatar-group 23.2.0-dev.8a7678b70 → 23.3.0-alpha1

package/README.md

@@ -2,7 +2,7 @@
 
 A web component for grouping multiple [`<vaadin-avatar>`](https://www.npmjs.com/package/@vaadin/avatar-group) components together.
 
-[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/ds/components/avatar/#avatar-group)
+[Documentation + Live Demo ↗](https://vaadin.com/docs/latest/components/avatar/#avatar-group)
 
 [![npm version](https://badgen.net/npm/v/@vaadin/avatar-group)](https://www.npmjs.com/package/@vaadin/avatar-group)
 [![Discord](https://img.shields.io/discord/732335336448852018?label=discord)](https://discord.gg/PHmkCKC)
@@ -19,7 +19,7 @@ A web component for grouping multiple [`<vaadin-avatar>`](https://www.npmjs.com/
 </script>
 ```
 
-[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar-group/screenshot.png" width="108" alt="Screenshot of vaadin-avatar-group">](https://vaadin.com/docs/latest/ds/components/avatar/#avatar-group)
+[<img src="https://raw.githubusercontent.com/vaadin/web-components/master/packages/avatar-group/screenshot.png" width="108" alt="Screenshot of vaadin-avatar-group">](https://vaadin.com/docs/latest/components/avatar/#avatar-group)
 
 ## Installation
 
@@ -37,7 +37,7 @@ import '@vaadin/avatar-group';
 
 ## Themes
 
-Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/ds/customization/using-themes), Lumo and Material.
+Vaadin components come with two built-in [themes](https://vaadin.com/docs/latest/styling), Lumo and Material.
 The [main entrypoint](https://github.com/vaadin/web-components/blob/master/packages/avatar-group/vaadin-avatar-group.js) of the package uses the Lumo theme.
 
 To use the Material theme, import the component from the `theme/material` folder:
@@ -60,7 +60,7 @@ import '@vaadin/avatar-group/src/vaadin-avatar-group.js';
 
 ## Contributing
 
-Read the [contributing guide](https://vaadin.com/docs/latest/guide/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
+Read the [contributing guide](https://vaadin.com/docs/latest/contributing/overview) to learn about our development process, how to propose bugfixes and improvements, and how to test your changes to Vaadin components.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/avatar-group",
-  "version": "23.2.0-dev.8a7678b70",
+  "version": "23.3.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -14,7 +14,7 @@
   "author": "Vaadin Ltd",
   "homepage": "https://vaadin.com/components",
   "bugs": {
-    "url": "https://github.com/vaadin/vaadin-avatar/issues"
+    "url": "https://github.com/vaadin/web-components/issues"
   },
   "main": "vaadin-avatar-group.js",
   "module": "vaadin-avatar-group.js",
@@ -23,7 +23,9 @@
     "src",
     "theme",
     "vaadin-*.d.ts",
-    "vaadin-*.js"
+    "vaadin-*.js",
+    "web-types.json",
+    "web-types.lit.json"
   ],
   "keywords": [
     "Vaadin",
@@ -35,19 +37,23 @@
   ],
   "dependencies": {
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/avatar": "23.2.0-dev.8a7678b70",
-    "@vaadin/component-base": "23.2.0-dev.8a7678b70",
-    "@vaadin/item": "23.2.0-dev.8a7678b70",
-    "@vaadin/list-box": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-lumo-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-material-styles": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-overlay": "23.2.0-dev.8a7678b70",
-    "@vaadin/vaadin-themable-mixin": "23.2.0-dev.8a7678b70"
+    "@vaadin/avatar": "23.3.0-alpha1",
+    "@vaadin/component-base": "23.3.0-alpha1",
+    "@vaadin/item": "23.3.0-alpha1",
+    "@vaadin/list-box": "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",
     "@vaadin/testing-helpers": "^0.3.2",
     "sinon": "^13.0.2"
   },
-  "gitHead": "85b403f96d8282f262322b56c0ff4289f843d02a"
+  "web-types": [
+    "web-types.json",
+    "web-types.lit.json"
+  ],
+  "gitHead": "beabc527d4b1274eb798ff701d406fed45cfe638"
 }

package/src/vaadin-avatar-group.d.ts

@@ -53,7 +53,7 @@ export interface AvatarGroupItem {
  * `container` | The container element
  * `avatar`    | Individual avatars
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * ### Internal components
  *
@@ -95,6 +95,7 @@ declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(HTMLEle
    * The maximum number of avatars to display. By default, all the avatars are displayed.
    * When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
    * a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
+   * @attr {number} max-items-visible
    */
   maxItemsVisible: number | null | undefined;
 
@@ -106,7 +107,7 @@ declare class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(HTMLEle
    * The object has the following JSON structure and default values:
    * ```
    * {
-   *   // Translation of the anonymous user avatar title.
+   *   // Translation of the anonymous user avatar tooltip.
    *   anonymous: 'anonymous',
    *   // Translation of the avatar group accessible label.
    *   // {count} is replaced with the actual count of users.

package/src/vaadin-avatar-group.js

@@ -45,7 +45,7 @@ const MINIMUM_DISPLAYED_AVATARS = 2;
  * `container` | The container element
  * `avatar`    | Individual avatars
  *
- * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
+ * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
  * ### Internal components
  *
@@ -69,7 +69,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
           width: 100%; /* prevent collapsing inside non-stretching column flex */
           --vaadin-avatar-group-overlap: 8px;
           --vaadin-avatar-group-overlap-border: 2px;
-          --vaadin-avatar-size: 64px;
         }
 
         :host([hidden]) {
@@ -120,6 +119,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
             theme$="[[_theme]]"
             i18n="[[i18n]]"
             color-index="[[item.colorIndex]]"
+            with-tooltip
           ></vaadin-avatar>
         </template>
         <vaadin-avatar
@@ -131,7 +131,9 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
           on-click="_onOverflowClick"
           on-keydown="_onOverflowKeyDown"
           aria-haspopup="listbox"
-        ></vaadin-avatar>
+        >
+          <vaadin-tooltip slot="tooltip" text-generator="[[__overflowTextGenerator]]"></vaadin-tooltip>
+        </vaadin-avatar>
       </div>
       <vaadin-avatar-group-overlay
         id="overlay"
@@ -202,6 +204,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
        * The maximum number of avatars to display. By default, all the avatars are displayed.
        * When _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with
        * a dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.
+       * @attr {number} max-items-visible
        */
       maxItemsVisible: {
         type: Number,
@@ -215,7 +218,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
        * The object has the following JSON structure and default values:
        * ```
        * {
-       *   // Translation of the anonymous user avatar title.
+       *   // Translation of the anonymous user avatar tooltip.
        *   anonymous: 'anonymous',
        *   // Translation of the avatar group accessible label.
        *   // {count} is replaced with the actual count of users.
@@ -269,12 +272,15 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
         observer: '__openedChanged',
         value: false,
       },
+
+      /** @private */
+      __overflowTextGenerator: Object,
     };
   }
 
   static get observers() {
     return [
-      '__computeMoreTitle(items.length, __itemsInView, maxItemsVisible)',
+      '__computeMoreTooltip(items.length, __itemsInView, maxItemsVisible)',
       '__itemsChanged(items.splices, items.*)',
       '__i18nItemsChanged(i18n.*, items.length)',
     ];
@@ -377,7 +383,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
   }
 
   /** @private */
-  __computeMoreTitle(items, itemsInView, maxItemsVisible) {
+  __computeMoreTooltip(items, itemsInView, maxItemsVisible) {
     const limit = this.__getLimit(items, itemsInView, maxItemsVisible);
     if (limit == null) {
       return;
@@ -389,8 +395,8 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
         result.push(item.name || item.abbr || 'anonymous');
       }
     }
-    // Override generated title attribute
-    this.$.overflow.setAttribute('title', result.join('\n'));
+    // Override generated tooltip text
+    this.__overflowTextGenerator = () => result.join('\n');
   }
 
   /** @private */
@@ -476,9 +482,6 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
 
       this._openedWithFocusRing = this.$.overflow.hasAttribute('focus-ring');
 
-      const avatars = this._menuElement.querySelectorAll('vaadin-avatar');
-      avatars.forEach((avatar) => avatar.removeAttribute('title'));
-
       this._menuElement.focus();
     } else if (wasOpened) {
       this.$.overflow.focus();
@@ -517,7 +520,7 @@ class AvatarGroup extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement)
     this.__itemsInView = result;
   }
 
-  /** @private **/
+  /** @private */
   __calculateAvatarsFitWidth() {
     if (!this.shadowRoot || this._avatars.length < MINIMUM_DISPLAYED_AVATARS) {
       return MINIMUM_DISPLAYED_AVATARS;

package/theme/lumo/vaadin-avatar-group-styles.js

@@ -12,14 +12,6 @@ registerStyles(
       --vaadin-avatar-size: var(--lumo-size-m);
     }
 
-    :host([theme~='small']) {
-      --vaadin-avatar-size: var(--lumo-size-s);
-    }
-
-    :host([theme~='xsmall']) {
-      --vaadin-avatar-size: var(--lumo-size-xs);
-    }
-
     :host([theme~='xlarge']) {
       --vaadin-avatar-group-overlap: 12px;
       --vaadin-avatar-group-overlap-border: 3px;

package/theme/material/vaadin-avatar-group-styles.js

@@ -2,6 +2,40 @@ import '@vaadin/vaadin-material-styles/color.js';
 import { menuOverlay } from '@vaadin/vaadin-material-styles/mixins/menu-overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
+registerStyles(
+  'vaadin-avatar-group',
+  css`
+    :host {
+      --vaadin-avatar-size: 2.25rem;
+    }
+
+    :host([theme~='xlarge']) {
+      --vaadin-avatar-group-overlap: 12px;
+      --vaadin-avatar-group-overlap-border: 3px;
+      --vaadin-avatar-size: 3.5rem;
+    }
+
+    :host([theme~='large']) {
+      --vaadin-avatar-group-overlap: 10px;
+      --vaadin-avatar-group-overlap-border: 3px;
+      --vaadin-avatar-size: 2.75rem;
+    }
+
+    :host([theme~='small']) {
+      --vaadin-avatar-group-overlap: 6px;
+      --vaadin-avatar-group-overlap-border: 2px;
+      --vaadin-avatar-size: 1.875rem;
+    }
+
+    :host([theme~='xsmall']) {
+      --vaadin-avatar-group-overlap: 4px;
+      --vaadin-avatar-group-overlap-border: 2px;
+      --vaadin-avatar-size: 1.625rem;
+    }
+  `,
+  { moduleId: 'material-avatar-group' },
+);
+
 const avatarGroupOverlay = css`
   [part='overlay'] {
     outline: none;

package/web-types.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/avatar-group",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-avatar-group",
+          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n`avatar`    | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay).",
+          "attributes": [
+            {
+              "name": "max-items-visible",
+              "description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
+              "value": {
+                "type": [
+                  "number",
+                  "null",
+                  "undefined"
+                ]
+              }
+            },
+            {
+              "name": "theme",
+              "description": "The theme variants to apply to the component.",
+              "value": {
+                "type": [
+                  "string",
+                  "null",
+                  "undefined"
+                ]
+              }
+            }
+          ],
+          "js": {
+            "properties": [
+              {
+                "name": "items",
+                "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\n  },\n];\n```",
+                "value": {
+                  "type": [
+                    "Array.<AvatarGroupItem>",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "name": "maxItemsVisible",
+                "description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
+                "value": {
+                  "type": [
+                    "number",
+                    "null",
+                    "undefined"
+                  ]
+                }
+              },
+              {
+                "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  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous',\n  // Translation of the avatar group accessible label.\n  // {count} is replaced with the actual count of users.\n  activeUsers: {\n    one: 'Currently one active user',\n    many: 'Currently {count} active users'\n  },\n  // Screen reader announcement when user joins group.\n  // {user} is replaced with the name or abbreviation.\n  // When neither is set, \"anonymous\" is used instead.\n  joined: '{user} joined',\n  // Screen reader announcement when user leaves group.\n  // {user} is replaced with the name or abbreviation.\n  // When neither is set, \"anonymous\" is used instead.\n  left: '{user} left'\n}\n```",
+                "value": {
+                  "type": [
+                    "AvatarGroupI18n"
+                  ]
+                }
+              }
+            ],
+            "events": []
+          }
+        }
+      ]
+    }
+  }
+}

package/web-types.lit.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://json.schemastore.org/web-types",
+  "name": "@vaadin/avatar-group",
+  "version": "23.3.0-alpha1",
+  "description-markup": "markdown",
+  "framework": "lit",
+  "framework-config": {
+    "enable-when": {
+      "node-packages": [
+        "lit"
+      ]
+    }
+  },
+  "contributions": {
+    "html": {
+      "elements": [
+        {
+          "name": "vaadin-avatar-group",
+          "description": "`<vaadin-avatar-group>` is a Web Component providing avatar group displaying functionality.\n\nTo create the avatar group, first add the component to the page:\n\n```\n<vaadin-avatar-group></vaadin-avatar-group>\n```\n\nAnd then use [`items`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar-group#property-items) property to initialize the structure:\n\n```\ndocument.querySelector('vaadin-avatar-group').items = [\n  {name: 'John Doe'},\n  {abbr: 'AB'}\n];\n```\n\n### Styling\n\nThe following shadow DOM parts are exposed for styling:\n\nPart name   | Description\n----------- | ---------------\n`container` | The container element\n`avatar`    | Individual avatars\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.\n\n### Internal components\n\nIn addition to `<vaadin-avatar-group>` itself, the following internal\ncomponents are themable:\n\n- `<vaadin-avatar-group-list-box>` - has the same API as [`<vaadin-list-box>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-list-box).\n- `<vaadin-avatar-group-overlay>` - has the same API as [`<vaadin-overlay>`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-overlay).",
+          "extension": true,
+          "attributes": [
+            {
+              "name": ".items",
+              "description": "An array containing the items which will be stamped as avatars.\n\nThe items objects allow to configure [`name`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-name),\n[`abbr`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)\nand [`colorIndex`](https://cdn.vaadin.com/vaadin-web-components/23.3.0-alpha1/#/elements/vaadin-avatar#property-colorIndex) properties on the\nstamped avatars.\n\n#### Example\n\n```js\ngroup.items = [\n  {\n    name: 'User name',\n    img: 'url-to-image.png'\n  },\n  {\n    abbr: 'JD',\n    colorIndex: 1\n  },\n];\n```",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "name": ".maxItemsVisible",
+              "description": "The maximum number of avatars to display. By default, all the avatars are displayed.\nWhen _maxItemsVisible_ is set, the overflowing avatars are grouped into one avatar with\na dropdown. Setting 0 or 1 has no effect so there are always at least two avatars visible.",
+              "value": {
+                "kind": "expression"
+              }
+            },
+            {
+              "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  // Translation of the anonymous user avatar tooltip.\n  anonymous: 'anonymous',\n  // Translation of the avatar group accessible label.\n  // {count} is replaced with the actual count of users.\n  activeUsers: {\n    one: 'Currently one active user',\n    many: 'Currently {count} active users'\n  },\n  // Screen reader announcement when user joins group.\n  // {user} is replaced with the name or abbreviation.\n  // When neither is set, \"anonymous\" is used instead.\n  joined: '{user} joined',\n  // Screen reader announcement when user leaves group.\n  // {user} is replaced with the name or abbreviation.\n  // When neither is set, \"anonymous\" is used instead.\n  left: '{user} left'\n}\n```",
+              "value": {
+                "kind": "expression"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  }
+}