Mattermost-server: Empty search state for emoji picker

[mattermod]

Emoji picker does not have any empty search results state.

Repro: type blah in search box of emoji picker.
Expected: Shows an empty search results state (See design)
Observed: Just says search results with no results or message below

Proposed Solution

• Same as the web app solution for https://mattermost.atlassian.net/browse/MM-23735
• Shows a search icon with a succinct message
• Aligns with other newly proposed empty states for search results

Note, the design file below has two versions depending on when this is implemented since there are other UI changes proposed for the Emoji Picker.

1. If it is implemented before https://mattermost.atlassian.net/browse/MM-22847
2. If it is implemented after that

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-23739

[avasconcelos114]

Will go ahead and take care of this one!

Seems like a simple one :)

[avasconcelos114]

@matthewbirtch Hi! :)

I'm working on this ticket right now and I was wondering what is the icon family of the search icon that appears in the design specs?

I'm temporarily using EvilIcons, but it doesn't seem like I'm able to set the weight of this icon to match what I see in the specs (see work-in-progress image below)

Should I just export that icon from Figma as a PNG and add it to the RN project?

[matthewbirtch]

Should I just export that icon from Figma as a PNG and add it to the RN project?

We have a ticket to revamp all the icons across the app, but that won't be implemented for a little while you. For the time being, I'll defer to @enahum how he would be prefer to have the icons implemented, but I would guess a PNG would be the way to go for now

[enahum]

a PNG is fine, but @matthewbirtch is there an icon we can use listed in https://github.com/oblador/react-native-vector-icons ?

[matthewbirtch]

a PNG is fine, but @matthewbirtch is there an icon we can use listed in https://github.com/oblador/react-native-vector-icons ?

Unfortunately, the search icon is a custom icon, but typically the material community icons are the same weight and style as the icons we've been using.

[avasconcelos114]

@matthewbirtch @enahum Thanks for looking into this!

I did try using Material icons before trying the EvilIcons set, but sadly the style of the search material icon is quite different

What I can do is try each of the icon sets provided by the https://github.com/oblador/react-native-vector-icons library, and resort to using a PNG file if none of them match the design specs in similarity