feat: prepare for removal of legacy styles from stream-chat-react #296
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
## [3.14.2](v3.14.1...v3.14.2) (2023-11-16) ### Bug Fixes * lift the React notification banner above the modal overlay ([#249](#249)) ([01e5200](01e5200)) * prevent glitch text from overflowing elements ([#250](#250)) ([1c0cd6f](1c0cd6f)) * **react-sdk:** prevent blank message list on fast scroll in iOS browsers ([#248](#248)) ([2cfe41a](2cfe41a))
BREAKING CHANGE: `emoji-mart` styles are now distributed separately (affects both styling versions) BREAKING CHANGE: `emoji-replacement` styles are now distributed separately (affects both styling versions) ### 🎯 Goal In `stream-chat-react@11.x.x` the `emoji-mart`-related components will become optional which means that bundling `emoji-mart` related styles to one output file is no longer feasible as some integrators might decide to not use these components at all making their final browser bundles contain unnecessary styling rules. `_emoji-replacement.scss` has been a part of the final CSS bundle even though some integrators might decide to not use this [Windows-only fallback](https://getstream.io/chat/docs/sdk/react/components/contexts/chat_context/#useimageflagemojisonwindow). Package `stream-chat-react` will be removing this flag and instead will make this set of rules optional for integrators to import explicitly if needed.
# [4.0.0](v3.14.2...v4.0.0) (2023-11-27) ### Bug Fixes * remove emoji-mart & emoji-replacement from final builds ([#246](#246)) ([f2079c8](f2079c8)) ### BREAKING CHANGES * `emoji-mart` styles are now distributed separately (affects both styling versions) * `emoji-replacement` styles are now distributed separately (affects both styling versions) ### 🎯 Goal In `stream-chat-react@11.x.x` the `emoji-mart`-related components will become optional which means that bundling `emoji-mart` related styles to one output file is no longer feasible as some integrators might decide to not use these components at all making their final browser bundles contain unnecessary styling rules. `_emoji-replacement.scss` has been a part of the final CSS bundle even though some integrators might decide to not use this [Windows-only fallback](https://getstream.io/chat/docs/sdk/react/components/contexts/chat_context/#useimageflagemojisonwindow). Package `stream-chat-react` will be removing this flag and instead will make this set of rules optional for integrators to import explicitly if needed.
### 🎯 Goal Fix file preview error overlay position:  ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes  Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
## [4.0.1](v4.0.0...v4.0.1) (2023-11-29) ### Bug Fixes * file attachment preview error overlay ([#252](#252)) ([a161621](a161621))
# [4.1.0](v4.0.1...v4.1.0) (2023-12-01) ### Features * add image fallback styles ([#251](#251)) ([f123874](f123874))
# [4.2.0](v4.1.0...v4.2.0) (2023-12-13) ### Bug Fixes * position image download icon relative to the image fallback button ([#256](#256)) ([b4a5c07](b4a5c07)) * **stream-chat-react:** center image gallery content fullscreen ([#254](#254)) ([6fb68de](6fb68de)) ### Features * **stream-chat-react:** add styles for BaseImage to react-image-gallery stylesheet ([#255](#255)) ([ce0d338](ce0d338))
### 🎯 Goal Display all reacting users for message reactions (not just the latest 10) in Angular SDK ### 🛠 Implementation details The tooltip was replaced with a modal window for Angular ### 🎨 UI Changes New reactions details UI: 
### 🎯 Goal With the new Angular reaction details UI it took two clicks on mobile to open the reactions (first was to open message options, second to open the modal). To fix that clicking on a reaction icon won't open the message options. ### 🛠 Implementation details It uses the new `:has` selector which doesn't yet have [complete browser support](https://caniuse.com/?search=%3Ahas) so we use the [`@supports` syntax ](https://caniuse.com/?search=%40supports) to only use the selector in browsers that support it. For other browsers the users will have to click twice to open the message reactions.⚠️ Autoprefixer might need to be updated in older applications that use the React/Angular SDK: https://getstream.slack.com/archives/C06CF5TKRGA/p1704989315231429 ### 🎨 UI Changes The message options not displayed when hovering over a reaction icon: React sample app screenshots: Before: <img width="411" alt="Screenshot 2024-01-12 at 10 04 18" src="https://github.com/GetStream/stream-chat-css/assets/6690098/5caf7536-799a-4356-af20-826c10e70db1"> After: <img width="374" alt="Screenshot 2024-01-12 at 10 24 35" src="https://github.com/GetStream/stream-chat-css/assets/6690098/a6d1df2a-6254-4be4-a230-7160a2c65977"> --------- Co-authored-by: MartinCupela <32706194+MartinCupela@users.noreply.github.com>
# [4.3.0](v4.2.0...v4.3.0) (2024-01-12) ### Bug Fixes * double click is required for opening reaction details ([#259](#259)) ([247bc1b](247bc1b)) ### Features * add styles for unread messages separator and notification ([#257](#257)) ([9ea8ac7](9ea8ac7)) * **angular:** display all reacting users for message reactions ([#258](#258)) ([7ac9fe0](7ac9fe0))
### 🎯 Goal We're updating UI for displaying reactions. Instead of showing the latest reactions only, we're adding a separate modal window full the full list of reactions. ### 🛠 Implementation details React SDK renders emoji as block elements, so some additional styling was required. BTW, that means that [inline styling](https://github.com/GetStream/stream-chat-angular/blob/1ab3e26a3d89df85d6973c420529d52873186923/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L27) can be removed in Angular SDK (cc @szuperaz).
# [4.4.0](v4.3.0...v4.4.0) (2024-01-24) ### Features * update styles for reactions modal ([#261](#261)) ([e92eae3](e92eae3)), closes [/github.com/GetStream/stream-chat-angular/blob/1ab3e26a3d89df85d6973c420529d52873186923/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts#L27](https://github.com//github.com/GetStream/stream-chat-angular/blob/1ab3e26a3d89df85d6973c420529d52873186923/projects/stream-chat-angular/src/lib/message-reactions/message-reactions.component.ts/issues/L27)
### 🎯 Goal Angular-only change, allows to display custom metadata inside the message ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes   Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
# [4.5.0](v4.4.0...v4.5.0) (2024-01-30) ### Features * **angular:** custom metadata inside message ([#262](#262)) ([db092e6](db092e6))
### 🎯 Goal Angular-only changes to fix glitches around popper menus ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
### 🎯 Goal See detailed description here: GetStream/stream-chat-react#2241
### 🎯 Goal `MessageBounceOptions` refers to the contents of a modal dialog displayed when clicking on a message that bounced because of moderation rules. ### 🛠 Implementation details This is a simple dialog with three buttons. Buttons are customizable via standard component overrides. ### 🎨 UI Changes 
### 🎯 Goal This PR affects both Angular and React This is an old bug, but we probably didn't notice it because it requires lots of reactions + very narrow device: but the reaction list above the message bubble could overflow. ### 🛠 Implementation details This PR adds scrolling to the reaction list A room for improvement: the reaction list could fill the whole width of the message list (see screenshots for visual explanation), this is currently not happening due to our CSS/HTML structure. Since this is not an easy fix, I'll leave this to our future selves. ### 🎨 UI Changes Before:  After:  Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
## [4.6.1](v4.6.0...v4.6.1) (2024-02-01) ### Bug Fixes * reaction list is now scrollable ([#265](#265)) ([de3ba43](de3ba43))
### 🎯 Goal Angular-only change: the mention autocomplete menu could overflow before ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
## [4.6.2](v4.6.1...v4.6.2) (2024-02-06) ### Bug Fixes * **angular:** Mention autocomplete can overflow ([#266](#266)) ([2218812](2218812))
### 🎯 Goal _Describe why we are making this change_ ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
# [4.15.0](v4.14.0...v4.15.0) (2024-04-25) ### Bug Fixes * remove unnecessary selector specificity from font-family setting ([#292](#292)) ([04e110d](04e110d)) ### Features * **angular:** allow customizing avatar, icon and loading indicator from CSS ([#291](#291)) ([b4d1658](b4d1658)), closes [/github.com/GetStream/stream-video-js/blob/main/packages/styling/src/Icon/Icon-theme.scss#L16](https://github.com//github.com/GetStream/stream-video-js/blob/main/packages/styling/src/Icon/Icon-theme.scss/issues/L16)
# [4.16.0](v4.15.0...v4.16.0) (2024-05-09) ### Features * add styles for unsupported message attachment ([#294](#294)) ([0e59ba5](0e59ba5))
### 🎯 Goal If an integrator does a custom style bundling (instead of importing the `index.scss`) they might need to set a custom asset path ### 🛠 Implementation details _Provide a description of the implementation_ ### 🎨 UI Changes _Add relevant screenshots_ Make sure to test with both Angular and React (with both `MessageList` and `VirtualizedMessageList` components) SDKs
## [4.16.1](v4.16.0...v4.16.1) (2024-05-09) ### Bug Fixes * allow configuring asset path for icons ([#295](#295)) ([cdd927f](cdd927f))
szuperaz
reviewed
May 21, 2024
szuperaz
approved these changes
May 23, 2024
github-actions bot
pushed a commit
that referenced
this pull request
Jun 21, 2024
# [5.0.0-rc.1](v4.17.0...v5.0.0-rc.1) (2024-06-21) ### Bug Fixes * adjust MessageInput Autocomplete position above textarea with multiple rows ([#297](#297)) ([b3dd8de](b3dd8de)) * center message input elements ([615fff7](615fff7)) * remove emoji-mart from final builds, distribute separately ([#246](#246)) ([9ad33d5](9ad33d5)) * remove emoji-replacement from final builds, distribute separately ([#247](#247)) ([613f52d](613f52d)) * remove source maps ([8d923f2](8d923f2)) * remove str-chat class from emoji-replacement rules ([3bf8d68](3bf8d68)) ### Features * prepare for removal of legacy styles from stream-chat-react ([#296](#296)) ([e374e81](e374e81)) ### BREAKING CHANGES * emoji-replacement styles are now distributed separately (affects both styling versions) * `emoji-mart` styles are now distributed separately (affects both styling versions)
|
🎉 This PR is included in version 5.0.0-rc.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
github-actions bot
pushed a commit
that referenced
this pull request
Sep 17, 2024
# [5.0.0](v4.19.0...v5.0.0) (2024-09-17) ### Bug Fixes * center message input elements ([615fff7](615fff7)) * move ThreadListItem related styles to appropriate class ([82c2a71](82c2a71)) * remove emoji-mart from final builds, distribute separately ([#246](#246)) ([9ad33d5](9ad33d5)) * remove emoji-replacement from final builds, distribute separately ([#247](#247)) ([613f52d](613f52d)) * remove source maps ([8d923f2](8d923f2)) * remove str-chat class from emoji-replacement rules ([3bf8d68](3bf8d68)) * **ThreadListItem:** add text overflow for long user names ([#306](#306)) ([f9d7d54](f9d7d54)) ### Features * add styles to support dialog display in stream-chat-react ([#308](#308)) ([bc9e068](bc9e068)) * prepare for removal of legacy styles from stream-chat-react ([#296](#296)) ([e374e81](e374e81)) * remove str-chat__main-panel--hideOnThread rules ([#303](#303)) ([5d0bcb4](5d0bcb4)) * threads 2.0 styling ([#305](#305)) ([c138ed3](c138ed3)) ### BREAKING CHANGES * removal of str-chat__main-panel--hideOnThread rules * emoji-replacement styles are now distributed separately (affects both styling versions) * `emoji-mart` styles are now distributed separately (affects both styling versions)
|
🎉 This PR is included in version 5.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.