Chat and TileView demos: get rid of custom classes with dx prefix (DevExpress#30232)

Zedwag · web-flow · commit 532cce491088 · 2025-06-26T11:41:00.000+02:00
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.css
@@ -16,12 +16,12 @@
 }
 
 ::ng-deep .dx-chat-messagebubble-content,
-::ng-deep .dx-chat-messagebubble-text {
+::ng-deep .chat-messagebubble-text {
   display: flex;
   flex-direction: column;
 }
 
-::ng-deep .dx-bubble-button-container {
+::ng-deep .bubble-button-container {
   display: none;
 }
 
@@ -30,7 +30,7 @@
   color: var(--dx-color-icon);
 }
 
-::ng-deep .dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-container {
+::ng-deep .dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
   display: flex;
   gap: 4px;
   margin-top: 8px;
@@ -54,7 +54,7 @@
   font-weight: revert;
 }
 
-::ng-deep .dx-chat-disabled .dx-chat-messagebox {
+::ng-deep .chat-disabled .dx-chat-messagebox {
   opacity: 0.5;
   pointer-events: none;
 }
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.html b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Angular/app/app.component.html
@@ -1,6 +1,6 @@
 <div class="demo-container">
   <dx-chat
-    [class.dx-chat-disabled]="isDisabled"
+    [class.chat-disabled]="isDisabled"
     [dataSource]="dataSource"
     [reloadOnChange]="false"
     [showAvatar]="false"
@@ -18,11 +18,11 @@
       </ng-container>
       <ng-container *ngIf="data.message.text !== regenerationText">
         <div
-          class="dx-chat-messagebubble-text"
+          class="chat-messagebubble-text"
           [innerHTML]="convertToHtml(data.message)"
         >
         </div>
-        <div class="dx-bubble-button-container">
+        <div class="bubble-button-container">
           <dx-button
             [icon]="copyButtonIcon"
             stylingMode="text"
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/Message.tsx
@@ -45,10 +45,10 @@ const Message: FC<MessageProps> = ({ text, onRegenerateButtonClick }) => {
 
   return (
     <React.Fragment>
-      <div className='dx-chat-messagebubble-text'>
+      <div className='chat-messagebubble-text'>
         {HTMLReactParser(convertToHtml(text))}
       </div>
-      <div className='dx-bubble-button-container'>
+      <div className='bubble-button-container'>
         <Button
           icon={icon}
           stylingMode='text'
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/data.ts
@@ -9,7 +9,7 @@ export const AzureOpenAIConfig = {
 }
 
 export const REGENERATION_TEXT = 'Regeneration...';
-export const CHAT_DISABLED_CLASS = 'dx-chat-disabled';
+export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
 
 export const user: ChatTypes.User = {
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/React/styles.css
@@ -16,12 +16,12 @@
 }
 
 .dx-chat-messagebubble-content,
-.dx-chat-messagebubble-text {
+.chat-messagebubble-text {
   display: flex;
   flex-direction: column;
 }
 
-.dx-bubble-button-container {
+.bubble-button-container {
   display: none;
 }
 
@@ -30,7 +30,7 @@
   color: var(--dx-color-icon);
 }
 
-.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-container {
+.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
   display: flex;
   gap: 4px;
   margin-top: 8px;
@@ -54,7 +54,7 @@
   font-weight: revert;
 }
 
-.dx-chat-disabled .dx-chat-messagebox {
+.chat-disabled .dx-chat-messagebox {
   opacity: 0.5;
   pointer-events: none;
 }
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/Message.js
@@ -32,8 +32,8 @@ const Message = ({ text, onRegenerateButtonClick }) => {
   }
   return (
     <React.Fragment>
-      <div className="dx-chat-messagebubble-text">{HTMLReactParser(convertToHtml(text))}</div>
-      <div className="dx-bubble-button-container">
+      <div className="chat-messagebubble-text">{HTMLReactParser(convertToHtml(text))}</div>
+      <div className="bubble-button-container">
         <Button
           icon={icon}
           stylingMode="text"
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/data.js
@@ -6,7 +6,7 @@ export const AzureOpenAIConfig = {
   apiKey: 'DEMO',
 };
 export const REGENERATION_TEXT = 'Regeneration...';
-export const CHAT_DISABLED_CLASS = 'dx-chat-disabled';
+export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
 export const user = {
   id: 'user',
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/ReactJs/styles.css
@@ -16,12 +16,12 @@
 }
 
 .dx-chat-messagebubble-content,
-.dx-chat-messagebubble-text {
+.chat-messagebubble-text {
   display: flex;
   flex-direction: column;
 }
 
-.dx-bubble-button-container {
+.bubble-button-container {
   display: none;
 }
 
@@ -30,7 +30,7 @@
   color: var(--dx-color-icon);
 }
 
-.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-container {
+.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
   display: flex;
   gap: 4px;
   margin-top: 8px;
@@ -54,7 +54,7 @@
   font-weight: revert;
 }
 
-.dx-chat-disabled .dx-chat-messagebox {
+.chat-disabled .dx-chat-messagebox {
   opacity: 0.5;
   pointer-events: none;
 }
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/App.vue
@@ -3,7 +3,7 @@
     class="chat-container"
   >
     <DxChat
-      :class="{'dx-chat-disabled' : isDisabled == true }"
+      :class="{'chat-disabled' : isDisabled == true }"
       ref="chatElement"
       :height="710"
       :data-source="dataSource"
@@ -25,9 +25,9 @@
         <template v-else>
           <div
             v-html="convertToHtml(data.message.text)"
-            class="dx-chat-messagebubble-text"
+            class="chat-messagebubble-text"
           />
-          <div class="dx-bubble-button-container">
+          <div class="bubble-button-container">
             <DxButton
               :icon="copyButtonIcon"
               styling-mode="text"
@@ -216,12 +216,12 @@ function onRegenerateButtonClick() {
 }
 
 .dx-chat-messagebubble-content,
-.dx-chat-messagebubble-text {
+.chat-messagebubble-text {
   display: flex;
   flex-direction: column;
 }
 
-.dx-bubble-button-container {
+.bubble-button-container {
   display: none;
 }
 
@@ -230,7 +230,7 @@ function onRegenerateButtonClick() {
   color: var(--dx-color-icon);
 }
 
-.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-container {
+.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
   display: flex;
   gap: 4px;
   margin-top: 8px;
@@ -254,7 +254,7 @@ function onRegenerateButtonClick() {
   font-weight: revert;
 }
 
-.dx-chat-disabled .dx-chat-messagebox {
+.chat-disabled .dx-chat-messagebox {
   opacity: 0.5;
   pointer-events: none;
 }
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts b/apps/demos/Demos/Chat/AIAndChatbotIntegration/Vue/data.ts
@@ -23,7 +23,7 @@ export const AzureOpenAIConfig = {
 };
 
 export const REGENERATION_TEXT = 'Regeneration...';
-export const CHAT_DISABLED_CLASS = 'dx-chat-disabled';
+export const CHAT_DISABLED_CLASS = 'chat-disabled';
 export const ALERT_TIMEOUT = 1000 * 60;
 
 export const user = {
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/data.js
@@ -3,7 +3,7 @@ const apiVersion = '2024-02-01';
 const endpoint = 'https://public-api.devexpress.com/demo-openai';
 const apiKey = 'DEMO';
 const REGENERATION_TEXT = 'Regeneration...';
-const CHAT_DISABLED_CLASS = 'dx-chat-disabled';
+const CHAT_DISABLED_CLASS = 'chat-disabled';
 const ALERT_TIMEOUT = 1000 * 60;
 const user = {
   id: 'user',
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/index.js
@@ -153,12 +153,12 @@ $(() => {
 
   function renderMessageContent(message, element) {
     $('<div>')
-      .addClass('dx-chat-messagebubble-text')
+      .addClass('chat-messagebubble-text')
       .html(convertToHtml(message.text))
       .appendTo(element);
 
     const $buttonContainer = $('<div>')
-      .addClass('dx-bubble-button-container');
+      .addClass('bubble-button-container');
 
     $('<div>')
       .dxButton({
diff --git a/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css b/apps/demos/Demos/Chat/AIAndChatbotIntegration/jQuery/styles.css
@@ -16,12 +16,12 @@
 }
 
 .dx-chat-messagebubble-content,
-.dx-chat-messagebubble-text {
+.chat-messagebubble-text {
   display: flex;
   flex-direction: column;
 }
 
-.dx-bubble-button-container {
+.bubble-button-container {
   display: none;
 }
 
@@ -30,7 +30,7 @@
   color: var(--dx-color-icon);
 }
 
-.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-container {
+.dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {
   display: flex;
   gap: 4px;
   margin-top: 8px;
@@ -54,7 +54,7 @@
   font-weight: revert;
 }
 
-.dx-chat-disabled .dx-chat-messagebox {
+.chat-disabled .dx-chat-messagebox {
   opacity: 0.5;
   pointer-events: none;
 }
diff --git a/apps/demos/Demos/TileView/Basics/React/App.tsx b/apps/demos/Demos/TileView/Basics/React/App.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import TileView from 'devextreme-react/tile-view';
 import { homes } from './data.ts';
 
-const HomeImage = (data) => <div className="dx-tile-image" style={{ backgroundImage: `url(${data.ImageSrc})` }}></div>;
+const HomeImage = (data) => <div className="tile-image" style={{ backgroundImage: `url(${data.ImageSrc})` }}></div>;
 
 const App = () => (
   <TileView
diff --git a/apps/demos/Demos/TileView/Basics/React/styles.css b/apps/demos/Demos/TileView/Basics/React/styles.css
@@ -1,4 +1,4 @@
-.dx-tile-image {
+.tile-image {
   height: 100%;
   width: 100%;
   background-position: center;
diff --git a/apps/demos/Demos/TileView/Basics/ReactJs/App.js b/apps/demos/Demos/TileView/Basics/ReactJs/App.js
@@ -4,7 +4,7 @@ import { homes } from './data.js';
 
 const HomeImage = (data) => (
   <div
-    className="dx-tile-image"
+    className="tile-image"
     style={{ backgroundImage: `url(${data.ImageSrc})` }}
   ></div>
 );
diff --git a/apps/demos/Demos/TileView/Basics/ReactJs/styles.css b/apps/demos/Demos/TileView/Basics/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.dx-tile-image {
+.tile-image {
   height: 100%;
   width: 100%;
   background-position: center;
diff --git a/apps/demos/Demos/TileView/Basics/Vue/App.vue b/apps/demos/Demos/TileView/Basics/Vue/App.vue
@@ -5,7 +5,7 @@
     <template #item="{ data }">
       <div
         :style="{backgroundImage: 'url(' + data.ImageSrc + ')'}"
-        class="dx-tile-image"
+        class="tile-image"
       />
     </template>
   </DxTileView>
@@ -15,7 +15,7 @@ import DxTileView from 'devextreme-vue/tile-view';
 import { homes } from './data.ts';
 </script>
 <style>
-.dx-tile-image {
+.tile-image {
   height: 100%;
   width: 100%;
   background-position: center;
diff --git a/apps/demos/Demos/TileView/Directions/React/HomeItem.tsx b/apps/demos/Demos/TileView/Directions/React/HomeItem.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 export default function RenderHomeItem(data: { ImageSrc: string; }) {
   return (
     <div
-      className="dx-tile-image"
+      className="tile-image"
       style={{ backgroundImage: `url(${data.ImageSrc})` }}
     />
   );
diff --git a/apps/demos/Demos/TileView/Directions/React/styles.css b/apps/demos/Demos/TileView/Directions/React/styles.css
@@ -6,7 +6,7 @@
   height: 100%;
 }
 
-.dx-tile-image {
+.tile-image {
   height: 100%;
   width: 100%;
   background-position: center;
diff --git a/apps/demos/Demos/TileView/Directions/ReactJs/HomeItem.js b/apps/demos/Demos/TileView/Directions/ReactJs/HomeItem.js
@@ -3,7 +3,7 @@ import React from 'react';
 export default function RenderHomeItem(data) {
   return (
     <div
-      className="dx-tile-image"
+      className="tile-image"
       style={{ backgroundImage: `url(${data.ImageSrc})` }}
     />
   );
diff --git a/apps/demos/Demos/TileView/Directions/ReactJs/styles.css b/apps/demos/Demos/TileView/Directions/ReactJs/styles.css
@@ -6,7 +6,7 @@
   height: 100%;
 }
 
-.dx-tile-image {
+.tile-image {
   height: 100%;
   width: 100%;
   background-position: center;
diff --git a/apps/demos/Demos/TileView/Directions/Vue/HomeItem.vue b/apps/demos/Demos/TileView/Directions/Vue/HomeItem.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     :style="{backgroundImage: 'url(' + itemData.ImageSrc + ')'}"
-    class="dx-tile-image"
+    class="tile-image"
   />
 </template>
 <script setup lang="ts">
@@ -12,7 +12,7 @@ withDefaults(defineProps<{
 });
 </script>
 <style scoped>
-  .dx-tile-image {
+  .tile-image {
     height: 100%;
     width: 100%;
     background-position: center;

Original file line number	Diff line number	Diff line change
`@@ -16,12 +16,12 @@`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`::ng-deep .dx-chat-messagebubble-content,`
`19`		`-::ng-deep .dx-chat-messagebubble-text {`
	`19`	`+::ng-deep .chat-messagebubble-text {`
`20`	`20`	`display: flex;`
`21`	`21`	`flex-direction: column;`
`22`	`22`	`}`
`23`	`23`
`24`		`-::ng-deep .dx-bubble-button-container {`
	`24`	`+::ng-deep .bubble-button-container {`
`25`	`25`	`display: none;`
`26`	`26`	`}`
`27`	`27`
`@@ -30,7 +30,7 @@`
`30`	`30`	`color: var(--dx-color-icon);`
`31`	`31`	`}`
`32`	`32`
`33`		`-::ng-deep .dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .dx-bubble-button-container {`
	`33`	`+::ng-deep .dx-chat-messagegroup-alignment-start:last-child .dx-chat-messagebubble:last-child .bubble-button-container {`
`34`	`34`	`display: flex;`
`35`	`35`	`gap: 4px;`
`36`	`36`	`margin-top: 8px;`
`@@ -54,7 +54,7 @@`
`54`	`54`	`font-weight: revert;`
`55`	`55`	`}`
`56`	`56`
`57`		`-::ng-deep .dx-chat-disabled .dx-chat-messagebox {`
	`57`	`+::ng-deep .chat-disabled .dx-chat-messagebox {`
`58`	`58`	`opacity: 0.5;`
`59`	`59`	`pointer-events: none;`
`60`	`60`	`}`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export const AzureOpenAIConfig = {`
`9`	`9`	`}`
`10`	`10`
`11`	`11`	`export const REGENERATION_TEXT = 'Regeneration...';`
`12`		`-export const CHAT_DISABLED_CLASS = 'dx-chat-disabled';`
	`12`	`+export const CHAT_DISABLED_CLASS = 'chat-disabled';`
`13`	`13`	`export const ALERT_TIMEOUT = 1000 * 60;`
`14`	`14`
`15`	`15`	`export const user: ChatTypes.User = {`