@atlaskit/reactions 21.0.5 → 21.1.0

package/dist/esm/components/FlashAnimation.js

@@ -1,32 +1,32 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/** @jsx jsx */
+import { jsx, css, keyframes } from '@emotion/core';
 import { B75, B300 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
 import React from 'react';
-import { keyframes, style } from 'typestyle';
-var containerStyle = style({
+export var flashAnimationTestId = 'flash-animation';
+var containerStyle = css({
   width: '100%',
   height: '100%'
 });
 var flashTime = 700;
-var flashAnimation = keyframes({
+export var flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   },
   '75%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   },
   '100%': {
-    backgroundColor: token('color.background.brand.pressed', B75),
-    borderColor: token('color.icon.brand', B300)
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.border.selected', B300)
   }
 });
-export var flashStyle = style({
+export var flashStyle = css({
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });
 /**
@@ -34,7 +34,9 @@ export var flashStyle = style({
  */
 
 export var FlashAnimation = function FlashAnimation(props) {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cx(containerStyle, props.className, _defineProperty({}, flashStyle, props.flash))
+  return jsx("div", {
+    className: props.className,
+    css: [containerStyle, props.flash && flashStyle],
+    "data-testid": flashAnimationTestId
   }, props.children);
 };

package/dist/esm/components/Reaction.js

@@ -10,14 +10,14 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
-import { style } from 'typestyle';
 import { createAndFireSafe, createReactionClickedEvent, createReactionHoveredEvent } from '../analytics';
 import { Counter } from './Counter';
 import { FlashAnimation } from './FlashAnimation';
@@ -29,12 +29,12 @@ import { isLeftClick, akHeight } from './utils';
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
-var emojiStyle = style({
+var emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: '4px 4px 4px 8px'
 });
-var reactionStyle = style({
+var reactionStyle = css({
   outline: 'none',
   display: 'flex',
   flexDirection: 'row',
@@ -50,24 +50,20 @@ var reactionStyle = style({
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
-  $nest: {
-    '&:hover': {
-      background: "".concat(token('color.background.neutral.subtle.hovered', N20))
-    }
+  '&:hover': {
+    background: "".concat(token('color.background.neutral.subtle.hovered', N20))
   }
 });
-var reactedStyle = style({
-  backgroundColor: token('color.background.brand', B50),
-  borderColor: token('color.icon.brand', B300),
-  $nest: {
-    '&:hover': {
-      background: "".concat(token('color.background.brand.hovered', B75))
-    }
+var reactedStyle = css({
+  backgroundColor: token('color.background.selected', B50),
+  borderColor: token('color.border.selected', B300),
+  '&:hover': {
+    background: "".concat(token('color.background.selected.hovered', B75))
   }
 });
 var flashHeight = akHeight - 2; // height without the 1px border
 
-var flashStyle = style({
+var flashStyle = css({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',
@@ -164,28 +160,28 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
           classNameProp = _this$props3.className,
           flash = _this$props3.flash;
       var emojiName = this.state.emojiName;
-      var classNames = cx(reactionStyle, classNameProp, _defineProperty({}, reactedStyle, reaction.reacted));
       var emojiId = {
         id: reaction.emojiId,
         shortName: ''
       };
-      return /*#__PURE__*/React.createElement("button", {
-        className: classNames,
+      return jsx("button", {
+        className: classNameProp,
+        css: [reactionStyle, reaction.reacted && reactedStyle],
         onMouseUp: this.handleMouseDown,
         onMouseEnter: this.handleMouseEnter
-      }, /*#__PURE__*/React.createElement(ReactionTooltip, {
+      }, jsx(ReactionTooltip, {
         emojiName: emojiName,
         reaction: reaction
-      }, /*#__PURE__*/React.createElement(FlashAnimation, {
+      }, jsx(FlashAnimation, {
         flash: flash,
-        className: flashStyle
-      }, /*#__PURE__*/React.createElement("div", {
-        className: emojiStyle
-      }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+        css: flashStyle
+      }, jsx("div", {
+        css: emojiStyle
+      }, jsx(ResourcedEmoji, {
         emojiProvider: emojiProvider,
         emojiId: emojiId,
         fitToHeight: 16
-      })), /*#__PURE__*/React.createElement(Counter, {
+      })), jsx(Counter, {
         value: reaction.count,
         highlight: reaction.reacted
       }))));

package/dist/esm/components/ReactionPicker.js

@@ -14,39 +14,35 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import cx from 'classnames';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { PureComponent } from 'react';
 import ReactDOM from 'react-dom';
-import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { layers } from '@atlaskit/theme/constants';
-var pickerStyle = style({
+var pickerStyle = css({
   verticalAlign: 'middle',
-  $nest: {
-    '&.miniMode': {
-      display: 'inline-block',
-      marginRight: '4px'
-    }
+  '&.miniMode': {
+    display: 'inline-block',
+    marginRight: '4px'
   }
 });
-var contentStyle = style({
+var contentStyle = css({
   display: 'flex'
 });
-var popupStyle = style({
+var popupStyle = css({
   background: token('elevation.surface.overlay', N0),
   borderRadius: "".concat(borderRadius(), "px"),
   boxShadow: token('elevation.shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
-  $nest: {
-    '&> div': {
-      boxShadow: undefined
-    }
+  '&> div': {
+    boxShadow: undefined
   }
 });
 
@@ -179,9 +175,9 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       var _this$props = this.props,
           emojiProvider = _this$props.emojiProvider,
           allowAllEmojis = _this$props.allowAllEmojis;
-      return /*#__PURE__*/React.createElement("div", {
-        className: contentStyle
-      }, /*#__PURE__*/React.createElement(Selector, {
+      return jsx("div", {
+        css: contentStyle
+      }, jsx(Selector, {
         emojiProvider: emojiProvider,
         onSelection: this.onEmojiSelected,
         showMore: allowAllEmojis,
@@ -191,7 +187,7 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "renderEmojiPicker",
     value: function renderEmojiPicker() {
-      return /*#__PURE__*/React.createElement(EmojiPicker, {
+      return jsx(EmojiPicker, {
         emojiProvider: this.props.emojiProvider,
         onSelection: this.onEmojiSelected
       });
@@ -207,22 +203,21 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
       var _this2 = this;
 
       var isOpen = this.state.isOpen;
-      var miniMode = this.props.miniMode;
-      var classNames = cx(pickerStyle, {
-        isOpen: isOpen,
-        miniMode: miniMode
-      }, this.props.className);
-      return /*#__PURE__*/React.createElement("div", {
-        className: classNames
-      }, /*#__PURE__*/React.createElement(Manager, null, /*#__PURE__*/React.createElement(Reference, null, function (_ref) {
+      var _this$props2 = this.props,
+          miniMode = _this$props2.miniMode,
+          className = _this$props2.className;
+      return jsx("div", {
+        className: " ".concat(isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className),
+        css: pickerStyle
+      }, jsx(Manager, null, jsx(Reference, null, function (_ref) {
         var ref = _ref.ref;
-        return /*#__PURE__*/React.createElement(Trigger, {
+        return jsx(Trigger, {
           ref: ref,
           onClick: _this2.onTriggerClick,
           miniMode: miniMode,
           disabled: _this2.props.disabled
         });
-      }), /*#__PURE__*/React.createElement(Popper, {
+      }), jsx(Popper, {
         placement: "bottom-start",
         modifiers: this.popperModifiers
       }, function (_ref2) {
@@ -230,13 +225,13 @@ export var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
             style = _ref2.style,
             update = _ref2.update;
         _this2.updatePopper = update;
-        return /*#__PURE__*/React.createElement(React.Fragment, null, _this2.state.isOpen && /*#__PURE__*/React.createElement("div", {
+        return jsx(Fragment, null, isOpen && jsx("div", {
           style: _objectSpread({
             zIndex: layers.layer()
           }, style),
           ref: ref
-        }, /*#__PURE__*/React.createElement("div", {
-          className: popupStyle
+        }, jsx("div", {
+          css: popupStyle
         }, _this2.renderContent())));
       })));
     }

package/dist/esm/components/ReactionTooltip.js

@@ -1,38 +1,38 @@
 import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { style } from 'typestyle';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
 import { messages } from './i18n';
 var verticalMargin = 5;
-var tooltipStyle = style({
+var tooltipStyle = css({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   marginBottom: verticalMargin,
-  $nest: {
-    ul: {
-      listStyle: 'none',
-      margin: 0,
-      padding: 0,
-      textAlign: 'left'
-    },
-    li: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      marginTop: verticalMargin
-    }
+  ul: {
+    listStyle: 'none',
+    margin: 0,
+    padding: 0,
+    textAlign: 'left'
+  },
+  li: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    marginTop: verticalMargin
   }
 });
-var emojiNameStyle = style({
+var emojiNameStyle = css({
   textTransform: 'capitalize',
   color: token('color.text.inverse', N90),
   fontWeight: 600
 });
-var footerStyle = style({
+var footerStyle = css({
   color: token('color.text.inverse', N90),
   fontWeight: 300
 });
@@ -43,25 +43,25 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
       users = _ref.reaction.users;
 
   if (!users || users.length === 0) {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, React.Children.only(children));
+    return jsx(Fragment, null, React.Children.only(children));
   }
 
-  var content = /*#__PURE__*/React.createElement("div", {
-    className: tooltipStyle
-  }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
-    className: emojiNameStyle
+  var content = jsx("div", {
+    css: tooltipStyle
+  }, jsx("ul", null, emojiName ? jsx("li", {
+    css: emojiNameStyle
   }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map(function (user, index) {
-    return /*#__PURE__*/React.createElement("li", {
+    return jsx("li", {
       key: index
     }, user.displayName);
-  }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/React.createElement("li", {
-    className: footerStyle
-  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
+  }), users.length > TOOLTIP_USERS_LIMIT ? jsx("li", {
+    css: footerStyle
+  }, jsx(FormattedMessage, _extends({}, messages.otherUsers, {
     values: {
       count: users.length - TOOLTIP_USERS_LIMIT
     }
   }))) : null));
-  return /*#__PURE__*/React.createElement(Tooltip, {
+  return jsx(Tooltip, {
     content: content,
     position: "bottom"
   }, React.Children.only(children));

package/dist/esm/components/Reactions.js

@@ -10,22 +10,23 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { style } from 'typestyle';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionSelectionEvent, createReactionsRenderedEvent } from '../analytics';
 import { ReactionStatus } from '../types/ReactionStatus';
 import { messages } from './i18n';
 import { Reaction } from './Reaction';
 import { ReactionPicker } from './ReactionPicker';
-var reactionStyle = style({
+var reactionStyle = css({
   display: 'inline-block',
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-var reactionsStyle = style({
+var reactionsStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -33,10 +34,8 @@ var reactionsStyle = style({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  $nest: {
-    '& > :first-child': {
-      marginLeft: 0
-    }
+  '& > :first-of-type': {
+    marginLeft: 0
   }
 });
 export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
@@ -69,11 +68,11 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
 
       switch (status) {
         case ReactionStatus.error:
-          return errorMessage ? errorMessage : /*#__PURE__*/React.createElement(FormattedMessage, messages.unexpectedError);
+          return errorMessage ? errorMessage : jsx(FormattedMessage, messages.unexpectedError);
 
         case ReactionStatus.loading:
         case ReactionStatus.notLoaded:
-          return /*#__PURE__*/React.createElement(FormattedMessage, messages.loadingReactions);
+          return jsx(FormattedMessage, messages.loadingReactions);
 
         default:
           return undefined;
@@ -112,9 +111,9 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderReaction", function (reaction) {
-      return /*#__PURE__*/React.createElement(Reaction, {
+      return jsx(Reaction, {
         key: reaction.emojiId,
-        className: reactionStyle,
+        css: reactionStyle,
         reaction: reaction,
         emojiProvider: _this.props.emojiProvider,
         onClick: _this.props.onReactionClick,
@@ -144,10 +143,10 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
           emojiProvider = _this$props2.emojiProvider,
           boundariesElement = _this$props2.boundariesElement,
           allowAllEmojis = _this$props2.allowAllEmojis;
-      return /*#__PURE__*/React.createElement(Tooltip, {
+      return jsx(Tooltip, {
         content: this.getTooltip()
-      }, /*#__PURE__*/React.createElement(ReactionPicker, {
-        className: reactionStyle,
+      }, jsx(ReactionPicker, {
+        css: reactionStyle,
         emojiProvider: emojiProvider,
         miniMode: true,
         boundariesElement: boundariesElement,
@@ -162,8 +161,8 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
   }, {
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: reactionsStyle
+      return jsx("div", {
+        css: reactionsStyle
       }, this.props.reactions.map(this.renderReaction), this.renderPicker());
     }
   }]);

package/dist/esm/components/Selector.js

@@ -10,27 +10,26 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx, css, keyframes } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
-import { keyframes, style } from 'typestyle';
 import { EmojiButton } from './EmojiButton';
 import { ShowMore } from './ShowMore';
 import { equalEmojiId } from './utils';
-var selectorStyle = style({
+export var renderEmojiTestId = 'render-emoji';
+var selectorStyle = css({
   boxSizing: 'border-box',
   display: 'flex',
   padding: 0
 });
-var emojiStyle = style({
+var emojiStyle = css({
   display: 'inline-block',
   opacity: 0,
-  $nest: {
-    '&.selected': {
-      transition: 'transform 200ms ease-in-out  ',
-      transform: 'translateY(-48px) scale(2.667)'
-    }
+  '&.selected': {
+    transition: 'transform 200ms ease-in-out  ',
+    transform: 'translateY(-48px) scale(2.667)'
   }
 });
 var revealAnimation = keyframes({
@@ -46,7 +45,7 @@ var revealAnimation = keyframes({
     transform: 'scale(1)'
   }
 });
-export var revealStyle = style({
+export var revealStyle = css({
   animation: "".concat(revealAnimation, " 150ms ease-in-out forwards")
 });
 
@@ -108,17 +107,16 @@ export var Selector = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "renderEmoji", function (emojiId, index) {
       var emojiProvider = _this.props.emojiProvider;
       var key = emojiId.id || emojiId.shortName;
-      var classNames = cx(emojiStyle, revealStyle, {
-        selected: emojiId === _this.state.selection
-      });
       var style = revealDelay(index);
-      return /*#__PURE__*/React.createElement("div", {
+      return jsx("div", {
         key: key,
-        className: classNames,
-        style: style
-      }, /*#__PURE__*/React.createElement(Tooltip, {
+        className: emojiId === _this.state.selection ? 'selected' : '',
+        css: [emojiStyle, revealStyle],
+        style: style,
+        "data-testid": renderEmojiTestId
+      }, jsx(Tooltip, {
         content: emojiId.shortName
-      }, /*#__PURE__*/React.createElement(EmojiButton, {
+      }, jsx(EmojiButton, {
         emojiId: emojiId,
         emojiProvider: emojiProvider,
         onClick: _this.onEmojiSelected
@@ -126,11 +124,9 @@ export var Selector = /*#__PURE__*/function (_PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "renderShowMore", function () {
-      return /*#__PURE__*/React.createElement(ShowMore, {
+      return jsx(ShowMore, {
         key: "more",
-        className: {
-          button: revealStyle
-        },
+        revealStyle: revealStyle,
         style: {
           button: revealDelay(defaultReactions.length)
         },
@@ -154,8 +150,8 @@ export var Selector = /*#__PURE__*/function (_PureComponent) {
     key: "render",
     value: function render() {
       var showMore = this.props.showMore;
-      return /*#__PURE__*/React.createElement("div", {
-        className: selectorStyle
+      return jsx("div", {
+        css: selectorStyle
       }, defaultReactions.map(this.renderEmoji), showMore ? this.renderShowMore() : null);
     }
   }]);

package/dist/esm/components/ShowMore.js

@@ -9,20 +9,21 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
+/** @jsx jsx */
+import { jsx, css } from '@emotion/core';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
-import cx from 'classnames';
 import React from 'react';
-import { style } from 'typestyle';
 import { messages } from './i18n';
 import { FormattedMessage } from 'react-intl-next';
-var moreEmojiContainerStyle = style({
+import { revealStyle } from './Selector';
+var moreEmojiContainerStyle = css({
   display: 'flex'
 });
-var moreButtonStyle = style({
+var moreButtonStyle = css({
   opacity: 0,
   outline: 'none',
   backgroundColor: 'transparent',
@@ -33,19 +34,18 @@ var moreButtonStyle = style({
   padding: '4px',
   width: '38px',
   verticalAlign: 'top',
-  $nest: {
-    '&:hover': {
-      backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
-    }
+  '&:hover': {
+    backgroundColor: token('color.background.neutral.subtle.hovered', N30A)
   }
 });
-var separatorStyle = style({
+var separatorStyle = css({
   backgroundColor: token('color.border', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',
   display: 'inline-block'
 });
+export var showMoreTestId = 'show-more-button';
 export var ShowMore = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(ShowMore, _React$PureComponent);
 
@@ -64,19 +64,22 @@ export var ShowMore = /*#__PURE__*/function (_React$PureComponent) {
           style = _this$props.style,
           onClick = _this$props.onClick,
           classNameProp = _this$props.className;
-      return /*#__PURE__*/React.createElement("div", {
-        className: cx(moreEmojiContainerStyle, classNameProp.container),
+      return jsx("div", {
+        className: classNameProp.container,
+        css: moreEmojiContainerStyle,
         style: style.container
-      }, /*#__PURE__*/React.createElement("div", {
-        className: separatorStyle
-      }), /*#__PURE__*/React.createElement(FormattedMessage, messages.moreEmoji, function (text) {
-        return /*#__PURE__*/React.createElement(Tooltip, {
+      }, jsx("div", {
+        css: separatorStyle
+      }), jsx(FormattedMessage, messages.moreEmoji, function (text) {
+        return jsx(Tooltip, {
           content: text
-        }, /*#__PURE__*/React.createElement("button", {
-          className: cx(moreButtonStyle, classNameProp.button),
+        }, jsx("button", {
+          className: classNameProp.button,
+          css: [moreButtonStyle, revealStyle],
           style: style.button,
-          onMouseDown: onClick
-        }, /*#__PURE__*/React.createElement(EditorMoreIcon, {
+          onMouseDown: onClick,
+          "data-testid": showMoreTestId
+        }, jsx(EditorMoreIcon, {
           label: "More"
         })));
       }));