Remove mobile-press stylesheet and show message actions on hover #138
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
oliverlaz
requested review from
MartinCupela,
petyosi,
arnautov-anton and
szuperaz
szuperaz
previously approved these changes
Jun 24, 2022
…r regardless of the screen size Historically, mobile-press class was appended programmatically whenever a user tapped on a message in the message list. The goal of it was to make message actions visible. After an internal discussion, we concluded that this isn't optimal and introduces additional complexity. We decided to remove this behavior and rely on CSS `:focus-within` pseudo-selector which is already in place within the SDKs and handles the desired goal quite well. This change could be potentially breaking for some customers who might have written their own stylesheets/selectors based on the existence of `.mobile-press`. Our recommendation is to rewrite those stylesheets/selectors with `:focus` or `:focus-within` pseudo-selectors on mind.
oliverlaz
force-pushed
the
fix/remove-mobile-press
branch
from
6d2ae8d
to
c033b7a
Compare
MartinCupela
approved these changes
Jun 24, 2022
petyosi
approved these changes
Jun 27, 2022
github-actions bot
pushed a commit
that referenced
this pull request
Jul 28, 2022
# [3.0.0-theming2.1](v2.9.0...v3.0.0-theming2.1) (2022-07-28) ### Bug Fixes * add comment to help calculate spacing in pixels ([7bc42e8](7bc42e8)) * add missing close modal button styles ([3e478ce](3e478ce)) * Angular SDK edit message modal ([0acf310](0acf310)) * Browser testing bugs ([546e2d1](546e2d1)) * Consolidate React and Angular notification styles ([d801a3b](d801a3b)) * Context menu and tooltip position in Angular (theme-v1 and v2) ([e5b2ad0](e5b2ad0)) * Design enhancements ([6a40cd2](6a40cd2)) * Design fixes and enhancements ([4fc7d25](4fc7d25)) * Docusuarus CI error ([c6a091e](c6a091e)) * Emoji display in Angular ([bb276de](bb276de)) * incorrect rule value ([2cef373](2cef373)) * Long quoted message in message input ([42c865e](42c865e)) * make disappear modal container background only for image gallery ([97f76dd](97f76dd)) * make sure modal inner container does not cover overlay ([2a1fe1d](2a1fe1d)) * make the edit message dialog normal sized ([7df6cd5](7df6cd5)) * Migrate to ngx-popperjs ([3c8a143](3c8a143)) * Read by count in Angular SDK ([#81](#81)) ([932d676](932d676)) * remove .mobile-press stylesheet and show message actions on hover regardless of the screen size ([#138](#138)) ([50697b8](50697b8)) * remove 100% width on threads message inner component ([#112](#112)) ([5943419](5943419)) * remove duplicate rule ([bb867d2](bb867d2)) * Remove flex-gap polyfill ([f240d3c](f240d3c)) * remove svg from action icon selector to match React SDK markup ([6775698](6775698)) * reverse the order of own message action buttons ([bb6fd5a](bb6fd5a)) * Theming2 touchups ([#155](#155)) ([c3f81e1](c3f81e1)) * Thread layout - message input position ([be2f788](be2f788)) * Unread badge ([eb8ddc8](eb8ddc8)) * Use background instead of background-color ([b3bc122](b3bc122)) * Virtual message list selector ([acb69ba](acb69ba)) * Word break inside the message component ([3ff1d4b](3ff1d4b)) ### Features * add audio widget and card caption styles ([d8d364c](d8d364c)) * Add CSS polyfills [#85](#85) ([f4bb14c](f4bb14c)) * add date separator styles to v2 ([c7fe47f](c7fe47f)) * add stream-chat-react specific styles for MessageReactions ([b5088b4](b5088b4)) * add theming v2 changes for channel list and preview related to React SDK ([#131](#131)) ([bc3017c](bc3017c)), closes [#81](#81) [#103](#103) [#112](#112) [#113](#113) [#116](#116) * addapt theming v2 channel list and preview to stream-chat-react SDK ([#102](#102)) ([ee843da](ee843da)), closes [#103](#103) * auto-generate theme documentation ([31ab1eb](31ab1eb)) * change card caption to card content source link ([055899d](055899d)) * Channel list and preview [#89](#89) ([42f6eec](42f6eec)) * Create theme variables for text styles ([b5f0dfb](b5f0dfb)) * Empty channel list for theme-v2 (theme-v1 updated) ([ac8a5ed](ac8a5ed)) * Finalize generated documents format, add missing variable comments ([d429c77](d429c77)) * Implement message component theme-v2 [#94](#94) ([7d3df00](7d3df00)) * Implement theme-v2 in channel and channel header [#91](#91) ([8015d68](8015d68)) * Implement typing indicator theme-v2 [#95](#95) ([89c0d2d](89c0d2d)) * Implement unread badge for theme v1 and v2 ([6b317e2](6b317e2)) * import react-image-gallery styles to v2 stylesheet ([ef8649e](ef8649e)) * Increase hit area of message action buttons [#120](#120) ([003e77e](003e77e)) * make loading indicator container float above the MessageList ([#116](#116)) ([71a565d](71a565d)) * Message input - theme-v2 [#93](#93) ([d7b16c2](d7b16c2)) * Message input theme-v2 missing features [#93](#93) ([2265f5b](2265f5b)) * Message reactions - theme-v2 [#96](#96) ([54c3684](54c3684)) * Modal component theme-v2 [#97](#97) ([8f6c4d2](8f6c4d2)) * modal gallery inner pannel in stream-chat-react should be transparent ([49947c4](49947c4)) * Notification component [#98](#98) ([7c47e20](7c47e20)) * Remove incorrect logical property polyfill ([a602764](a602764)) * reset button element styles for React SDK purposes ([77791d6](77791d6)) * styling for moderation failure action buttons ([c4f2830](c4f2830)) * Theme v2 build process, channel list example ([f7f7f65](f7f7f65)) * Theme-v2 implemented ([20c26ae](20c26ae)) * Tooltip component - theme-v2 [#111](#111) ([77ecec6](77ecec6)) ### BREAKING CHANGES * Some changes were introduced to theme-v1 so you might have to update your custom CSS code
|
🎉 This PR is included in version 3.0.0-theming2.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
github-actions bot
pushed a commit
that referenced
this pull request
Sep 9, 2022
# [3.0.0](v2.11.0...v3.0.0) (2022-09-09) ### Bug Fixes * add comment to help calculate spacing in pixels ([7bc42e8](7bc42e8)) * Add fixed image height for scraped URL images to avoid scrolling issues ([34d895a](34d895a)) * add missing close modal button styles ([3e478ce](3e478ce)) * add text-overflow to suggestion list items ([#173](#173)) ([c072558](c072558)) * adjust the position of the popped out search results for v1 ([beeb8aa](beeb8aa)) * align message action buttons to the top of the message ([676153f](676153f)) * Angular SDK edit message modal ([0acf310](0acf310)) * Audio attachment progress track overflow ([4fd3288](4fd3288)) * **Avatar:** add parent size inheritance ([7b78d97](7b78d97)) * Browser testing bugs ([546e2d1](546e2d1)) * Card attachments aspect ration is respected ([5050be4](5050be4)) * Channel search responsive layout ([2de797b](2de797b)) * Consolidate React and Angular notification styles ([d801a3b](d801a3b)) * Context menu and tooltip position in Angular (theme-v1 and v2) ([e5b2ad0](e5b2ad0)) * Design enhancements ([6a40cd2](6a40cd2)) * Design fixes and enhancements ([4fc7d25](4fc7d25)) * do not set max height on giphy attachment ([2bdc768](2bdc768)) * do not wrap str-chat__channel-preview-unread-badge class withstr-chat__channel-preview-messenger--name class ([0f01efc](0f01efc)) * Docusuarus CI error ([c6a091e](c6a091e)) * Emoji display in Angular ([bb276de](bb276de)) * **EmojiPicker:** adjust z-index ([6225130](6225130)) * File attachment padding in quote replies ([8c6fa9c](8c6fa9c)) * Image gallery too narrow on Safari ([766c726](766c726)) * incorrect rule value ([2cef373](2cef373)) * Long quoted message in message input ([42c865e](42c865e)) * make disappear modal container background only for image gallery ([97f76dd](97f76dd)) * make search bar button of fixed width & height ([f896624](f896624)) * make sure modal inner container does not cover overlay ([2a1fe1d](2a1fe1d)) * maximize the size of an image in an react image modal gallery ([f7b1e0d](f7b1e0d)) * Message actions are clickable when not visible ([81a5eab](81a5eab)) * Message extra margin on hover/click ([da7b8ef](da7b8ef)) * Message options width for thread messages ([ceded83](ceded83)) * **Message:** fix word breaking on line breakes ([77e11b8](77e11b8)) * Migrate to ngx-popperjs ([3c8a143](3c8a143)) * More sensible aspect ratios used for attachment images ([1bbb1c2](1bbb1c2)) * Put back removed message input stylings for Angular ([3ebb9c1](3ebb9c1)) * quoted message cursor ([b13b653](b13b653)) * Quoted message width ([f848a4b](f848a4b)) * React file attachment in theme-v1 ([4f06a26](4f06a26)) * reduce separation between the messages in virtualized message list ([db35dce](db35dce)) * reduce the reactions top margin ([48fe120](48fe120)) * remove .mobile-press stylesheet and show message actions on hover regardless of the screen size ([#138](#138)) ([50697b8](50697b8)) * remove duplicate rule ([bb867d2](bb867d2)) * Remove flex-gap polyfill ([f240d3c](f240d3c)) * remove margins for virtual message list messages ([84b5331](84b5331)) * remove svg from action icon selector to match React SDK markup ([6775698](6775698)) * remove unnecessary Tooltip styling ([#165](#165)) ([f391c48](f391c48)) * render image with react-image-gallery modal without constraining its size ([c70e25c](c70e25c)) * reverse the order of own message action buttons ([bb6fd5a](bb6fd5a)) * revert attachment card image cursor to default ([a42e79d](a42e79d)) * selector using non-existent class str-chat__message--own ([d3124be](d3124be)) * show options when hovering the entire message ([a5d7367](a5d7367)) * Source code links inside documentation ([2679b60](2679b60)) * SVG padding ([b1705c7](b1705c7)) * Theming2 touchups ([#155](#155)) ([c3f81e1](c3f81e1)) * Thread layout - message input position ([be2f788](be2f788)) * **Tooltip:** fix positioning ([1dc3ec0](1dc3ec0)) * Turn off pointer events inside quoted messages ([38852c5](38852c5)) * **TypingIndicator:** add React SDK styling ([9cf210d](9cf210d)) * Unread badge ([eb8ddc8](eb8ddc8)) * update dropzone container styling according to the design specification ([bf7b027](bf7b027)) * Update height for scraped images ([2ab6c07](2ab6c07)) * Use background instead of background-color ([b3bc122](b3bc122)) * use flex-end instead of end ([2711492](2711492)) * use max-height to specify card image height ([6bf23d9](6bf23d9)) * User mentions in theme-v1 ([2761fae](2761fae)) * Virtual message list selector ([acb69ba](acb69ba)) * Word break inside the message component ([3ff1d4b](3ff1d4b)) ### Features * add audio widget and card caption styles ([d8d364c](d8d364c)) * add channel search results header styles theme v2 ([5bd49cf](5bd49cf)) * add ChannelSearch styles for theme v2 ([983d306](983d306)) * Add CSS polyfills [#85](#85) ([f4bb14c](f4bb14c)) * add date separator styles to v2 ([c7fe47f](c7fe47f)) * add empty channel search results indicator styles theme v2 ([5dabd37](5dabd37)) * Add max-height/height and max-width to image and file attachments ([18ff428](18ff428)) * add stream-chat-react specific styles for MessageReactions ([b5088b4](b5088b4)) * add styling for jumped-to highlighted message ([0d1435f](0d1435f)) * Add SVG background to gallery images ([be75a04](be75a04)) * add theming v2 changes for channel list and preview related to React SDK ([#131](#131)) ([bc3017c](bc3017c)), closes [#81](#81) [#103](#103) [#112](#112) [#113](#113) [#116](#116) * addapt theming v2 channel list and preview to stream-chat-react SDK ([#102](#102)) ([ee843da](ee843da)), closes [#103](#103) * added dropzone container styling ([d41942c](d41942c)) * apply image gallery styling to card images in React SDK only ([16550a8](16550a8)) * auto-generate theme documentation ([31ab1eb](31ab1eb)) * **Autocomplete:** add EmojiItem styling ([84f1b99](84f1b99)) * change card caption to card content source link ([055899d](055899d)) * Change cropping for scraped link attachments ([db42a42](db42a42)) * Change video layout inside Angular SDK to 16:9 ([8871de2](8871de2)) * Channel list and preview [#89](#89) ([42f6eec](42f6eec)) * Create theme variables for text styles ([b5f0dfb](b5f0dfb)) * Empty channel list for theme-v2 (theme-v1 updated) ([ac8a5ed](ac8a5ed)) * Finalize generated documents format, add missing variable comments ([d429c77](d429c77)) * Fixed height for video attachments ([9551f9d](9551f9d)) * Implement message component theme-v2 [#94](#94) ([7d3df00](7d3df00)) * Implement theme-v2 in channel and channel header [#91](#91) ([8015d68](8015d68)) * Implement typing indicator theme-v2 [#95](#95) ([89c0d2d](89c0d2d)) * Implement unread badge for theme v1 and v2 ([6b317e2](6b317e2)) * import react-image-gallery styles to v2 stylesheet ([ef8649e](ef8649e)) * Increase GIF height, make gallery fixed height ([db893ff](db893ff)) * Increase hit area of message action buttons [#120](#120) ([003e77e](003e77e)) * Mention styles added ([0ef25c1](0ef25c1)) * Message input - theme-v2 [#93](#93) ([d7b16c2](d7b16c2)) * Message input theme-v2 missing features [#93](#93) ([2265f5b](2265f5b)) * Message reactions - theme-v2 [#96](#96) ([54c3684](54c3684)) * Modal component theme-v2 [#97](#97) ([8f6c4d2](8f6c4d2)) * modal gallery inner pannel in stream-chat-react should be transparent ([49947c4](49947c4)) * Notification component [#98](#98) ([7c47e20](7c47e20)) * **ProgressBar:** adjust sizing ([7a6b997](7a6b997)) * Quoted message width changes ([71d3405](71d3405)) * Remove incorrect logical property polyfill ([a602764](a602764)) * Rename theme variables to global variables, and separate them into theme and layout groups ([4076645](4076645)) * rename VirtualMessageList to Virtualized.., add message list spacing to virtualized message list ([ad53ce3](ad53ce3)) * reset button element styles for React SDK purposes ([77791d6](77791d6)) * shrink thread message list based on its content ([d6099f5](d6099f5)) * SVG image background ([e7ddd24](e7ddd24)) * Theme v2 build process, channel list example ([f7f7f65](f7f7f65)) * Theme-v2 implemented ([20c26ae](20c26ae)) * Tooltip component - theme-v2 [#111](#111) ([77ecec6](77ecec6)) * Turn off static video size for Angular ([6049aae](6049aae)) * Unify component layout names and include them in the documentation ([d69331f](d69331f)) * Update channel preview name mixin ([e64897a](e64897a)) * Use cover object fit for audio attachments ([c03ad20](c03ad20)) * Use font variables inside channel search ([06de378](06de378)) * Use font variables inside emoji autocomplete ([00cc639](00cc639)) * use zoom-in cursor on image card in React SDK only ([0602d5b](0602d5b)) ### BREAKING CHANGES * Some changes were introduced to theme-v1 so you might have to update your custom CSS code
|
🎉 This PR is included in version 3.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.
🎯 Goal
Remove
mobile-pressstylesheet and show message actions on hover regardless of the device screen size.🛠 Implementation details
Historically,
mobile-pressclass was appended programmatically whenever a user tapped on a message in the message list. The goal of it was to make message actions visible.After an internal discussion, we concluded that this isn't optimal and introduces additional complexity. We decided to remove this behavior and rely on CSS
:focus-withinpseudo-selector which is already in place within the SDKs and handles the desired goal quite well.This change could be potentially breaking for some customers who might have written their own stylesheets/selectors based on the existence of
.mobile-press. Our recommendation is to rewrite those stylesheets/selectors with:focusor:focus-withinpseudo-selectors on mind.Related PRs: