1.2.14 Add skin tone indication to emojis with skin tones

ealush · Aug 24, 2017 · 01db0ec · 01db0ec
1 parent bb56728
commit 01db0ec
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 25 deletions.
diff --git a/docs/iframe.html b/docs/iframe.html
@@ -16,7 +16,7 @@
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="static/preview.9636572521cda96a1196.bundle.js"></script>
+        <script src="static/preview.119eb4680620fd473286.bundle.js"></script>
       </body>
     </html>
 
diff --git a/...ic/preview.9636572521cda96a1196.bundle.js → ...ic/preview.119eb4680620fd473286.bundle.js b/...ic/preview.9636572521cda96a1196.bundle.js → ...ic/preview.119eb4680620fd473286.bundle.js
diff --git a/docs/static/preview.119eb4680620fd473286.bundle.js.map b/docs/static/preview.119eb4680620fd473286.bundle.js.map
diff --git a/docs/static/preview.9636572521cda96a1196.bundle.js.map b/docs/static/preview.9636572521cda96a1196.bundle.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emoji-picker-react",
-  "version": "1.2.13",
+  "version": "1.2.14",
   "description": "React emoji-picker component",
   "main": "./dist/index.js",
   "scripts": {

diff --git a/src/DiversityPicker/index.js b/src/DiversityPicker/index.js
@@ -5,10 +5,9 @@ import emojiAccessor from '../emoji-data/emoji_accessor';
 import { bgImage } from '../Emoji/helpers';
 import './style.scss';
 
-function DiversityPicker({ name, assetPath, emojiResolution, onEmojiClick, close }) {
-
-    const className = `diversity-picker${name ? ' shown' : ''}`,
-        emoji = emojiAccessor(emojis[name]);
+function DiversityPicker({ index, assetPath, emojiResolution, onEmojiClick, close }) {
+    const className = `diversity-picker${index ? ' shown' : ''}`,
+        emoji = emojiAccessor(emojis[index]);
 
     let diversities = null;
 
@@ -38,7 +37,7 @@ function DiversityPicker({ name, assetPath, emojiResolution, onEmojiClick, close
 }
 
 DiversityPicker.propTypes = {
-    name: PropTypes.string,
+    index: PropTypes.number,
     assetPath: PropTypes.string,
     emojiResolution: PropTypes.number,
     onEmojiClick: PropTypes.func.isRequired,

diff --git a/src/Emoji/index.js b/src/Emoji/index.js
@@ -91,12 +91,13 @@ class Emoji extends Component {
 
         unified = unifiedWithModifier(emoji, activeModifier);
 
-        const style = bgImage({ unified, assetPath, emojiResolution });
+        const style = bgImage({ unified, assetPath, emojiResolution }),
+            className = `emoji${this.hasDiversities ? ' has-diversities' : ''}`;
         style.order = emoji.order;
 
         return (
             <a href="#!"
-                className="emoji"
+                className={className}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}
                 onMouseDown={this.onMouseDown}

diff --git a/src/Emoji/style.scss b/src/Emoji/style.scss
@@ -9,9 +9,27 @@
     background-size: $emoji_size;
     background-repeat: no-repeat;
     background-position: 50% 50%;
+    overflow: hidden;
     transition: background-color .2s;
 
     &:hover {
         background-color: $hover_color;
+
+        &.has-diversities:before {
+            opacity: 1;
+        }
+    }
+
+    &.has-diversities:before {
+        content: '';
+        background-color: $md-blue-400;
+        display: block;
+        height: 5px;
+        width: 5px;
+        float: right;
+        border-radius: 50%;
+        opacity: 0;
+        transform: translateY(-4px) translateX(4px);
+        transition: opacity .2s;
     }
 }
diff --git a/src/EmojiPicker/index.js b/src/EmojiPicker/index.js
@@ -294,7 +294,7 @@ class EmojiPicker extends Component {
                     <SearchBar onChange={this.onSearch}/>
                 </div>
                 <div className={wrapperClassName}>
-                    <DiversityPicker name={diversityPicker}
+                    <DiversityPicker index={diversityPicker}
                         assetPath={assetPath}
                         emojiResolution={emojiResolution}
                         onEmojiClick={this.onEmojiClick}