fix: prevent layout shifts in reactions modal #2272
Merged
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
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
|
myandrienko
commented
Feb 13, 2024
| @@ -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.
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.
Comment on lines
+42
to
+58
| '--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.
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.
Keeping the old default size of 18px for emoji, for backwards compatibility.
myandrienko
changed the title
| @@ -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. | |||
myandrienko
requested review from
arnautov-anton,
oliverlaz and
MartinCupela
MartinCupela
approved these changes
Feb 16, 2024
arnautov-anton
approved these changes
Feb 16, 2024
github-actions bot
pushed a commit
that referenced
this pull request
Feb 21, 2024
## [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 📦🚀 |
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.
🚂 GetStream/stream-chat-css#270
To-Do