feat: add theme property to vaadin-message-list items

the first step towards highlighting your own messages: vaadin/collaboration-kit#30
vaadin · May 11, 2021 · 5768cb3 · 5768cb3
1 parent a994aff
commit 5768cb3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/vaadin-messages/src/vaadin-message-list.d.ts b/packages/vaadin-messages/src/vaadin-message-list.d.ts
@@ -9,6 +9,7 @@ export interface MessageListItem {
   userAbbr?: string;
   userImg?: string;
   userColorIndex?: number;
+  theme?: string;
 }
 
 /**
@@ -49,7 +50,8 @@ declare class MessageListElement extends ThemableMixin(ElementMixin(HTMLElement)
    *   userName: string,
    *   userAbbr: string,
    *   userImg: string,
-   *   userColorIndex: number
+   *   userColorIndex: number,
+   *   theme: string
    * }>
    * ```
    *

diff --git a/packages/vaadin-messages/src/vaadin-message-list.js b/packages/vaadin-messages/src/vaadin-message-list.js
@@ -53,7 +53,8 @@ class MessageListElement extends ElementMixin(ThemableMixin(PolymerElement)) {
        *   userName: string,
        *   userAbbr: string,
        *   userImg: string,
-       *   userColorIndex: number
+       *   userColorIndex: number,
+       *   theme: string
        * }>
        * ```
        */
@@ -87,6 +88,7 @@ class MessageListElement extends ElementMixin(ThemableMixin(PolymerElement)) {
             user-abbr="[[item.userAbbr]]"
             user-img="[[item.userImg]]"
             user-color-index="[[item.userColorIndex]]"
+            theme$="[[item.theme]]"
             role="listitem"
             on-focus="_handleFocusEvent"
             >[[item.text]]</vaadin-message

diff --git a/packages/vaadin-messages/test/message-list.test.js b/packages/vaadin-messages/test/message-list.test.js
@@ -18,7 +18,8 @@ describe('message-list', () => {
         userName: 'Joan Doe',
         userAbbr: 'JD',
         userImg: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=',
-        userColorIndex: 1
+        userColorIndex: 1,
+        theme: "fancy"
       },
       {
         text: 'A message in the stream of messages',
@@ -74,13 +75,19 @@ describe('message-list', () => {
     });
 
     it('message properties should be correctly set', () => {
-      const firstMessage = messageList.shadowRoot.querySelectorAll('vaadin-message')[0];
+      const firstMessage = messageList.shadowRoot.querySelector('vaadin-message');
       expect(firstMessage.time).to.be.equal(messages[0].time);
       expect(firstMessage.userName).to.be.equal(messages[0].userName);
       expect(firstMessage.userAbbr).to.be.equal(messages[0].userAbbr);
       expect(firstMessage.userImg).to.be.equal(messages[0].userImg);
       expect(firstMessage.userColorIndex).to.be.equal(messages[0].userColorIndex);
       expect(firstMessage.textContent).to.be.equal(messages[0].text);
+      expect(firstMessage.theme).to.be.equal(messages[0].theme);
+    });
+
+    it('should propagate theme to attribute', () => {
+      const firstMessage = messageList.shadowRoot.querySelector('vaadin-message');
+      expect(firstMessage.getAttribute('theme')).to.be.equal(messages[0].theme);
     });
 
     it('message list should scroll when height is less than content', () => {