refactor(dialog): provide message slot

Author: SisIvanova

src/components/dialog/dialog.ts

@@ -14,6 +14,7 @@ import type { Constructor } from '../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import {
   createCounter,
+  isEmpty,
   numberInRangeInclusive,
   partNameMap,
 } from '../common/util.js';
@@ -76,6 +77,9 @@ export default class IgcDialogComponent extends EventEmitterMixin<
   @queryAssignedElements({ slot: 'title' })
   private titleElements!: Array<HTMLElement>;
 
+  @queryAssignedElements({ slot: 'message' })
+  private messageElements!: Array<HTMLElement>;
+
   @queryAssignedElements({ slot: 'footer' })
   private footerElements!: Array<HTMLElement>;
 
@@ -262,6 +266,7 @@ export default class IgcDialogComponent extends EventEmitterMixin<
           <slot name="title"><span>${this.title}</span></slot>
         </header>
         <section part="content">
+          <slot name="message" .hidden=${isEmpty(this.messageElements)}></slot>
           <slot @slotchange=${this.handleContentChange}></slot>
         </section>
         <footer part="footer">

src/components/dialog/themes/dialog.base.scss

@@ -65,6 +65,11 @@ slot[name='footer'] {
     }
 }
 
+[name='message']::slotted(*) {
+    max-width: 40ch;
+    display: inline-block;
+}
+
 dialog::backdrop {
     opacity: 0;
 }

stories/dialog.stories.ts

@@ -124,10 +124,12 @@ const Template = ({
         .open=${open}
         title=${ifDefined(title)}
       >
-        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus rerum
-        enim, incidunt magni ea asperiores laudantium, ducimus itaque quisquam
-        dolore hic labore facere qui unde aliquam, dignissimos perspiciatis?
-        Iusto, iure.
+        <span slot="message">
+          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Possimus
+          rerum enim, incidunt magni ea asperiores laudantium, ducimus itaque
+          quisquam dolore hic labore facere qui unde aliquam, dignissimos
+          perspiciatis? Iusto, iure.
+        </span>
       </igc-dialog>
 
       <igc-dialog