From 276cce99161ccbf712b3172ddd7ad8dd93b1d2c8 Mon Sep 17 00:00:00 2001
From: Serhii Kulykov <iamkulykov@gmail.com>
Date: Fri, 29 Nov 2024 12:34:43 +0200
Subject: [PATCH] refactor: extract message and message-list logic into mixins
 (#8241)

---
 packages/message-list/package.json            |   1 +
 .../src/vaadin-message-list-mixin.d.ts        |  42 +++++
 .../src/vaadin-message-list-mixin.js          | 148 ++++++++++++++++++
 .../message-list/src/vaadin-message-list.d.ts |  35 +----
 .../message-list/src/vaadin-message-list.js   | 147 +----------------
 .../src/vaadin-message-mixin.d.ts             |  68 ++++++++
 .../message-list/src/vaadin-message-mixin.js  | 119 ++++++++++++++
 packages/message-list/src/vaadin-message.d.ts |  59 +------
 packages/message-list/src/vaadin-message.js   | 112 +------------
 9 files changed, 392 insertions(+), 339 deletions(-)
 create mode 100644 packages/message-list/src/vaadin-message-list-mixin.d.ts
 create mode 100644 packages/message-list/src/vaadin-message-list-mixin.js
 create mode 100644 packages/message-list/src/vaadin-message-mixin.d.ts
 create mode 100644 packages/message-list/src/vaadin-message-mixin.js

diff --git a/packages/message-list/package.json b/packages/message-list/package.json
index af84a36297..b37ca2eddd 100644
--- a/packages/message-list/package.json
+++ b/packages/message-list/package.json
@@ -37,6 +37,7 @@
     "polymer"
   ],
   "dependencies": {
+    "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
     "@vaadin/a11y-base": "24.6.0-beta1",
     "@vaadin/avatar": "24.6.0-beta1",
diff --git a/packages/message-list/src/vaadin-message-list-mixin.d.ts b/packages/message-list/src/vaadin-message-list-mixin.d.ts
new file mode 100644
index 0000000000..ebe8db1744
--- /dev/null
+++ b/packages/message-list/src/vaadin-message-list-mixin.d.ts
@@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+
+export interface MessageListItem {
+  text?: string;
+  time?: string;
+  userName?: string;
+  userAbbr?: string;
+  userImg?: string;
+  userColorIndex?: number;
+  theme?: string;
+  className?: string;
+}
+
+export declare function MessageListMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<KeyboardDirectionMixinClass> & Constructor<MessageListMixinClass> & T;
+
+export declare class MessageListMixinClass {
+  /**
+   * An array of objects which will be rendered as messages.
+   * The message objects can have the following properties:
+   * ```js
+   * Array<{
+   *   text: string,
+   *   time: string,
+   *   userName: string,
+   *   userAbbr: string,
+   *   userImg: string,
+   *   userColorIndex: number,
+   *   className: string,
+   *   theme: string
+   * }>
+   * ```
+   */
+  items: MessageListItem[] | null | undefined;
+}
diff --git a/packages/message-list/src/vaadin-message-list-mixin.js b/packages/message-list/src/vaadin-message-list-mixin.js
new file mode 100644
index 0000000000..ceb7d56912
--- /dev/null
+++ b/packages/message-list/src/vaadin-message-list-mixin.js
@@ -0,0 +1,148 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { html, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+
+/**
+ * @polymerMixin
+ * @mixes KeyboardDirectionMixin
+ */
+export const MessageListMixin = (superClass) =>
+  class MessageListMixinClass extends KeyboardDirectionMixin(superClass) {
+    static get properties() {
+      return {
+        /**
+         * An array of objects which will be rendered as messages.
+         * The message objects can have the following properties:
+         * ```js
+         * Array<{
+         *   text: string,
+         *   time: string,
+         *   userName: string,
+         *   userAbbr: string,
+         *   userImg: string,
+         *   userColorIndex: number,
+         *   className: string,
+         *   theme: string
+         * }>
+         * ```
+         */
+        items: {
+          type: Array,
+          value: () => [],
+          observer: '_itemsChanged',
+        },
+      };
+    }
+
+    /** @protected */
+    get _messages() {
+      return [...this.querySelectorAll('vaadin-message')];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      // Make screen readers announce new messages
+      this.setAttribute('aria-relevant', 'additions');
+      this.setAttribute('role', 'log');
+    }
+
+    /**
+     * Override method inherited from `KeyboardDirectionMixin`
+     * to use the list of message elements as items.
+     *
+     * @return {Element[]}
+     * @protected
+     * @override
+     */
+    _getItems() {
+      return this._messages;
+    }
+
+    /** @private */
+    _itemsChanged(newVal, oldVal) {
+      const items = newVal || [];
+      const oldItems = oldVal || [];
+
+      if (items.length || oldItems.length) {
+        const focusedIndex = this._getIndexOfFocusableElement();
+        const closeToBottom = this.scrollHeight < this.clientHeight + this.scrollTop + 50;
+
+        this._renderMessages(items);
+        this._setTabIndexesByIndex(focusedIndex);
+
+        requestAnimationFrame(() => {
+          if (items.length > oldItems.length && closeToBottom) {
+            this._scrollToLastMessage();
+          }
+        });
+      }
+    }
+
+    /** @private */
+    _renderMessages(items) {
+      render(
+        html`
+          ${items.map(
+            (item) => html`
+              <vaadin-message
+                role="listitem"
+                .time="${item.time}"
+                .userAbbr="${item.userAbbr}"
+                .userName="${item.userName}"
+                .userImg="${item.userImg}"
+                .userColorIndex="${item.userColorIndex}"
+                theme="${ifDefined(item.theme)}"
+                class="${ifDefined(item.className)}"
+                @focusin="${this._onMessageFocusIn}"
+                >${item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
+              ></vaadin-message>
+            `,
+          )}
+        `,
+        this,
+        { host: this },
+      );
+    }
+
+    /** @private */
+    _scrollToLastMessage() {
+      if (this.items.length > 0) {
+        this.scrollTop = this.scrollHeight - this.clientHeight;
+      }
+    }
+
+    /** @private */
+    _onMessageFocusIn(e) {
+      const target = e.composedPath().find((node) => node instanceof customElements.get('vaadin-message'));
+      this._setTabIndexesByMessage(target);
+    }
+
+    /**
+     * @param {number} idx
+     * @protected
+     */
+    _setTabIndexesByIndex(index) {
+      const message = this._messages[index] || this._messages[0];
+      this._setTabIndexesByMessage(message);
+    }
+
+    /** @private */
+    _setTabIndexesByMessage(message) {
+      this._messages.forEach((e) => {
+        e.tabIndex = e === message ? 0 : -1;
+      });
+    }
+
+    /** @private */
+    _getIndexOfFocusableElement() {
+      const index = this._messages.findIndex((e) => e.tabIndex === 0);
+      return index !== -1 ? index : 0;
+    }
+  };
diff --git a/packages/message-list/src/vaadin-message-list.d.ts b/packages/message-list/src/vaadin-message-list.d.ts
index 51e3163fd3..87a2ee18a2 100644
--- a/packages/message-list/src/vaadin-message-list.d.ts
+++ b/packages/message-list/src/vaadin-message-list.d.ts
@@ -3,20 +3,11 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageListMixin } from './vaadin-message-list-mixin.js';
 
-export interface MessageListItem {
-  text?: string;
-  time?: string;
-  userName?: string;
-  userAbbr?: string;
-  userImg?: string;
-  userColorIndex?: number;
-  theme?: string;
-  className?: string;
-}
+export { MessageListItem } from './vaadin-message-list-mixin.js';
 
 /**
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
@@ -51,27 +42,7 @@ export interface MessageListItem {
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class MessageList extends KeyboardDirectionMixin(ThemableMixin(ElementMixin(HTMLElement))) {
-  /**
-   * An array of objects which will be rendered as messages.
-   * The message objects can have the following properties:
-   * ```js
-   * Array<{
-   *   text: string,
-   *   time: string,
-   *   userName: string,
-   *   userAbbr: string,
-   *   userImg: string,
-   *   userColorIndex: number,
-   *   className: string,
-   *   theme: string
-   * }>
-   * ```
-   *
-   * @type {!Array<!MessageListItem>}
-   */
-  items: MessageListItem[] | null | undefined;
-}
+declare class MessageList extends MessageListMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/packages/message-list/src/vaadin-message-list.js b/packages/message-list/src/vaadin-message-list.js
index 864a50466e..38d778fb04 100644
--- a/packages/message-list/src/vaadin-message-list.js
+++ b/packages/message-list/src/vaadin-message-list.js
@@ -3,14 +3,12 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-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 { KeyboardDirectionMixin } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import './vaadin-message.js';
+import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { Message } from './vaadin-message.js';
+import { MessageListMixin } from './vaadin-message-list-mixin.js';
 
 /**
  * `<vaadin-message-list>` is a Web Component for showing an ordered list of messages. The messages are rendered as <vaadin-message>
@@ -49,41 +47,15 @@ import { Message } from './vaadin-message.js';
  * @extends HTMLElement
  * @mixes ThemableMixin
  * @mixes ElementMixin
- * @mixes KeyboardDirectionMixin
+ * @mixes MessageListMixin
  */
-class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class MessageList extends MessageListMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get is() {
     return 'vaadin-message-list';
   }
 
-  static get properties() {
-    return {
-      /**
-       * An array of objects which will be rendered as messages.
-       * The message objects can have the following properties:
-       * ```js
-       * Array<{
-       *   text: string,
-       *   time: string,
-       *   userName: string,
-       *   userAbbr: string,
-       *   userImg: string,
-       *   userColorIndex: number,
-       *   className: string,
-       *   theme: string
-       * }>
-       * ```
-       */
-      items: {
-        type: Array,
-        value: () => [],
-        observer: '_itemsChanged',
-      },
-    };
-  }
-
   static get template() {
-    return legacyHtml`
+    return html`
       <style>
         :host {
           display: block;
@@ -99,113 +71,6 @@ class MessageList extends KeyboardDirectionMixin(ElementMixin(ThemableMixin(Poly
       </div>
     `;
   }
-
-  /** @protected */
-  get _messages() {
-    return [...this.querySelectorAll('vaadin-message')];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    // Make screen readers announce new messages
-    this.setAttribute('aria-relevant', 'additions');
-    this.setAttribute('role', 'log');
-  }
-
-  /**
-   * Override method inherited from `KeyboardDirectionMixin`
-   * to use the list of message elements as items.
-   *
-   * @return {Element[]}
-   * @protected
-   * @override
-   */
-  _getItems() {
-    return this._messages;
-  }
-
-  /** @private */
-  _itemsChanged(newVal, oldVal) {
-    const items = newVal || [];
-    const oldItems = oldVal || [];
-
-    if (items.length || oldItems.length) {
-      const focusedIndex = this._getIndexOfFocusableElement();
-      const closeToBottom = this.scrollHeight < this.clientHeight + this.scrollTop + 50;
-
-      this._renderMessages(items);
-      this._setTabIndexesByIndex(focusedIndex);
-
-      requestAnimationFrame(() => {
-        if (items.length > oldItems.length && closeToBottom) {
-          this._scrollToLastMessage();
-        }
-      });
-    }
-  }
-
-  /** @private */
-  _renderMessages(items) {
-    render(
-      html`
-        ${items.map(
-          (item) => html`
-            <vaadin-message
-              role="listitem"
-              .time="${item.time}"
-              .userAbbr="${item.userAbbr}"
-              .userName="${item.userName}"
-              .userImg="${item.userImg}"
-              .userColorIndex="${item.userColorIndex}"
-              theme="${ifDefined(item.theme)}"
-              class="${ifDefined(item.className)}"
-              @focusin="${this._onMessageFocusIn}"
-              >${item.text}<vaadin-avatar slot="avatar"></vaadin-avatar
-            ></vaadin-message>
-          `,
-        )}
-      `,
-      this,
-      { host: this },
-    );
-  }
-
-  /** @private */
-  _scrollToLastMessage() {
-    if (this.items.length > 0) {
-      this.scrollTop = this.scrollHeight - this.clientHeight;
-    }
-  }
-
-  /** @private */
-  _onMessageFocusIn(e) {
-    const target = e.composedPath().find((node) => node instanceof Message);
-    this._setTabIndexesByMessage(target);
-  }
-
-  /**
-   * @param {number} idx
-   * @protected
-   */
-  _setTabIndexesByIndex(index) {
-    const message = this._messages[index] || this._messages[0];
-    this._setTabIndexesByMessage(message);
-  }
-
-  /** @private */
-  _setTabIndexesByMessage(message) {
-    this._messages.forEach((e) => {
-      e.tabIndex = e === message ? 0 : -1;
-    });
-  }
-
-  /** @private */
-  _getIndexOfFocusableElement() {
-    const index = this._messages.findIndex((e) => e.tabIndex === 0);
-    return index !== -1 ? index : 0;
-  }
 }
 
 defineCustomElement(MessageList);
diff --git a/packages/message-list/src/vaadin-message-mixin.d.ts b/packages/message-list/src/vaadin-message-mixin.d.ts
new file mode 100644
index 0000000000..ef0bdd5c81
--- /dev/null
+++ b/packages/message-list/src/vaadin-message-mixin.d.ts
@@ -0,0 +1,68 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import type { Constructor } from '@open-wc/dedupe-mixin';
+import type { FocusMixinClass } from '@vaadin/a11y-base/src/focus-mixin.js';
+import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
+
+export declare function MessageMixin<T extends Constructor<HTMLElement>>(
+  base: T,
+): Constructor<ControllerMixinClass> & Constructor<FocusMixinClass> & Constructor<MessageMixinClass> & T;
+
+export declare class MessageMixinClass {
+  /**
+   * Time of sending the message. It is rendered as-is to the part='time' slot,
+   * so the formatting is up to you.
+   */
+  time: string | null | undefined;
+
+  /**
+   * The name of the user posting the message.
+   * It will be placed in the name part to indicate who has sent the message.
+   * It is also used as a tooltip for the avatar.
+   * Example: `message.userName = "Jessica Jacobs";`
+   * @attr {string} user-name
+   */
+  userName: string | null | undefined;
+
+  /**
+   * The abbreviation of the user.
+   * The abbreviation will be passed on to avatar of the message.
+   * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
+   * Example: `message.userAbbr = "JJ";`
+   * @attr {string} user-abbr
+   */
+  userAbbr: string | null | undefined;
+
+  /**
+   * An URL for a user image.
+   * The image will be used in the avatar component to show who has sent the message.
+   * Example: `message.userImg = "/static/img/avatar.jpg";`
+   * @attr {string} user-img
+   */
+  userImg: string | null | undefined;
+
+  /**
+   * A color index to be used to render the color of the avatar.
+   * With no `userColorIndex` set, the basic avatar color will be used.
+   * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
+   * If now CSS variable is found for the color index, the property for the color will not be set.
+   *
+   * Example:
+   * CSS:
+   * ```css
+   * html {
+   *   --vaadin-user-color-1: red;
+   * }
+   * ```
+   *
+   * JavaScript:
+   * ```js
+   * message.userColorIndex = 1;
+   * ```
+   * @attr {number} user-color-index
+   */
+  userColorIndex: number | null | undefined;
+}
diff --git a/packages/message-list/src/vaadin-message-mixin.js b/packages/message-list/src/vaadin-message-mixin.js
new file mode 100644
index 0000000000..1334f09e3e
--- /dev/null
+++ b/packages/message-list/src/vaadin-message-mixin.js
@@ -0,0 +1,119 @@
+/**
+ * @license
+ * Copyright (c) 2021 - 2024 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
+
+/**
+ * @polymerMixin
+ * @mixes ControllerMixin
+ * @mixes FocusMixin
+ */
+export const MessageMixin = (superClass) =>
+  class MessageMixinClass extends FocusMixin(ControllerMixin(superClass)) {
+    static get properties() {
+      return {
+        /**
+         * Time of sending the message. It is rendered as-is to the part='time' slot,
+         * so the formatting is up to you.
+         */
+        time: {
+          type: String,
+        },
+
+        /**
+         * The name of the user posting the message.
+         * It will be placed in the name part to indicate who has sent the message.
+         * It is also used as a tooltip for the avatar.
+         * Example: `message.userName = "Jessica Jacobs";`
+         * @attr {string} user-name
+         */
+        userName: {
+          type: String,
+        },
+
+        /**
+         * The abbreviation of the user.
+         * The abbreviation will be passed on to avatar of the message.
+         * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
+         * Example: `message.userAbbr = "JJ";`
+         * @attr {string} user-abbr
+         */
+        userAbbr: {
+          type: String,
+        },
+
+        /**
+         * An URL for a user image.
+         * The image will be used in the avatar component to show who has sent the message.
+         * Example: `message.userImg = "/static/img/avatar.jpg";`
+         * @attr {string} user-img
+         */
+        userImg: {
+          type: String,
+        },
+
+        /**
+         * A color index to be used to render the color of the avatar.
+         * With no `userColorIndex` set, the basic avatar color will be used.
+         * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
+         * If now CSS variable is found for the color index, the property for the color will not be set.
+         *
+         * Example:
+         * CSS:
+         * ```css
+         * html {
+         *   --vaadin-user-color-1: red;
+         * }
+         * ```
+         *
+         * JavaScript:
+         * ```js
+         * message.userColorIndex = 1;
+         * ```
+         * @attr {number} user-color-index
+         */
+        userColorIndex: {
+          type: Number,
+        },
+
+        /** @private */
+        _avatar: {
+          type: Object,
+        },
+      };
+    }
+
+    static get observers() {
+      return ['__avatarChanged(_avatar, userName, userAbbr, userImg, userColorIndex)'];
+    }
+
+    /** @protected */
+    ready() {
+      super.ready();
+
+      this._avatarController = new SlotController(this, 'avatar', 'vaadin-avatar', {
+        initializer: (avatar) => {
+          avatar.setAttribute('tabindex', '-1');
+          avatar.setAttribute('aria-hidden', 'true');
+          this._avatar = avatar;
+        },
+      });
+      this.addController(this._avatarController);
+    }
+
+    /** @private */
+    __avatarChanged(avatar, userName, userAbbr, userImg, userColorIndex) {
+      if (avatar) {
+        avatar.setProperties({
+          name: userName,
+          abbr: userAbbr,
+          img: userImg,
+          colorIndex: userColorIndex,
+        });
+      }
+    }
+  };
diff --git a/packages/message-list/src/vaadin-message.d.ts b/packages/message-list/src/vaadin-message.d.ts
index f62ca43faa..fe94eb9b4c 100644
--- a/packages/message-list/src/vaadin-message.d.ts
+++ b/packages/message-list/src/vaadin-message.d.ts
@@ -3,10 +3,9 @@
  * Copyright (c) 2021 - 2024 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageMixin } from './vaadin-message-mixin.js';
 
 /**
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
@@ -37,61 +36,7 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class Message extends FocusMixin(ThemableMixin(ElementMixin(ControllerMixin(HTMLElement)))) {
-  /**
-   * Time of sending the message. It is rendered as-is to the part='time' slot,
-   * so the formatting is up to you.
-   */
-  time: string | null | undefined;
-
-  /**
-   * The name of the user posting the message.
-   * It will be placed in the name part to indicate who has sent the message.
-   * It is also used as a tooltip for the avatar.
-   * Example: `message.userName = "Jessica Jacobs";`
-   * @attr {string} user-name
-   */
-  userName: string | null | undefined;
-
-  /**
-   * The abbreviation of the user.
-   * The abbreviation will be passed on to avatar of the message.
-   * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
-   * Example: `message.userAbbr = "JJ";`
-   * @attr {string} user-abbr
-   */
-  userAbbr: string | null | undefined;
-
-  /**
-   * An URL for a user image.
-   * The image will be used in the avatar component to show who has sent the message.
-   * Example: `message.userImg = "/static/img/avatar.jpg";`
-   * @attr {string} user-img
-   */
-  userImg: string | null | undefined;
-
-  /**
-   * A color index to be used to render the color of the avatar.
-   * With no `userColorIndex` set, the basic avatar color will be used.
-   * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
-   * If now CSS variable is found for the color index, the property for the color will not be set.
-   *
-   * Example:
-   * CSS:
-   * ```css
-   * html {
-   *   --vaadin-user-color-1: red;
-   * }
-   * ```
-   *
-   * JavaScript:
-   * ```js
-   * message.userColorIndex = 1;
-   * ```
-   * @attr {number} user-color-index
-   */
-  userColorIndex: number | null | undefined;
-}
+declare class Message extends MessageMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
 
 declare global {
   interface HTMLElementTagNameMap {
diff --git a/packages/message-list/src/vaadin-message.js b/packages/message-list/src/vaadin-message.js
index 831ac9f87f..d935b383c3 100644
--- a/packages/message-list/src/vaadin-message.js
+++ b/packages/message-list/src/vaadin-message.js
@@ -5,12 +5,10 @@
  */
 import '@vaadin/avatar/src/vaadin-avatar.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
-import { FocusMixin } from '@vaadin/a11y-base/src/focus-mixin.js';
-import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { MessageMixin } from './vaadin-message-mixin.js';
 
 /**
  * `<vaadin-message>` is a Web Component for showing a single message with an author, message and time.
@@ -43,85 +41,11 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * @customElement
  * @extends HTMLElement
- * @mixes ControllerMixin
- * @mixes FocusMixin
+ * @mixes MessageMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Message extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
-  static get properties() {
-    return {
-      /**
-       * Time of sending the message. It is rendered as-is to the part='time' slot,
-       * so the formatting is up to you.
-       */
-      time: {
-        type: String,
-      },
-
-      /**
-       * The name of the user posting the message.
-       * It will be placed in the name part to indicate who has sent the message.
-       * It is also used as a tooltip for the avatar.
-       * Example: `message.userName = "Jessica Jacobs";`
-       * @attr {string} user-name
-       */
-      userName: {
-        type: String,
-      },
-
-      /**
-       * The abbreviation of the user.
-       * The abbreviation will be passed on to avatar of the message.
-       * If the user does not have an avatar picture set with `userImg`, `userAbbr` will be shown in the avatar.
-       * Example: `message.userAbbr = "JJ";`
-       * @attr {string} user-abbr
-       */
-      userAbbr: {
-        type: String,
-      },
-
-      /**
-       * An URL for a user image.
-       * The image will be used in the avatar component to show who has sent the message.
-       * Example: `message.userImg = "/static/img/avatar.jpg";`
-       * @attr {string} user-img
-       */
-      userImg: {
-        type: String,
-      },
-
-      /**
-       * A color index to be used to render the color of the avatar.
-       * With no `userColorIndex` set, the basic avatar color will be used.
-       * By setting a userColorIndex, the component will check if there exists a CSS variable defining the color, and uses it if there is one.
-       * If now CSS variable is found for the color index, the property for the color will not be set.
-       *
-       * Example:
-       * CSS:
-       * ```css
-       * html {
-       *   --vaadin-user-color-1: red;
-       * }
-       * ```
-       *
-       * JavaScript:
-       * ```js
-       * message.userColorIndex = 1;
-       * ```
-       * @attr {number} user-color-index
-       */
-      userColorIndex: {
-        type: Number,
-      },
-
-      /** @private */
-      _avatar: {
-        ttype: Object,
-      },
-    };
-  }
-
+class Message extends MessageMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   static get template() {
     return html`
       <style>
@@ -175,36 +99,6 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(Poly
   static get is() {
     return 'vaadin-message';
   }
-
-  static get observers() {
-    return ['__avatarChanged(_avatar, userName, userAbbr, userImg, userColorIndex)'];
-  }
-
-  /** @protected */
-  ready() {
-    super.ready();
-
-    this._avatarController = new SlotController(this, 'avatar', 'vaadin-avatar', {
-      initializer: (avatar) => {
-        avatar.setAttribute('tabindex', '-1');
-        avatar.setAttribute('aria-hidden', 'true');
-        this._avatar = avatar;
-      },
-    });
-    this.addController(this._avatarController);
-  }
-
-  /** @private */
-  __avatarChanged(avatar, userName, userAbbr, userImg, userColorIndex) {
-    if (avatar) {
-      avatar.setProperties({
-        name: userName,
-        abbr: userAbbr,
-        img: userImg,
-        colorIndex: userColorIndex,
-      });
-    }
-  }
 }
 
 defineCustomElement(Message);