Browse emojis via tabs

Problem

It is not easy nor intuitive to quickly browse through emojis by category.

Proposal

When selecting emoji in anywhere within GitLab, view them in tabs according to the categories they are already grouped by:

Tab Icon
Frequently used clock
Smileys & People grinning
Animals & Nature nature.svg
Food & drink food.svg
Travel & places car.svg
Activity dumbbell.svg
Objects object.svg
Symbols heart.svg
Flags flag.svg
Custom tanuki.svg

Per &1820 (comment 209379241), these are already in gitlab-svgs. Disable Custom until we launch the ability to select a custom emoji from the list (#23799 (closed)).

Behavior

  • When you scroll, the tab selection updates to reflect the scroll position.
  • When you select a tab, the scroll position jumps accordingly.
  • Section headers are sticky as in the mockup.

Images & Mockups:

Artboard_3

scrolling

Steps

  • Complete the emoji refactoring work first
  • Create separate icons for different categories (we don't want the color versions). If we can do this using existing icons and styling svgs, great.
  • Consider using our Tabs component

Implementation Plan

  • FE/BE to sort it out
Edited by Gabe Weaver