Skip to content

feat: introduce extended reaction list to a reactions detail component#3100

Open
arnautov-anton wants to merge 6 commits intomasterfrom
feat/extended-reaction-list/message-reactions-detail
Open

feat: introduce extended reaction list to a reactions detail component#3100
arnautov-anton wants to merge 6 commits intomasterfrom
feat/extended-reaction-list/message-reactions-detail

Conversation

@arnautov-anton
Copy link
Copy Markdown
Contributor

@arnautov-anton arnautov-anton commented Apr 9, 2026

https://www.figma.com/design/Us73erK1xFNcB5EH3hyq6Y/Chat-SDK-Design-System?node-id=4305-171859&m=dev

Screenshot 2026-04-09 at 4 32 29 PM

New ComponentContext slot: ReactionSelectorExtendedList

A new optional component override has been added to ComponentContextValue:

ReactionSelectorExtendedList?: React.ComponentType<
  ComponentProps<(typeof ReactionSelector)['ExtendedList']>
>;

This allows consumers to replace the extended reaction list UI (the grid of all available reactions) independently of the ReactionSelector component itself. Both ReactionSelector and MessageReactionsDetail now consume this slot from context, falling back to ReactionSelector.ExtendedList when not provided. Pass it via <Channel ReactionSelectorExtendedList={YourComponent} />.

Bug fix: reactionDetailsSort prop now forwarded to MessageReactionsDetail

The reactionDetailsSort prop on MessageReactions was accepted but silently ignored (the destructured value was unused, suppressed with an eslint-disable comment). It is now correctly forwarded to the MessageReactionsDetail child component, meaning custom sort orders for the reaction detail user list will take effect.

New i18n key: "Add reaction"

A new translatable string "Add reaction" has been added to all 12 locale files. It is used as the aria-label on the "add reaction" button inside MessageReactionsDetail. Custom translation bundles should include this key.

Styling changes

Three CSS changes in MessageReactionsDetail.scss:

  1. Fade overlay height increased from var(--size-12) to var(--size-16).
  2. Fade overlay gradient changed from a hardcoded rgba(0,0,0,0.1) to var(--background-core-elevation-0), making it theme-aware.
  3. Reaction type list horizontal padding changed from var(--spacing-xs) to var(--spacing-md).

Consumers who override these styles with selectors targeting .str-chat__message-reactions-detail descendants may need to adjust.

@arnautov-anton arnautov-anton force-pushed the feat/extended-reaction-list/message-reactions-detail branch from 8439fd4 to bee5e5e Compare April 9, 2026 07:56
@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 9, 2026

Size Change: +1.99 kB (+0.32%)

Total Size: 617 kB

📦 View Changed
Filename Size Change
dist/cjs/emojis.js 2.96 kB +1 B (+0.03%)
dist/cjs/index.js 237 kB +638 B (+0.27%)
dist/cjs/WithAudioPlayback.js 44 kB +302 B (+0.69%)
dist/css/index.css 45.5 kB +127 B (+0.28%)
dist/es/emojis.mjs 2.47 kB -2 B (-0.08%)
dist/es/index.mjs 236 kB +633 B (+0.27%)
dist/es/WithAudioPlayback.mjs 43.8 kB +293 B (+0.67%)
ℹ️ View Unchanged
Filename Size
dist/cjs/audioProcessing.js 1.32 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 9, 2026

Codecov Report

❌ Patch coverage is 83.33333% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 82.26%. Comparing base (443b9a8) to head (45eda82).

Files with missing lines Patch % Lines
...rc/components/Reactions/MessageReactionsDetail.tsx 64.70% 12 Missing ⚠️
src/components/Reactions/ReactionSelector.tsx 96.29% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##           master    #3100      +/-   ##
==========================================
+ Coverage   82.21%   82.26%   +0.05%     
==========================================
  Files         418      418              
  Lines       12044    12074      +30     
  Branches     3875     3882       +7     
==========================================
+ Hits         9902     9933      +31     
+ Misses       2142     2141       -1     

☔ 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.

@arnautov-anton arnautov-anton force-pushed the feat/extended-reaction-list/message-reactions-detail branch from 073fe31 to cffb7d5 Compare April 9, 2026 14:32
@arnautov-anton arnautov-anton marked this pull request as ready for review April 9, 2026 16:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant