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

Artboard_3

When scrolling:

  • Tabs change while scrolling
  • Tabs update scrolling position

Artboard

Bottom/custom section:

Artboard_2

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

Artboard

Selections:

  • Hint changes to chosen emoji + shows name and shortcut phrase(s) (can be multiple if we implement aliases)

Artboard_2

Artboard

Skintone menu/chooser:

  • Button expands horizontally when clicked
  • Hint changes to point to the menu/chooser + changes skin color

Artboard_2

Artboard

Edited Jul 06, 2018 by Dimitrie Hoekstra
Assignee Loading
Time tracking Loading