feat: implements add custom emoji button (#1)

* feat: add implements add custom emoji button * moves add emoji button out of preview component * updates README with missing and new props * replaces 50 with 49px * reverts unnecessary preview changes * removes whitespace * typo * fix: replaces added props with CustomEmojiCTA react element * removes story classname for button
goabstract · Jun 16, 2020 · 43da5a4 · 43da5a4
1 parent 64b935f
commit 43da5a4
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 1 deletion.
diff --git a/css/emoji-mart.css b/css/emoji-mart.css
@@ -31,6 +31,41 @@
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
 }
+.emoji-mart-bar.emoji-mart-skin-tones {
+  position: relative;
+  height: 49px;
+}
+
+.emoji-mart-bar.emoji-mart-skin-tones .emoji-mart-preview-skins {
+  display: flex;
+  height: 48px;
+  align-items: center;
+  position: unset;
+  transform: none;
+  margin-left: 8px;
+}
+
+.emoji-mart-skin-tones-add-emoji {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.emoji-mart-skin-tones-add-emoji-button {
+  background-color: #f4f4f4;
+  border: 1px solid #d9d9d9;
+  border-radius: 6px;
+  cursor: default;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 6px 12px;
+  transition: background-color .1s ease-in-out;
+}
+
+.emoji-mart-skin-tones-add-emoji-button:hover {
+  background-color: #eee;
+}
 
 .emoji-mart-anchors {
   display: flex;
@@ -258,6 +293,10 @@
   background-color: #fff;
 }
 
+.emoji-mart-skin-tones .emoji-mart-skin-swatches.custom {
+  padding: 0;
+}
+
 .emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch {
   width: 16px;
   padding: 0 2px;
@@ -334,7 +373,7 @@
 
 .emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom {
   width: 36px;
-  height: 38px;
+  height: 36px;
   padding: 0 2px 0 0;
 }
 

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
@@ -483,6 +483,7 @@ export default class NimblePicker extends React.PureComponent {
         notFound,
         notFoundEmoji,
         search,
+        CustomEmojiCTA
       } = this.props,
       { skin } = this.state,
       width = perLine * (emojiSize + 12) + 12 + 2 + measureScrollbar()
@@ -599,6 +600,7 @@ export default class NimblePicker extends React.PureComponent {
         {alwaysShowSkinTones &&
           !showPreview && (
             <div className="emoji-mart-bar emoji-mart-skin-tones">
+              {!!CustomEmojiCTA && <CustomEmojiCTA />}
               <div className="emoji-mart-preview-skins">
                 <SkinsEmoji
                   alwaysOpen

diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
@@ -81,6 +81,7 @@ const PickerPropTypes = {
   notFoundEmoji: PropTypes.string,
   icons: PropTypes.object,
   search: PropTypes.func,
+  CustomEmojiCTA: PropTypes.element
 }
 
 const PickerDefaultProps = {

diff --git a/stories/index.js b/stories/index.js
@@ -30,6 +30,17 @@ const CUSTOM_EMOJIS = [
   },
 ]
 
+class CustomEmojiCTA extends React.Component {
+  render () {
+    return (
+      <div className="emoji-mart-skin-tones-add-emoji">
+        <button onClick={action('added new custom emoji')}>Add Emoji</button>
+      </div>
+    );
+  }
+}
+
+
 storiesOf('Picker', module)
   .addDecorator(withKnobs)
   .add('Default', () => (
@@ -176,6 +187,24 @@ storiesOf('Picker', module)
     />
   ))
 
+  .add('Always show skin tones', () => (
+    <Picker
+      title=""
+      emoji=""
+      color="#0075e3"
+      perLine={9}
+      emojiSize={24}
+      skinEmoji={text('Skin Preview Icon', 'hand')}
+      native={boolean('Unicode', true)}
+      autoFocus={true}
+      alwaysShowSkinTones
+      showPreview={false}
+      onSelect={action('selected')}
+      custom={CUSTOM_EMOJIS}
+      CustomEmojiCTA={CustomEmojiCTA}
+    />
+  ))
+
 storiesOf('Emoji', module)
   .addDecorator(withKnobs)
   .add('Default', () => (