Skip to content

Commit

Permalink
Update from GetStream/stream-chat-react@32c8fc0
Browse files Browse the repository at this point in the history
  • Loading branch information
stream-ci-bot committed Jul 15, 2024
1 parent bd4ca65 commit 83ad764
Show file tree
Hide file tree
Showing 6 changed files with 154 additions and 111 deletions.
43 changes: 35 additions & 8 deletions docusaurus/docs/React/basics/getting-started.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
}
Expand All @@ -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 {
Expand Down
8 changes: 0 additions & 8 deletions docusaurus/docs/React/components/core-components/thread.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 0 additions & 8 deletions docusaurus/docs/React/components/utility-components/window.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
34 changes: 33 additions & 1 deletion docusaurus/docs/React/release-guides/upgrade-to-v12.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 |

Expand Down
Loading

0 comments on commit 83ad764

Please sign in to comment.