feat!: remove fullWidth prop from Thread & hideOnThread prop from Window (#2450)

BREAKING CHANGE:  removed Thread prop fullWidth, removed class str-chat__thread--full
BREAKING CHANGE:  removed Window prop hideOnThread, replaced class str-chat__main-panel--hideOnThread with str-chat__main-panel--thread-open

Author: MartinCupela

README.md

@@ -90,7 +90,7 @@ For components that implement significant logic, it's helpful to split the compo
 
 ### Customizing Styles
 
-The preferred method for overriding the pre-defined styles in the library is to two step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
+The preferred method for overriding the pre-defined styles in the library is to two-step process. First, import our bundled CSS into the file where you instantiate your chat application. Second, locate any Stream styles you want to override using either the browser inspector or by viewing the library code. You can then add selectors to your local CSS file to override our defaults. For example:
 
 ```js
 import 'stream-chat-react/dist/css/v2/index.css';

docusaurus/docs/React/basics/getting-started.mdx

@@ -76,22 +76,37 @@ body,
   display: flex;
   height: 100%;
 
-  .str-chat-channel-list {
+  .str-chat__channel-list {
     position: fixed;
     z-index: 1;
+    height: 100%;
     width: 0;
+    flex-shrink: 0;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);
 
     &--open {
-      width: 100%;
+      width: 30%;
+      position: fixed;
     }
+    transition: width 0.3s ease-out;
+  }
+
+  .str-chat__channel {
+    flex: 1;
+    min-width: 0;
   }
 
-  .str-chat-channel {
-    width: 100%;
+  .str-chat__main-panel {
+    min-width: 0;
+    flex: 1;
+
+    &--thread-open {
+      display: none;
+    }
   }
 
   .str-chat__thread {
-    width: 100%;
+    flex: 1;
     height: 100%;
     position: fixed;
     z-index: 1;
@@ -117,9 +132,8 @@ body,
   }
 
   @media screen and (min-width: 768px) {
-    .str-chat-channel-list {
+    .str-chat__channel-list {
       width: 30%;
-      max-width: 420px;
       position: initial;
       z-index: 0;
     }
@@ -128,11 +142,24 @@ body,
       position: initial;
       z-index: 0;
     }
+
+    .str-chat__channel-header .str-chat__header-hamburger {
+      display: none;
+    }
   }
 
   @media screen and (min-width: 1024px) {
+    .str-chat__main-panel {
+      min-width: 0;
+
+      &--thread-open {
+        max-width: 55%;
+        display: flex;
+      }
+    }
+
     .str-chat__thread {
-      width: 45%;
+      max-width: 45%;
     }
 
     .str-chat__channel-header .str-chat__header-hamburger {

docusaurus/docs/React/components/core-components/thread.mdx

@@ -169,14 +169,6 @@ Controls injection of <GHComponentLink text='DateSeparator' path='/DateSeparator
 | ------- | ------- |
 | boolean | false   |
 
-### fullWidth
-
-If true, displays the thread at 100% width of its parent container, useful for mobile styling.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
 ### Input
 
 Custom UI component to replace the `MessageInput` of a `Thread`. The component uses `MessageInputFlat` by default.

docusaurus/docs/React/components/utility-components/window.mdx

@@ -24,14 +24,6 @@ This ensures correct width changes in the main channel when opening and closing
 
 ## Props
 
-### hideOnThread
-
-The boolean to show or hide the `Window` when a `Thread` is active.
-
-| Type    | Default |
-| ------- | ------- |
-| boolean | false   |
-
 ### thread
 
 An optional prop to manually trigger the opening of a thread.

docusaurus/docs/React/release-guides/upgrade-to-v12.mdx

@@ -151,6 +151,37 @@ The `Avatar` styles are applied through CSS from the version 12 upwards. Therefo
 3\. If needed, apply custom styles to newly added classes based on the component that renders the `Avatar`.
 :::
 
+## Removal of styling props
+
+### Removal of Window's hideOnThread prop
+
+The prop boolean `hideOnThread` enabled us to control, whether class `str-chat__main-panel--hideOnThread` was attached to `Window` component's root `<div/>`. By assigning this class a CSS rule `display: none` in the default SDK's stylesheet we hid the contents of `Window`. We decided to simplify the logic in this case:
+
+1. class `str-chat__main-panel--hideOnThread` was replaced by class `str-chat__main-panel--thread-open`
+2. the class `str-chat__main-panel--thread-open` is attached to the root `<div/>` always, when thread is open
+3. the default value of `hideOnThread` prop was `false` (`Window` contents was not hidden upon opening a thread) and so integrators still have to opt in to hiding the contents upon opening a thread by adding rule `display: none` to `str-chat__main-panel--thread-open` class
+
+:::important
+**Action required**
+If your application renders `Window` with `hideOnThread` enabled, and you want to keep this behavior add the following rule to your CSS:
+
+```css
+.str-chat__main-panel--thread-open {
+  display: none;
+}
+
+.str-chat__main-panel--thread-open + .str-chat__thread {
+  // occupy the whole space previously occupied by the main message list container
+  flex: 1;
+}
+```
+
+:::
+
+### Removal of Thread's fullWidth prop
+
+Setting the `fullWidth` value to `true` let to assignment of class `str-chat__thread--full` to the `Thread` component's root `<div/>`. This class had support in the SDK's legacy stylesheet only. With the approach of avoiding styling React components via props, the prop has been removed along with the legacy stylesheet. Read more about the the stylesheet removal in the [section **Removal of deprecated components**](#removal-of-deprecated-components).
+
 ## Removal of deprecated components
 
 ### Attachment rendering utility functions
@@ -330,12 +361,13 @@ Replace the removed classes with their alternatives in the custom CSS.
 | `QuotedMessagePreview` root `<div/>`                                                      | `quoted-message-preview`                                                            | no alternative                                                                          |
 | `QuotedMessagePreview`                                                                    | `quoted-message-preview-content`                                                    | `str-chat__quoted-message-preview`                                                      |
 | `QuotedMessagePreview`                                                                    | `quoted-message-preview-content-inner`                                              | `str-chat__quoted-message-bubble`                                                       |
-| `MessageList`                                                                             | `str-chat__list--thread`                                                            | `str-chat__thread-list`                                                                 |
+| `MessageList`                                                                             | `str-chat__thread--full`                                                            | no alternative                                                                          |
 | `InfiniteScroll` rendered by `MessageList`                                                | `str-chat__reverse-infinite-scroll`                                                 | `str-chat__message-list-scroll`                                                         |
 | `ScrollToBottomButton`                                                                    | `str-chat__message-notification-right`                                              | `str-chat__message-notification-scroll-to-latest`                                       |
 | `ScrollToBottomButton`                                                                    | `str-chat__message-notification-scroll-to-latest-unread-count`                      | `str-chat__jump-to-latest-unread-count`                                                 |
 | `ReactionsListModal`                                                                      | `emoji`                                                                             | `str-chat__message-reaction-emoji` or `str-chat__message-reaction-emoji--with-fallback` |
 | `SimpleReactionList`                                                                      | `str-chat__simple-reactions-list-tooltip`                                           | no alternative - markup removal                                                         |
+| `Thread`                                                                                  | `str-chat__list--thread`                                                            | `str-chat__thread-list`                                                                 |
 | `ThreadHeader`                                                                            | `str-chat__square-button`                                                           | `str-chat__close-thread-button`                                                         |
 | `TypingIndicator`                                                                         | `str-chat__typing-indicator__avatars`                                               | no alternative - markup removal                                                         |
 

examples/typescript/src/App.css

@@ -1,18 +1,16 @@
 import React from 'react';
-import { ChannelFilters, ChannelOptions, ChannelSort, StreamChat, UR } from 'stream-chat';
+import { ChannelFilters, ChannelOptions, ChannelSort, StreamChat } from 'stream-chat';
 import {
-  Chat,
   Channel,
   ChannelHeader,
   ChannelList,
-  VirtualizedMessageList as MessageList,
+  Chat,
   MessageInput,
   Thread,
+  VirtualizedMessageList as MessageList,
   Window,
 } from 'stream-chat-react';
 
-import './App.css';
-
 const params = (new Proxy(new URLSearchParams(window.location.search), {
   get: (searchParams, property) => searchParams.get(property as string),
 }) as unknown) as Record<string, string | null>;

examples/typescript/src/App.test.tsx

@@ -1,5 +1,4 @@
 body {
-  margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
     'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
   -webkit-font-smoothing: antialiased;
@@ -11,74 +10,84 @@ code {
 }
 
 
+body {
+  margin: 0;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body,
+#root {
+  margin: unset;
+  padding: unset;
+  height: 100%;
+}
+
+
 #root {
   display: flex;
   height: 100%;
 
-  .str-chat-channel-list {
+  .str-chat__channel-list {
     position: fixed;
     z-index: 1;
+    height: 100%;
     width: 0;
+    flex-shrink: 0;
+    box-shadow: 0 0 8px rgba(0, 0, 0, 0.15);;
 
     &--open {
-      width: 100%;
+      width: 30%;
+      position: fixed;
     }
+    transition: width 0.3s ease-out;
   }
 
   .str-chat__channel {
-    width: 100%;
+    flex: 1;
+    min-width: 0;
+  }
+
+  .str-chat__main-panel {
+    min-width: 0;
+    flex: 1;
+
+    &--thread-open {
+      display: none;
+    }
   }
 
   .str-chat__thread {
-    width: 100%;
+    flex: 1;
     height: 100%;
     position: fixed;
     z-index: 1;
   }
 
   .str-chat__channel-header .str-chat__header-hamburger {
     width: 30px;
-    height: 30px;
+    height: 38px;
+    padding: var(--xxs-p);
+    margin-right: var(--xs-m);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     border: none;
     background: transparent;
 
-    svg {
-      width: 25px;
-      height: 25px;
-    }
-
     &:hover {
       svg path {
         fill: var(--primary-color);
       }
     }
   }
 
+
   @media screen and (min-width: 768px) {
-    //.str-chat-channel-list.thread-open {
-    //  &.menu-open {
-    //    width: 30%;
-    //    height: 100%;
-    //    position: fixed;
-    //    z-index: 1;
-    //  }
-    //
-    //  &.menu-close {
-    //    width: 0;
-    //  }
-    //
-    //  & + .channel .menu-button {
-    //    display: block;
-    //  }
-    //}
-
-    .str-chat-channel-list {
+    .str-chat__channel-list {
       width: 30%;
-      max-width: 420px;
       position: initial;
       z-index: 0;
     }
@@ -94,20 +103,22 @@ code {
   }
 
   @media screen and (min-width: 1024px) {
-    //.str-chat-channel-list {
-    //  max-width: 420px;
-    //  position: initial;
-    //  z-index: 0;
-    //}
+    .str-chat__main-panel {
+      min-width: 0;
+
+      &--thread-open {
+        max-width: 55%;
+        display: flex;
+      }
+    }
 
     .str-chat__thread {
-      width: 45%;
-      //position: initial;
-      //z-index: 0;
+      max-width: 45%;
     }
 
     .str-chat__channel-header .str-chat__header-hamburger {
       display: none;
     }
   }
 }
+