refactor!: move avatar to vaadin-message light DOM (#4702)

vaadin · Oct 14, 2022 · afd776e · afd776e
1 parent 8439b22
commit afd776e
Show file tree

Hide file tree

Showing 14 changed files with 104 additions and 170 deletions.
diff --git a/packages/message-list/src/vaadin-message-avatar.d.ts b/packages/message-list/src/vaadin-message-avatar.d.ts
diff --git a/packages/message-list/src/vaadin-message-avatar.js b/packages/message-list/src/vaadin-message-avatar.js
diff --git a/packages/message-list/src/vaadin-message.d.ts b/packages/message-list/src/vaadin-message.d.ts
@@ -3,6 +3,7 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
@@ -23,7 +24,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * Part name | Description
  * ----------|----------------
- * `avatar`  | The author's avatar
  * `name`    | Author's name
  * `time`    | When the message was posted
  * `content` | The message itself as a slotted content
@@ -36,15 +36,8 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  * `focused`    | Set when the message is focused.
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
- *
- * ### Internal components
- *
- * In addition to `<vaadin-message>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](#/elements/vaadin-avatar).
  */
-declare class Message extends FocusMixin(ThemableMixin(ElementMixin(HTMLElement))) {
+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.

diff --git a/packages/message-list/src/vaadin-message.js b/packages/message-list/src/vaadin-message.js
@@ -3,10 +3,12 @@
  * Copyright (c) 2021 - 2022 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import './vaadin-message-avatar.js';
+import '@vaadin/avatar/src/vaadin-avatar.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
+import { ControllerMixin } from '@vaadin/component-base/src/controller-mixin.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { FocusMixin } from '@vaadin/component-base/src/focus-mixin.js';
+import { SlotController } from '@vaadin/component-base/src/slot-controller.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 /**
@@ -25,7 +27,6 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * Part name | Description
  * ----------|----------------
- * `avatar`  | The author's avatar
  * `name`    | Author's name
  * `time`    | When the message was posted
  * `content` | The message itself as a slotted content
@@ -39,19 +40,13 @@ import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mix
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/custom-theme/styling-components) documentation.
  *
- * ### Internal components
- *
- * In addition to `<vaadin-message>` itself, the following internal
- * components are themable:
- *
- * - `<vaadin-message-avatar>` - has the same API as [`<vaadin-avatar>`](#/elements/vaadin-avatar).
- *
  * @extends HTMLElement
+ * @mixes ControllerMixin
  * @mixes FocusMixin
  * @mixes ThemableMixin
  * @mixes ElementMixin
  */
-class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
+class Message extends FocusMixin(ElementMixin(ThemableMixin(ControllerMixin(PolymerElement)))) {
   static get properties() {
     return {
       /**
@@ -117,6 +112,11 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
       userColorIndex: {
         type: Number,
       },
+
+      /** @private */
+      _avatar: {
+        ttype: Object,
+      },
     };
   }
 
@@ -153,16 +153,13 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
         [part='message'] {
           white-space: pre-wrap;
         }
+
+        ::slotted([slot='avatar']) {
+          --vaadin-avatar-outline-width: 0px;
+          flex-shrink: 0;
+        }
       </style>
-      <vaadin-message-avatar
-        part="avatar"
-        name="[[userName]]"
-        abbr="[[userAbbr]]"
-        img="[[userImg]]"
-        color-index="[[userColorIndex]]"
-        tabindex="-1"
-        aria-hidden="true"
-      ></vaadin-message-avatar>
+      <slot name="avatar"></slot>
       <div part="content">
         <div part="header">
           <span part="name">[[userName]]</span>
@@ -176,6 +173,39 @@ class Message extends FocusMixin(ElementMixin(ThemableMixin(PolymerElement))) {
   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',
+      () => document.createElement('vaadin-avatar'),
+      (_, 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,
+      });
+    }
+  }
 }
 
 customElements.define(Message.is, 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
@@ -24,12 +24,30 @@ snapshots["vaadin-message-list items"] =
     tabindex="0"
   >
     Hi folks!
+    <vaadin-avatar
+      abbr="JD"
+      aria-hidden="true"
+      name="Jane Doe"
+      role="button"
+      slot="avatar"
+      tabindex="-1"
+    >
+    </vaadin-avatar>
   </vaadin-message>
   <vaadin-message
     role="listitem"
     tabindex="-1"
   >
     Good morning!
+    <vaadin-avatar
+      abbr="LR"
+      aria-hidden="true"
+      name="Lina Roy"
+      role="button"
+      slot="avatar"
+      tabindex="-1"
+    >
+    </vaadin-avatar>
   </vaadin-message>
   <dom-repeat style="display: none;">
     <template is="dom-repeat">
@@ -50,6 +68,15 @@ snapshots["vaadin-message-list theme"] =
     theme="danger"
   >
     Partial service outage.
+    <vaadin-avatar
+      abbr="A"
+      aria-hidden="true"
+      name="Admin"
+      role="button"
+      slot="avatar"
+      tabindex="-1"
+    >
+    </vaadin-avatar>
   </vaadin-message>
   <dom-repeat style="display: none;">
     <template is="dom-repeat">

diff --git a/packages/message-list/test/dom/__snapshots__/message.test.snap.js b/packages/message-list/test/dom/__snapshots__/message.test.snap.js
@@ -2,13 +2,8 @@
 export const snapshots = {};
 
 snapshots["vaadin-message default"] = 
-`<vaadin-message-avatar
-  aria-hidden="true"
-  part="avatar"
-  role="button"
-  tabindex="-1"
->
-</vaadin-message-avatar>
+`<slot name="avatar">
+</slot>
 <div part="content">
   <div part="header">
     <span part="name">
@@ -25,15 +20,8 @@ snapshots["vaadin-message default"] =
 /* end snapshot vaadin-message default */
 
 snapshots["vaadin-message userName"] = 
-`<vaadin-message-avatar
-  abbr="JD"
-  aria-hidden="true"
-  name="Joan Doe"
-  part="avatar"
-  role="button"
-  tabindex="-1"
->
-</vaadin-message-avatar>
+`<slot name="avatar">
+</slot>
 <div part="content">
   <div part="header">
     <span part="name">
@@ -51,14 +39,8 @@ snapshots["vaadin-message userName"] =
 /* end snapshot vaadin-message userName */
 
 snapshots["vaadin-message userAbbr"] = 
-`<vaadin-message-avatar
-  abbr="JD"
-  aria-hidden="true"
-  part="avatar"
-  role="button"
-  tabindex="-1"
->
-</vaadin-message-avatar>
+`<slot name="avatar">
+</slot>
 <div part="content">
   <div part="header">
     <span part="name">
@@ -75,14 +57,8 @@ snapshots["vaadin-message userAbbr"] =
 /* end snapshot vaadin-message userAbbr */
 
 snapshots["vaadin-message userImg"] = 
-`<vaadin-message-avatar
-  aria-hidden="true"
-  img="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
-  part="avatar"
-  role="button"
-  tabindex="-1"
->
-</vaadin-message-avatar>
+`<slot name="avatar">
+</slot>
 <div part="content">
   <div part="header">
     <span part="name">
@@ -99,15 +75,8 @@ snapshots["vaadin-message userImg"] =
 /* end snapshot vaadin-message userImg */
 
 snapshots["vaadin-message userColorIndex"] = 
-`<vaadin-message-avatar
-  aria-hidden="true"
-  has-color-index=""
-  part="avatar"
-  role="button"
-  style="--vaadin-avatar-user-color:var(--vaadin-user-color-2);"
-  tabindex="-1"
->
-</vaadin-message-avatar>
+`<slot name="avatar">
+</slot>
 <div part="content">
   <div part="header">
     <span part="name">
@@ -124,13 +93,8 @@ snapshots["vaadin-message userColorIndex"] =
 /* end snapshot vaadin-message userColorIndex */
 
 snapshots["vaadin-message time"] = 
-`<vaadin-message-avatar
-  aria-hidden="true"
-  part="avatar"
-  role="button"
-  tabindex="-1"
->
-</vaadin-message-avatar>
+`<slot name="avatar">
+</slot>
 <div part="content">
   <div part="header">
     <span part="name">

diff --git a/packages/message-list/theme/lumo/vaadin-message-avatar-styles.js b/packages/message-list/theme/lumo/vaadin-message-avatar-styles.js
diff --git a/packages/message-list/theme/lumo/vaadin-message-avatar.js b/packages/message-list/theme/lumo/vaadin-message-avatar.js
diff --git a/packages/message-list/theme/lumo/vaadin-message-styles.js b/packages/message-list/theme/lumo/vaadin-message-styles.js
@@ -3,7 +3,7 @@ import '@vaadin/vaadin-lumo-styles/sizing.js';
 import '@vaadin/vaadin-lumo-styles/spacing.js';
 import '@vaadin/vaadin-lumo-styles/style.js';
 import '@vaadin/vaadin-lumo-styles/typography.js';
-import './vaadin-message-avatar-styles.js';
+import '@vaadin/avatar/theme/lumo/vaadin-avatar-styles.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
@@ -49,6 +49,12 @@ registerStyles(
       color: var(--lumo-secondary-text-color);
       font-size: var(--lumo-font-size-s);
     }
+
+    ::slotted([slot='avatar']) {
+      --vaadin-avatar-size: var(--lumo-size-m);
+      margin-top: calc(var(--lumo-space-s));
+      margin-inline-end: calc(var(--lumo-space-m));
+    }
   `,
   { moduleId: 'lumo-message' },
 );
diff --git a/packages/message-list/theme/lumo/vaadin-message.js b/packages/message-list/theme/lumo/vaadin-message.js
@@ -1,3 +1,2 @@
 import './vaadin-message-styles.js';
-import './vaadin-message-avatar.js';
 import '../../src/vaadin-message.js';