Emoji Mart: Update to Emoji 15 #24
Conversation
| @@ -25,6 +25,6 @@ export default class PickerElement extends ShadowElement { | |||
| } | |||
| } | |||
|
|
|||
| if ('customElements' in window && !customElements.get('em-emoji-picker')) { | |||
| customElements.define('em-emoji-picker', PickerElement) | |||
| if ('customElements' in window && !customElements.get('em-emoji-picker-15')) { | |||
There was a problem hiding this comment.
This was a wonky quirk. Basically, this customElements is globally spaced, but we'll be importing the old and new version of emoji-mart while it's under FF. To avoid a react error, we can just register this under a slightly modified name.
There was a problem hiding this comment.
Will you have two entries in Figma's package.json pointing to two different shas?
There was a problem hiding this comment.
| @@ -25,6 +25,6 @@ export default class PickerElement extends ShadowElement { | |||
| } | |||
| } | |||
|
|
|||
| if ('customElements' in window && !customElements.get('em-emoji-picker')) { | |||
| customElements.define('em-emoji-picker', PickerElement) | |||
| if ('customElements' in window && !customElements.get('em-emoji-picker-15')) { | |||
There was a problem hiding this comment.
Will you have two entries in Figma's package.json pointing to two different shas?
| @@ -16,7 +16,7 @@ describe('Data', () => { | |||
|
|
|||
| test('emojis', () => { | |||
| expect(Data).toHaveProperty('emojis') | |||
| expect(Object.keys(Data.emojis).length).toBe(1849) | |||
| expect(Object.keys(Data.emojis).length).toBe(1870) | |||
There was a problem hiding this comment.
interesting I thought the new emoji count would be higher!
There was a problem hiding this comment.
Yeah, small update: https://emojipedia.org/emoji-15.0
| const MISSING_ALIAS = { | ||
| // Figma's beetle emoji renders as a ladybug, which is complicated because | ||
| // beetle was introduced as a new emoji in v13 with a different image | ||
| // For now, we continue to honor our old, now incorrect shortcode. We will | ||
| // want to revisit this when we upgrade what emoji version we support | ||
| beetle: 'ladybug', | ||
| man_in_tuxedo: 'person_in_tuxedo', | ||
| } |
There was a problem hiding this comment.
If you have the time, can you elaborate why this is safe to remove? I can't quite infer what the original issue was (and why updating emoji sets fixes it) looking at the comment getting ripped out.
There was a problem hiding this comment.
In the before times (6+ years ago), we special-cased these 2 emoji. As part of the emoji 14 upgrade, we got the product go-ahead to stop special-casing them. I think it was before the ladybug emoji was introduced. I had stripped out all of those use cases from our code except for this one (see the last subtask here: https://app.asana.com/0/1204728196943613/1205011813641107/f). I had deprioritized it, but since I was in here anyways figured I may as well remove it.
So this is a (small) change in user experience, but an intentional green-lit one.
What is this PR?
Upgrade our emoji version to 15! This is prep work to help the Figjam team do a larger Emoji upgrade. As part of their work, they will be supporting Emoji 15 in the fonts for both Figma Design and Figjam. The plan is to put this upgrade behind a Feature Flag in web/Sinatra.
Where did we get Emoji 15 data?
The emoji-mart package hasn't been updated in 2 years :'( However, a community member created a PR updating the JSON files.
emoji-mart/datamissive/emoji-mart#844npm run buildto updateindex.jswith the changes.Testing
pnpm installin theweb/directory, then confirmed I could now add:shaking_face:and a couple of other Emoji 15 emojiExpected since the fonts for figjam aren't updated to emoji 15 yet
Asana: https://app.asana.com/0/1200108292617599/1206305217276090/f