-
Notifications
You must be signed in to change notification settings - Fork 272
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix: prevent layout shifts in reactions modal #2272
Conversation
Codecov ReportAttention:
Additional details and impacted files@@ Coverage Diff @@
## master #2272 +/- ##
==========================================
- Coverage 84.82% 84.81% -0.02%
==========================================
Files 344 344
Lines 7573 7568 -5
Branches 2106 2103 -3
==========================================
- Hits 6424 6419 -5
Misses 806 806
Partials 343 343 ☔ View full report in Codecov by Sentry. |
Size Change: +635 B (0%) Total Size: 1.72 MB
ℹ️ View Unchanged
|
@@ -69,7 +69,7 @@ export function ReactionsListModal({ | |||
)} | |||
</div> | |||
{SelectedEmojiComponent && ( | |||
<div className='emoji str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big'> | |||
<div className='emoji str-chat__message-reaction-emoji str-chat__message-reaction-emoji--with-fallback str-chat__message-reaction-emoji-big'> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We want to provide some additional styles to prevent layout shift when switching from a fallback emoji to a sprite image. Since only React SDK uses image emoji, I added some react-specific class names.
'--str-chat__sprite-image-resize-ratio': | ||
'var(--str-chat__sprite-image-resize-ratio-x, var(--str-chat__sprite-image-resize-ratio-y, 1))', | ||
'--str-chat__sprite-image-resize-ratio-x': | ||
'calc(var(--str-chat__sprite-image-width) / var(--str-chat__sprite-item-width))', | ||
'--str-chat__sprite-image-resize-ratio-y': | ||
'calc(var(--str-chat__sprite-image-height) / var(--str-chat__sprite-item-height))', | ||
'--str-chat__sprite-item-height': `${spriteHeight / rows}`, | ||
'--str-chat__sprite-item-width': `${spriteWidth / columns}`, | ||
...(Number.isFinite(height) ? { '--str-chat__sprite-image-height': `${height}px` } : {}), | ||
...(Number.isFinite(width) ? { '--str-chat__sprite-image-width': `${width}px` } : {}), | ||
backgroundImage: `url('${spriteUrl}')`, | ||
backgroundPosition: `${x * (100 / (columns - 1))}% ${y * (100 / (rows - 1))}%`, | ||
backgroundSize: `${columns * 100}% ${rows * 100}%`, | ||
height: | ||
'var(--str-chat__sprite-image-height, calc(var(--str-chat__sprite-item-height) * var(--str-chat__sprite-image-resize-ratio)))', | ||
width: | ||
'var(--str-chat__sprite-image-width, calc(var(--str-chat__sprite-item-width) * var(--str-chat__sprite-image-resize-ratio)))', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
All the same calculations, now in CSS 🪄
position={position} | ||
rows={3} | ||
spriteUrl={STREAM_SPRITE_URL} | ||
style={ | ||
{ | ||
'--str-chat__sprite-image-height': 'var(--str-chat__stream-emoji-size, 18px)', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Keeping the old default size of 18px for emoji, for backwards compatibility.
@@ -9,7 +9,7 @@ import GHComponentLink from '../_docusaurus-components/GHComponentLink'; | |||
|
|||
## Introducing new reactions | |||
|
|||
When it came to developer experience regarding customization of the reaction components our team noticed that our integrators generally strugled to make more advanced adjustments to reactions without having to rebuild the whole [component set](../components/message-components/reactions.mdx). The whole process has been quite unintuitive and that's why this update aims at making adjusting your reactions much easier. | |||
When it came to developer experience regarding customization of the reaction components our team noticed that our integrators generally struggled to make more advanced adjustments to reactions without having to rebuild the whole [component set](../components/message-components/reactions.mdx). The whole process has been quite unintuitive and that's why this update aims at making adjusting your reactions much easier. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you! 🙏
## [11.9.0](v11.8.0...v11.9.0) (2024-02-21) ### Bug Fixes * add aria-expanded attribute to emoji picker and reactions selector ([#2274](#2274)) ([b15cdd5](b15cdd5)) * mark channel read on scroll to bottom of the main message list ([#2283](#2283)) ([d04d0ab](d04d0ab)) * prevent layout shifts in reactions modal ([#2272](#2272)) ([706cf3d](706cf3d)) * trap focus in opened modal ([#2278](#2278)) ([8f48b52](8f48b52)) ### Features * make aria-labels localizable ([#2282](#2282)) ([7867677](7867677)), closes [#1931](#1931) [#1994](#1994)
🎉 This PR is included in version 11.9.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
🚂 GetStream/stream-chat-css#270
To-Do