feat: add className property for adding CSS classes to messages (#6628)

vaadin · Oct 11, 2023 · a1c1627 · a1c1627
1 parent 553cb9e
commit a1c1627
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 0 deletions.
diff --git a/packages/message-list/src/vaadin-message-list.d.ts b/packages/message-list/src/vaadin-message-list.d.ts
@@ -15,6 +15,7 @@ export interface MessageListItem {
   userImg?: string;
   userColorIndex?: number;
   theme?: string;
+  className?: string;
 }
 
 /**
@@ -62,6 +63,7 @@ declare class MessageList extends KeyboardDirectionMixin(ThemableMixin(ElementMi
    *   userAbbr: string,
    *   userImg: string,
    *   userColorIndex: number,
+   *   className: string,
    *   theme: string
    * }>
    * ```

diff --git a/packages/message-list/src/vaadin-message-list.js b/packages/message-list/src/vaadin-message-list.js
@@ -69,6 +69,7 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
        *   userAbbr: string,
        *   userImg: string,
        *   userColorIndex: number,
+       *   className: string,
        *   theme: string
        * }>
        * ```
@@ -160,6 +161,7 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
                 .userImg="${item.userImg}"
                 .userColorIndex="${item.userColorIndex}"
                 theme="${ifDefined(item.theme)}"
+                class="${ifDefined(item.className)}"
                 @focusin="${this._onMessageFocusIn}"
                 >${item.text}</vaadin-message
               >

diff --git a/packages/message-list/test/dom/__snapshots__/message-list.test.snap.js b/packages/message-list/test/dom/__snapshots__/message-list.test.snap.js
@@ -74,3 +74,28 @@ snapshots["vaadin-message-list theme"] =
 `;
 /* end snapshot vaadin-message-list theme */
 
+snapshots["vaadin-message-list className"] = 
+`<vaadin-message-list
+  aria-relevant="additions"
+  role="log"
+>
+  <vaadin-message
+    class="pinned"
+    role="listitem"
+    tabindex="0"
+  >
+    Where to start
+    <vaadin-avatar
+      abbr="A"
+      aria-hidden="true"
+      name="Admin"
+      role="button"
+      slot="avatar"
+      tabindex="-1"
+    >
+    </vaadin-avatar>
+  </vaadin-message>
+</vaadin-message-list>
+`;
+/* end snapshot vaadin-message-list className */
+
diff --git a/packages/message-list/test/dom/message-list.test.js b/packages/message-list/test/dom/message-list.test.js
@@ -27,4 +27,10 @@ describe('vaadin-message-list', () => {
     await nextFrame();
     await expect(list).dom.to.equalSnapshot();
   });
+
+  it('className', async () => {
+    list.items = [{ text: 'Where to start', userName: 'Admin', className: 'pinned' }];
+    await nextFrame();
+    await expect(list).dom.to.equalSnapshot();
+  });
 });
diff --git a/packages/message-list/test/typings/message-list.types.ts b/packages/message-list/test/typings/message-list.types.ts
@@ -22,6 +22,7 @@ assertType<string | undefined>(item.userAbbr);
 assertType<string | undefined>(item.userImg);
 assertType<number | undefined>(item.userColorIndex);
 assertType<string | undefined>(item.theme);
+assertType<string | undefined>(item.className);
 
 // Mixins
 assertType<ElementMixinClass>(list);