Support custom font size for Emoji Preview text

[cmunozgar]

Set a custom font size for the Emoji Preview placeholder text. By default, 21px.

[guldenmw]

Hey @cmunozgar 🙂

I left a couple of comments that I think would make this more clear.

[cmunozgar]

Hey @cmunozgar 🙂

I left a couple of comments that I think would make this more clear.

Thanks for the suggestions @guldenmw

[EtienneLem]

Thanks for the PR. I feel like it would make more sense as a CSS variable, so that it can be configured via CSS (i.e. https://missiveapp.com/open/emoji-mart/example-custom-styles.html).

Eventually, we will add CSS Shadow Parts (see example https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts) so that every part is easier to customize.

[cmunozgar]

Thanks for the PR. I feel like it would make more sense as a CSS variable, so that it can be configured via CSS (i.e. https://missiveapp.com/open/emoji-mart/example-custom-styles.html).

Eventually, we will add CSS Shadow Parts (see example https://css-tricks.com/styling-in-the-shadow-dom-with-css-shadow-parts) so that every part is easier to customize.

Thank you, @EtienneLem, for your response!

I have simplified the PR to use the CSS variable instead, following the same naming convention.

Let me know if this one makes more sense.

[EtienneLem]

Thank you @cmunozgar. I have updated it a bit:

• The em-* variables are meant to be internal; I added a few ones that will be more friendly to use.
• I added variables to control the font-size of the preview when hovering as well

It will be configurable like this:

em-emoji-picker {
  --preview-placeholder-size: 14px;
}

[cmunozgar]

Thank you @EtienneLem!

[cmunozgar]

What I realize here @EtienneLem is that we should probably use an internal variable name and check if a global variable is present or if the value should default to 21px. Otherwise, there's no way to customize the size.

[cmunozgar]

I've created this small PR to address the override of the CSS variable: #779

[EtienneLem]

Should be working in v5.5.1