Chat: Normalize selectors

DevExpress · Sep 16, 2024 · 3c16bc1 · 3c16bc1
1 parent b9c3bf3
commit 3c16bc1
Show file tree

Hide file tree

Showing 33 changed files with 265 additions and 263 deletions.
diff --git a/e2e/testcafe-devextreme/tests/chat/messageGroup.ts b/e2e/testcafe-devextreme/tests/chat/messageGroup.ts
@@ -11,7 +11,7 @@ import { createWidget } from '../../helpers/createWidget';
 import { testScreenshot } from '../../helpers/themeUtils';
 import { appendElementTo, setStyleAttribute } from '../../helpers/domUtils';
 
-const CHAT_AVATAR_SELECTOR = '.dx-chat-message-avatar';
+const AVATAR_SELECTOR = '.dx-avatar';
 
 fixture.disablePageReloads`ChatMessageGroup`
   .page(url(__dirname, '../container.html'));
@@ -21,7 +21,7 @@ test('Chat: messagegroup, avatar rendering', async (t) => {
 
   await testScreenshot(t, takeScreenshot, 'Avatar has correct position.png', { element: '#chat' });
 
-  await setStyleAttribute(Selector(CHAT_AVATAR_SELECTOR), 'width: 64px; height: 64px');
+  await setStyleAttribute(Selector(AVATAR_SELECTOR), 'width: 64px; height: 64px');
   await testScreenshot(t, takeScreenshot, 'Avatar sizes do not affect indentation between bubbles.png', { element: '#chat' });
 
   await t

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_index.scss
@@ -1,4 +1,4 @@
-.dx-chat-message-avatar {
+.dx-avatar {
   grid-row: 2 / auto;
   display: flex;
   align-items: center;
@@ -7,7 +7,7 @@
   overflow: clip;
 }
 
-.dx-chat-message-avatar-image {
+.dx-avatar-image {
   height: 100%;
   width: 100%;
   object-fit: cover;

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-avatar/_mixins.scss
@@ -1,5 +1,5 @@
 @mixin chat-avatar($size, $background-color) {
-  .dx-chat-message-avatar {
+  .dx-avatar {
     width: $size;
     height: $size;
     background-color: $background-color;

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_index.scss
@@ -1,10 +1,10 @@
-.dx-chat-message-box {
+.dx-chat-messagebox {
   display: flex;
   align-items: flex-end;
   border-top-width: 1px;
   border-top-style: solid;
 }
 
-.dx-chat-message-box-text-area {
+.dx-chat-messagebox-textarea {
   flex-grow: 1;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebox/_mixins.scss
@@ -5,19 +5,19 @@
   $textarea-border-radius,
   $button-gap
 ) {
-  .dx-chat-message-box {
+  .dx-chat-messagebox {
     padding: $padding;
     border-top-color: $border-color;
     gap: $gap;
   }
 
-  .dx-chat-message-box-text-area {
+  .dx-chat-messagebox-textarea {
     &.dx-textarea.dx-texteditor {
       border-radius: $textarea-border-radius;
     }
   }
 
-  .dx-chat-message-box-button {
+  .dx-chat-messagebox-button {
     margin-bottom: $button-gap;
   }
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_index.scss
@@ -1,33 +1,33 @@
-.dx-chat-message-bubble-container {
+.dx-chat-messagegroup-content {
   display: flex;
   flex-direction: column;
   max-width: 70%;
 }
 
-.dx-chat-message-bubble {
+.dx-chat-messagebubble {
   width: auto;
   word-break: break-word;
   white-space: break-spaces;
 }
 
-.dx-chat-message-group-alignment-start {
-  .dx-chat-message-bubble-container {
+.dx-chat-messagegroup-alignment-start {
+  .dx-chat-messagegroup-content {
     grid-column: 2;
     align-items: flex-start;
   }
 
-  .dx-chat-message-bubble {
+  .dx-chat-messagebubble {
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
 }
 
-.dx-chat-message-group-alignment-end {
-  .dx-chat-message-bubble-container {
+.dx-chat-messagegroup-alignment-end {
+  .dx-chat-messagegroup-content {
     align-items: flex-end;
   }
 
-  .dx-chat-message-bubble {
+  .dx-chat-messagebubble {
     border-bottom-right-radius: 0;
     border-top-right-radius: 0;
   }

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagebubble/_mixins.scss
@@ -5,17 +5,17 @@
   $background-color-primary,
   $bubble-container-gap
 ) {
-  .dx-chat-message-bubble-container {
+  .dx-chat-messagegroup-content {
     row-gap: $bubble-container-gap;
   }
 
-  .dx-chat-message-bubble {
+  .dx-chat-messagebubble {
     padding: $padding;
     border-radius: $border-radius;
   }
 
-  .dx-chat-message-group-alignment-start {
-    .dx-chat-message-bubble {
+  .dx-chat-messagegroup-alignment-start {
+    .dx-chat-messagebubble {
       background-color: $background-color-secondary;
 
       &:first-child {
@@ -28,8 +28,8 @@
     }
   }
 
-  .dx-chat-message-group-alignment-end {
-    .dx-chat-message-bubble {
+  .dx-chat-messagegroup-alignment-end {
+    .dx-chat-messagebubble {
       background-color: $background-color-primary;
 
       &:first-child {

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_index.scss
@@ -1,33 +1,33 @@
 @use "../../../mixins" as *;
 
-.dx-chat-message-group {
+.dx-chat-messagegroup {
   display: grid;
   align-items: start;
 }
 
-.dx-chat-message-group-information {
+.dx-chat-messagegroup-information {
   display: flex;
   grid-row: 1;
   max-width: 100%;
   min-width: 0;
 }
 
-.dx-chat-message-author-name {
+.dx-chat-messagegroup-author-name {
   @include dx-overflow();
 }
 
-.dx-chat-message-time {
+.dx-chat-messagegroup-time {
   white-space: nowrap;
 }
 
-.dx-chat-message-group-alignment-start {
+.dx-chat-messagegroup-alignment-start {
   justify-items: start;
 
-  .dx-chat-message-group-information {
+  .dx-chat-messagegroup-information {
     grid-column: 2;
   }
 }
 
-.dx-chat-message-group-alignment-end {
+.dx-chat-messagegroup-alignment-end {
   justify-items: end;
 }
diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagegroup/_mixins.scss
@@ -7,7 +7,7 @@
   $information-color,
   $information-gap
 ) {
-  .dx-chat-message-group {
+  .dx-chat-messagegroup {
     row-gap: $messagegroup-gap;
     padding-bottom: $messagegroup-padding;
 
@@ -16,17 +16,17 @@
     }
   }
 
-  .dx-chat-message-group-information {
+  .dx-chat-messagegroup-information {
     column-gap: $information-gap;
   }
 
-  .dx-chat-message-group-alignment-start {
+  .dx-chat-messagegroup-alignment-start {
     grid-template-columns: $messagegroup-start-template;
     column-gap: $messagegroup-start-gap;
   }
 
-  .dx-chat-message-time,
-  .dx-chat-message-author-name {
+  .dx-chat-messagegroup-time,
+  .dx-chat-messagegroup-author-name {
     font-size: $information-font-size;
     color: $information-color;
   }

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_index.scss
@@ -1,6 +1,6 @@
 @use "../../../icons" as *;
 
-.dx-chat-message-list {
+.dx-chat-messagelist {
   flex-grow: 1;
   overflow: hidden;
 
@@ -10,16 +10,16 @@
   }
 }
 
-.dx-chat-message-list-empty {
-  .dx-chat-empty-view {
+.dx-chat-messagelist-empty {
+  .dx-chat-messagelist-empty-view {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     flex-grow: 1;
   }
 
-  .dx-chat-empty-image {
+  .dx-chat-messagelist-empty-image {
     @include dx-icon(chat);
 
     border-radius: 999em;

diff --git a/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss b/packages/devextreme-scss/scss/widgets/base/chat/layout/chat-messagelist/_mixins.scss
@@ -1,7 +1,7 @@
 @use "sass:math";
 
 @mixin chat-messagelist($padding) {
-  .dx-chat-message-list {
+  .dx-chat-messagelist {
     .dx-scrollable-content {
       padding: $padding;
     }
@@ -20,12 +20,12 @@
   $messagelist-empty-prompt-font-size,
   $messagelist-empty-prompt-color,
 ) {
-  .dx-chat-message-list-empty {
-    .dx-chat-empty-view {
+  .dx-chat-messagelist-empty {
+    .dx-chat-messagelist-empty-view {
       row-gap: $messagelist-empty-row-gap;
     }
 
-    .dx-chat-empty-image {
+    .dx-chat-messagelist-empty-image {
       color: $messagelist-empty-icon-color;
       background-color: $messagelist-empty-icon-background-color;
       padding: math.div($messagelist-empty-icon-box-size - $messagelist-empty-icon-size, 2);
@@ -36,12 +36,12 @@
       }
     }
 
-    .dx-chat-empty-message {
+    .dx-chat-messagelist-empty-message {
       font-size: $messagelist-empty-message-font-size;
       color: $messagelist-empty-message-color;
     }
 
-    .dx-chat-empty-prompt {
+    .dx-chat-messagelist-empty-prompt {
       font-size: $messagelist-empty-prompt-font-size;
       color: $messagelist-empty-prompt-color;
     }

diff --git a/...reme/js/__internal/ui/chat/chat_avatar.ts → ...evextreme/js/__internal/ui/chat/avatar.ts b/...reme/js/__internal/ui/chat/chat_avatar.ts → ...evextreme/js/__internal/ui/chat/avatar.ts
@@ -5,9 +5,9 @@ import type { WidgetOptions } from '@js/ui/widget/ui.widget';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
-const CHAT_MESSAGE_AVATAR_CLASS = 'dx-chat-message-avatar';
-const CHAT_MESSAGE_AVATAR_INITIALS_CLASS = 'dx-chat-message-avatar-initials';
-const CHAT_MESSAGE_AVATAR_IMAGE_CLASS = 'dx-chat-message-avatar-image';
+const AVATAR_CLASS = 'dx-avatar';
+const AVATAR_INITIALS_CLASS = 'dx-avatar-initials';
+const AVATAR_IMAGE_CLASS = 'dx-avatar-image';
 
 export interface Properties extends WidgetOptions<Avatar> {
   name?: string;
@@ -26,7 +26,7 @@ class Avatar extends Widget<Properties> {
   }
 
   _initMarkup(): void {
-    $(this.element()).addClass(CHAT_MESSAGE_AVATAR_CLASS);
+    $(this.element()).addClass(AVATAR_CLASS);
 
     super._initMarkup();
 
@@ -62,13 +62,13 @@ class Avatar extends Widget<Properties> {
 
   _renderImageElement(): void {
     this._$content = $('<img>')
-      .addClass(CHAT_MESSAGE_AVATAR_IMAGE_CLASS)
+      .addClass(AVATAR_IMAGE_CLASS)
       .appendTo(this.element());
   }
 
   _renderInitialsElement(): void {
     this._$content = $('<div>')
-      .addClass(CHAT_MESSAGE_AVATAR_INITIALS_CLASS)
+      .addClass(AVATAR_INITIALS_CLASS)
       .appendTo(this.element());
   }
 

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -6,13 +6,13 @@ import type { Message, MessageSendEvent, Properties as ChatProperties } from '@j
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 
-import ChatHeader from './chat_header';
+import ChatHeader from './header';
 import type {
   MessageSendEvent as MessageBoxMessageSendEvent,
   Properties as MessageBoxProperties,
-} from './chat_message_box';
-import MessageBox from './chat_message_box';
-import MessageList from './chat_message_list';
+} from './messagebox';
+import MessageBox from './messagebox';
+import MessageList from './messagelist';
 
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';

diff --git a/...reme/js/__internal/ui/chat/chat_header.ts → ...evextreme/js/__internal/ui/chat/header.ts b/...reme/js/__internal/ui/chat/chat_header.ts → ...evextreme/js/__internal/ui/chat/header.ts
diff --git a/...js/__internal/ui/chat/chat_message_box.ts → ...treme/js/__internal/ui/chat/messagebox.ts b/...js/__internal/ui/chat/chat_message_box.ts → ...treme/js/__internal/ui/chat/messagebox.ts
@@ -10,9 +10,9 @@ import type { EnterKeyEvent } from '../../../ui/text_area';
 import type dxTextArea from '../../../ui/text_area';
 import TextArea from '../m_text_area';
 
-const CHAT_MESSAGE_BOX_CLASS = 'dx-chat-message-box';
-const CHAT_MESSAGE_BOX_TEXTAREA_CLASS = 'dx-chat-message-box-text-area';
-const CHAT_MESSAGE_BOX_BUTTON_CLASS = 'dx-chat-message-box-button';
+const CHAT_MESSAGEBOX_CLASS = 'dx-chat-messagebox';
+const CHAT_MESSAGEBOX_TEXTAREA_CLASS = 'dx-chat-messagebox-textarea';
+const CHAT_MESSAGEBOX_BUTTON_CLASS = 'dx-chat-messagebox-button';
 
 export type MessageSendEvent =
   NativeEventInfo<MessageBox, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> &
@@ -52,7 +52,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
   }
 
   _initMarkup(): void {
-    $(this.element()).addClass(CHAT_MESSAGE_BOX_CLASS);
+    $(this.element()).addClass(CHAT_MESSAGEBOX_CLASS);
 
     super._initMarkup();
 
@@ -74,7 +74,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     } = this.option();
 
     const $textArea = $('<div>')
-      .addClass(CHAT_MESSAGE_BOX_TEXTAREA_CLASS)
+      .addClass(CHAT_MESSAGEBOX_TEXTAREA_CLASS)
       .appendTo(this.element());
 
     this._textArea = this._createComponent($textArea, TextArea, {
@@ -113,7 +113,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
     } = this.option();
 
     const $button = $('<div>')
-      .addClass(CHAT_MESSAGE_BOX_BUTTON_CLASS)
+      .addClass(CHAT_MESSAGEBOX_BUTTON_CLASS)
       .appendTo(this.element());
 
     this._button = this._createComponent($button, Button, {