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

Author: tomivirkki

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

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { MessageListMixin } from './vaadin-message-list-mixin.js';
 
@@ -42,7 +43,7 @@ export { MessageListItem } from './vaadin-message-list-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  */
-declare class MessageList extends MessageListMixin(ThemableMixin(ElementMixin(HTMLElement))) {}
+declare class MessageList extends SlotStylesMixin(MessageListMixin(ThemableMixin(ElementMixin(HTMLElement)))) {}
 
 declare global {
   interface HTMLElementTagNameMap {

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

@@ -8,6 +8,7 @@ import { css, html, LitElement } from 'lit';
 import { defineCustomElement } from '@vaadin/component-base/src/define.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
 import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
+import { SlotStylesMixin } from '@vaadin/component-base/src/slot-styles-mixin.js';
 import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 import { MessageListMixin } from './vaadin-message-list-mixin.js';
 
@@ -49,8 +50,9 @@ import { MessageListMixin } from './vaadin-message-list-mixin.js';
  * @mixes ThemableMixin
  * @mixes ElementMixin
  * @mixes MessageListMixin
+ * @mixes SlotStylesMixin
  */
-class MessageList extends MessageListMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement)))) {
+class MessageList extends SlotStylesMixin(MessageListMixin(ElementMixin(ThemableMixin(PolylitMixin(LitElement))))) {
   static get is() {
     return 'vaadin-message-list';
   }
@@ -76,6 +78,22 @@ class MessageList extends MessageListMixin(ElementMixin(ThemableMixin(PolylitMix
       </div>
     `;
   }
+
+  /** @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;
+      }
+      `,
+    ];
+  }
 }
 
 defineCustomElement(MessageList);

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`);
+        });
       });
     });
   });