Skip to content

feat: add new styles for unsupported attachments (preview, message, channel preview)#3107

Merged
MartinCupela merged 6 commits intomasterfrom
feat/redesign/unsupported-attachment-redesign-redesign
Apr 13, 2026
Merged

feat: add new styles for unsupported attachments (preview, message, channel preview)#3107
MartinCupela merged 6 commits intomasterfrom
feat/redesign/unsupported-attachment-redesign-redesign

Conversation

@MartinCupela
Copy link
Copy Markdown
Contributor

@MartinCupela MartinCupela commented Apr 10, 2026

🎯 Goal

New styling of unsupported attachments
Rule that sender is not shown in DM channel preview if the last message author is the other user (comes from the design spec)
Apply message bubble width rules as follows:

  • Text-only bubbles render at 400px (or full width on smaller screens) and wrap text inside that width.
  • Any bubble with attachments also uses 400px (or full width on smaller screens), regardless of text length.

🎨 UI Changes

Fix alignment of of media attachments, that do not stretch to the full width of the message bubble:

image

Figma:

image image

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 10, 2026

Size Change: +1.56 kB (+0.25%)

Total Size: 617 kB

πŸ“¦ View Changed
Filename Size Change
dist/cjs/index.js 237 kB +219 B (+0.09%)
dist/cjs/WithAudioPlayback.js 44.1 kB +405 B (+0.93%)
dist/css/index.css 45.7 kB +345 B (+0.76%)
dist/es/emojis.mjs 2.47 kB -2 B (-0.08%)
dist/es/index.mjs 236 kB +190 B (+0.08%)
dist/es/WithAudioPlayback.mjs 43.9 kB +406 B (+0.93%)
ℹ️ View Unchanged
Filename Size
dist/cjs/audioProcessing.js 1.32 kB
dist/cjs/emojis.js 2.96 kB
dist/cjs/mp3-encoder.js 1.27 kB
dist/css/emoji-replacement.css 456 B
dist/es/audioProcessing.mjs 1.31 kB
dist/es/mp3-encoder.mjs 756 B

compressed-size-action

@codecov
Copy link
Copy Markdown

codecov bot commented Apr 13, 2026

Codecov Report

❌ Patch coverage is 91.30435% with 2 lines in your changes missing coverage. Please review.
βœ… Project coverage is 82.18%. Comparing base (443b9a8) to head (9d6225c).
⚠️ Report is 6 commits behind head on master.

Files with missing lines Patch % Lines
...chmentPreviewList/UnsupportedAttachmentPreview.tsx 66.66% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3107      +/-   ##
==========================================
- Coverage   82.21%   82.18%   -0.03%     
==========================================
  Files         418      418              
  Lines       12044    12052       +8     
  Branches     3875     3877       +2     
==========================================
+ Hits         9902     9905       +3     
- Misses       2142     2147       +5     

β˜” View full report in Codecov by Sentry.
πŸ“’ Have feedback on the report? Share it here.

πŸš€ New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • πŸ“¦ JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@MartinCupela MartinCupela merged commit 19a0add into master Apr 13, 2026
8 checks passed
@MartinCupela MartinCupela deleted the feat/redesign/unsupported-attachment-redesign-redesign branch April 13, 2026 09:29
github-actions bot pushed a commit that referenced this pull request Apr 14, 2026
## [14.0.0-beta.7](v14.0.0-beta.6...v14.0.0-beta.7) (2026-04-14)

### ⚠ BREAKING CHANGES

* remove onlySenderCanEdit from MessageProps
* - Removed legacy notification text callback props from Message props:
  getDeleteMessageErrorNotification,
  getFetchReactionsErrorNotification,
  getFlagMessageErrorNotification,
  getFlagMessageSuccessNotification,
  getMarkMessageUnreadErrorNotification,
  getMarkMessageUnreadSuccessNotification,
  getMuteUserErrorNotification,
  getMuteUserSuccessNotification,
  getPinMessageErrorNotification.
Notification customization must now be done through notification
translators
(Streami18n translationBuilder topic: "notification") and/or custom
MessageActions.
* - Message action handlers no longer publish notifications internally.
Errors now propagate to call sites, which are responsible for
success/error notifications.
* - Removed ConnectionStatus component. Connection notification UI is app
responsibility now.
* externalize sidebar toggle and remove navOpen state from the SDK (#3088)
* remove deprecated APIs ahead of v14 stable (#3086)

### Bug Fixes

* adjust padding for messages containing only padding ([#3102](#3102)) ([443b9a8](443b9a8))
* **AudioPlayback:** improve wave progress bar smoothness and sizing ([#3094](#3094)) ([982cf2a](982cf2a))
* correct various UI glitches ([#3110](#3110)) ([6605f63](6605f63))
* **Giphy:** use fixed height for giphy preview to prevent layout shifts ([#3095](#3095)) ([30e45fa](30e45fa))
* **MessageList:** prevent jump-to-message snap-back from bottom autoscroll ([#3109](#3109)) ([be8ed26](be8ed26))

### Features

* add EmojiPicker plugin stylesheet ([#3108](#3108)) ([b4ed464](b4ed464))
* add MediaBadge ([#3103](#3103)) ([e15caa4](e15caa4))
* add new styles for unsupported attachments (preview, message, channel preview) ([#3107](#3107)) ([19a0add](19a0add))
* add notification API wrapper ([#3096](#3096)) ([2060768](2060768))
* externalize sidebar toggle and remove navOpen state from the SDK ([#3088](#3088)) ([dc16bb5](dc16bb5))
* introduce extended reaction list to a reactions detail component ([#3100](#3100)) ([b284802](b284802))
* redesign UnsupportedAttachment ([#3099](#3099)) ([9156f6f](9156f6f))
* remove onlySenderCanEdit prop from MessageProps ([#3098](#3098)) ([759cadf](759cadf))
* track upload progress in attachment preview components ([#3060](#3060)) ([8b13863](8b13863))

### Refactors

* remove deprecated APIs ahead of v14 stable ([#3086](#3086)) ([8317b73](8317b73)), closes [#1804](https://github.com/GetStream/stream-chat-react/issues/1804)
@stream-ci-bot
Copy link
Copy Markdown

πŸŽ‰ This PR is included in version 14.0.0-beta.7 πŸŽ‰

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants