fix: remove message list markdown outermost margins (#9254) (#9263)

Author: tomivirkki

packages/message-list/src/vaadin-message-list-mixin.d.ts

@@ -5,6 +5,7 @@
  */
 import type { Constructor } from '@open-wc/dedupe-mixin';
 import type { KeyboardDirectionMixinClass } from '@vaadin/a11y-base/src/keyboard-direction-mixin.js';
+import type { SlotStylesMixinClass } from '@vaadin/component-base/src/slot-styles-mixin.js';
 
 export interface MessageListItem {
   text?: string;
@@ -19,7 +20,10 @@ export interface MessageListItem {
 
 export declare function MessageListMixin<T extends Constructor<HTMLElement>>(
   base: T,
-): Constructor<KeyboardDirectionMixinClass> & Constructor<MessageListMixinClass> & T;
+): Constructor<KeyboardDirectionMixinClass> &
+  Constructor<MessageListMixinClass> &
+  Constructor<SlotStylesMixinClass> &
+  T;
 
 export declare class MessageListMixinClass {
   /**

packages/message-list/src/vaadin-message-list-mixin.js

@@ -6,13 +6,15 @@
 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 { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin';
 
 /**
  * @polymerMixin
  * @mixes KeyboardDirectionMixin
+ * @mixes SlotStylesMixin
  */
 export const MessageListMixin = (superClass) =>
-  class MessageListMixinClass extends KeyboardDirectionMixin(superClass) {
+  class MessageListMixinClass extends SlotStylesMixin(KeyboardDirectionMixin(superClass)) {
     static get properties() {
       return {
         /**
@@ -64,6 +66,22 @@ export const MessageListMixin = (superClass) =>
       this.setAttribute('role', 'log');
     }
 
+    /** @protected */
+    get slotStyles() {
+      const tag = this.localName;
+      return [
+        `
+      ${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):first-child) {
+        margin-top: 0;
+      }
+
+      ${tag} :where(vaadin-markdown > :is(h1, h2, h3, h4, h5, h6, p, ul, ol):last-child) {
+        margin-bottom: 0;
+      }
+      `,
+      ];
+    }
+
     /**
      * Override method inherited from `KeyboardDirectionMixin`
      * to use the list of message elements as items.

packages/message-list/test/visual/lumo/message-list.test.js

@@ -68,6 +68,22 @@ describe('message-list', () => {
           await nextFrame();
           await visualDiff(div, `${dir}-markdown`);
         });
+
+        it('markdown - margin overrides', async () => {
+          // Override the default margins in application styles with a stronger selector
+          fixtureSync(`
+            <style>
+              vaadin-message-list p {
+                margin: 20px;
+              }
+            </style>
+          `);
+
+          element.markdown = true;
+          await customElements.whenDefined('vaadin-markdown');
+          await nextFrame();
+          await visualDiff(div, `${dir}-markdown-margin-overrides`);
+        });
       });
     });
   });

packages/message-list/test/visual/lumo/screenshots/message-list/baseline/ltr-markdown-margin-overrides.png

@@ -68,6 +68,22 @@ describe('message-list', () => {
           await nextFrame();
           await visualDiff(div, `${dir}-markdown`);
         });
+
+        it('markdown - margin overrides', async () => {
+          // Override the default margins in application styles with a stronger selector
+          fixtureSync(`
+            <style>
+              vaadin-message-list p {
+                margin: 20px;
+              }
+            </style>
+          `);
+
+          element.markdown = true;
+          await customElements.whenDefined('vaadin-markdown');
+          await nextFrame();
+          await visualDiff(div, `${dir}-markdown-margin-overrides`);
+        });
       });
     });
   });