refactor(chat)!: rework styling internals for messages#2188
Conversation
…digo.scss Co-authored-by: Dilyana Yarabanova <45598235+didimmova@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
Refactors the chat message styling to use updated Ignite UI Theming tokens and to differentiate sent vs received messages via separate part names, enabling more granular styling (including corner handling).
Changes:
- Updates shared chat-message styles to use new theme token keys for sent/received backgrounds and colors.
- Adds a
receivedpart to the message container and introduces a theme-controlled “corner radius” CSS variable (with an indigo override). - Removes legacy bootstrap/fluent chat-message theme overrides and trims the per-message base CSS custom properties.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/chat/themes/shared/chat-message/chat-message.indigo.scss | Adds indigo-specific override for --message-corner-radius. |
| src/components/chat/themes/shared/chat-message/chat-message.fluent.scss | Removes fluent-specific override stylesheet (was effectively unused/commented). |
| src/components/chat/themes/shared/chat-message/chat-message.common.scss | Introduces sent/received token-based styling and shared corner-radius behavior. |
| src/components/chat/themes/shared/chat-message/chat-message.bootstrap.scss | Removes bootstrap-specific override stylesheet. |
| src/components/chat/themes/message.ts | Simplifies theme map to only include the indigo override stylesheet. |
| src/components/chat/themes/message.base.scss | Renames/reshapes message CSS custom properties and adjusts container/sent layout styling. |
| src/components/chat/chat-message.ts | Adds received part assignment for non-current-user messages. |
|
|
||
| const parts = { | ||
| 'message-container': true, | ||
| received: !this._state.isCurrentUserMessage(this.message), | ||
| sent: this._state.isCurrentUserMessage(this.message), |
There was a problem hiding this comment.
isCurrentUserMessage(this.message) is computed twice when building parts. Consider storing the result in a local const isSent = ... and deriving both sent/received from it to avoid duplicate work and keep the logic easier to read.
| const parts = { | |
| 'message-container': true, | |
| received: !this._state.isCurrentUserMessage(this.message), | |
| sent: this._state.isCurrentUserMessage(this.message), | |
| const isSent = this._state.isCurrentUserMessage(this.message); | |
| const parts = { | |
| 'message-container': true, | |
| received: !isSent, | |
| sent: isSent, |
| --ig-chat-message-padding-block: #{pad-block(12px)}; | ||
| --ig-chat-message-padding-inline: #{pad-inline(16px)}; | ||
| --ig-chat-message-padding: var(--ig-chat-message-padding-block) | ||
| var(--ig-chat-message-padding-inline); | ||
| --ig-chat-sent-message-start-margin: auto; | ||
| --ig-chat-sent-message-end-margin: unset; | ||
| --ig-chat-message-container-end-margin: auto; |
There was a problem hiding this comment.
New message-level CSS custom properties use the --ig-chat-* prefix, but the rest of the chat component’s public CSS vars use the --igc-chat-* prefix (e.g. --igc-chat-height in chat.base.scss). This looks like an inconsistent/possibly accidental rename that makes the API harder to discover and breaks prefix consistency across components. Consider renaming these to --igc-chat-message-* (and optionally keep the old names as aliases for a deprecation window).
| [part~='sent'] { | ||
| margin-inline: var(--igc-chat-sent-message-start-margin, 0) var(--igc-chat-sent-message-end-margin, 0); | ||
| padding: var(--igc-chat-message-padding); | ||
| border-radius: rem(24px) rem(24px) 0; | ||
| margin-inline: var(--ig-chat-sent-message-start-margin, 0) | ||
| var(--ig-chat-sent-message-end-margin, 0); | ||
| max-width: rem(576px); | ||
| width: fit-content; | ||
| } |
There was a problem hiding this comment.
received messages now get a background via chat-message.common.scss, but only [part~='sent'] constrains width (max-width + width: fit-content). As a result, received message containers will likely stretch to the full available width in the column flex layout, producing a full-width background block. Consider moving the width/max-width constraints to [part~='message-container'] (so both variants are constrained) or adding an equivalent rule for [part~='received'].
| @@ -1,24 +1,36 @@ | |||
| @use 'sass:map'; | |||
There was a problem hiding this comment.
@use 'sass:map'; is unused in this stylesheet. Consider removing it to avoid dead imports and keep the theme files minimal.
| @use 'sass:map'; |
Depends on IgniteUI/igniteui-theming#566
Closes #2150
Description
Improve the styling of the chat messages via updated properties coming from the latest Ignite UI Theming. This is a breaking change since some of the
message-related CSS custom properties have been replaced with specific ones that carry different names.Type of Change
Testing
Open the chat component sample and try modifying the theme using:
Checklist