Skip to content

Commit

Permalink
Chat: implement errorlist component
Browse files Browse the repository at this point in the history
  • Loading branch information
EugeniyKiyashko committed Oct 18, 2024
1 parent 8bed7a5 commit 77213f4
Show file tree
Hide file tree
Showing 52 changed files with 636 additions and 21 deletions.
67 changes: 67 additions & 0 deletions e2e/testcafe-devextreme/tests/chat/errorList.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
import Chat from 'devextreme-testcafe-models/chat';
import { createUser } from './data';
import url from '../../helpers/getPageUrl';
import { createWidget } from '../../helpers/createWidget';
import { getFullThemeName, testScreenshot } from '../../helpers/themeUtils';

fixture.disablePageReloads`ChatErrorList`
.page(url(__dirname, '../container.html'));

test('Errorlist appearance', async (t) => {
const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
const chat = new Chat('#container');

await testScreenshot(t, takeScreenshot, 'Errorlist with one error.png', { element: '#container' });

await chat.option('errors', [
{ id: 1, message: 'Error Message 1. Error Description...' },
{ id: 2, message: 'Error Message 2. Message was not sent' },
{ id: 3, message: 'Error Message 3. An unexpected issue occurred while processing your request. Please check your internet connection or contact support for further assistance.' },
]);

await testScreenshot(t, takeScreenshot, 'Errorlist with long text in error.png', { element: '#container', shouldTestInCompact: true });

const darkTheme = getFullThemeName().replace('light', 'dark');
await testScreenshot(t, takeScreenshot, 'Errorlist with long text in error.png', { element: '#container', theme: darkTheme });

await t
.expect(compareResults.isValid())
.ok(compareResults.errorMessages());
}).before(async () => {
const userFirst = createUser(1, 'First');
const userSecond = createUser(2, 'Second');
const msInDay = 86400000;
const today = new Date().setHours(7, 22, 0, 0);
const yesterday = today - msInDay;

const items = [{
timestamp: yesterday,
author: userSecond,
text: 'Message text 1',
}, {
timestamp: yesterday,
author: userSecond,
text: 'Message text 2',
}, {
timestamp: today,
author: userFirst,
text: 'Message text 3',
}, {
timestamp: today,
author: userFirst,
text: 'Message text 4',
}, {
timestamp: today,
author: userFirst,
text: 'Message text 5',
}];

return createWidget('dxChat', {
items,
user: userFirst,
width: 400,
height: 600,
errors: [{ id: 1, message: 'Error Message 1. Error Description...' }],
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
@use "layout/chat" as *;
@use "layout/chat-avatar" as *;
@use "layout/chat-header" as *;
@use "layout/chat-errorlist" as *;
@use "layout/chat-messagebox" as *;
@use "layout/chat-messagebubble" as *;
@use "layout/chat-messagegroup" as *;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@import 'layout/chat/mixins';
@import 'layout/chat-avatar/mixins';
@import 'layout/chat-errorlist/mixins';
@import 'layout/chat-header/mixins';
@import 'layout/chat-messagebox/mixins';
@import 'layout/chat-messagebubble/mixins';
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
.dx-chat-errorlist {
display: flex;
flex-direction: column;
}

.dx-chat-errorlist-error {
align-items: center;
display: flex;
justify-content: center;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
@use "../../../icons" as *;

@mixin chat-errorlist(
$color,
$padding-block,
$padding-inline,
$error-padding-block,
$row-gap,
$icon-size,
$content-column-gap,
) {
.dx-chat-errorlist {
color: $color;
padding-block: $padding-block;
padding-inline: $padding-inline;
row-gap: $row-gap;
}

.dx-chat-errorlist:empty {
padding-block: 0;
padding-inline: 0;
}

.dx-chat-errorlist-error {
column-gap: $content-column-gap;
padding-block: $error-padding-block;
}

.dx-chat-errorlist-error-icon {
@include dx-icon(errorcircle);
@include dx-icon-sizing($icon-size);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,8 @@ $chat-messagelist-empty-icon-background-color: null !default;
$chat-messagelist-empty-message-color: $base-text-color !default;
$chat-messagelist-empty-prompt-color: null !default;

$chat-errorlist-color: $base-invalid-color !default;

@if $mode == "light" {
$chat-information-color: darken($base-bg, 56.08) !default;
$chat-messagelist-day-header-color: darken($base-bg, 56.08) !default;
Expand Down
15 changes: 12 additions & 3 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,29 @@
@include chat(
$chat-background-color,
$chat-border-color,
$chat-border-radius
$chat-border-radius,
);
@include chat-avatar(
$chat-avatar-size,
$chat-avatar-color,
$chat-avatar-background-color
$chat-avatar-background-color,
);
@include chat-header($chat-header-padding);
@include chat-errorlist(
$chat-errorlist-color,
$chat-errors-padding-block,
$chat-errors-padding-inline,
$chat-error-padding-block,
$chat-errors-row-gap,
$chat-error-icon-size,
$chat-error-content-column-gap,
);
@include chat-messagebox(
$chat-messagebox-padding,
$chat-messagebox-border-color,
$chat-messagebox-gap,
$chat-messagebox-textarea-border-radius,
$chat-messagebox-buton-gap
$chat-messagebox-buton-gap,
);
@include chat-messagebubble(
$chat-bubble-padding,
Expand Down
19 changes: 19 additions & 0 deletions packages/devextreme-scss/scss/widgets/fluent/chat/_sizes.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@use "../textEditor/colors" as *;
@use "../common/sizes" as *;
@use "../sizes" as *;

// adduse
Expand All @@ -20,6 +21,12 @@ $chat-messagegroup-alignment-start-template: auto 1fr !default;
$chat-messagegroup-alignment-start-gap: 12px !default;
$chat-header-padding: 20px !default;
$chat-information-font-size: 12px !default;
$chat-error-icon-size: $fluent-base-icon-size !default;
$chat-error-content-column-gap: null !default;
$chat-errors-padding-block: null !default;
$chat-errors-padding-inline: null !default;
$chat-errors-row-gap: null !default;
$chat-error-padding-block: null !default;

$chat-messagelist-empty-icon-box-size: null !default;
$chat-messagelist-empty-icon-size: null !default;
Expand All @@ -37,6 +44,12 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
$chat-messagelist-padding: 20px !default;
$chat-messagegroup-padding: 24px !default;

$chat-error-content-column-gap: 6px !default;
$chat-errors-padding-block: 12px !default;
$chat-errors-padding-inline: 20px !default;
$chat-errors-row-gap: 2px !default;
$chat-error-padding-block: 6px !default;

$chat-messagelist-empty-icon-box-size: 64px !default;;
$chat-messagelist-empty-icon-size: 40px !default;
$chat-messagelist-empty-icon-margin-bottom: 12px !default;
Expand All @@ -52,6 +65,12 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
$chat-messagelist-padding: 16px !default;
$chat-messagegroup-padding: 12px !default;

$chat-error-content-column-gap: 4px !default;
$chat-errors-padding-block: 8px !default;
$chat-errors-padding-inline: 16px !default;
$chat-errors-row-gap: 2px !default;
$chat-error-padding-block: 5px !default;

$chat-messagelist-empty-icon-box-size: 48px !default;;
$chat-messagelist-empty-icon-size: 32px !default;
$chat-messagelist-empty-icon-margin-bottom: 14px !default;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ $chat-messagelist-empty-message-color: null !default;
$chat-messagelist-empty-prompt-color: null !default;

$chat-avatar-background-color: $base-border-color !default;
$chat-errorlist-color: $base-invalid-color !default;

@if $color == "light" {
$chat-avatar-color: $base-text-color !default;
Expand Down
17 changes: 13 additions & 4 deletions packages/devextreme-scss/scss/widgets/generic/chat/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,37 @@
@include chat(
$chat-background-color,
$chat-border-color,
$chat-border-radius
$chat-border-radius,
);
@include chat-avatar(
$chat-avatar-size,
$chat-avatar-color,
$chat-avatar-background-color,
);
@include chat-header($chat-header-padding);
@include chat-errorlist(
$chat-errorlist-color,
$chat-errors-padding-block,
$chat-errors-padding-inline,
$chat-error-padding-block,
$chat-errors-row-gap,
$chat-error-icon-size,
$chat-error-content-column-gap,
);
@include chat-messagebox(
$chat-messagebox-padding,
$chat-messagebox-border-color,
$chat-messagebox-gap,
$chat-messagebox-textarea-border-radius,
$chat-messagebox-buton-gap
$chat-messagebox-buton-gap,
);
@include chat-messagebubble(
$chat-bubble-padding,
$chat-bubble-border-radius,
$chat-bubble-background-color-secondary,
$chat-bubble-color-primary,
$chat-bubble-background-color-primary,
$chat-bubble-container-gap
$chat-bubble-container-gap,
);
@include chat-messagegroup(
$chat-messagegroup-gap,
Expand All @@ -40,7 +49,7 @@
$chat-messagegroup-padding,
$chat-information-font-size,
$chat-information-color,
$chat-information-gap
$chat-information-gap,
);
@include chat-messagelist-empty(
$chat-messagelist-padding,
Expand Down
24 changes: 22 additions & 2 deletions packages/devextreme-scss/scss/widgets/generic/chat/_sizes.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
@use "../textEditor/colors" as *;
@use "../sizes" as *;
@use "../colors" as *;
@use "colors" as *;
@use "../colors" as *;
@use "../sizes" as *;

// adduse

Expand All @@ -22,6 +22,12 @@ $chat-messagegroup-alignment-start-template: auto 1fr !default;
$chat-messagegroup-alignment-start-gap: 12px !default;
$chat-header-padding: 20px !default;
$chat-information-font-size: 12px !default;
$chat-error-icon-size: null !default;
$chat-error-content-column-gap: null !default;
$chat-errors-padding-block: null !default;
$chat-errors-padding-inline: null !default;
$chat-errors-row-gap: null !default;
$chat-error-padding-block: null !default;

$chat-messagelist-empty-icon-box-size: null !default;
$chat-messagelist-empty-icon-size: null !default;
Expand All @@ -38,6 +44,13 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
$chat-messagelist-padding: 20px !default;
$chat-messagegroup-padding: 24px !default;

$chat-error-icon-size: $generic-base-icon-size !default;
$chat-error-content-column-gap: 6px !default;
$chat-errors-padding-block: 16px !default;
$chat-errors-padding-inline: 20px !default;
$chat-errors-row-gap: 4px !default;
$chat-error-padding-block: 9px !default;

$chat-messagelist-empty-icon-box-size: 64px !default;;
$chat-messagelist-empty-icon-size: 40px !default;
$chat-messagelist-empty-icon-margin-bottom: 12px !default;
Expand All @@ -52,6 +65,13 @@ $chat-messagelist-day-header-first-padding-top: 20px !default;
$chat-messagelist-padding: 16px !default;
$chat-messagegroup-padding: 12px !default;

$chat-error-icon-size: $generic-base-icon-size + 2px !default;
$chat-error-content-column-gap: 4px !default;
$chat-errors-padding-block: 12px !default;
$chat-errors-padding-inline: 16px !default;
$chat-errors-row-gap: 2px !default;
$chat-error-padding-block: 6px !default;

$chat-messagelist-empty-icon-box-size: 48px !default;;
$chat-messagelist-empty-icon-size: 32px !default;
$chat-messagelist-empty-icon-margin-bottom: 14px !default;
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@use "sass:color";
@use "../sizes" as *;
@use "../colors" as *;

// adduse
Expand All @@ -20,6 +19,8 @@ $chat-messagelist-empty-icon-background-color: rgba($base-inverted-bg, 0.08) !de
$chat-messagelist-empty-message-color: rgba($base-inverted-bg, 0.87) !default;
$chat-messagelist-empty-prompt-color: rgba($base-inverted-bg, 0.6) !default;

$chat-errorlist-color: $base-invalid-color !default;

@if $mode == "light" {
$chat-bubble-background-color-primary: rgba($base-accent, 0.08) !default;
$chat-bubble-background-color-secondary: rgba($base-inverted-bg, 0.08) !default;
Expand Down
20 changes: 15 additions & 5 deletions packages/devextreme-scss/scss/widgets/material/chat/_index.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
@use "../../base/chat";
@use "colors" as *;
@use "../colors" as *;
@use "sizes" as *;
@use "../../base/chat/mixins" as *;

Expand All @@ -8,28 +9,37 @@
@include chat(
$chat-background-color,
$chat-border-color,
$chat-border-radius
$chat-border-radius,
);
@include chat-avatar(
$chat-avatar-size,
$chat-avatar-color,
$chat-avatar-background-color
$chat-avatar-background-color,
);
@include chat-header($chat-header-padding);
@include chat-errorlist(
$chat-errorlist-color,
$chat-errors-padding-block,
$chat-errors-padding-inline,
$chat-error-padding-block,
$chat-errors-row-gap,
$chat-error-icon-size,
$chat-error-content-column-gap,
);
@include chat-messagebox(
$chat-messagebox-padding,
$chat-messagebox-border-color,
$chat-messagebox-gap,
$chat-messagebox-textarea-border-radius,
$chat-messagebox-buton-gap
$chat-messagebox-buton-gap,
);
@include chat-messagebubble(
$chat-bubble-padding,
$chat-bubble-border-radius,
$chat-bubble-background-color-secondary,
$chat-bubble-color-primary,
$chat-bubble-background-color-primary,
$chat-bubble-container-gap
$chat-bubble-container-gap,
);
@include chat-messagegroup(
$chat-messagegroup-gap,
Expand All @@ -38,7 +48,7 @@
$chat-messagegroup-padding,
$chat-information-font-size,
$chat-information-color,
$chat-information-gap
$chat-information-gap,
);
@include chat-messagelist-empty(
$chat-messagelist-padding,
Expand Down
Loading

0 comments on commit 77213f4

Please sign in to comment.