API to override favorite emojis

[spiffytech]

I'd like to display favorites based on application data from outside emoji-picker-element.

Could we get a method on Database that clears the favorites counts and replaces them with the provided data?

[spiffytech]

I thought about just asking for CSS to hide the favorites bar so I could display my own. That'd suit more use cases, but I'm not sure how I'd get the items in my custom favorites bar to line up with the emoji picker's columns.

[nolanlawson]

Interesting, so you want to manage all the favorites yourself? Not just the default favorites? How are you planning to determine the list – is it hardcoded?

Getting them to line up would be very tricky; there is code in emoji-picker-element to calculate the scrollbar width and account for that on platforms that show it (Windows, Linux).

[spiffytech]

It would be dynamic.

I'm using the picker to apply emoji as content tags. I'd like to display favorites based on the tags presently attached to the user's data, including changes made on other devices. That'd also automatically factor in changes in emoji usage over time as old content gets removed.

[nolanlawson]

I see, so would it be acceptable to you to have an API something like this?

const picker = new Picker({
  favorites: ['😅', '😺', '🪵', '🤪', '👍️', '👏', '⚽️', '🎯']
})

or:

const picker = document.querySelector('emoji-picker')
picker.favorites = ['😅', '😺', '🪵', '🤪', '👍️', '👏', '⚽️', '🎯']

Basically the API would let you pass in a list of 8 emoji that you want to show in the favorites bar. You can update it yourself based on whatever criteria you want.

I guess we could also have an HTML attribute version, but it may be awkward since it would have to be a string.

[spiffytech]

Yeah, that would take care of what I need.

I like the second code snippet; it'd be easy to have SolidJS grab me a reference to the picker element.

[zehawki]

I came here looking exactly for this, and to ask for an addition:

1. Favorites bar can be treated as a "reactions bar", so a prop with favorites=[] is perfect.
2. Allow for placement above like this:

[nolanlawson]

Placing above might look kind of weird – the grid is supposed to be aligned with the favorites bar (note in your screenshot the gap on the right to account for the scrollbar).

[zehawki]

I suggest placing the fav bar above by default, since it declutters the UI. As it stands, one would not know its a fav bar, but if its placed above, with a bottom-border to separate - then the user knows that its a special bar.

Then it can be used in multiple ways based on some prop setting:

1. a hard coded fav bar, which can be set by the dev based on his/her purpose
2. or it can become a "recently used" strip that is computed by this library
3. or it can become a "frequently used" strip that is computed by this library

the grid is supposed to be aligned with the favorites bar (note in your screenshot the gap on the right to account for the scrollbar).

Thats just a bit of flex centering...