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







