feat: redesign ThreadHeader and ThreadHead

examples/vite/src/stream-imports-layout.scss

@@ -40,7 +40,7 @@
 @use 'stream-chat-react/dist/scss/v2/Notification/Notification-layout';
 //@use 'stream-chat-react/dist/scss/v2/Poll/Poll-layout';
 @use 'stream-chat-react/dist/scss/v2/Search/Search-layout';
-@use 'stream-chat-react/dist/scss/v2/Thread/Thread-layout';
+//@use 'stream-chat-react/dist/scss/v2/Thread/Thread-layout';
 @use 'stream-chat-react/dist/scss/v2/Tooltip/Tooltip-layout';
 @use 'stream-chat-react/dist/scss/v2/TypingIndicator/TypingIndicator-layout';
 // @use 'stream-chat-react/dist/scss/v2/ThreadList/ThreadList-layout';

examples/vite/src/stream-imports-theme.scss

@@ -34,7 +34,7 @@
 @use 'stream-chat-react/dist/scss/v2/Notification/Notification-theme';
 //@use 'stream-chat-react/dist/scss/v2/Poll/Poll-theme';
 @use 'stream-chat-react/dist/scss/v2/Search/Search-theme';
-@use 'stream-chat-react/dist/scss/v2/Thread/Thread-theme';
+//@use 'stream-chat-react/dist/scss/v2/Thread/Thread-theme';
 @use 'stream-chat-react/dist/scss/v2/Tooltip/Tooltip-theme';
 @use 'stream-chat-react/dist/scss/v2/TypingIndicator/TypingIndicator-theme';
 // @use 'stream-chat-react/dist/scss/v2/ThreadList/ThreadList-theme';

src/components/Button/Button.tsx

@@ -52,7 +52,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button
         className,
       )}
     >
-      <span className='str-chat__button__content'>{children}</span>
+      <div className='str-chat__button__content'>{children}</div>
     </button>
   );
 });

src/components/Button/styling/Button.scss

@@ -145,6 +145,9 @@
     }
 
     &.str-chat__button--circular {
+      display: flex;
+      align-items: center;
+      justify-content: center;
       border-radius: var(--button-radius-full);
     }
 

src/components/ChannelHeader/styling/ChannelHeader.scss

@@ -33,17 +33,11 @@
 
 .str-chat__channel-header {
   @include utils.component-layer-overrides('channel-header');
-  display: flex;
-  padding: var(--spacing-md);
-  column-gap: var(--spacing-sm);
-  align-items: center;
+  @include utils.header-layout;
   flex: 1;
-  min-width: 0;
-  height: var(--str-chat__channel-header-height);
 
   .str-chat__channel-header__data {
     @include utils.header-text-layout;
-    min-width: 0;
   }
 
   .str-chat__channel-header__data__title,

src/components/Message/types.ts

@@ -26,6 +26,7 @@ export type MessageProps = {
   deliveredTo?: UserResponse[];
   /** If true, disables the ability for users to quote messages, defaults to false */
   disableQuotedMessages?: boolean;
+  // todo: remove
   /** Override the default formatting of the date. This is a function that has access to the original date object, returns a string  */
   formatDate?: (date: Date) => string;
   /** Function that returns the notification text to be displayed when a delete message request fails */

src/components/MessageList/styling/MessageList.scss

@@ -38,23 +38,6 @@
       margin: 0;
     }
   }
-
-  .str-chat__parent-message-li {
-    $spacing: var(--str-chat__spacing-4);
-    padding-block-end: $spacing;
-    margin-block-end: $spacing;
-    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
-
-    .str-chat__thread-start {
-      color: var(--str-chat__thread-head-start-color);
-      font: var(--str-chat__subtitle-text);
-    }
-
-    .str-chat__thread-start {
-      text-align: start;
-      padding-top: var(--str-chat__spacing-3);
-    }
-  }
 }
 
 .str-chat__main-panel {

src/components/MessageList/styling/VirtualizedMessageList.scss

@@ -1,9 +1,33 @@
 @use '../../../styling/utils';
 
-// todo: React SDK specific. Copied from V1. Deprecate after merging with MessageList
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__virtual-list-border-radius: 0;
+
+  /* The text/icon color of the component */
+  --str-chat__virtual-list-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__virtual-list-background-color: var(--str-chat__background-color);
+
+  /* Box shadow applied to the component */
+  --str-chat__virtual-list-box-shadow: none;
+
+  /* Top border of the component */
+  --str-chat__virtual-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__virtual-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__virtual-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__virtual-list-border-inline-end: none;
+}
 
-// Layout
 .str-chat__virtual-list {
+  @include utils.component-layer-overrides('virtual-list');
   @include utils.scrollable-y;
   --str-chat__message-list-scroll-max-width: calc(
     var(--str-chat__message-composer-max-width) +
@@ -30,15 +54,6 @@
     margin-right: auto;
   }
 
-  .str-chat__parent-message-li {
-    padding-block-end: var(--str-chat__spacing-4);
-
-    .str-chat__thread-start {
-      text-align: start;
-      padding-top: var(--str-chat__spacing-3);
-    }
-  }
-
   // conditionally showing the header displaces items when prepending.
   // a simple workaround is to make the loading indicator an overlay.
   &__loading {
@@ -63,43 +78,3 @@
     margin-block-end: 0 !important;
   }
 }
-
-// Theme (only available in React SDK)
-.str-chat {
-  /* The border radius used for the borders of the component */
-  --str-chat__virtual-list-border-radius: 0;
-
-  /* The text/icon color of the component */
-  --str-chat__virtual-list-color: var(--str-chat__text-color);
-
-  /* The background color of the component */
-  --str-chat__virtual-list-background-color: var(--str-chat__background-color);
-
-  /* Box shadow applied to the component */
-  --str-chat__virtual-list-box-shadow: none;
-
-  /* Top border of the component */
-  --str-chat__virtual-list-border-block-start: none;
-
-  /* Bottom border of the component */
-  --str-chat__virtual-list-border-block-end: none;
-
-  /* Left (right in RTL layout) border of the component */
-  --str-chat__virtual-list-border-inline-start: none;
-
-  /* Right (left in RTL layout) border of the component */
-  --str-chat__virtual-list-border-inline-end: none;
-}
-
-.str-chat__virtual-list {
-  @include utils.component-layer-overrides('virtual-list');
-
-  .str-chat__parent-message-li {
-    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
-
-    .str-chat__thread-start {
-      color: var(--str-chat__thread-head-start-color);
-      font: var(--str-chat__subtitle-text);
-    }
-  }
-}

src/components/Thread/ThreadHead.tsx

@@ -5,11 +5,13 @@ import { Message } from '../Message';
 import { ThreadStart as DefaultThreadStart } from './ThreadStart';
 
 import { useComponentContext } from '../../context';
+import { DateSeparator } from '../DateSeparator';
 
 export const ThreadHead = (props: MessageProps) => {
   const { ThreadStart = DefaultThreadStart } = useComponentContext('ThreadHead');
   return (
     <div className='str-chat__parent-message-li'>
+      <DateSeparator date={props.message.created_at} />
       <Message initialMessage threadList {...props} />
       <ThreadStart />
     </div>

src/components/Thread/ThreadHeader.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
 
 import { useChannelPreviewInfo } from '../ChannelPreview/hooks/useChannelPreviewInfo';
-import { CloseIcon } from './icons';
 
 import { useChannelStateContext } from '../../context/ChannelStateContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 
 import type { ChannelPreviewInfoParams } from '../ChannelPreview/hooks/useChannelPreviewInfo';
 import type { LocalMessage } from 'stream-chat';
+import { Button } from '../Button';
+import { IconCrossMedium } from '../Icons';
 
 export type ThreadHeaderProps = {
   /** Callback for closing the thread */
@@ -36,14 +37,18 @@ export const ThreadHeader = (
         <div className='str-chat__thread-header-title'>{t('Thread')}</div>
         <div className='str-chat__thread-header-subtitle'>{displayTitle}</div>
       </div>
-      <button
+      <Button
+        appearance='ghost'
         aria-label={t('aria/Close thread')}
+        circular
         className='str-chat__close-thread-button'
-        data-testid='close-button'
+        data-testid='close-thread-button'
         onClick={closeThread}
+        size='md'
+        variant='secondary'
       >
-        <CloseIcon />
-      </button>
+        <IconCrossMedium />
+      </Button>
     </div>
   );
 };