@atlaskit/emoji 64.0.1 → 64.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/emoji
 
+## 64.1.0
+
+### Minor Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - [ux] Task: https://a11y-internal.atlassian.net/browse/AK-97, Emoji picker: made emojis list keyboard accessible, moved tone selector and place it right after search input, placed upload/remove emoji menus above the emoji list.
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Remove @atlaskit/tooltip from critical path of rendering emoji
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Upgrade js-search to v2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 64.0.1
 
 ### Patch Changes

package/dist/cjs/components/common/DeleteButton.js

@@ -33,7 +33,7 @@ var DeleteButton = function DeleteButton(props) {
   }, /*#__PURE__*/_react.default.createElement(_customThemeButton.default, {
     iconBefore: /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
       label: _constants.deleteEmojiLabel,
-      primaryColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
+      primaryColor: (0, _tokens.token)('color.text.subtle', _colors.N500),
       size: "small"
     }),
     onClick: props.onClick,

package/dist/cjs/components/common/Emoji.js

@@ -13,8 +13,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -54,6 +52,21 @@ var handleMouseDown = function handleMouseDown(props, event) {
   }
 };
 
+var handleKeyPress = function handleKeyPress(props, event) {
+  // Clicked emoji delete button
+  if (event.target instanceof Element && event.target.getAttribute('aria-label') === _constants.deleteEmojiLabel) {
+    return;
+  }
+
+  var emoji = props.emoji,
+      onSelected = props.onSelected;
+  event.preventDefault();
+
+  if (onSelected && (event.key === 'Enter' || event.key === ' ')) {
+    onSelected((0, _typeHelpers.toEmojiId)(emoji), emoji, event);
+  }
+};
+
 var handleMouseMove = function handleMouseMove(props, event) {
   var emoji = props.emoji,
       onMouseMove = props.onMouseMove;
@@ -96,7 +109,8 @@ var renderAsSprite = function renderAsSprite(props) {
       selected = props.selected,
       selectOnHover = props.selectOnHover,
       className = props.className,
-      showTooltip = props.showTooltip;
+      showTooltip = props.showTooltip,
+      shouldBeInteractive = props.shouldBeInteractive;
   var representation = emoji.representation;
   var sprite = representation.sprite;
   var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.emojiContainer, true), (0, _defineProperty2.default)(_classes, styles.emojiNode, true), (0, _defineProperty2.default)(_classes, styles.selected, selected), (0, _defineProperty2.default)(_classes, styles.selectOnHover, selectOnHover), _classes);
@@ -129,18 +143,21 @@ var renderAsSprite = function renderAsSprite(props) {
   }, "\xA0");
 
   return /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: (0, _classnames.default)(classes),
+    onKeyPress: function onKeyPress(event) {
+      return handleKeyPress(props, event);
+    },
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
     onMouseMove: function onMouseMove(event) {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, emojiNode);
 }; // Keep as pure functional component, see renderAsSprite.
 
 
@@ -153,7 +170,8 @@ var renderAsImage = function renderAsImage(props) {
       selectOnHover = props.selectOnHover,
       className = props.className,
       showTooltip = props.showTooltip,
-      showDelete = props.showDelete;
+      showDelete = props.showDelete,
+      shouldBeInteractive = props.shouldBeInteractive;
   var classes = (_classes2 = {}, (0, _defineProperty2.default)(_classes2, styles.emoji, true), (0, _defineProperty2.default)(_classes2, styles.emojiNode, true), (0, _defineProperty2.default)(_classes2, styles.selected, selected), (0, _defineProperty2.default)(_classes2, styles.selectOnHover, selectOnHover), (0, _defineProperty2.default)(_classes2, styles.emojiImage, true), _classes2);
 
   if (className) {
@@ -221,18 +239,21 @@ var renderAsImage = function renderAsImage(props) {
   }, sizing));
 
   return /*#__PURE__*/_react.default.createElement("span", {
+    tabIndex: shouldBeInteractive ? 0 : undefined,
+    role: shouldBeInteractive ? 'button' : undefined,
     className: (0, _classnames.default)(classes),
+    onKeyPress: function onKeyPress(event) {
+      return handleKeyPress(props, event);
+    },
     onMouseDown: function onMouseDown(event) {
       handleMouseDown(props, event);
     },
     onMouseMove: function onMouseMove(event) {
       handleMouseMove(props, event);
     },
-    "aria-label": emoji.shortName
-  }, deleteButton, showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: emoji.shortName
-  }, emojiNode) : emojiNode);
+    "aria-label": emoji.shortName,
+    title: showTooltip ? emoji.shortName : ''
+  }, deleteButton, emojiNode);
 };
 
 var Emoji = function Emoji(props) {

package/dist/cjs/components/common/EmojiActions.js

@@ -0,0 +1,233 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EmojiActions = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactIntlNext = require("react-intl-next");
+
+var _EmojiDeletePreview = _interopRequireDefault(require("../common/EmojiDeletePreview"));
+
+var _EmojiUploadPicker = _interopRequireDefault(require("../common/EmojiUploadPicker"));
+
+var styles = _interopRequireWildcard(require("./styles"));
+
+var footerStyles = _interopRequireWildcard(require("../picker/styles"));
+
+var _EmojiPickerListSearch = _interopRequireDefault(require("../picker/EmojiPickerListSearch"));
+
+var _ToneSelector = _interopRequireDefault(require("./ToneSelector"));
+
+var _EmojiButton = _interopRequireDefault(require("./EmojiButton"));
+
+var _i18n = require("../i18n");
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/add"));
+
+var _setSkinToneAriaLabelText = require("./setSkinToneAriaLabelText");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var EmojiActions = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(EmojiActions, _PureComponent);
+
+  var _super = _createSuper(EmojiActions);
+
+  function EmojiActions() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, EmojiActions);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      selectingTone: false
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneButtonClick", function () {
+      _this.setState({
+        selectingTone: !_this.state.selectingTone
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onToneSelected", function (toneValue) {
+      _this.setState({
+        selectingTone: false
+      });
+
+      if (_this.props.onToneSelected) {
+        _this.props.onToneSelected(toneValue);
+      }
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseLeave", function () {
+      var selectingTone = _this.state.selectingTone;
+      var onToneSelectorCancelled = _this.props.onToneSelectorCancelled;
+
+      if (selectingTone && onToneSelectorCancelled) {
+        onToneSelectorCancelled();
+      }
+
+      _this.setState({
+        selectingTone: false
+      });
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(EmojiActions, [{
+    key: "renderTones",
+    value: function renderTones() {
+      var _this$props = this.props,
+          toneEmoji = _this$props.toneEmoji,
+          selectedTone = _this$props.selectedTone,
+          intl = _this$props.intl;
+      var formatMessage = intl.formatMessage;
+
+      if (!toneEmoji) {
+        return null;
+      }
+
+      var previewEmoji = toneEmoji;
+
+      if (selectedTone && previewEmoji.skinVariations) {
+        previewEmoji = previewEmoji.skinVariations[(selectedTone || 1) - 1];
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.emojiToneSelectorContainer
+      }, this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_ToneSelector.default, {
+        emoji: toneEmoji,
+        onToneSelected: this.onToneSelected,
+        previewEmojiId: previewEmoji.id
+      }), /*#__PURE__*/_react.default.createElement(_EmojiButton.default, {
+        ariaExpanded: this.state.selectingTone,
+        emoji: previewEmoji,
+        selectOnHover: true,
+        onSelected: this.onToneButtonClick,
+        ariaLabelText: formatMessage(_i18n.messages.emojiSelectSkinToneButtonAriaLabelText, {
+          selectedTone: "".concat((0, _setSkinToneAriaLabelText.setSkinToneAriaLabelText)(previewEmoji.name), " selected")
+        })
+      }));
+    } // note: emoji-picker-add-emoji className is used by pollinator synthetic checks
+
+  }, {
+    key: "renderAddOwnEmoji",
+    value: function renderAddOwnEmoji() {
+      var _this$props2 = this.props,
+          onOpenUpload = _this$props2.onOpenUpload,
+          uploadEnabled = _this$props2.uploadEnabled,
+          intl = _this$props2.intl;
+      var formatMessage = intl.formatMessage;
+
+      if (!uploadEnabled) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.AddCustomEmoji
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.addCustomEmojiLabel, function (label) {
+        return /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+          onClick: onOpenUpload,
+          iconBefore: /*#__PURE__*/_react.default.createElement(_add.default, {
+            label: formatMessage(_i18n.messages.addCustomEmojiLabel),
+            size: "small"
+          }),
+          appearance: "subtle",
+          className: styles.addCustomEmojiButton + ' emoji-picker-add-emoji'
+        }, label);
+      }));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          initialUploadName = _this$props3.initialUploadName,
+          onUploadCancelled = _this$props3.onUploadCancelled,
+          onUploadEmoji = _this$props3.onUploadEmoji,
+          onCloseDelete = _this$props3.onCloseDelete,
+          onDeleteEmoji = _this$props3.onDeleteEmoji,
+          uploadErrorMessage = _this$props3.uploadErrorMessage,
+          uploading = _this$props3.uploading,
+          onFileChooserClicked = _this$props3.onFileChooserClicked,
+          emojiToDelete = _this$props3.emojiToDelete,
+          onChange = _this$props3.onChange,
+          query = _this$props3.query;
+      var previewFooterClassnames = (0, _classnames.default)([footerStyles.emojiPickerFooter, footerStyles.emojiActionsContainerWithBottomShadow]);
+
+      if (uploading) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/_react.default.createElement(_EmojiUploadPicker.default, {
+          onUploadCancelled: onUploadCancelled,
+          onUploadEmoji: onUploadEmoji,
+          onFileChooserClicked: onFileChooserClicked,
+          errorMessage: uploadErrorMessage,
+          initialUploadName: initialUploadName
+        }));
+      }
+
+      if (emojiToDelete) {
+        return /*#__PURE__*/_react.default.createElement("div", {
+          className: previewFooterClassnames
+        }, /*#__PURE__*/_react.default.createElement(_EmojiDeletePreview.default, {
+          emoji: emojiToDelete,
+          onDeleteEmoji: onDeleteEmoji,
+          onCloseDelete: onCloseDelete
+        }));
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: previewFooterClassnames,
+        onMouseLeave: this.onMouseLeave
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          display: 'flex',
+          justifyContent: 'flex-end',
+          alignItems: 'center'
+        }
+      }, !this.state.selectingTone && /*#__PURE__*/_react.default.createElement(_EmojiPickerListSearch.default, {
+        onChange: onChange,
+        query: query
+      }), this.renderTones()), this.renderAddOwnEmoji());
+    }
+  }]);
+  return EmojiActions;
+}(_react.PureComponent);
+
+exports.EmojiActions = EmojiActions;
+
+var _default = (0, _reactIntlNext.injectIntl)(EmojiActions);
+
+exports.default = _default;

package/dist/cjs/components/common/EmojiPlaceholder.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _styles = require("./styles");
 
 var _constants = require("../../util/constants");
@@ -50,17 +48,12 @@ var EmojiPlaceholder = function EmojiPlaceholder(props) {
     height: "".concat(height, "px")
   };
   var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, _styles.placeholder, true), (0, _defineProperty2.default)(_classes, _styles.placeholderContainer, true), _classes);
-
-  var placeholderNode = /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/_react.default.createElement("span", {
     "aria-label": shortName,
     className: (0, _classnames.default)(classes),
-    style: style
+    style: style,
+    title: showTooltip ? shortName : ''
   });
-
-  return showTooltip ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
-    tag: "span",
-    content: shortName
-  }, placeholderNode) : placeholderNode;
 };
 
 var _default = EmojiPlaceholder;

package/dist/cjs/components/common/EmojiPreview.js

@@ -138,7 +138,7 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderEmojiPreview",
     value: function renderEmojiPreview() {
-      var _classNames, _classNames2;
+      var _classNames2;
 
       var selectingTone = this.state.selectingTone;
       var _this$props2 = this.props,
@@ -149,7 +149,7 @@ var EmojiPreview = /*#__PURE__*/function (_PureComponent) {
         return null;
       }
 
-      var previewClasses = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.preview, true), (0, _defineProperty2.default)(_classNames, styles.withToneSelector, !!this.props.toneEmoji), _classNames));
+      var previewClasses = (0, _classnames.default)((0, _defineProperty2.default)({}, styles.preview, true));
       var previewTextClasses = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, styles.previewText, true), (0, _defineProperty2.default)(_classNames2, styles.previewSingleLine, !emoji.name), _classNames2));
       return /*#__PURE__*/_react.default.createElement("div", {
         className: previewClasses

package/dist/cjs/components/common/styles.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withToneSelector = exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.shortName = exports.selected = exports.selectOnHover = exports.previewText = exports.previewSingleLine = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.name = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiSprite = exports.emojiScrollable = exports.emojiPreviewSection = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiNode = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emoji = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.AddCustomEmoji = void 0;
+exports.uploadRetryButton = exports.uploadPreviewText = exports.uploadPreviewFooter = exports.uploadPreview = exports.uploadEmojiButton = exports.uploadChooseFileRow = exports.uploadChooseFileMessage = exports.uploadChooseFileEmojiName = exports.uploadChooseFileBrowse = exports.uploadAddRow = exports.toneSelectorContainer = exports.submitDelete = exports.shortName = exports.selected = exports.selectOnHover = exports.previewText = exports.previewSingleLine = exports.previewImg = exports.previewButtonGroup = exports.preview = exports.placeholderEmoji = exports.placeholderContainer = exports.placeholder = exports.name = exports.hiddenToneButton = exports.emojiUploadBottom = exports.emojiUpload = exports.emojiToneSelectorContainer = exports.emojiSprite = exports.emojiScrollable = exports.emojiPreviewSection = exports.emojiPreviewErrorMessage = exports.emojiPreview = exports.emojiNode = exports.emojiImage = exports.emojiDeleteErrorMessage = exports.emojiContainer = exports.emojiChooseFileErrorMessage = exports.emojiButton = exports.emoji = exports.deleteText = exports.deletePreview = exports.deleteFooter = exports.deleteButton = exports.cancelButton = exports.buttons = exports.buttonSpinner = exports.bigEmojiPreview = exports.addCustomEmojiButton = exports.AddCustomEmoji = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -150,8 +150,6 @@ var previewSingleLine = 'emoji-common-preview-single-line';
 exports.previewSingleLine = previewSingleLine;
 var toneSelectorContainer = 'emoji-common-tone-selector-container';
 exports.toneSelectorContainer = toneSelectorContainer;
-var withToneSelector = 'emoji-common-with-tone-selector';
-exports.withToneSelector = withToneSelector;
 var emojiPreviewSection = 'emoji-preview-section';
 exports.emojiPreviewSection = emojiPreviewSection;
 var emojiPreview = (0, _typestyle.style)({
@@ -204,7 +202,7 @@ var emojiPreview = (0, _typestyle.style)({
       flexShrink: 1,
       $nest: (_$nest6 = {}, (0, _defineProperty2.default)(_$nest6, ".".concat(name), {
         display: 'block',
-        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
+        color: (0, _tokens.token)('color.text', colors.N900),
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
@@ -213,7 +211,7 @@ var emojiPreview = (0, _typestyle.style)({
         })
       }), (0, _defineProperty2.default)(_$nest6, ".".concat(shortName), {
         display: 'block',
-        color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N200),
+        color: (0, _tokens.token)('color.text.subtle', colors.N200),
         fontSize: '12px',
         lineHeight: 1,
         marginBottom: '-2px',
@@ -227,30 +225,28 @@ var emojiPreview = (0, _typestyle.style)({
       $nest: (_$nest7 = {}, (0, _defineProperty2.default)(_$nest7, ".".concat(name), {
         display: 'none'
       }), (0, _defineProperty2.default)(_$nest7, ".".concat(shortName), {
-        color: (0, _tokens.token)('color.text.highEmphasis', colors.N900),
+        color: (0, _tokens.token)('color.text', colors.N900),
         fontSize: '14px'
       }), _$nest7)
     }), _$nest8)
-  }), (0, _defineProperty2.default)(_$nest9, ".".concat(buttons), {
-    flex: 1,
-    textAlign: 'right',
-    margin: '6px'
-  }), (0, _defineProperty2.default)(_$nest9, ".".concat(toneSelectorContainer), {
-    flex: 1,
-    display: 'flex',
-    justifyContent: 'flex-end',
-    margin: '6px'
-  }), (0, _defineProperty2.default)(_$nest9, ".".concat(withToneSelector, " .").concat(previewText), {
+  }), (0, _defineProperty2.default)(_$nest9, ".".concat(previewText), {
     maxWidth: '235px',
     width: '235px'
     /* IE */
 
   }), _$nest9)
+});
+exports.emojiPreview = emojiPreview;
+var emojiToneSelectorContainer = (0, _typestyle.style)({
+  flex: 1,
+  display: 'flex',
+  justifyContent: 'flex-end',
+  padding: '8px 10px 8px 0'
 }); // Scrollable
 
-exports.emojiPreview = emojiPreview;
+exports.emojiToneSelectorContainer = emojiToneSelectorContainer;
 var emojiScrollable = (0, _typestyle.style)({
-  border: "1px solid ".concat((0, _tokens.token)('color.border.neutral', '#fff')),
+  border: "1px solid ".concat((0, _tokens.token)('color.border', '#fff')),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   display: 'block',
   margin: '0',
@@ -269,7 +265,7 @@ var emojiUpload = (0, _typestyle.style)({
 });
 exports.emojiUpload = emojiUpload;
 var uploadChooseFileMessage = (0, _typestyle.style)({
-  color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
+  color: (0, _tokens.token)('color.text.subtle', colors.N300),
   fontSize: '12px',
   paddingBottom: '7px'
 });
@@ -315,7 +311,7 @@ var uploadPreview = (0, _typestyle.style)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'center',
-  background: (0, _tokens.token)('color.background.subtleNeutral.resting', colors.N20),
+  background: (0, _tokens.token)('color.background.neutral', colors.N20),
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   padding: '10px'
 });
@@ -323,7 +319,7 @@ exports.uploadPreview = uploadPreview;
 var uploadPreviewText = (0, _typestyle.style)({
   $nest: {
     h5: {
-      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
+      color: (0, _tokens.token)('color.text.subtle', colors.N300),
       paddingBottom: '4px',
       fontSize: '12px'
     },
@@ -353,7 +349,8 @@ var uploadAddRow = (0, _typestyle.style)({
 exports.uploadAddRow = uploadAddRow;
 var AddCustomEmoji = (0, _typestyle.style)({
   alignSelf: 'center',
-  marginLeft: '10px'
+  marginLeft: '10px',
+  marginBottom: '10px'
 }); // Emoji Delete preview
 
 exports.AddCustomEmoji = AddCustomEmoji;
@@ -366,15 +363,15 @@ var deletePreview = (0, _typestyle.style)({
   padding: '10px',
   display: 'flex',
   flexDirection: 'column',
-  justifyContent: 'flex-end',
-  fontSize: '12px'
+  justifyContent: 'flex-end'
 });
 exports.deletePreview = deletePreview;
 var deleteText = (0, _typestyle.style)({
   height: '64px',
+  fontSize: '12px',
   $nest: {
     ':first-child': {
-      color: (0, _tokens.token)('color.text.mediumEmphasis', colors.N300),
+      color: (0, _tokens.token)('color.text.subtle', colors.N300),
       lineHeight: '16px'
     }
   }

package/dist/cjs/components/picker/EmojiPickerComponent.js

@@ -86,12 +86,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiActive", function (_emojiId, emoji) {
       if (_this.state.selectedEmoji !== emoji) {
         _this.setState({
-          selectedEmoji: emoji,
-          showUploadButton: false
-        });
-      } else {
-        _this.setState({
-          showUploadButton: false
+          selectedEmoji: emoji
         });
       }
     });
@@ -141,16 +136,6 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileChooserClicked", function () {
       _this.fireAnalytics((0, _analytics.selectedFileEvent)());
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiPickerMouseLeave", function () {
-      _this.setState({
-        showUploadButton: true
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiPickerMouseEnter", function () {
-      _this.setState({
-        showUploadButton: false
-      });
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fireAnalytics", function (analyticsEvent) {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
@@ -380,8 +365,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
       selectedTone: !hideToneSelector ? _emojiProvider.getSelectedTone() : undefined,
       loading: true,
       uploadSupported: false,
-      uploading: false,
-      showUploadButton: true
+      uploading: false
     };
     _this.openTime = 0;
     return _this;
@@ -562,8 +546,7 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
           emojiToDelete = _this$state3.emojiToDelete,
           uploading = _this$state3.uploading,
           uploadErrorMessage = _this$state3.uploadErrorMessage,
-          uploadSupported = _this$state3.uploadSupported,
-          showUploadButton = _this$state3.showUploadButton;
+          uploadSupported = _this$state3.uploadSupported;
       var recordUsageOnSelection = (0, _RecordSelectionDefault.createRecordSelectionDefault)(emojiProvider, this.onSelectWrapper, function (analytic) {
         return _this4.fireAnalytics(analytic('picker'));
       });
@@ -586,30 +569,28 @@ var EmojiPickerComponent = /*#__PURE__*/function (_PureComponent) {
         onEmojiActive: this.onEmojiActive,
         onEmojiDelete: this.onTriggerDelete,
         onCategoryActivated: this.onCategoryActivated,
-        onMouseLeave: this.onEmojiPickerMouseLeave,
-        onMouseEnter: this.onEmojiPickerMouseEnter,
         onSearch: this.onSearch,
         query: query,
         selectedTone: selectedTone,
         loading: loading,
-        ref: "emojiPickerList"
-      }), /*#__PURE__*/_react.default.createElement(_EmojiPickerFooter.default, {
+        ref: "emojiPickerList",
         initialUploadName: query,
-        selectedEmoji: selectedEmoji,
-        selectedTone: selectedTone,
         onToneSelected: this.onToneSelected,
         onToneSelectorCancelled: this.onToneSelectorCancelled,
         toneEmoji: toneEmoji,
         uploading: uploading,
         emojiToDelete: emojiToDelete,
         uploadErrorMessage: formattedErrorMessage,
-        uploadEnabled: uploadSupported && showUploadButton && !uploading,
+        uploadEnabled: uploadSupported && !uploading,
         onUploadEmoji: this.onUploadEmoji,
         onUploadCancelled: this.onUploadCancelled,
         onDeleteEmoji: this.onDeleteEmoji,
         onCloseDelete: this.onCloseDelete,
         onFileChooserClicked: this.onFileChooserClicked,
         onOpenUpload: this.onOpenUpload
+      }), /*#__PURE__*/_react.default.createElement(_EmojiPickerFooter.default, {
+        selectedEmoji: selectedEmoji,
+        isUploading: uploading
       }));
 
       return picker;

package/dist/cjs/components/picker/EmojiPickerEmojiRow.js

@@ -69,7 +69,8 @@ var EmojiPickerEmojiRow = /*#__PURE__*/function (_PureComponent) {
           onMouseMove: onMouseMove,
           showDelete: showDelete,
           onDelete: onDelete,
-          placeholderSize: 24
+          placeholderSize: 24,
+          shouldBeInteractive: true
         }));
       }));
     }