@atlaskit/reactions 21.6.2 → 21.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/reactions
 
+## 21.7.0
+
+### Minor Changes
+
+- [`e2635f36d53`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2635f36d53) - Adds new optional prop to <ReactionPicker /> component to setup the content for the tooltip on the add new reaction element
+  [ux] This adds a border around the Add reaction button according with new design requirements
+- [`ce1ceee9114`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ce1ceee9114) - Refactor props of <Reactions /> component to better infer types from quickReactionEmojiIds to quickReactionEmojis
+
+### Patch Changes
+
+- [`4b6f775e6c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4b6f775e6c0) - update reaction picker position at the edge of window
+- [`b2be1d1c8d2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b2be1d1c8d2) - removing title of reaction buttons
+- [`458aabb9add`](https://bitbucket.org/atlassian/atlassian-frontend/commits/458aabb9add) - Remove tooltip when reactions are disabled
+- [`a62cf3c2b49`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a62cf3c2b49) - fix emoji upload in reaction picker
+- Updated dependencies
+
 ## 21.6.2
 
 ### Patch Changes

package/dist/cjs/MockReactionsClient.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getUser = exports.getReactionSummary = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
+exports.mockData = exports.getUser = exports.getReactionSummary = exports.containerAri = exports.ari = exports.MockReactionsClient = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
@@ -61,6 +61,8 @@ var mockData = (0, _defineProperty2.default)({}, getReactionKey(containerAri, ar
  * Mocked version of the client to fetch user information
  */
 
+exports.mockData = mockData;
+
 var MockReactionsClient = /*#__PURE__*/function () {
   function MockReactionsClient() {
     var _this = this;

package/dist/cjs/components/EmojiButton/EmojiButton.js

@@ -11,6 +11,8 @@ exports.RENDER_BUTTON_TESTID = exports.EmojiButton = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _core = require("@emotion/core");
 
 var _emoji = require("@atlaskit/emoji");
@@ -43,10 +45,13 @@ var EmojiButton = function EmojiButton(_ref) {
     }
   };
 
+  var intl = (0, _reactIntlNext.useIntl)();
   return (0, _core.jsx)("button", {
     "data-testid": RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
-    title: emojiId.shortName,
+    "aria-label": intl.formatMessage(_shared.i18n.messages.reactWithEmoji, {
+      emoji: emojiId.shortName
+    }),
     type: "button",
     css: styles.emojiButtonStyle
   }, (0, _core.jsx)(_emoji.ResourcedEmoji, {

package/dist/cjs/components/Reaction/Reaction.js

@@ -17,6 +17,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntlNext = require("react-intl-next");
+
 var _core = require("@emotion/core");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -87,10 +89,7 @@ var Reaction = function Reaction(_ref) {
             case 2:
               emojiResource = _context.sent;
               _context.next = 5;
-              return emojiResource.findByEmojiId({
-                shortName: '',
-                id: reaction.emojiId
-              });
+              return emojiResource.findById(reaction.emojiId);
 
             case 5:
               foundEmoji = _context.sent;
@@ -132,14 +131,18 @@ var Reaction = function Reaction(_ref) {
       onMouseEnter(reaction, event);
     }
   }, [createAnalyticsEvent, reaction, onMouseEnter]);
+  var intl = (0, _reactIntlNext.useIntl)();
   return (0, _core.jsx)(_ReactionTooltip.ReactionTooltip, {
     emojiName: emojiName,
     reaction: reaction
   }, (0, _core.jsx)("button", {
     className: className,
     css: [styles.reactionStyle, reaction.reacted && styles.reactedStyle],
-    title: reaction.emojiId,
+    "aria-label": intl.formatMessage(_shared.i18n.messages.reactWithEmoji, {
+      emoji: emojiName
+    }),
     type: "button",
+    "data-emoji-id": reaction.emojiId,
     "data-testid": RENDER_REACTION_TESTID,
     onMouseUp: handleMouseUp,
     onMouseEnter: handleMouseEnter

package/dist/cjs/components/ReactionPicker/ReactionPicker.js

@@ -9,18 +9,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ReactionPicker = exports.RENDER_REACTIONPICKER_TESTID = void 0;
 
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _core = require("@emotion/core");
 
+var _reactIntlNext = require("react-intl-next");
+
 var _picker = require("@atlaskit/emoji/picker");
 
 var _popper = require("@atlaskit/popper");
@@ -33,6 +31,8 @@ var _Trigger = require("../Trigger");
 
 var _analytics = require("../../analytics");
 
+var _shared = require("../../shared");
+
 var _hooks = require("../../hooks");
 
 var styles = _interopRequireWildcard(require("./styles"));
@@ -91,7 +91,9 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
       pickerQuickReactionEmojiIds = props.pickerQuickReactionEmojiIds,
       onShowMore = props.onShowMore,
       onOpen = props.onOpen,
-      onCancel = props.onCancel;
+      onCancel = props.onCancel,
+      _props$tooltipContent = props.tooltipContent,
+      tooltipContent = _props$tooltipContent === void 0 ? (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction) : _props$tooltipContent;
   /**
    * Container <div /> reference (used by custom hook to detect click outside)
    */
@@ -101,9 +103,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
    * a function you can ask Popper to recompute your tooltip's position. It will directly call the Popper#update method
    */
 
-  var updatePopper = (0, _react.useRef)(function () {
-    return Promise.resolve();
-  });
+  var updatePopper = (0, _react.useRef)();
 
   var _useState = (0, _react.useState)({
     /**
@@ -130,7 +130,7 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
     }
 
     close();
-  });
+  }, 'click', true);
   /**
    * Event callback when the picker is closed
    * @param _id Optional id if an emoji button was selected or undefineed if was clicked outside the picker
@@ -155,39 +155,17 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
    * @param e event param
    */
 
-  var onSelectMoreClick = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              _context.next = 3;
-              return updatePopper.current();
-
-            case 3:
-              // Update popper position
-              setSettings({
-                isOpen: true,
-                showFullPicker: true
-              });
-
-              if (onShowMore) {
-                onShowMore();
-              }
-
-            case 5:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [onShowMore]);
+  var onSelectMoreClick = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    setSettings({
+      isOpen: true,
+      showFullPicker: true
+    });
+
+    if (onShowMore) {
+      onShowMore();
+    }
+  }, [onShowMore]);
   /**
    * Event callback when an emoji icon is selected
    * @param item selected item
@@ -222,30 +200,42 @@ var ReactionPicker = /*#__PURE__*/_react.default.memo(function (props) {
 
     _analytics.UFO.PickerRender.success();
   };
+  /**
+   * When picker is opened, re-calculate the picker position
+   */
 
+
+  (0, _react.useEffect)(function () {
+    if (settings.isOpen) {
+      if (updatePopper.current) {
+        updatePopper.current();
+      }
+    }
+  }, [settings]);
   var wrapperClassName = " ".concat(settings.isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className);
   return (0, _core.jsx)("div", {
     className: wrapperClassName,
     css: styles.pickerStyle,
     ref: wrapperRef,
     "data-testid": RENDER_REACTIONPICKER_TESTID
-  }, (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref2) {
-    var popperRef = _ref2.ref;
+  }, (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref) {
+    var popperRef = _ref.ref;
     return (// Render a button to open the <Selector /> panel
       (0, _core.jsx)(_Trigger.Trigger, {
         ref: popperRef,
         onClick: onTriggerClick,
         miniMode: miniMode,
-        disabled: disabled
+        disabled: disabled,
+        tooltipContent: tooltipContent
       })
     );
   }), (0, _core.jsx)(_popper.Popper, {
     placement: "bottom-start",
     modifiers: popperModifiers
-  }, function (_ref3) {
-    var ref = _ref3.ref,
-        style = _ref3.style,
-        update = _ref3.update;
+  }, function (_ref2) {
+    var ref = _ref2.ref,
+        style = _ref2.style,
+        update = _ref2.update;
     updatePopper.current = update;
     return (0, _core.jsx)(_react.Fragment, null, settings.isOpen && (0, _core.jsx)("div", {
       style: _objectSpread({

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

@@ -31,7 +31,9 @@ var popupStyle = (0, _core.css)({
   borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
   boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
   '&> div': {
-    boxShadow: undefined
+    boxShadow: undefined,
+    marginTop: '4px',
+    marginBottom: '4px'
   }
 });
 exports.popupStyle = popupStyle;

package/dist/cjs/components/Reactions/Reactions.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Reactions = exports.RENDER_TOOLTIP_TESTID = exports.RENDER_REACTIONS_TESTID = void 0;
+exports.Reactions = exports.RENDER_REACTIONS_TESTID = void 0;
+exports.getTooltip = getTooltip;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -15,8 +14,6 @@ var _core = require("@emotion/core");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
 var _reactIntlNext = require("react-intl-next");
 
 var _analytics = require("../../analytics");
@@ -41,26 +38,40 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Test id for wrapper Reactions div
  */
 var RENDER_REACTIONS_TESTID = 'render-reactions';
+exports.RENDER_REACTIONS_TESTID = RENDER_REACTIONS_TESTID;
+
 /**
- * Test id for the tooltip
+ * Get content of the tooltip
  */
+function getTooltip(status, errorMessage) {
+  switch (status) {
+    case _types.ReactionStatus.error:
+      return errorMessage || (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.unexpectedError);
+    // When reaction is not available don't show any tooltip (e.g. Archive page in Confluence)
 
-exports.RENDER_REACTIONS_TESTID = RENDER_REACTIONS_TESTID;
-var RENDER_TOOLTIP_TESTID = 'render-tooltip';
-exports.RENDER_TOOLTIP_TESTID = RENDER_TOOLTIP_TESTID;
+    case _types.ReactionStatus.disabled:
+      return null;
+
+    case _types.ReactionStatus.notLoaded:
+    case _types.ReactionStatus.loading:
+      return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
 
+    case _types.ReactionStatus.ready:
+      return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.addReaction);
+  }
+}
 /**
  * Renders list of reactions
  */
+
+
 var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
   var _ref$flash = _ref.flash,
       flash = _ref$flash === void 0 ? {} : _ref$flash,
       status = _ref.status,
       errorMessage = _ref.errorMessage,
       loadReaction = _ref.loadReaction,
-      quickReactionEmojiIds = _ref.quickReactionEmojiIds,
-      containerAri = _ref.containerAri,
-      ari = _ref.ari,
+      quickReactionEmojis = _ref.quickReactionEmojis,
       pickerQuickReactionEmojiIds = _ref.pickerQuickReactionEmojiIds,
       onReactionHover = _ref.onReactionHover,
       onSelection = _ref.onSelection,
@@ -92,23 +103,6 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       renderTime.current = undefined;
     }
   }, [createAnalyticsEvent, status]);
-  /**
-   * Get content of the tooltip
-   */
-
-  var getTooltip = function getTooltip() {
-    switch (status) {
-      case _types.ReactionStatus.error:
-        return errorMessage || (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.unexpectedError);
-
-      case _types.ReactionStatus.loading:
-      case _types.ReactionStatus.notLoaded:
-        return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.loadingReactions);
-
-      default:
-        return undefined;
-    }
-  };
 
   var handleReactionMouseEnter = function handleReactionMouseEnter(summary) {
     if (onReactionHover) {
@@ -147,12 +141,15 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     /**
      * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
      */
-    if (reactions.length > 0 || !quickReactionEmojiIds) {
+    if (reactions.length > 0 || !quickReactionEmojis) {
       return reactions;
     } // add any missing default reactions
 
 
-    var items = quickReactionEmojiIds.filter(function (emojiId) {
+    var ari = quickReactionEmojis.ari,
+        containerAri = quickReactionEmojis.containerAri,
+        emojiIds = quickReactionEmojis.emojiIds;
+    var items = emojiIds.filter(function (emojiId) {
       return !reactions.some(function (reaction) {
         return reaction.emojiId === emojiId;
       });
@@ -166,7 +163,7 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       };
     });
     return reactions.concat(items);
-  }, [ari, containerAri, quickReactionEmojiIds, reactions]);
+  }, [quickReactionEmojis, reactions]);
   return (0, _core.jsx)("div", {
     css: styles.wrapperStyle,
     "data-testid": RENDER_REACTIONS_TESTID
@@ -180,10 +177,7 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       onMouseEnter: handleReactionMouseEnter,
       flash: flash[reaction.emojiId]
     });
-  }), (0, _core.jsx)(_tooltip.default, {
-    testId: RENDER_TOOLTIP_TESTID,
-    content: getTooltip()
-  }, (0, _core.jsx)(_ReactionPicker.ReactionPicker, {
+  }), (0, _core.jsx)(_ReactionPicker.ReactionPicker, {
     css: styles.reactionStyle,
     emojiProvider: emojiProvider,
     miniMode: true,
@@ -193,8 +187,9 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     onSelection: handleOnSelection,
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
-    onShowMore: handleOnMore
-  })));
+    onShowMore: handleOnMore,
+    tooltipContent: getTooltip(status, errorMessage)
+  }));
 });
 
 exports.Reactions = Reactions;

package/dist/cjs/components/Reactions/index.js

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "RENDER_REACTIONS_TESTID", {
     return _Reactions.RENDER_REACTIONS_TESTID;
   }
 });
-Object.defineProperty(exports, "RENDER_TOOLTIP_TESTID", {
-  enumerable: true,
-  get: function get() {
-    return _Reactions.RENDER_TOOLTIP_TESTID;
-  }
-});
 Object.defineProperty(exports, "Reactions", {
   enumerable: true,
   get: function get() {

package/dist/cjs/components/ShowMore/ShowMore.js

@@ -57,7 +57,7 @@ var ShowMore = function ShowMore(_ref) {
     }, (0, _core.jsx)("button", {
       className: className.button,
       css: [styles.moreButtonStyle, buttonStyle],
-      title: _shared.i18n.messages.moreEmoji.defaultMessage,
+      "aria-label": _shared.i18n.messages.moreEmoji.defaultMessage,
       type: "button",
       style: style.button,
       onMouseDown: onClick,

package/dist/cjs/components/Trigger/Trigger.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Trigger = void 0;
+exports.Trigger = exports.RENDER_TOOLTIP_TRIGGER_TESTID = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -15,6 +15,8 @@ var _core = require("@emotion/core");
 
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji-add"));
 
 var styles = _interopRequireWildcard(require("./styles"));
@@ -26,20 +28,32 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 
 /**
- * Render a button to open the reactions picker
+ * Test id for the tooltip
+ */
+var RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
+exports.RENDER_TOOLTIP_TRIGGER_TESTID = RENDER_TOOLTIP_TRIGGER_TESTID;
+
+/**
+ * Render an emoji button to open the reactions select picker
  */
 var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var miniMode = props.miniMode,
+  var onClick = props.onClick,
+      miniMode = props.miniMode,
+      tooltipContent = props.tooltipContent,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled;
 
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
-    if (props.onClick && !props.disabled) {
-      props.onClick(e, analyticsEvent);
+    if (onClick && !disabled) {
+      onClick(e, analyticsEvent);
     }
   };
 
-  return (0, _core.jsx)(_standardButton.default, {
+  return (0, _core.jsx)(_tooltip.default, {
+    testId: RENDER_TOOLTIP_TRIGGER_TESTID,
+    content: tooltipContent,
+    position: "top"
+  }, (0, _core.jsx)(_standardButton.default, {
     css: styles.triggerStyle({
       miniMode: miniMode,
       disabled: disabled
@@ -53,7 +67,7 @@ var Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }),
     spacing: "none",
     ref: ref
-  });
+  }));
 });
 
 exports.Trigger = Trigger;

package/dist/cjs/components/Trigger/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "RENDER_TOOLTIP_TRIGGER_TESTID", {
+  enumerable: true,
+  get: function get() {
+    return _Trigger.RENDER_TOOLTIP_TRIGGER_TESTID;
+  }
+});
 Object.defineProperty(exports, "Trigger", {
   enumerable: true,
   get: function get() {

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

@@ -27,19 +27,25 @@ var triggerStyle = function triggerStyle(_ref) {
       miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-  return (0, _core.css)(_objectSpread(_objectSpread({
-    width: '32px',
+  return (0, _core.css)(_objectSpread(_objectSpread(_objectSpread({
+    minWidth: '32px',
     height: '32px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     lineHeight: '16px'
   }, miniMode && {
-    width: '24px',
-    height: '24px'
+    height: '24px',
+    padding: 0,
+    border: "1px solid ".concat((0, _tokens.token)('color.border', _colors.N40)),
+    borderRadius: '20px'
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'
+  }), {}, {
+    '&:hover': {
+      background: "".concat((0, _tokens.token)('color.background.neutral.subtle.hovered', _colors.N20))
+    }
   }));
 };
 

package/dist/cjs/hooks/useClickAway.js

@@ -12,9 +12,11 @@ var _react = require("react");
  * @param ref ref object to an html element
  * @param callback event callback when detected a click outside the ref object
  * @param type (Optional) type of event to listen to. @default click
+ * @param useCapture (Optional) use capture phase of event. @default false
  */
 function useClickAway(ref, callback) {
   var type = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'click';
+  var useCapture = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   (0, _react.useEffect)(function () {
     /**
      * Alert if clicked on outside of element
@@ -26,10 +28,10 @@ function useClickAway(ref, callback) {
     } // Bind the event listener
 
 
-    document.addEventListener(type, handleClickOutside);
+    document.addEventListener(type, handleClickOutside, useCapture);
     return function () {
       // Unbind the event listener on clean up
-      document.removeEventListener(type, handleClickOutside);
+      document.removeEventListener(type, handleClickOutside, useCapture);
     };
-  }, [ref, callback, type]);
+  }, [ref, callback, type, useCapture]);
 }

package/dist/cjs/shared/i18n.js

@@ -8,6 +8,11 @@ exports.messages = void 0;
 var _reactIntlNext = require("react-intl-next");
 
 var messages = (0, _reactIntlNext.defineMessages)({
+  addReaction: {
+    id: 'fabric.reactions.add',
+    defaultMessage: 'Add reaction',
+    description: 'Message for add reaction button'
+  },
   loadingReactions: {
     id: 'fabric.reactions.loading',
     defaultMessage: 'Loading...',
@@ -18,6 +23,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'More emojis',
     description: 'Tooltip of the "show more" button in the quick reaction selector. The full emoji selector is displayed when the user clicks on it.'
   },
+  reactWithEmoji: {
+    id: 'fabric.reactions.reactwithemoji',
+    defaultMessage: 'React with {emoji} emoji',
+    description: 'Aria label on reaction button'
+  },
   unexpectedError: {
     id: 'fabric.reactions.error.unexpected',
     defaultMessage: 'Reactions are temporarily unavailable',

package/dist/cjs/types/reaction.js

@@ -13,6 +13,10 @@ exports.ReactionStatus = void 0;
  * MetaData for Reaction object
  */
 
+/**
+ * Metadata for composing a summary of emojis that will be shown in the the primary view even if the reaction count is zero
+ */
+
 /**
  * Event handler for when the user clicks on the reaction
  * @param id give id for the emoji
@@ -40,4 +44,5 @@ exports.ReactionStatus = ReactionStatus;
   ReactionStatus["loading"] = "LOADING";
   ReactionStatus["error"] = "ERROR";
   ReactionStatus["notLoaded"] = "NOT_LOADED";
+  ReactionStatus["disabled"] = "DISABLED";
 })(ReactionStatus || (exports.ReactionStatus = ReactionStatus = {}));

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.6.2"
+	"version": "21.7.0"
 }

package/dist/es2019/MockReactionsClient.js

@@ -21,7 +21,7 @@ const getReactionKey = (containerAri, ari) => {
 };
 
 const defaultUsers = [getUser('oscar', 'Oscar Wallhult'), getUser('julien', 'Julien Michel Hoarau'), getUser('craig', 'Craig Petchell'), getUser('jerome', 'Jerome Touffe-Blin'), getUser('esoares', 'Eduardo Soares'), getUser('lpereira', 'Luiz Pereira'), getUser('pcurren', 'Paul Curren'), getUser('ttjandra', 'Tara Tjandra'), getUser('severington', 'Ste Everington'), getUser('sguillope', 'Sylvain Guillope'), getUser('alunnon', 'Alex Lunnon')];
-const mockData = {
+export const mockData = {
   [getReactionKey(containerAri, ari)]: [getReactionSummary(':fire:', 1, true), getReactionSummary(':thumbsup:', 999, false), getReactionSummary(':astonished:', 9, false), getReactionSummary(':heart:', 99, false)]
 };
 /**

package/dist/es2019/components/EmojiButton/EmojiButton.js

@@ -1,8 +1,9 @@
 /** @jsx jsx */
 import React from 'react';
+import { useIntl } from 'react-intl-next';
 import { jsx } from '@emotion/core';
 import { ResourcedEmoji } from '@atlaskit/emoji';
-import { utils } from '../../shared';
+import { i18n, utils } from '../../shared';
 import * as styles from './styles';
 export const RENDER_BUTTON_TESTID = 'button-emoji-id';
 
@@ -22,10 +23,13 @@ export const EmojiButton = ({
     }
   };
 
+  const intl = useIntl();
   return jsx("button", {
     "data-testid": RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
-    title: emojiId.shortName,
+    "aria-label": intl.formatMessage(i18n.messages.reactWithEmoji, {
+      emoji: emojiId.shortName
+    }),
     type: "button",
     css: styles.emojiButtonStyle
   }, jsx(ResourcedEmoji, {