Assume px value for <em-emoji> size attribute when no unit is provided [

Fix #656]
missive · Aug 10, 2022 · 41e61fd · 41e61fd
1 parent a4ed984
commit 41e61fd
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/packages/emoji-mart-website/example-emoji-component.html b/packages/emoji-mart-website/example-emoji-component.html
@@ -14,10 +14,10 @@
     <br />
     <div style="text-align: center">
       <em-emoji shortcodes=":+1::skin-tone-1:" size="2em"></em-emoji>
-      <em-emoji shortcodes=":+1::skin-tone-2:" size="2em"></em-emoji>
-      <em-emoji shortcodes=":+1::skin-tone-3:" size="2em"></em-emoji>
-      <em-emoji shortcodes=":+1::skin-tone-4:" size="2em"></em-emoji>
-      <em-emoji shortcodes=":+1::skin-tone-5:" size="2em"></em-emoji>
+      <em-emoji shortcodes=":+1::skin-tone-2:" size="45px"></em-emoji>
+      <em-emoji shortcodes=":+1::skin-tone-3:" size="60"></em-emoji>
+      <em-emoji shortcodes=":+1::skin-tone-4:" size="4em"></em-emoji>
+      <em-emoji shortcodes=":+1::skin-tone-5:" size="3em"></em-emoji>
       <em-emoji id="+1" skin="6" size="2em"></em-emoji>
     </div>
     <br />

diff --git a/packages/emoji-mart/src/components/Emoji/EmojiProps.js b/packages/emoji-mart/src/components/Emoji/EmojiProps.js
@@ -5,7 +5,17 @@ export default {
   id: '',
   native: '',
   shortcodes: '',
-  size: '',
+  size: {
+    value: '',
+    transform: (value) => {
+      // If the value is a number, then we assume it’s a pixel value.
+      if (!/\D/.test(value)) {
+        return `${value}px`
+      }
+
+      return value
+    },
+  },
 
   // Shared
   set: PickerProps.set,

diff --git a/packages/emoji-mart/src/config.js b/packages/emoji-mart/src/config.js
@@ -272,6 +272,10 @@ export function getProp(propName, props, defaultProps, element) {
     }
   }
 
+  if (defaults.transform && value) {
+    value = defaults.transform(value)
+  }
+
   if (
     value == null ||
     (defaults.choices && defaults.choices.indexOf(value) == -1)