Skip to content

Chat FU: rework styles after design review #31627

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 14 commits into from
Nov 11, 2025
Merged

Chat FU: rework styles after design review #31627

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
77a8c06
Chat FU: rework styles after design review
Zedwag Nov 7, 2025
aeb384a
update testcafe test
Zedwag Nov 7, 2025
8945185
update test
Zedwag Nov 7, 2025
bb26666
update etanol
Zedwag Nov 7, 2025
a59b638
Merge branch '25_2' of https://github.com/DevExpress/DevExtreme into …
Zedwag Nov 7, 2025
dec6244
move cancel button margin to fileUploader
Zedwag Nov 10, 2025
3ab6027
move cancel button margin to fileUploader
Zedwag Nov 10, 2025
12af54a
revert pg
Zedwag Nov 10, 2025
5f7d6ca
move cancel button margin to fileUploader
Zedwag Nov 10, 2025
e2454f1
additional style reworks
Zedwag Nov 10, 2025
8e8a64b
additional style reworks
Zedwag Nov 10, 2025
8c8020c
additional style reworks
Zedwag Nov 10, 2025
84a17c3
additional style reworks
Zedwag Nov 10, 2025
7f1946f
Merge branch 25_2 of https://github.com/DevExpress/DevExtreme into ch…
Zedwag Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions e2e/testcafe-devextreme/tests/editors/chat/data/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,3 +107,10 @@ export const generateFileMessage = (author: User, longText = false): Message =>
author,
attachments,
});

export const generateFileMessageWithoutText = (author: User): Message => ({
text: '',
timestamp,
author,
attachments,
});
Binary file added ...sts/editors/chat/etalons/Bubble with files without text (fluent.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/chat/etalons/Messagebox with attachments and informer (fluent.blue.light).png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions e2e/testcafe-devextreme/tests/editors/chat/messageBubble.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
generateImageMessage,
generateMessages,
generateFileMessage,
generateFileMessageWithoutText,
} from './data';
import url from '../../../helpers/getPageUrl';
import { createWidget } from '../../../helpers/createWidget';
Expand Down Expand Up @@ -70,6 +71,13 @@ test('Chat: messagebubble with images and files', async (t) => {
});
await testScreenshot(t, takeScreenshot, 'Bubbles with files.png', { element: '#chat' });

await chat.option({
width: 600,
height: 600,
items: [generateFileMessageWithoutText(user)],
});
await testScreenshot(t, takeScreenshot, 'Bubble with files without text.png', { element: '#chat' });

await t.expect(compareResults.isValid()).ok(compareResults.errorMessages());
}).before(async () => {
await appendElementTo('#container', 'div', 'chat');
Expand Down
11 changes: 11 additions & 0 deletions packages/devextreme-scss/scss/widgets/base/_fileUploader.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,8 +110,14 @@
height: 28px;
margin-right: 10px;

&.dx-fileuploader-cancel-button-position-end {
margin-right: 0;
margin-left: 4px;
}

&.dx-state-invisible {
margin-right: 0;
margin-left: 0;
}
}
}
Expand Down Expand Up @@ -214,6 +220,11 @@
.dx-fileuploader-file-container .dx-fileuploader-button {
margin-left: 10px;
margin-right: 0;

&.dx-fileuploader-cancel-button-position-end {
margin-left: 0;
margin-right: 4px;
}
}

.dx-fileuploader-file-name,
Expand Down
6 changes: 4 additions & 2 deletions packages/devextreme-scss/scss/widgets/base/chat/layout/chat-fileview/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
$chat-file-secondary-font-size,
$chat-file-secondary-color,
$chat-file-base-section-gap,
$chat-file-file-size-max-width
$chat-file-size-max-width,
$chat-file-icon-font-size,
) {
.dx-chat-file {
width: $chat-file-container-width;
Expand All @@ -25,6 +26,7 @@

.dx-icon {
color: $chat-file-secondary-color;
font-size: $chat-file-icon-font-size;
}
}

Expand All @@ -34,7 +36,7 @@
}

.dx-chat-file-size {
max-width: $chat-file-file-size-max-width;
max-width: $chat-file-size-max-width;
margin-inline-end: $chat-file-base-section-gap;
font-size: $chat-file-secondary-font-size;
color: $chat-file-secondary-color;
Expand Down
13 changes: 9 additions & 4 deletions packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,9 @@
$textarea-padding,
$toolbar-min-height,
$chat-file-container-width,
$messagebox-file-container-padding,
$messagebox-file-container-padding-top,
$messagebox-files-container-padding,
$messagebox-files-container-padding-top,
$messagebox-file-background-color,
) {
.dx-chat-messagebox {
padding: $messagebox-padding;
Expand All @@ -34,10 +35,14 @@
}

.dx-fileuploader-files-container {
padding: $messagebox-file-container-padding;
padding-top: $messagebox-file-container-padding-top;
padding: $messagebox-files-container-padding;
padding-top: $messagebox-files-container-padding-top;
gap: $gap;
grid-template-columns: repeat(auto-fit, $chat-file-container-width);

.dx-fileuploader-file-container {
background-color: $messagebox-file-background-color;
}
}
}

Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ $chat-messagebubble-max-height-image: 400px !default;
&.dx-has-image {
padding: $chat-messagebubble-padding-image;
}

.dx-chat-messagebubble-content:empty {
display: none;
}
}

.dx-chat-messagegroup-alignment-start {
Expand Down
6 changes: 4 additions & 2 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@use "../sizes" as *;
@use "../colors" as *;
@use "../textEditor/colors" as *;
@use "../button/colors" as *;

// adduse

Expand All @@ -17,6 +18,7 @@ $chat-background-color: $base-bg !default;
*/
$chat-border-color: $base-border-color !default;
$chat-messagebox-border-color: $chat-border-color !default;
$chat-messagebox-file-background-color: $button-normal-text-hover-bg !default;
$chat-message-editing-preview-accent-color: $base-accent !default;
$chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;

Expand Down Expand Up @@ -141,7 +143,7 @@ $chat-file-secondary-color: null !default;
$chat-typingindicator-circle-bg-color-center: darken($base-bg, 56.08) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.12), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.14) !default;
$chat-file-secondary-color: lighten($base-text-color, 29.80) !default;
$chat-file-secondary-color: $base-icon-color !default;

@if $color == "blue" {
$chat-bubble-background-color-primary: lighten(desaturate(adjust-hue($base-accent, 3.8), 11.4), 55.5) !default;
Expand Down Expand Up @@ -171,7 +173,7 @@ $chat-file-secondary-color: null !default;
$chat-typingindicator-circle-bg-color-center: lighten($base-bg, 43.92) !default;

$chat-file-container-box-shadow: 0 0 2px 0 color.change($base-shadow-color, $alpha: 0.28), 0 1px 2px 0 color.change($base-shadow-color, $alpha: 0.32) !default;
$chat-file-secondary-color: darken($base-text-color, 40.00) !default;
$chat-file-secondary-color: $base-icon-color !default;
}

/**
Expand Down
8 changes: 5 additions & 3 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@
$chat-file-secondary-font-size,
$chat-file-secondary-color,
$chat-file-base-section-gap,
$chat-file-file-size-max-width,
$chat-file-size-max-width,
$chat-file-icon-font-size,
);
@include chat-fileview(
$chat-file-view-items-gap,
Expand All @@ -47,8 +48,9 @@
$chat-messagebox-textarea-padding,
$chat-messagebox-toolbar-min-height,
$chat-file-container-width,
$chat-messagebox-file-container-padding,
$chat-messagebox-file-container-padding-top,
$chat-messagebox-files-container-padding,
$chat-messagebox-files-container-padding-top,
$chat-messagebox-file-background-color,
);
@include chat-messagebubble(
$chat-bubble-padding,
Expand Down
11 changes: 8 additions & 3 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ $chat-messagebox-textarea-padding: null !default;
$chat-messagebox-textarea-border-radius: null !default;
$chat-messagebox-toolbar-min-height: null !default;
$chat-messagebox-gap: 8px !default;
$chat-messagebox-file-container-padding: 3px !default;
$chat-messagebox-file-container-padding-top: 2px !default;
$chat-messagebox-files-container-padding: 3px !default;
$chat-messagebox-files-container-padding-top: 2px !default;
$chat-messagelist-padding: null !default;
$chat-messagegroup-gap: 4px !default;
$chat-messagegroup-padding: null !default;
Expand Down Expand Up @@ -74,7 +74,8 @@ $chat-file-container-border-radius: $fluent-base-border-radius !default;
$chat-file-button-size: $fluent-button-height !default;
$chat-file-secondary-font-size: 10px !default;
$chat-file-base-section-gap: 4px !default;
$chat-file-file-size-max-width: 4em !default;
$chat-file-size-max-width: 4em !default;
$chat-file-icon-font-size: null !default;
$chat-file-view-items-gap: 8px !default;
$chat-bubble-gap: 8px !default;

Expand Down Expand Up @@ -112,6 +113,8 @@ $chat-bubble-gap: 8px !default;
$chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;

$chat-confirmation-popup-toolbar-gap: 8px !default;

$chat-file-icon-font-size: 20px !default;
}

@else if $size == "compact" {
Expand Down Expand Up @@ -148,4 +151,6 @@ $chat-bubble-gap: 8px !default;
$chat-typingindicator-bubble-border-radius: $chat-bubble-border-radius !default;

$chat-confirmation-popup-toolbar-gap: 4px !default;

$chat-file-icon-font-size: 16px !default;
}
1 change: 1 addition & 0 deletions packages/devextreme-scss/scss/widgets/fluent/fileUploader/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
* $type color
*/
$fileuploader-filename-color: $base-text-color !default;
$fileuploader-file-icon-color: $base-icon-color !default;
$fileuploader-progressbar-status-color: $base-text-color !default;
$fluent-fileuploader-files-container-bg-color: $base-bg !default;

Expand Down
15 changes: 15 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/fileUploader/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,9 +129,19 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
width: $fluent-fileuploader-file-container-button-size;
margin-right: $fluent-fileuploader-file-container-button-margin;

&.dx-fileuploader-cancel-button-position-end {
margin-right: 0;
margin-left: $fluent-fileuploader-file-cancel-button-margin-left;
}

.dx-rtl & {
margin-left: $fluent-fileuploader-file-container-button-margin;
margin-right: 0;

&.dx-fileuploader-cancel-button-position-end {
margin-left: 0;
margin-right: $fluent-fileuploader-file-cancel-button-margin-left;
}
}
}
}
Expand All @@ -147,6 +157,11 @@ $fluent-fileuploader-file-container-boxshadow: 0 1px 3px 0 color.change($base-sh
line-height: 13px;
}

.dx-fileuploader-file-icon {
color: $fileuploader-file-icon-color;
font-size: $fluent-fileuploader-file-icon-font-size;
}

.dx-fileuploader-file-name {
padding-bottom: math.div($fluent-fileuploader-vertical-padding, 2);
color: $fileuploader-filename-color;
Expand Down
4 changes: 4 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/fileUploader/_sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@
$fluent-fileuploader-file-container-padding: null !default;
$fluent-fileuploader-file-container-text-margin: null !default;
$fluent-fileuploader-file-container-button-margin: null !default;
$fluent-fileuploader-file-cancel-button-margin-left: 4px !default;
Copy link
Contributor

@marker-dao marker-dao Nov 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
$fluent-fileuploader-file-cancel-button-margin-left: 4px !default;
$fluent-fileuploader-file-cancel-button-margin-start: 4px !default;

$fluent-fileuploader-file-container-button-size: null !default;

$fluent-fileuploader-vertical-padding: 7px !default;
$fluent-fileuploader-files-container-padding: null !default;
$fluent-fileuploader-file-size-margin: null !default;
$fluent-fileuploader-file-icon-font-size: null !default;
$fluent-fileuploader-files-container-rounding: 4px !default;

@if $size == "default" {
Expand All @@ -19,6 +21,7 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
$fluent-fileuploader-file-container-button-size: 32px !default;
$fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
$fluent-fileuploader-file-size-margin: 0 0 0 4px !default;
$fluent-fileuploader-file-icon-font-size: 20px !default;
}

@else if $size == "compact" {
Expand All @@ -28,4 +31,5 @@ $fluent-fileuploader-files-container-rounding: 4px !default;
$fluent-fileuploader-file-container-button-size: 28px !default;
$fluent-fileuploader-files-container-padding: 12px 4px 0 !default;
$fluent-fileuploader-file-size-margin: 0 0 4px !default;
$fluent-fileuploader-file-icon-font-size: 16px !default;
}
2 changes: 2 additions & 0 deletions packages/devextreme-scss/scss/widgets/generic/chat/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@use "../sizes" as *;
@use "../colors" as *;
@use "../textEditor/colors" as *;
@use "../button/colors" as *;

// adduse

Expand All @@ -17,6 +18,7 @@ $chat-background-color: $base-bg !default;
*/
$chat-border-color: $base-border-color !default;
$chat-messagebox-border-color: $chat-border-color !default;
$chat-messagebox-file-background-color: $button-normal-text-bg-hover !default;
$chat-message-editing-preview-accent-color: $base-accent !default;
$chat-message-editing-preview-cancel-button-color: $texteditor-label-color !default;

Expand Down
19 changes: 16 additions & 3 deletions packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
$chat-file-secondary-font-size,
$chat-file-secondary-color,
$chat-file-base-section-gap,
$chat-file-file-size-max-width,
$chat-file-size-max-width,
$chat-file-icon-font-size,
);
@include chat-fileview(
$chat-file-view-items-gap,
Expand All @@ -50,8 +51,9 @@
$chat-messagebox-textarea-padding,
$chat-messagebox-toolbar-min-height,
$chat-file-container-width,
$chat-messagebox-file-container-padding,
$chat-messagebox-file-container-padding-top,
$chat-messagebox-files-container-padding,
$chat-messagebox-files-container-padding-top,
$chat-messagebox-file-background-color,
);
@include chat-messagebubble(
$chat-bubble-padding,
Expand Down Expand Up @@ -139,3 +141,14 @@
.dx-chat-file {
@include dx-base-typography();
}

.dx-chat-textarea.dx-textarea {
.dx-fileuploader-file-container {
padding: $chat-messagebox-file-container-padding;
border-radius: $chat-messagebox-file-container-border-radius;
}

.dx-fileuploader-cancel-button {
background-color: transparent;
}
}
15 changes: 12 additions & 3 deletions packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,10 @@ $chat-messagebox-textarea-border-radius: $texteditor-input-border-radius !defaul
$chat-messagebox-textarea-padding: null !default;
$chat-messagebox-toolbar-min-height: null !default;
$chat-messagebox-gap: 8px !default;
$chat-messagebox-file-container-padding: 3px !default;
$chat-messagebox-file-container-padding-top: 2px !default;
$chat-messagebox-files-container-padding: 3px !default;
$chat-messagebox-files-container-padding-top: 2px !default;
$chat-messagebox-file-container-padding: null !default;
$chat-messagebox-file-container-border-radius: 4px !default;
$chat-messagelist-padding: null !default;
$chat-messagegroup-gap: 4px !default;
$chat-messagegroup-padding: null !default;
Expand Down Expand Up @@ -73,7 +75,8 @@ $chat-file-container-border-radius: $base-border-radius !default;
$chat-file-button-size: null !default;
$chat-file-secondary-font-size: 10px !default;
$chat-file-base-section-gap: 4px !default;
$chat-file-file-size-max-width: 4em !default;
$chat-file-size-max-width: 4em !default;
$chat-file-icon-font-size: null !default;
$chat-file-view-items-gap: 8px !default;
$chat-bubble-gap: 8px !default;

Expand All @@ -84,6 +87,7 @@ $chat-bubble-gap: 8px !default;
$chat-messagebox-padding: 20px !default;
$chat-messagebox-textarea-padding: 9px !default;
$chat-messagebox-toolbar-min-height: 36px !default;
$chat-messagebox-file-container-padding: 5px 8px !default;
$chat-messagelist-padding: 20px !default;
$chat-messagegroup-padding: 24px !default;

Expand Down Expand Up @@ -111,6 +115,8 @@ $chat-bubble-gap: 8px !default;

$chat-confirmation-popup-content-padding: 0 !default;
$chat-confirmation-popup-toolbar-gap: 8px !default;

$chat-file-icon-font-size: 18px !default;
}

@else if $size == "compact" {
Expand All @@ -120,6 +126,7 @@ $chat-bubble-gap: 8px !default;
$chat-messagebox-padding: 16px !default;
$chat-messagebox-textarea-padding: 5px !default;
$chat-messagebox-toolbar-min-height: 26px !default;
$chat-messagebox-file-container-padding: 2px 4px !default;
$chat-messagelist-padding: 16px !default;
$chat-messagegroup-padding: 12px !default;

Expand Down Expand Up @@ -147,4 +154,6 @@ $chat-bubble-gap: 8px !default;

$chat-confirmation-popup-content-padding: $generic-popup-content-padding !default;
$chat-confirmation-popup-toolbar-gap: 4px !default;

$chat-file-icon-font-size: 14 !default;
}
Loading
Loading