Merge branch 'master' into mtsvyatkova/feat-1379-tile-manager

Author: rkaraivanov

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;
 }

src/components/list/list.ts

@@ -6,6 +6,7 @@ import IgcListHeaderComponent from './list-header.js';
 import IgcListItemComponent from './list-item.js';
 import { styles } from './themes/container.base.css.js';
 import { all } from './themes/container.js';
+import { styles as shared } from './themes/shared/container/list.common.css.js';
 
 /**
  * Displays a collection of data items in a templatable list format.
@@ -17,7 +18,7 @@ import { all } from './themes/container.js';
 @themes(all)
 export default class IgcListComponent extends LitElement {
   public static readonly tagName = 'igc-list';
-  public static override styles = styles;
+  public static override styles = [styles, shared];
 
   /* blazorSuppress */
   public static register() {

src/components/list/themes/container.base.scss

@@ -1,15 +1,10 @@
 @use 'styles/common/component';
 @use 'styles/utilities' as *;
-@use './light/themes' as *;
-
-$theme: $material;
 
 :host {
     display: flex;
     flex-flow: column nowrap;
     font-family: var(--ig-font-family);
     overflow: hidden auto;
     height: auto;
-    background: var-get($theme, 'background');
-    border-radius: var-get($theme, 'border-radius');
 }

src/components/list/themes/container.ts

@@ -17,7 +17,6 @@ import { styles as sharedLight } from './light/container/list.shared.css.js';
 import { styles as bootstrap } from './shared/container/list.bootstrap.css.js';
 import { styles as fluent } from './shared/container/list.fluent.css.js';
 import { styles as indigo } from './shared/container/list.indigo.css.js';
-import { styles as material } from './shared/container/list.material.css.js';
 
 const light = {
   shared: css`
@@ -27,7 +26,7 @@ const light = {
     ${bootstrap} ${bootstrapLight}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${materialLight}
   `,
   fluent: css`
     ${fluent} ${fluentLight}
@@ -45,7 +44,7 @@ const dark = {
     ${bootstrap} ${bootstrapDark}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${materialDark}
   `,
   fluent: css`
     ${fluent} ${fluentDark}

src/components/list/themes/shared/container/list.bootstrap.scss

@@ -6,7 +6,5 @@ $theme: $bootstrap;
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
 
-    background: var-get($theme, 'background');
-    border: rem(1px) solid var-get($theme, 'border-color');
-    border-radius: var-get($theme, 'border-radius');
+    border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 }

…emes/shared/container/list.material.scss …themes/shared/container/list.common.scsssrc/components/list/themes/shared/container/list.material.scss renamed to src/components/list/themes/shared/container/list.common.scss src/components/list/themes/shared/container/list.material.scss renamed to src/components/list/themes/shared/container/list.common.scss

@@ -1,8 +1,11 @@
 @use 'styles/utilities' as *;
 @use '../../light/themes' as *;
 
-$theme: $material;
+$theme: $base;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')}) !important;
-}
+
+    background: var-get($theme, 'background');
+    border-radius: var-get($theme, 'border-radius');
+}

src/components/list/themes/shared/item/list-item.bootstrap.scss

@@ -1,20 +1,5 @@
 @use 'styles/utilities' as *;
-@use '../../light/themes' as *;
-
-$theme: $bootstrap;
-
-:host {
-    border-bottom: rem(1px) solid var-get($theme, 'border-color');
-}
-
-:host(:last-of-type) {
-    border-bottom: none;
-}
 
 [part='title'] {
     @include type-style('body-1');
 }
-
-[part='subtitle'] {
-    @include type-style('body-2');
-}

src/components/list/themes/shared/item/list-item.common.scss

@@ -7,19 +7,33 @@ $theme: $material;
     border-radius: var-get($theme, 'item-border-radius');
     color: var-get($theme, 'item-text-color');
     background: var-get($theme, 'item-background');
+    border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');
 }
 
-::slotted(igc-icon) {
+:host(:last-of-type) {
+    border-bottom: none;
+}
+
+[part='title'] {
+    color: var-get($theme, 'item-title-color');
+}
+
+[part='subtitle'] {
+    color: var-get($theme, 'item-subtitle-color');
+}
+
+[part='start'] {
+    color: var-get($theme, 'item-thumbnail-color');
+}
+
+[part='end'] {
     color: var-get($theme, 'item-action-color');
 }
 
 :host(:hover),
 :host(:focus-within) {
     background: var-get($theme, 'item-background-hover');
-
-    ::slotted(igc-icon) {
-        color: var-get($theme, 'item-action-color-hover');
-    }
+    color: var-get($theme, 'item-text-color-hover');
 
     [part='title'] {
         color: var-get($theme, 'item-title-color-hover');
@@ -38,18 +52,23 @@ $theme: $material;
     }
 }
 
-[part='title'] {
-    color: var-get($theme, 'item-title-color');
-}
+:host(:active) {
+    color: var-get($theme, 'item-text-color-active');
+    background: var-get($theme, 'item-background-active');
 
-[part='subtitle'] {
-    color: var-get($theme, 'item-subtitle-color');
-}
+    [part='title'] {
+        color: var-get($theme, 'item-title-color-active');
+    }
 
-[part='start'] {
-    color: var-get($theme, 'item-thumbnail-color');
-}
+    [part='subtitle'] {
+        color: var-get($theme, 'item-subtitle-color-active');
+    }
 
-[part='end'] {
-    color: var-get($theme, 'item-action-color');
+    [part='start'] {
+        color: var-get($theme, 'item-thumbnail-color-active');
+    }
+
+    [part='end'] {
+        color: var-get($theme, 'item-action-color-active');
+    }
 }