refactor(dialog): provide message slot (#1536)

Author: SisIvanova

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## Unreleased
+### Added
+- #### Dialog
+  - A new `message` slot that renders text content inside the dialog component has been added. The enhancement was introduced to align the design behavior between Ignite UI for WC and Ignite UI for Angular, ensuring a consistent user experience across products. The newly added `message' slot comes with additional styling with a max-width of 40 characters. The default slot is also still available for rendering content inside the dialog without limiting the component's width.
+
 ## [5.2.0] - 2025-01-09
 ### Added
 - Form-associated elements now have a `defaultValue` property (`defaultChecked` for radio buttons, checkboxes, and switches). When a form is reset, components will use this property’s value as their new value or checked state.

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';
@@ -36,6 +37,7 @@ export interface IgcDialogComponentEventMap {
  *
  * @slot - Renders content inside the default slot.
  * @slot title - Renders the title of the dialog header.
+ * @slot message - Renders the message content of the dialog.
  * @slot footer - Renders the dialog footer.
  *
  * @csspart base - The base wrapper of the dialog.
@@ -76,6 +78,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 +267,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