Let emoji dropdown menu support tabs and custom emoji
Problem
This issue makes it so custom emoji become discoverable and have a place in the emoji dropdown menu.
Scope
- Introduces tabs
- This issue includes a new sort order, as it introduces tabs (originally https://gitlab.com/gitlab-org/gitlab-ce/issues/21443)
- This issue may delete the functionality of not being able to upvote one's own creations if that makes things easier to implement/is easy to do: https://gitlab.com/gitlab-org/gitlab-ce/issues/43283
- Emoji previewer/enlarger similar to Slack
- Add in custom emoji tab
Design
Sections and icon usage:
Section | Icon |
---|---|
Frequently used | clock |
People | users |
Nature | nature |
Food & drink | food |
Activity | dumbbell |
Travel & places | car |
Objects | object |
Symbols | heart |
Flags | flag |
Custom | tanuki |
Note: Icons may be visually different from the mockups!
Default aware emoji menu:
- Includes handy reactions + hint display
When scrolling:
- Tabs change while scrolling
- Tabs update scrolling position
Bottom/custom section:
Search:
- Search bar is sticky positioned (doesnt scroll)
- Search bar does not interact with tabs, but will render a separate section with only the fuzzy search results visible
- Section header is
Search results
Selections:
- Hint changes to chosen emoji + shows name and shortcut phrase(s) (can be multiple if we implement aliases)
Skintone menu/chooser:
- Button expands horizontally when clicked
- Hint changes to point to the menu/chooser + changes skin color
Edited by Dimitrie Hoekstra