## 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 |  | | Food & drink |  | | Travel & places |  | | Activity |  | | Objects | | | Symbols |  | | Flags |  | | Custom |  | Per https://gitlab.com/groups/gitlab-org/-/epics/1820#note_209379241, these are already in `gitlab-svgs`. Disable `Custom` until we launch the ability to select a custom emoji from the list (https://gitlab.com/gitlab-org/gitlab/issues/23799). ### 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:** <details>   </details> ### Steps - [ ] Complete the [emoji refactoring work first](https://gitlab.com/gitlab-org/gitlab/issues/23607) - [ ] 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](https://design.gitlab.com/components/tabs) ### Implementation Plan - [ ] FE/BE to sort it out