feat: add className property for adding CSS classes to items (#6622)

vaadin · Oct 10, 2023 · 29b8bcf · 29b8bcf
1 parent 4aeef4f
commit 29b8bcf
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 6 deletions.
diff --git a/packages/avatar-group/src/vaadin-avatar-group.d.ts b/packages/avatar-group/src/vaadin-avatar-group.d.ts
@@ -26,6 +26,7 @@ export interface AvatarGroupItem {
   abbr?: string;
   img?: string;
   colorIndex?: number;
+  className?: string;
 }
 
 /**
@@ -79,19 +80,21 @@ declare class AvatarGroup extends ResizeMixin(
    * The items objects allow to configure [`name`](#/elements/vaadin-avatar#property-name),
    * [`abbr`](#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)
    * and [`colorIndex`](#/elements/vaadin-avatar#property-colorIndex) properties on the
-   * stamped avatars.
+   * stamped avatars, and set `className` to provide CSS class names.
    *
    * #### Example
    *
    * ```js
    * group.items = [
    *   {
    *     name: 'User name',
-   *     img: 'url-to-image.png'
+   *     img: 'url-to-image.png',
+   *     className: 'even'
    *   },
    *   {
    *     abbr: 'JD',
-   *     colorIndex: 1
+   *     colorIndex: 1,
+   *     className: 'odd'
    *   },
    * ];
    * ```

diff --git a/packages/avatar-group/src/vaadin-avatar-group.js b/packages/avatar-group/src/vaadin-avatar-group.js
@@ -11,6 +11,7 @@ import { calculateSplices } from '@polymer/polymer/lib/utils/array-splice.js';
 import { afterNextRender } from '@polymer/polymer/lib/utils/render-status.js';
 import { html as legacyHtml, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { html, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { announce } from '@vaadin/a11y-base/src/announce.js';
 import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
@@ -145,19 +146,21 @@ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMix
        * The items objects allow to configure [`name`](#/elements/vaadin-avatar#property-name),
        * [`abbr`](#/elements/vaadin-avatar#property-abbr), [`img`](#/elements/vaadin-avatar#property-img)
        * and [`colorIndex`](#/elements/vaadin-avatar#property-colorIndex) properties on the
-       * stamped avatars.
+       * stamped avatars, and set `className` to provide CSS class names.
        *
        * #### Example
        *
        * ```js
        * group.items = [
        *   {
        *     name: 'User name',
-       *     img: 'url-to-image.png'
+       *     img: 'url-to-image.png',
+       *     className: 'even'
        *   },
        *   {
        *     abbr: 'JD',
-       *     colorIndex: 1
+       *     colorIndex: 1,
+       *     className: 'odd'
        *   },
        * ];
        * ```
@@ -368,6 +371,9 @@ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMix
     avatar.abbr = item.abbr;
     avatar.img = item.img;
     avatar.colorIndex = item.colorIndex;
+    if (item.className) {
+      avatar.className = item.className;
+    }
 
     if (item.name) {
       const text = document.createTextNode(item.name);
@@ -432,6 +438,7 @@ class AvatarGroup extends ResizeMixin(OverlayClassMixin(ElementMixin(ThemableMix
                 .img="${item.img}"
                 .colorIndex="${item.colorIndex}"
                 .i18n="${this.i18n}"
+                class="${ifDefined(item.className)}"
                 with-tooltip
               ></vaadin-avatar>
             `,

diff --git a/packages/avatar-group/test/avatar-group.test.js b/packages/avatar-group/test/avatar-group.test.js
@@ -445,6 +445,39 @@ describe('avatar-group', () => {
     });
   });
 
+  describe('className', () => {
+    let overlay, overflow;
+
+    beforeEach(async () => {
+      group.items = [
+        { abbr: 'PM', className: 'foo' },
+        { name: 'Yuriy Yevstihnyeyev', className: 'bar' },
+        { name: 'Serhii Kulykov', className: 'baz' },
+      ];
+      await nextRender(group);
+      overlay = group.$.overlay;
+      overflow = group._overflow;
+    });
+
+    it('should pass class name to avatars', () => {
+      const items = group.querySelectorAll('vaadin-avatar');
+      expect(items[0].getAttribute('class')).to.equal('foo');
+      expect(items[1].getAttribute('class')).to.equal('bar');
+      expect(items[2].getAttribute('class')).to.equal('baz');
+    });
+
+    it('should pass class name to overlay avatars', async () => {
+      group.maxItemsVisible = 1;
+
+      overflow.click();
+      await oneEvent(overlay, 'vaadin-overlay-open');
+
+      const avatars = overlay.querySelectorAll('vaadin-avatar');
+      expect(avatars[0].getAttribute('class')).to.equal(group.items[1].className);
+      expect(avatars[1].getAttribute('class')).to.equal(group.items[2].className);
+    });
+  });
+
   describe('i18n property', () => {
     let overlay, overflow;
 

diff --git a/packages/avatar-group/test/typings/avatar-group.types.ts b/packages/avatar-group/test/typings/avatar-group.types.ts
@@ -16,6 +16,14 @@ assertType<number | null | undefined>(group.maxItemsVisible);
 assertType<AvatarGroupI18n>(group.i18n);
 assertType<string>(group.overlayClass);
 
+// Item properties
+const item: AvatarGroupItem = group.items ? group.items[0] : {};
+assertType<string | undefined>(item.abbr);
+assertType<string | undefined>(item.img);
+assertType<string | undefined>(item.name);
+assertType<number | undefined>(item.colorIndex);
+assertType<string | undefined>(item.className);
+
 // Mixins
 assertType<ControllerMixinClass>(group);
 assertType<ElementMixinClass>(group);