fix: improve focus and hover behaviour of reactions menu #15227
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
increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight
…ageActions/MessageReactions/MessageReactions.styles.ts Co-authored-by: Przemysław Jóźwik <[email protected]>
remove unused code close message action menu on tab of last interactive element of a message prevent emoji picker up/down arrow key to naviage between messages in background after emoji selection/esc key then retain the focus on the emoji button
…wire-webapp into improvement/reactions-design-review
tlebon
reviewed
May 23, 2023
...MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactionsList.tsx
Outdated
Show resolved
Hide resolved
przemvs
reviewed
May 23, 2023
...nts/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.tsx
Show resolved
Hide resolved
tlebon
approved these changes
May 23, 2023
arjita-mitra
added a commit
that referenced
this pull request
Aug 21, 2023
* feat: create floating menu for message actions(SQSERVICES-1910) * feat: manage message actions menu focus, hover, active states(SQSERVICES-1910) - toggle message actions menu active state - refactor message actions component and group reaction butons togehter - add dark/light theme support - css for action menu * test: message action menu tests * feat: emoji picker integration(SQSERVICES-1734) * better positioning of emoji picker * feat: handle outside area clicked for reaction/action menu items overlay css test case updated code cleanup context menu overlay and reset states(SQSERVICES-1734) * feat: configure feature flag to enable/disable reaction * feat: add ability to react on messages(SQSERVICES-1734) (#14839) * feat: add ability to react on messages * feat: create util for transformReactionObj replace thums up and heart emoji with image image css create list reactions component * feat: Add emoji title utils (#14827) * feat: convert emoji to unicode * feat: integrate react functioanlity with reactions button make reactions button reactions buttons css create reaction emoji image component * test: unit test message reactions * refactor: move message reactions related components under message reactions directory * refactor: improve transformReactionObj function call transformReactionObj from reactions list * refactor: update test cases * refactor: remove test case * refactor: remove unused code fix: review comment * chore: update yarn lock * chore: update yarn lock * feat: Add ability to see messsage reactions (SQSERVICES-1876) (#14825) * feat: Add ability to see messsage reactions (SQSERVICES-1876) * getEmojiTitleFromEmojiUnicode * feat: create util for transformReactionObj replace thums up and heart emoji with image image css create list reactions component * feat: Add emoji title utils (#14827) * feat: convert emoji to unicode * styles * use first name * use reduce * use map * use map for emoji dictionary * remove extra ? * remove duplicated code * Update src/script/util/EmojiUtil.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * Update src/script/util/EmojiUtil.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * correct rendering * yarn lock changes * migrate styles * dark mode handle * change styles file name --------- Co-authored-by: arjita-mitra <[email protected]> Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: new and older client should be in sync when a user reacts on a message * test: add unit testing for reaction add/remove from a message * Update src/script/components/MessagesList/Message/MessageWrapper.tsx Co-authored-by: Thomas Belin <[email protected]> --------- Co-authored-by: Amir Ghezelbash <[email protected]> Co-authored-by: Przemysław Jóźwik <[email protected]> Co-authored-by: Thomas Belin <[email protected]> * feat: Add tooltip to reaction buttons (#14933) * feat: Add tooltip to reaction buttons * use isEnterKey * onTooltipReactionCountClick * onShowReactionDetails * onClickReactionDetails * remove MessageFooterLike * feat: add new design for message timestamp, read receipt and integrate floating action menu inside image details modal (#14917) * feat: refactor updateUserReactions method * test: updateUserReactions method tests * feat: read receipt and timestamp new design reaction buttons style changes * feat: customise dark and light theme colour of emoji picker update placeholder remove feature flag * fix: simplify code * adjust position of message action menu to ensure responsivness * feat: integrate message actions menu with detailsviewmodal * implement new design of read receipts * adjust style of 1 on 1 read receipts * refactor reaction list padding to button margin to prevent extra line padding * remove onClickReceive and replace by onClickDetails for contect menu action * remove read status from ping message * fix: hover, focus background colour of emoji picker * fix: use css specificity to avoid important rule * feat: integrate message floating action menu inside image details view modal * test: update test cases * fix: all typescript error fix and remove unused code * feat: trap focus inside image modal * feat: don't focus on reaction list buttons unless the message is focused * feat: close emoji picker on emoji selection * fix: message timestamp should appear after all the icons, ex: guest * fix: place comma inline * fix: move comment into correct place * fix: rename method, make image detail modal id const * fix: code review comments, update aria label --------- Co-authored-by: V-Gira <[email protected]> * runfix: Reaction views menu on 1 to 1 * runfix: Adjust margin of reaction tooltip * chore: remove img cdn * chore: merge commit with dev * fix: test errors * fix: lock file update * fix: add skiplibcheck temporarily * test: add withTheme * fix: test cases * feat: message reactions design review feedback changes(SQSERVICES-2057, SQSERVICES-2058) (#15200) * fix: reaction improvements increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight * feat: self deleting msg reactions(SQSERVICES-2057) * Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: code review changes * fix: use HTMLButtonElement to reduce props passed * fix: add missing onKeyPress attribute --------- Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: improve focus and hover behaviour of reactions menu (#15227) * fix: reaction improvements increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight * feat: self deleting msg reactions(SQSERVICES-2057) * Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: code review changes * fix: use HTMLButtonElement to reduce props passed * fix: add missing onKeyPress attribute * feat: improve keyboard accessibility remove unused code close message action menu on tab of last interactive element of a message prevent emoji picker up/down arrow key to naviage between messages in background after emoji selection/esc key then retain the focus on the emoji button * fix: improve comments * fix: remove array.from --------- Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: use emoji image inside reaction details right panel, some style updates, add reaction count (#15228) * fix: reaction improvements increase reaction badge font size, reaction count colour update based on active/inactive, no system message background highlight * feat: self deleting msg reactions(SQSERVICES-2057) * Update src/script/components/MessagesList/Message/ContentMessage/MessageActions/MessageReactions/MessageReactions.styles.ts Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: code review changes * fix: use HTMLButtonElement to reduce props passed * fix: add missing onKeyPress attribute * feat: improve keyboard accessibility remove unused code close message action menu on tab of last interactive element of a message prevent emoji picker up/down arrow key to naviage between messages in background after emoji selection/esc key then retain the focus on the emoji button * fix: improve comments * fix: remove array.from * fix: replace span with emoji image for message reaction details panel add reaction count style change * fix: update style name --------- Co-authored-by: Przemysław Jóźwik <[email protected]> * fix: reaction QA feedback(WPB-1199) (#15321) * fix: reaction QA feedback(WPB-1199) - fix reaction action menu hover/focus state issues - line break for reactions to avoid overflow * fix: adjust action menu position on font size change wrap emoji pills to multi line horizontal scroll shouldn't appear for long messages either * fix: remove focus from reaction tooltip * fix: add test id * fix: [Web] Reactions: Message actions still accessible when I got removed from the conversation * fix: context menu escape key press, multiple tooltip displayed together, stop propogating reaction action menu events * fix: refactor code * fix: remove unused event * fix: remove extra div, move event handlers up to make tootlip links clickable * chore: bump ui-kit * fix: reset active menu button when no menu is open and clicked on wrapper (#15346) * chore: cleanup packages * fix: remove reply message option from context menu (#15478) * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. (#15479) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * feat: emoji pills should become active/inactive when user selects/unselect an emoji[WPB-3291] (#15503) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions * fix: make all emoji pills active that user ever reacted to[WPB-3291] (#15509) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions * fix: make all emoji pills active that user ever reacted * fix: spread the prop * feat: emoji pills should be sorted by number of reactions in desc order (#15530) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions * fix: make all emoji pills active that user ever reacted * fix: spread the prop * feat: sort emoji pills by reaction user count(WPB-3292) * fix: add function description * feat: retain user selected skin colour after user reacts with the selected skin colour (#15531) * fix: remove reply message option from context menu * fix: Capitalise the first letter of the first word in the emoji name displayed on the right-side panel in the message details. * fix: reuse exisitng methods * fix: set emoji pill active/inactive when user select/unselect a reaction * fix: code review suggestions * fix: make all emoji pills active that user ever reacted * fix: spread the prop * feat: sort emoji pills by reaction user count(WPB-3292) * fix: add function description * fix: retain user selected skin colour(WPB-3564) * fix: add new line --------- Co-authored-by: Amir Ghezelbash <[email protected]> Co-authored-by: Przemysław Jóźwik <[email protected]> Co-authored-by: Thomas Belin <[email protected]> Co-authored-by: V-Gira <[email protected]> Co-authored-by: Timothy Le Bon <[email protected]>
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.
PR Submission Checklist for internal contributors
The PR Title
The PR Description
References