We're updating the issue view to help you get more done.Learn more

Add an emoji picker

1. Add an icon next to the attachments icon that opens an emoji picker (see screenshot for design)

2. The emoji picker should have the following headings (see http://emojipedia.org/ for what heading each emoji fits under):

  • People

  • Nature

  • Food & Drink

  • Activity

  • Travel & Places

  • Objects

  • Symbols

  • Flags

  • Custom

Once PLT-1378/Github PR #4520 is merged, this data will be available in webapp/utils/emoji.jsx

3. It should include a search filter that filters on emoji names. Typing filters the emoji, with the first entry selected and it is possible to navigate through with the keyboard arrows.

4. It should include a header bar containing icons that act as shortcuts. When clicked on, the emoji picker view jumps to the corresponding heading

5. When hovering over an emoji, the emoji image and the name should appear on the bottom footer (see screenshot 2).

Once PLT-1378/Github PR #4520 has been merged, there will be code for an unfinished emoji picker available which can be used as a starting point. Contact @harrison on pre-release.mattermost.com if that link isn't updated once that PR is merged