fix: change class names to reflect component renames (#3035)

### 🎯 Goal

# Class Name Renames (SCSS + TSX)

## ChannelListItem/styling/ChannelListItem.scss

| Old Class Name | New Class Name |
| --------------------------------------------------------- |
----------------------------------------------------------- |
| `.str-chat__channel-preview-container` |
`.str-chat__channel-list-item-container` |
| `.str-chat__channel-preview__action-buttons--active` |
`.str-chat__channel-list-item__action-buttons--active` |
| `.str-chat__channel-preview__action-buttons` |
`.str-chat__channel-list-item__action-buttons` |
| `.str-chat__channel-preview__action-buttons-context-menu` |
`.str-chat__channel-list-item__action-buttons-context-menu` |
| `.str-chat__channel-preview` | `.str-chat__channel-list-item` |
| `.str-chat__channel-preview-data` |
`.str-chat__channel-list-item-data` |
| `.str-chat__channel-preview-data__first-row` |
`.str-chat__channel-list-item-data__first-row` |
| `.str-chat__channel-preview-data__title` |
`.str-chat__channel-list-item-data__title` |
| `.str-chat__channel-preview-data__timestamp-and-badge` |
`.str-chat__channel-list-item-data__timestamp-and-badge` |
| `.str-chat__channel-preview-timestamp` |
`.str-chat__channel-list-item-timestamp` |

## Loading/styling/LoadingChannels.scss

| Old Class Name | New Class Name |
| ------------------------------------------ |
-------------------------------------------- |
| `.str-chat__channel-preview--loading` |
`.str-chat__channel-list-item--loading` |
| `.str-chat__channel-preview-data--loading` |
`.str-chat__channel-list-item-data--loading` |

## Message/styling/Message.scss

| Old Class Name | New Class Name |
| ----------------------------------------- |
----------------------------------- |
| `.str-chat__message-simple-name` | `.str-chat__message-metadata__name`
|
| `.str-chat__simple-message--error-failed` |
`.str-chat__message-inner--error` |

## MessageComposer/styling/MessageComposer.scss

| Old Class Name | New Class Name |
| ----------------------------------- |
-------------------------------------- |
| `.str-chat__message-input-cooldown` |
`.str-chat__message-composer-cooldown` |

## Additional TSX-only class names

| Old Class Name | New Class Name | File(s) |
| ----------------------------------------- |
---------------------------------------- |
--------------------------------- |
| `.str-chat__message-simple` | removed | MessageUI.tsx,
MessageBlocked.tsx |
| `.str-chat__message-simple--me` | removed | MessageUI.tsx,
MessageBlocked.tsx |
| `.str-chat__message-simple-name` | `.str-chat__message-metadata__name`
| MessageUI.tsx |
| `.str-chat__message-simple-timestamp` |
`.str-chat__message-metadata__timestamp` | MessageUI.tsx |
| `.str-chat__simple-message--error-failed` |
`.str-chat__message-inner--error` | MessageUI.tsx |
| `.str-chat__channel-preview--unread` |
`.str-chat__channel-list-item--unread` | ChannelListItemUI.tsx |
| `.str-chat__channel-preview--muted` |
`.str-chat__channel-list-item--muted` | ChannelListItemUI.tsx |

## Removed class names (no replacement)

| Removed Class Name | File |
| ----------------------------------------------------- |
---------------------------------------- |
| `.str-chat__message-simple__actions__action` |
MessageActionsWrapper.tsx (file deleted) |
| `.str-chat__message-simple__actions__action--options` |
MessageActionsWrapper.tsx (file deleted) |

BREAKING CHANGE: All `str-chat__channel-preview*` CSS classes have been
renamed to `str-chat__channel-list-item*` (e.g.
`.str-chat__channel-preview-container` →
`.str-chat__channel-list-item-container`);
`.str-chat__message-input-cooldown` has been renamed to
`.str-chat__message-composer-cooldown`; `.str-chat__message-simple-name`
has been renamed to `.str-chat__message-metadata__name`;
`.str-chat__simple-message--error-failed` has been renamed to
`.str-chat__message-inner--error`; `.str-chat__message-simple-timestamp`
has been renamed to `.str-chat__message-metadata__timestamp`. Removed
`.str-chat__message-simple` and `.str-chat__message-simple--me` root
class names from `MessageUI` and `MessageBlocked` components. Component
`MessageActionsWrapper` has been dropped.

Author: arnautov-anton

src/components/ChannelListItem/ChannelListItemActionButtons.tsx

@@ -44,8 +44,8 @@ export const ChannelListItemActionButtons: ChannelListItemActionButtonsInterface
 
   return (
     <div
-      className={clsx('str-chat__channel-preview__action-buttons', {
-        'str-chat__channel-preview__action-buttons--active': dialogIsOpen,
+      className={clsx('str-chat__channel-list-item__action-buttons', {
+        'str-chat__channel-list-item__action-buttons--active': dialogIsOpen,
       })}
     >
       {splitActionSet.dropdownActionSet.length > 0 && (
@@ -70,7 +70,7 @@ export const ChannelListItemActionButtons: ChannelListItemActionButtonsInterface
         <Component key={type} />
       ))}
       <ContextMenu
-        className='str-chat__channel-preview__action-buttons-context-menu'
+        className='str-chat__channel-list-item__action-buttons-context-menu'
         dialogManagerId={dialogManager?.id}
         id={dialog.id}
         onClose={dialog?.close}

src/components/ChannelListItem/ChannelListItemTimestamp.tsx

@@ -30,7 +30,7 @@ export function ChannelListItemTimestamp({ lastMessage }: ChannelListItemTimesta
   if (!when) return null;
 
   return (
-    <time className='str-chat__channel-preview-timestamp' dateTime={normalizedTimestamp}>
+    <time className='str-chat__channel-list-item-timestamp' dateTime={normalizedTimestamp}>
       {when}
     </time>
   );

src/components/ChannelListItem/ChannelListItemUI.tsx

@@ -49,18 +49,18 @@ const UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {
   };
 
   return (
-    <div className='str-chat__channel-preview-container'>
+    <div className='str-chat__channel-list-item-container'>
       <ChannelListItemActionButtons />
       <button
         aria-label={`Select Channel: ${displayTitle || ''}`}
         aria-pressed={active}
         className={clsx(
-          'str-chat__channel-preview',
-          typeof unread === 'number' && unread > 0 && 'str-chat__channel-preview--unread',
-          muted && 'str-chat__channel-preview--muted',
+          'str-chat__channel-list-item',
+          typeof unread === 'number' && unread > 0 && 'str-chat__channel-list-item--unread',
+          muted && 'str-chat__channel-list-item--muted',
           customClassName,
         )}
-        data-testid='channel-preview-button'
+        data-testid='channel-list-item-button'
         onClick={onSelectChannel}
         ref={channelPreviewButton}
         role='option'
@@ -72,13 +72,13 @@ const UnMemoizedChannelListItemUI = (props: ChannelListItemUIProps) => {
           size='xl'
           userName={avatarName}
         />
-        <div className='str-chat__channel-preview-data'>
-          <div className='str-chat__channel-preview-data__first-row'>
-            <div className='str-chat__channel-preview-data__title'>
+        <div className='str-chat__channel-list-item-data'>
+          <div className='str-chat__channel-list-item-data__first-row'>
+            <div className='str-chat__channel-list-item-data__title'>
               <span>{displayTitle || 'N/A'}</span>
               {muted && <IconMute />}
             </div>
-            <div className='str-chat__channel-preview-data__timestamp-and-badge'>
+            <div className='str-chat__channel-list-item-data__timestamp-and-badge'>
               <ChannelListItemTimestamp lastMessage={lastMessage} />
               {typeof unread === 'number' && unread > 0 && (
                 <Badge data-testid='unread-badge' size='md' variant='primary'>

src/components/ChannelListItem/styling/ChannelListItem.scss

@@ -1,16 +1,16 @@
-.str-chat__channel-preview-container {
+.str-chat__channel-list-item-container {
   // display: flex;
   padding: var(--spacing-xxs);
   position: relative;
 
-  &:has(.str-chat__channel-preview__action-buttons--active),
+  &:has(.str-chat__channel-list-item__action-buttons--active),
   &:hover {
-    .str-chat__channel-preview__action-buttons {
+    .str-chat__channel-list-item__action-buttons {
       display: flex;
     }
   }
 
-  .str-chat__channel-preview__action-buttons {
+  .str-chat__channel-list-item__action-buttons {
     display: none;
     position: absolute;
     gap: var(--spacing-xs);
@@ -36,11 +36,11 @@
   border-bottom: 1px solid var(--border-core-subtle);
 }
 
-.str-chat__channel-preview__action-buttons-context-menu {
+.str-chat__channel-list-item__action-buttons-context-menu {
   min-width: 150px;
 }
 
-.str-chat__channel-preview {
+.str-chat__channel-list-item {
   display: flex;
   gap: var(--spacing-md);
   align-items: center;
@@ -68,21 +68,21 @@
     flex-shrink: 0;
   }
 
-  .str-chat__channel-preview-data {
+  .str-chat__channel-list-item-data {
     display: flex;
     flex-direction: column;
     gap: var(--spacing-xxs);
     flex-shrink: 1;
     flex-grow: 1;
     min-width: 0;
 
-    .str-chat__channel-preview-data__first-row {
+    .str-chat__channel-list-item-data__first-row {
       display: flex;
       justify-content: space-between;
       align-items: center;
       gap: var(--spacing-md);
 
-      .str-chat__channel-preview-data__title {
+      .str-chat__channel-list-item-data__title {
         flex-shrink: 1;
         flex-grow: 1;
         min-width: 0;
@@ -108,13 +108,13 @@
         }
       }
 
-      .str-chat__channel-preview-data__timestamp-and-badge {
+      .str-chat__channel-list-item-data__timestamp-and-badge {
         flex-shrink: 0;
         display: flex;
         align-items: inherit;
         gap: var(--spacing-xs);
 
-        .str-chat__channel-preview-timestamp {
+        .str-chat__channel-list-item-timestamp {
           font-weight: var(--typography-font-weight-regular);
           font-size: var(--typography-font-size-sm);
           color: var(--text-tertiary);

src/components/Loading/LoadingChannels.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 
 const LoadingItems = () => (
-  <div className='str-chat__channel-preview-container'>
+  <div className='str-chat__channel-list-item-container'>
     <div
       aria-hidden='true'
-      className='str-chat__channel-preview str-chat__channel-preview--loading'
+      className='str-chat__channel-list-item str-chat__channel-list-item--loading'
     >
       <div className='str-chat__loading-channels-avatar' />
-      <div className='str-chat__channel-preview-data str-chat__channel-preview-data--loading'>
+      <div className='str-chat__channel-list-item-data str-chat__channel-list-item-data--loading'>
         <div className='str-chat__loading-channels-username' />
         <div className='str-chat__loading-channels-status' />
       </div>

src/components/Loading/styling/LoadingChannels.scss

@@ -1,5 +1,5 @@
-@mixin channel-preview-shimmer {
-  background-color: var(--str-chat__channel-preview-loading-state-color);
+@mixin channel-list-item-shimmer {
+  background-color: var(--str-chat__channel-list-item-loading-state-color);
   background-image: linear-gradient(
     90deg,
     var(--skeleton-loading-base) 0%,
@@ -13,32 +13,32 @@
 
 .str-chat {
   /* The base surface color behind the channel list loading shimmer */
-  --str-chat__channel-preview-loading-state-color: var(--background-core-surface);
+  --str-chat__channel-list-item-loading-state-color: var(--background-core-surface);
 }
 
 .str-chat__loading-channels {
   display: flex;
   flex-direction: column;
 }
 
-.str-chat__channel-preview--loading {
+.str-chat__channel-list-item--loading {
   cursor: default;
   pointer-events: none;
 }
 
-.str-chat__channel-preview--loading,
-.str-chat__channel-preview-data--loading {
+.str-chat__channel-list-item--loading,
+.str-chat__channel-list-item-data--loading {
   min-width: 0;
 }
 
-.str-chat__channel-preview-data--loading {
+.str-chat__channel-list-item-data--loading {
   justify-content: center;
 }
 
 .str-chat__loading-channels-avatar,
 .str-chat__loading-channels-username,
 .str-chat__loading-channels-status {
-  @include channel-preview-shimmer;
+  @include channel-list-item-shimmer;
 }
 
 .str-chat__loading-channels-avatar {

src/components/Message/MessageBlocked.tsx

@@ -12,10 +12,10 @@ export const MessageBlocked = () => {
   const { isMyMessage } = useUserRole(message);
 
   const messageClasses = clsx(
-    'str-chat__message str-chat__message-simple str-chat__message--blocked',
+    'str-chat__message str-chat__message--blocked',
     message.type,
     {
-      'str-chat__message--me str-chat__message-simple--me': isMyMessage,
+      'str-chat__message--me': isMyMessage,
       'str-chat__message--other': !isMyMessage,
     },
   );

src/components/Message/MessageUI.tsx

@@ -136,22 +136,22 @@ const MessageUIWithContext = ({
   const showReplyCountButton = !threadList && !!message.reply_count;
 
   const rootClassName = clsx(
-    'str-chat__message str-chat__message-simple',
+    'str-chat__message',
     `str-chat__message--${message.type}`,
     `str-chat__message--${message.status}`,
-    isMyMessage()
-      ? 'str-chat__message--me str-chat__message-simple--me'
-      : 'str-chat__message--other',
-    message.text ? 'str-chat__message--has-text' : 'str-chat__message--has-no-text',
-    textHasEmojisOnly
-      ? `str-chat__message--is-emoji-only-count-${countEmojis(message.text)}`
-      : '',
     {
       'str-chat__message--has-attachment': hasAttachment,
       'str-chat__message--has-giphy-attachment': hasGiphyAttachment,
+      'str-chat__message--has-no-text': !message.text,
+      'str-chat__message--has-text': !!message.text,
+      // eslint-disable-next-line sort-keys
       'str-chat__message--has-single-attachment': hasSingleAttachment,
       'str-chat__message--highlighted': highlighted,
       'str-chat__message--is-emoji-only': textHasEmojisOnly,
+      [`str-chat__message--is-emoji-only-count-${countEmojis(message.text)}`]:
+        textHasEmojisOnly,
+      'str-chat__message--me': isMyMessage(),
+      'str-chat__message--other': !isMyMessage(),
       'str-chat__message--pinned': message.pinned,
       'str-chat__message--with-avatar': (() => {
         if (!message.user) return false;
@@ -201,7 +201,7 @@ const MessageUIWithContext = ({
         )}
         <div
           className={clsx('str-chat__message-inner', {
-            'str-chat__simple-message--error-failed': allowRetry || isBounced,
+            'str-chat__message-inner--error': allowRetry || isBounced,
           })}
           data-testid='message-inner'
           onClick={handleClick}
@@ -245,11 +245,11 @@ const MessageUIWithContext = ({
           <div className='str-chat__message-metadata'>
             <MessageStatus />
             {!isMyMessage() && !!message.user && memberCount > 2 && (
-              <span className='str-chat__message-simple-name'>
+              <span className='str-chat__message-metadata__name'>
                 {message.user.name || message.user.id}
               </span>
             )}
-            <MessageTimestamp customClass='str-chat__message-simple-timestamp' />
+            <MessageTimestamp customClass='str-chat__message-metadata__timestamp' />
             {!isDeleted && isEdited && <MessageEditedIndicator />}
           </div>
         )}

src/components/Message/styling/Message.scss

@@ -510,7 +510,7 @@
       font: var(--str-chat__metadata-default-text);
     }
 
-    .str-chat__message-simple-name {
+    .str-chat__message-metadata__name {
       @include utils.prevent-glitch-text-overflow;
       margin-inline-end: var(--spacing-xxs);
     }
@@ -559,7 +559,7 @@
     }
   }
 
-  .str-chat__simple-message--error-failed {
+  .str-chat__message-inner--error {
     cursor: pointer;
   }