@atlaskit/reactions 26.5.0 → 27.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/reactions
 
+## 27.0.0
+
+### Major Changes
+
+- [#122626](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/122626)
+  [`28c2e5656229f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/28c2e5656229f) -
+  Updates the API by removing the optional boolean prop showMoreEmojiTriggerUI and instead adds two
+  new props reactionPickerTriggerIcon and reactionPickerTriggerTooltipContent to have more control
+  for displaying changes in the Trigger. Currently only Confluence was using this prop so the change
+  should be non-breaking but still marking as major since it's an API update.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 26.5.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.5.0
 
 ### Minor Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "26.5.0";
+var packageVersion = "27.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -14,7 +14,7 @@ var _colors = require("@atlaskit/theme/colors");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var countStyle = exports.countStyle = (0, _react.css)({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text-subtlest, ".concat(_colors.N90, ")"),
   overflow: 'hidden',
   position: 'relative',

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

@@ -58,7 +58,7 @@ var userListStyle = exports.userListStyle = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: "".concat("var(--ds-text, ".concat(_colors.N500, ")")),
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   }
 });
 

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

@@ -100,7 +100,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
     reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
-    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -256,7 +256,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
-        showMoreEmojiTriggerUI: showMoreEmojiTriggerUI
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {

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

@@ -85,7 +85,7 @@ var RENDER_REACTIONS_SUMMARY_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID =
 /**
  * Get content of the tooltip
  */
-function getTooltip(status, errorMessage) {
+function getTooltip(status, errorMessage, tooltipContent) {
   switch (status) {
     case _types.ReactionStatus.error:
       return errorMessage || (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.unexpectedError);
@@ -96,8 +96,9 @@ function getTooltip(status, errorMessage) {
     case _types.ReactionStatus.loading:
       return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.loadingReactions);
     case _types.ReactionStatus.ready:
-      return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
+      return !!tooltipContent ? tooltipContent : (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
   }
+  ;
 }
 
 /**
@@ -159,8 +160,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     _ref$noRelativeContai = _ref.noRelativeContainer,
     noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
-    showMoreEmojiTriggerUI = _ref.showMoreEmojiTriggerUI,
-    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions;
+    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
+    reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -362,14 +364,14 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
-    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_segment.default, {
     name: "reactions-dialog"

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

@@ -12,7 +12,6 @@ var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji-add"));
-var _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
@@ -31,11 +30,6 @@ var i18n = (0, _reactIntlNext.defineMessages)({
     id: 'reaction-picker-trigger.add.reaction.message',
     description: 'Message displayed when there are no page reactions existing on the page.',
     defaultMessage: 'Add a reaction'
-  },
-  showMore: {
-    id: 'reaction-picker-trigger.more.emojis.message',
-    description: 'Message displayed on button to show more emojis.',
-    defaultMessage: 'More emojis'
   }
 });
 var triggerStyles = (0, _primitives.xcss)({
@@ -97,7 +91,7 @@ var miniModeStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius'
 });
 var addReactionMessageStyles = (0, _primitives.xcss)({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });
@@ -124,7 +118,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     selectionStyle = props.selectionStyle,
-    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -132,7 +126,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
   };
   return (0, _react2.jsx)(_tooltip.default, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: showMoreEmojiTriggerUI ? formatMessage(i18n.showMore) : tooltipContent
+    content: tooltipContent
   }, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
@@ -141,11 +135,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
-  }, ariaAttributes), showMoreEmojiTriggerUI ? (0, _react2.jsx)(_showMoreHorizontal.default, {
-    testId: "show-more-emojis-icon",
-    label: formatMessage(i18n.showMore),
-    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)"
-  }) :
+  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
   // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
   (0, _react2.jsx)(_emojiAdd.default, {
     testId: "emoji-add-icon",

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "26.5.0";
+const packageVersion = "27.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/components/Counter/styles.js

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const countStyle = css({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: `var(--ds-text-subtlest, ${N90})`,
   overflow: 'hidden',
   position: 'relative',

package/dist/es2019/components/ReactionDialog/styles.js

@@ -49,7 +49,7 @@ export const userListStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: `${`var(--ds-text, ${N500})`}`,
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   }
 });
 

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -81,7 +81,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showAddReactionText = false,
     showRoundTrigger = false,
     reactionPickerAdditionalStyle = undefined,
-    showMoreEmojiTriggerUI
+    reactionPickerTriggerIcon
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -228,7 +228,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
-    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon
   })), settings.isOpen && jsx(PopperWrapper, {
     settings: settings
   }, settings.showFullPicker ? jsx(EmojiPicker, {

package/dist/es2019/components/Reactions/Reactions.js

@@ -69,7 +69,7 @@ export const RENDER_REACTIONS_SUMMARY_TESTID = 'reaction-summary-view';
 /**
  * Get content of the tooltip
  */
-export function getTooltip(status, errorMessage) {
+export function getTooltip(status, errorMessage, tooltipContent) {
   switch (status) {
     case ReactionStatus.error:
       return errorMessage || jsx(FormattedMessage, messages.unexpectedError);
@@ -80,8 +80,9 @@ export function getTooltip(status, errorMessage) {
     case ReactionStatus.loading:
       return jsx(FormattedMessage, messages.loadingReactions);
     case ReactionStatus.ready:
-      return jsx(FormattedMessage, messages.addReaction);
+      return !!tooltipContent ? tooltipContent : jsx(FormattedMessage, messages.addReaction);
   }
+  ;
 }
 
 /**
@@ -122,8 +123,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
   reactionPickerAdditionalStyle,
   noWrap = false,
   noRelativeContainer = false,
-  showMoreEmojiTriggerUI,
-  showSubtleDefaultReactions
+  showSubtleDefaultReactions,
+  reactionPickerTriggerToolipContent,
+  reactionPickerTriggerIcon
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -310,14 +312,14 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
-    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"

package/dist/es2019/components/Trigger/Trigger.js

@@ -10,7 +10,6 @@ import { jsx } from '@emotion/react';
 import { Pressable, Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/core/migration/emoji-add';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
@@ -23,11 +22,6 @@ const i18n = defineMessages({
     id: 'reaction-picker-trigger.add.reaction.message',
     description: 'Message displayed when there are no page reactions existing on the page.',
     defaultMessage: 'Add a reaction'
-  },
-  showMore: {
-    id: 'reaction-picker-trigger.more.emojis.message',
-    description: 'Message displayed on button to show more emojis.',
-    defaultMessage: 'More emojis'
   }
 });
 const triggerStyles = xcss({
@@ -89,7 +83,7 @@ const miniModeStyles = xcss({
   borderRadius: 'border.radius'
 });
 const addReactionMessageStyles = xcss({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });
@@ -112,7 +106,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     subtleReactionsSummaryAndPicker = false,
     showRoundTrigger = false,
     selectionStyle,
-    showMoreEmojiTriggerUI
+    reactionPickerTriggerIcon
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
@@ -121,7 +115,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
   };
   return jsx(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: showMoreEmojiTriggerUI ? formatMessage(i18n.showMore) : tooltipContent
+    content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
@@ -130,11 +124,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
-  }, ariaAttributes), showMoreEmojiTriggerUI ? jsx(ShowMoreHorizontalIcon, {
-    testId: "show-more-emojis-icon",
-    label: formatMessage(i18n.showMore),
-    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)"
-  }) :
+  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
   // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
   jsx(EmojiAddIcon, {
     testId: "emoji-add-icon",

package/dist/esm/analytics/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 var packageName = "@atlaskit/reactions";
-var packageVersion = "26.5.0";
+var packageVersion = "27.0.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/esm/components/Counter/styles.js

@@ -7,7 +7,7 @@ import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var countStyle = css({
-  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: "var(--ds-text-subtlest, ".concat(N90, ")"),
   overflow: 'hidden',
   position: 'relative',

package/dist/esm/components/ReactionDialog/styles.js

@@ -51,7 +51,7 @@ export var userListStyle = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: "".concat("var(--ds-text, ".concat(N500, ")")),
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
   }
 });
 

package/dist/esm/components/ReactionPicker/ReactionPicker.js

@@ -93,7 +93,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     _props$reactionPicker = props.reactionPickerAdditionalStyle,
     reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
-    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -249,7 +249,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         showAddReactionText: showAddReactionText,
         subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
         showRoundTrigger: showRoundTrigger,
-        showMoreEmojiTriggerUI: showMoreEmojiTriggerUI
+        reactionPickerTriggerIcon: reactionPickerTriggerIcon
       })
     );
   }), settings.isOpen && jsx(PopperWrapper, {

package/dist/esm/components/Reactions/Reactions.js

@@ -71,7 +71,7 @@ export var RENDER_REACTIONS_SUMMARY_TESTID = 'reaction-summary-view';
 /**
  * Get content of the tooltip
  */
-export function getTooltip(status, errorMessage) {
+export function getTooltip(status, errorMessage, tooltipContent) {
   switch (status) {
     case ReactionStatus.error:
       return errorMessage || jsx(FormattedMessage, messages.unexpectedError);
@@ -82,8 +82,9 @@ export function getTooltip(status, errorMessage) {
     case ReactionStatus.loading:
       return jsx(FormattedMessage, messages.loadingReactions);
     case ReactionStatus.ready:
-      return jsx(FormattedMessage, messages.addReaction);
+      return !!tooltipContent ? tooltipContent : jsx(FormattedMessage, messages.addReaction);
   }
+  ;
 }
 
 /**
@@ -145,8 +146,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     noWrap = _ref$noWrap === void 0 ? false : _ref$noWrap,
     _ref$noRelativeContai = _ref.noRelativeContainer,
     noRelativeContainer = _ref$noRelativeContai === void 0 ? false : _ref$noRelativeContai,
-    showMoreEmojiTriggerUI = _ref.showMoreEmojiTriggerUI,
-    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions;
+    showSubtleDefaultReactions = _ref.showSubtleDefaultReactions,
+    reactionPickerTriggerToolipContent = _ref.reactionPickerTriggerToolipContent,
+    reactionPickerTriggerIcon = _ref.reactionPickerTriggerIcon;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -348,14 +350,14 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     onOpen: handlePickerOpen,
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage),
+    tooltipContent: getTooltip(status, errorMessage, reactionPickerTriggerToolipContent),
     emojiPickerSize: emojiPickerSize,
     miniMode: miniMode,
     showOpaqueBackground: showOpaqueBackground,
     showAddReactionText: showAddReactionText,
     subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
     showRoundTrigger: showRoundTrigger,
-    showMoreEmojiTriggerUI: showMoreEmojiTriggerUI,
+    reactionPickerTriggerIcon: reactionPickerTriggerIcon,
     reactionPickerAdditionalStyle: reactionPickerAdditionalStyle
   }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
     name: "reactions-dialog"

package/dist/esm/components/Trigger/Trigger.js

@@ -10,7 +10,6 @@ import { jsx } from '@emotion/react';
 import { Pressable, Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/core/migration/emoji-add';
-import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
@@ -23,11 +22,6 @@ var i18n = defineMessages({
     id: 'reaction-picker-trigger.add.reaction.message',
     description: 'Message displayed when there are no page reactions existing on the page.',
     defaultMessage: 'Add a reaction'
-  },
-  showMore: {
-    id: 'reaction-picker-trigger.more.emojis.message',
-    description: 'Message displayed on button to show more emojis.',
-    defaultMessage: 'More emojis'
   }
 });
 var triggerStyles = xcss({
@@ -89,7 +83,7 @@ var miniModeStyles = xcss({
   borderRadius: 'border.radius'
 });
 var addReactionMessageStyles = xcss({
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
   color: 'color.text.subtle',
   marginLeft: 'space.050'
 });
@@ -116,7 +110,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$showRoundTrigg = props.showRoundTrigger,
     showRoundTrigger = _props$showRoundTrigg === void 0 ? false : _props$showRoundTrigg,
     selectionStyle = props.selectionStyle,
-    showMoreEmojiTriggerUI = props.showMoreEmojiTriggerUI;
+    reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -124,7 +118,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
   return jsx(Tooltip, {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
-    content: showMoreEmojiTriggerUI ? formatMessage(i18n.showMore) : tooltipContent
+    content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
     xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh, showRoundTrigger && roundTriggerStyles,
@@ -133,11 +127,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
-  }, ariaAttributes), showMoreEmojiTriggerUI ? jsx(ShowMoreHorizontalIcon, {
-    testId: "show-more-emojis-icon",
-    label: formatMessage(i18n.showMore),
-    color: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)"
-  }) :
+  }, ariaAttributes), !!reactionPickerTriggerIcon ? reactionPickerTriggerIcon :
   // TODO: https://product-fabric.atlassian.net/browse/DSP-21007
   jsx(EmojiAddIcon, {
     testId: "emoji-add-icon",

package/dist/types/components/ReactionPicker/ReactionPicker.d.ts

@@ -78,9 +78,9 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     reactionPickerAdditionalStyle?: XCSS;
     /**
-     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     * Optional prop for controlling icon inside Trigger
      */
-    showMoreEmojiTriggerUI?: boolean;
+    reactionPickerTriggerIcon?: React.ReactNode;
 }
 /**
  * Picker component for adding reactions

package/dist/types/components/Reactions/Reactions.d.ts

@@ -35,7 +35,7 @@ export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-user
  * Test id for summary view of reactions
  */
 export declare const RENDER_REACTIONS_SUMMARY_TESTID = "reaction-summary-view";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'reactionPickerTriggerIcon'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * event handler to fetching the reactions
      */
@@ -151,14 +151,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for using your own container for relative positioning for emoji picker popup
      */
     noRelativeContainer?: boolean;
-    /**
-     * Optional prop for controlling if Trigger displays the ... show more emoji UI
-     */
-    showMoreEmojiTriggerUI?: boolean;
     /**
      * Optional prop for controlling if default reactions are subtle
      */
     showSubtleDefaultReactions?: boolean;
+    /**
+     * Optional prop for controlling tooltip content of the trigger button
+     */
+    reactionPickerTriggerToolipContent?: string;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -167,8 +167,8 @@ export interface OpenReactionsDialogOptions {
 /**
  * Get content of the tooltip
  */
-export declare function getTooltip(status: ReactionStatus, errorMessage?: string): string | jsx.JSX.Element | null;
+export declare function getTooltip(status: ReactionStatus, errorMessage?: string, tooltipContent?: string): string | jsx.JSX.Element | null;
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showMoreEmojiTriggerUI, showSubtleDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, }: ReactionsProps) => jsx.JSX.Element>;

package/dist/types/components/Trigger/Trigger.d.ts

@@ -54,9 +54,9 @@ export interface TriggerProps {
      */
     selectionStyle?: XCSS;
     /**
-     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     * Optional prop for controlling icon inside Trigger
      */
-    showMoreEmojiTriggerUI?: boolean;
+    reactionPickerTriggerIcon?: React.ReactNode;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/dist/types-ts4.5/components/ReactionPicker/ReactionPicker.d.ts

@@ -78,9 +78,9 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      */
     reactionPickerAdditionalStyle?: XCSS;
     /**
-     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     * Optional prop for controlling icon inside Trigger
      */
-    showMoreEmojiTriggerUI?: boolean;
+    reactionPickerTriggerIcon?: React.ReactNode;
 }
 /**
  * Picker component for adding reactions

package/dist/types-ts4.5/components/Reactions/Reactions.d.ts

@@ -35,7 +35,7 @@ export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-user
  * Test id for summary view of reactions
  */
 export declare const RENDER_REACTIONS_SUMMARY_TESTID = "reaction-summary-view";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'reactionPickerTriggerIcon'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * event handler to fetching the reactions
      */
@@ -151,14 +151,14 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for using your own container for relative positioning for emoji picker popup
      */
     noRelativeContainer?: boolean;
-    /**
-     * Optional prop for controlling if Trigger displays the ... show more emoji UI
-     */
-    showMoreEmojiTriggerUI?: boolean;
     /**
      * Optional prop for controlling if default reactions are subtle
      */
     showSubtleDefaultReactions?: boolean;
+    /**
+     * Optional prop for controlling tooltip content of the trigger button
+     */
+    reactionPickerTriggerToolipContent?: string;
 }
 export interface OpenReactionsDialogOptions {
     emojiId?: string;
@@ -167,8 +167,8 @@ export interface OpenReactionsDialogOptions {
 /**
  * Get content of the tooltip
  */
-export declare function getTooltip(status: ReactionStatus, errorMessage?: string): string | jsx.JSX.Element | null;
+export declare function getTooltip(status: ReactionStatus, errorMessage?: string, tooltipContent?: string): string | jsx.JSX.Element | null;
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showMoreEmojiTriggerUI, showSubtleDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, onDialogPageChangeCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, ProfileCardWrapper, onlyRenderPicker, showRoundTrigger, isViewOnly, reactionPickerAdditionalStyle, noWrap, noRelativeContainer, showSubtleDefaultReactions, reactionPickerTriggerToolipContent, reactionPickerTriggerIcon, }: ReactionsProps) => jsx.JSX.Element>;

package/dist/types-ts4.5/components/Trigger/Trigger.d.ts

@@ -54,9 +54,9 @@ export interface TriggerProps {
      */
     selectionStyle?: XCSS;
     /**
-     * Optional prop for controlling if Trigger displays the ... show more emoji UI
+     * Optional prop for controlling icon inside Trigger
      */
-    showMoreEmojiTriggerUI?: boolean;
+    reactionPickerTriggerIcon?: React.ReactNode;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "26.5.0",
+	"version": "27.0.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -44,13 +44,13 @@
 		"@atlaskit/motion": "^5.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.0.0",
-		"@atlaskit/popup": "2.0.1",
+		"@atlaskit/popup": "2.0.3",
 		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/react-ufo": "^3.1.0",
+		"@atlaskit/react-ufo": "^3.3.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
-		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tokens": "^4.2.0",
+		"@atlaskit/theme": "^18.0.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
 		"@atlaskit/util-service-support": "^6.2.0",