@atlaskit/reactions 22.11.2 → 22.12.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/reactions
 
+## 22.12.0
+
+### Minor Changes
+
+- [#137371](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137371)
+  [`1eb8eea490922`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1eb8eea490922) -
+  [ux] Added props for applying subtle styling to reactions summary and picker. Added prop for
+  displaying the full "Add a reaction" text to the button UI for the reactions picker. Added prop
+  for hiding default reactions displayed when there is no existing reaction on the page.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.11.2
 
 ### Patch 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 = "22.11.2";
+var packageVersion = "22.12.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -91,7 +91,11 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
     tooltipContent = _props$tooltipContent === void 0 ? (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction) : _props$tooltipContent,
     emojiPickerSize = props.emojiPickerSize,
     _props$showOpaqueBack = props.showOpaqueBackground,
-    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack;
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack,
+    _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
+    _props$showAddReactio = props.showAddReactionText,
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -223,7 +227,9 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
         miniMode: miniMode,
         disabled: disabled,
         tooltipContent: settings.isOpen ? null : tooltipContent,
-        showOpaqueBackground: showOpaqueBackground
+        showOpaqueBackground: showOpaqueBackground,
+        showAddReactionText: showAddReactionText,
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
       })
     );
   }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {

package/dist/cjs/components/ReactionSummary/ReactionSummaryButton.js

@@ -38,6 +38,9 @@ var opaqueBackgroundStyles = (0, _primitives.xcss)({
 var containerStyle = (0, _primitives.xcss)({
   position: 'relative'
 });
+var hideBorderStyle = (0, _primitives.xcss)({
+  border: 'none'
+});
 /**
  * Test id for summary reaction wrapper button
  */
@@ -57,7 +60,9 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     emojisToShow = _ref$emojisToShow === void 0 ? 3 : _ref$emojisToShow,
     onClick = _ref.onClick,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS;
   var intl = (0, _reactIntlNext.useIntl)();
 
   // Helper function to sort reactions by count and return top N
@@ -75,6 +80,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     return getTopReactions(reactions, emojisToShow);
   }, [emojisToShow, reactions]);
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  var subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
   return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     xcss: containerStyle,
     ref: ref
@@ -82,7 +88,7 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(_i18n.messages.summary),
-    additionalStyles: buttonStyles
+    additionalStyles: [].concat(buttonStyles, subtleSummaryStyles)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.050",
     xcss: buttonStyle

package/dist/cjs/components/ReactionSummary/ReactionSummaryView.js

@@ -41,7 +41,9 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
     onReactionFocused = _ref.onReactionFocused,
     onReactionMouseEnter = _ref.onReactionMouseEnter,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -82,7 +84,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         emojiProvider: emojiProvider,
         reactions: reactions,
         onClick: handleSummaryClick,
-        showOpaqueBackground: showOpaqueBackground
+        showOpaqueBackground: showOpaqueBackground,
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
       }));
     }
   });

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

@@ -124,7 +124,13 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
     summaryViewPlacement = _ref.summaryViewPlacement,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    _ref$showAddReactionT = _ref.showAddReactionText,
+    showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
+    _ref$hideDefaultReact = _ref.hideDefaultReactions,
+    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -252,9 +258,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
   var memorizedReactions = (0, _react.useMemo)(function () {
     //
     /**
-     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
+     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty and default reactions not hidden => return the current list of reactions
      */
-    if (reactions.length > 0 || !quickReactionEmojis) {
+    if (reactions.length === 0 && hideDefaultReactions || reactions.length > 0 || !quickReactionEmojis) {
       return reactions;
     }
 
@@ -276,7 +282,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       };
     });
     return reactions.concat(items);
-  }, [quickReactionEmojis, reactions]);
+  }, [quickReactionEmojis, reactions, hideDefaultReactions]);
   var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -296,7 +302,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
       placement: summaryViewPlacement,
-      showOpaqueBackground: showOpaqueBackground
+      showOpaqueBackground: showOpaqueBackground,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
     })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,
@@ -326,7 +333,9 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       tooltipContent: getTooltip(status, errorMessage),
       emojiPickerSize: emojiPickerSize,
       miniMode: miniMode,
-      showOpaqueBackground: showOpaqueBackground
+      showOpaqueBackground: showOpaqueBackground,
+      showAddReactionText: showAddReactionText,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
     }), allowUserDialog && reactions.length > 0 && (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Trigger = exports.RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
 var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -24,6 +25,13 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
  */
 var RENDER_TOOLTIP_TRIGGER_TESTID = exports.RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 var RENDER_TRIGGER_BUTTON_TESTID = exports.RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+var i18n = (0, _reactIntlNext.defineMessages)({
+  addReaction: {
+    id: 'reaction-picker-trigger.add.reaction.message',
+    description: 'Message displayed when there are no page reactions existing on the page.',
+    defaultMessage: 'Add a reaction'
+  }
+});
 var triggerStyles = (0, _primitives.xcss)({
   minWidth: '32px',
   height: '24px',
@@ -36,6 +44,13 @@ var triggerStyles = (0, _primitives.xcss)({
   alignItems: 'center',
   lineHeight: '16px'
 });
+var subtleTriggerStyles = (0, _primitives.xcss)({
+  minWidth: '24px',
+  border: 'none'
+});
+var expandedTriggerStyles = (0, _primitives.xcss)({
+  minWidth: '110px'
+});
 var triggerStylesRefresh = (0, _primitives.xcss)({
   borderRadius: 'border.radius'
 });
@@ -69,11 +84,18 @@ var miniModeStyles = (0, _primitives.xcss)({
   border: 'none',
   borderRadius: 'border.radius'
 });
+var addReactionMessageStyles = (0, _primitives.xcss)({
+  fontSize: '12px',
+  color: 'color.text.subtle',
+  marginLeft: 'space.050'
+});
 
 /**
  * Render an emoji button to open the reactions select picker
  */
 var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var onClick = props.onClick,
     miniMode = props.miniMode,
     tooltipContent = props.tooltipContent,
@@ -82,7 +104,11 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     _props$ariaAttributes = props.ariaAttributes,
     ariaAttributes = _props$ariaAttributes === void 0 ? {} : _props$ariaAttributes,
     _props$showOpaqueBack = props.showOpaqueBackground,
-    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack;
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack,
+    _props$showAddReactio = props.showAddReactionText,
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
+    _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -93,7 +119,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     content: tooltipContent
   }, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
@@ -101,5 +127,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     primaryColor: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
     size: "small",
     label: "Add reaction"
-  })));
+  }), showAddReactionText && (0, _react2.jsx)(_primitives.Box, {
+    xcss: addReactionMessageStyles
+  }, formatMessage(i18n.addReaction))));
 });

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 = "22.11.2";
+const packageVersion = "22.12.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -76,7 +76,9 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     onCancel = () => {},
     tooltipContent = jsx(FormattedMessage, messages.addReaction),
     emojiPickerSize,
-    showOpaqueBackground = false
+    showOpaqueBackground = false,
+    subtleReactionsSummaryAndPicker = false,
+    showAddReactionText = false
   } = props;
   const [triggerRef, setTriggerRef] = useState(null);
 
@@ -202,7 +204,9 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     miniMode: miniMode,
     disabled: disabled,
     tooltipContent: settings.isOpen ? null : tooltipContent,
-    showOpaqueBackground: showOpaqueBackground
+    showOpaqueBackground: showOpaqueBackground,
+    showAddReactionText: showAddReactionText,
+    subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
   })), settings.isOpen && jsx(PopperWrapper, {
     settings: settings
   }, settings.showFullPicker ? jsx(EmojiPicker, {

package/dist/es2019/components/ReactionSummary/ReactionSummaryButton.js

@@ -27,6 +27,9 @@ const opaqueBackgroundStyles = xcss({
 const containerStyle = xcss({
   position: 'relative'
 });
+const hideBorderStyle = xcss({
+  border: 'none'
+});
 /**
  * Test id for summary reaction wrapper button
  */
@@ -43,7 +46,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   reactions = [],
   emojisToShow = 3,
   onClick,
-  showOpaqueBackground = false
+  showOpaqueBackground = false,
+  subtleReactionsSummaryAndPicker = false
 }, ref) => {
   const intl = useIntl();
 
@@ -58,6 +62,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
   }, [reactions]);
   const topReactions = useMemo(() => getTopReactions(reactions, emojisToShow), [emojisToShow, reactions]);
   const buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  const subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
   return /*#__PURE__*/React.createElement(Box, {
     xcss: containerStyle,
     ref: ref
@@ -65,7 +70,7 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
-    additionalStyles: buttonStyles
+    additionalStyles: [...buttonStyles, ...subtleSummaryStyles]
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     xcss: buttonStyle

package/dist/es2019/components/ReactionSummary/ReactionSummaryView.js

@@ -25,7 +25,8 @@ export const ReactionSummaryView = ({
   onReactionClick,
   onReactionFocused,
   onReactionMouseEnter,
-  showOpaqueBackground = false
+  showOpaqueBackground = false,
+  subtleReactionsSummaryAndPicker = false
 }) => {
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
@@ -55,7 +56,8 @@ export const ReactionSummaryView = ({
       emojiProvider: emojiProvider,
       reactions: reactions,
       onClick: handleSummaryClick,
-      showOpaqueBackground: showOpaqueBackground
+      showOpaqueBackground: showOpaqueBackground,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
     }))
   });
 };

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

@@ -97,7 +97,10 @@ export const Reactions = /*#__PURE__*/React.memo(({
   summaryViewEnabled = false,
   summaryViewThreshold = 3,
   summaryViewPlacement,
-  showOpaqueBackground = false
+  showOpaqueBackground = false,
+  subtleReactionsSummaryAndPicker = false,
+  showAddReactionText = false,
+  hideDefaultReactions = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -222,9 +225,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
   const memorizedReactions = useMemo(() => {
     //
     /**
-     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
+     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty and default reactions not hidden => return the current list of reactions
      */
-    if (reactions.length > 0 || !quickReactionEmojis) {
+    if (reactions.length === 0 && hideDefaultReactions || reactions.length > 0 || !quickReactionEmojis) {
       return reactions;
     }
 
@@ -244,7 +247,7 @@ export const Reactions = /*#__PURE__*/React.memo(({
       };
     });
     return reactions.concat(items);
-  }, [quickReactionEmojis, reactions]);
+  }, [quickReactionEmojis, reactions, hideDefaultReactions]);
   const shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -264,7 +267,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
       placement: summaryViewPlacement,
-      showOpaqueBackground: showOpaqueBackground
+      showOpaqueBackground: showOpaqueBackground,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
     })) : memorizedReactions.map(reaction => jsx(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -292,7 +296,9 @@ export const Reactions = /*#__PURE__*/React.memo(({
       tooltipContent: getTooltip(status, errorMessage),
       emojiPickerSize: emojiPickerSize,
       miniMode: miniMode,
-      showOpaqueBackground: showOpaqueBackground
+      showOpaqueBackground: showOpaqueBackground,
+      showAddReactionText: showAddReactionText,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
     }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true

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

@@ -4,9 +4,10 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { Pressable, Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -16,6 +17,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
  */
 export const RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 export const RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+const i18n = defineMessages({
+  addReaction: {
+    id: 'reaction-picker-trigger.add.reaction.message',
+    description: 'Message displayed when there are no page reactions existing on the page.',
+    defaultMessage: 'Add a reaction'
+  }
+});
 const triggerStyles = xcss({
   minWidth: '32px',
   height: '24px',
@@ -28,6 +36,13 @@ const triggerStyles = xcss({
   alignItems: 'center',
   lineHeight: '16px'
 });
+const subtleTriggerStyles = xcss({
+  minWidth: '24px',
+  border: 'none'
+});
+const expandedTriggerStyles = xcss({
+  minWidth: '110px'
+});
 const triggerStylesRefresh = xcss({
   borderRadius: 'border.radius'
 });
@@ -61,18 +76,28 @@ const miniModeStyles = xcss({
   border: 'none',
   borderRadius: 'border.radius'
 });
+const addReactionMessageStyles = xcss({
+  fontSize: '12px',
+  color: 'color.text.subtle',
+  marginLeft: 'space.050'
+});
 
 /**
  * Render an emoji button to open the reactions select picker
  */
 export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    formatMessage
+  } = useIntl();
   const {
     onClick,
     miniMode,
     tooltipContent,
     disabled = false,
     ariaAttributes = {},
-    showOpaqueBackground = false
+    showOpaqueBackground = false,
+    showAddReactionText = false,
+    subtleReactionsSummaryAndPicker = false
   } = props;
   const handleMouseDown = (e, analyticsEvent) => {
     if (onClick && !disabled) {
@@ -84,7 +109,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
@@ -92,5 +117,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     primaryColor: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
     size: "small",
     label: "Add reaction"
-  })));
+  }), showAddReactionText && jsx(Box, {
+    xcss: addReactionMessageStyles
+  }, formatMessage(i18n.addReaction))));
 });

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 = "22.11.2";
+var packageVersion = "22.12.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -84,7 +84,11 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
     tooltipContent = _props$tooltipContent === void 0 ? jsx(FormattedMessage, messages.addReaction) : _props$tooltipContent,
     emojiPickerSize = props.emojiPickerSize,
     _props$showOpaqueBack = props.showOpaqueBackground,
-    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack;
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack,
+    _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
+    _props$showAddReactio = props.showAddReactionText,
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
@@ -216,7 +220,9 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
         miniMode: miniMode,
         disabled: disabled,
         tooltipContent: settings.isOpen ? null : tooltipContent,
-        showOpaqueBackground: showOpaqueBackground
+        showOpaqueBackground: showOpaqueBackground,
+        showAddReactionText: showAddReactionText,
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
       })
     );
   }), settings.isOpen && jsx(PopperWrapper, {

package/dist/esm/components/ReactionSummary/ReactionSummaryButton.js

@@ -28,6 +28,9 @@ var opaqueBackgroundStyles = xcss({
 var containerStyle = xcss({
   position: 'relative'
 });
+var hideBorderStyle = xcss({
+  border: 'none'
+});
 /**
  * Test id for summary reaction wrapper button
  */
@@ -47,7 +50,9 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     emojisToShow = _ref$emojisToShow === void 0 ? 3 : _ref$emojisToShow,
     onClick = _ref.onClick,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS;
   var intl = useIntl();
 
   // Helper function to sort reactions by count and return top N
@@ -65,6 +70,7 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     return getTopReactions(reactions, emojisToShow);
   }, [emojisToShow, reactions]);
   var buttonStyles = showOpaqueBackground ? [opaqueBackgroundStyles] : [];
+  var subtleSummaryStyles = subtleReactionsSummaryAndPicker ? [hideBorderStyle] : [];
   return /*#__PURE__*/React.createElement(Box, {
     xcss: containerStyle,
     ref: ref
@@ -72,7 +78,7 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     onClick: onClick,
     testId: RENDER_SUMMARY_BUTTON_TESTID,
     ariaLabel: intl.formatMessage(messages.summary),
-    additionalStyles: buttonStyles
+    additionalStyles: [].concat(buttonStyles, subtleSummaryStyles)
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
     xcss: buttonStyle

package/dist/esm/components/ReactionSummary/ReactionSummaryView.js

@@ -31,7 +31,9 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
     onReactionFocused = _ref.onReactionFocused,
     onReactionMouseEnter = _ref.onReactionMouseEnter,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isSummaryPopupOpen = _useState2[0],
@@ -72,7 +74,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         emojiProvider: emojiProvider,
         reactions: reactions,
         onClick: handleSummaryClick,
-        showOpaqueBackground: showOpaqueBackground
+        showOpaqueBackground: showOpaqueBackground,
+        subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
       }));
     }
   });

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

@@ -111,7 +111,13 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     summaryViewThreshold = _ref$summaryViewThres === void 0 ? 3 : _ref$summaryViewThres,
     summaryViewPlacement = _ref.summaryViewPlacement,
     _ref$showOpaqueBackgr = _ref.showOpaqueBackground,
-    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr;
+    showOpaqueBackground = _ref$showOpaqueBackgr === void 0 ? false : _ref$showOpaqueBackgr,
+    _ref$subtleReactionsS = _ref.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _ref$subtleReactionsS === void 0 ? false : _ref$subtleReactionsS,
+    _ref$showAddReactionT = _ref.showAddReactionText,
+    showAddReactionText = _ref$showAddReactionT === void 0 ? false : _ref$showAddReactionT,
+    _ref$hideDefaultReact = _ref.hideDefaultReactions,
+    hideDefaultReactions = _ref$hideDefaultReact === void 0 ? false : _ref$hideDefaultReact;
   var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     selectedEmojiId = _useState2[0],
@@ -239,9 +245,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   var memorizedReactions = useMemo(function () {
     //
     /**
-     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty => return the current list of reactions
+     * If reactions not empty, don't show quick reactions Pre defined emoji or if its empty and default reactions not hidden => return the current list of reactions
      */
-    if (reactions.length > 0 || !quickReactionEmojis) {
+    if (reactions.length === 0 && hideDefaultReactions || reactions.length > 0 || !quickReactionEmojis) {
       return reactions;
     }
 
@@ -263,7 +269,7 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       };
     });
     return reactions.concat(items);
-  }, [quickReactionEmojis, reactions]);
+  }, [quickReactionEmojis, reactions, hideDefaultReactions]);
   var shouldShowSummaryView = summaryViewEnabled && memorizedReactions.length >= summaryViewThreshold && reactions.length > 0;
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -283,7 +289,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       onReactionFocused: handleReactionFocused,
       onReactionMouseEnter: handleReactionMouseEnter,
       placement: summaryViewPlacement,
-      showOpaqueBackground: showOpaqueBackground
+      showOpaqueBackground: showOpaqueBackground,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
     })) : memorizedReactions.map(function (reaction) {
       return jsx(Reaction, {
         key: reaction.emojiId,
@@ -313,7 +320,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       tooltipContent: getTooltip(status, errorMessage),
       emojiPickerSize: emojiPickerSize,
       miniMode: miniMode,
-      showOpaqueBackground: showOpaqueBackground
+      showOpaqueBackground: showOpaqueBackground,
+      showAddReactionText: showAddReactionText,
+      subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
     }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true

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

@@ -4,9 +4,10 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsx jsx
  */
 import React from 'react';
+import { defineMessages, useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { Pressable, xcss } from '@atlaskit/primitives';
+import { Pressable, Box, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -16,6 +17,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
  */
 export var RENDER_TOOLTIP_TRIGGER_TESTID = 'render-tooltip-trigger';
 export var RENDER_TRIGGER_BUTTON_TESTID = 'render-trigger-button';
+var i18n = defineMessages({
+  addReaction: {
+    id: 'reaction-picker-trigger.add.reaction.message',
+    description: 'Message displayed when there are no page reactions existing on the page.',
+    defaultMessage: 'Add a reaction'
+  }
+});
 var triggerStyles = xcss({
   minWidth: '32px',
   height: '24px',
@@ -28,6 +36,13 @@ var triggerStyles = xcss({
   alignItems: 'center',
   lineHeight: '16px'
 });
+var subtleTriggerStyles = xcss({
+  minWidth: '24px',
+  border: 'none'
+});
+var expandedTriggerStyles = xcss({
+  minWidth: '110px'
+});
 var triggerStylesRefresh = xcss({
   borderRadius: 'border.radius'
 });
@@ -61,11 +76,18 @@ var miniModeStyles = xcss({
   border: 'none',
   borderRadius: 'border.radius'
 });
+var addReactionMessageStyles = xcss({
+  fontSize: '12px',
+  color: 'color.text.subtle',
+  marginLeft: 'space.050'
+});
 
 /**
  * Render an emoji button to open the reactions select picker
  */
 export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var onClick = props.onClick,
     miniMode = props.miniMode,
     tooltipContent = props.tooltipContent,
@@ -74,7 +96,11 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     _props$ariaAttributes = props.ariaAttributes,
     ariaAttributes = _props$ariaAttributes === void 0 ? {} : _props$ariaAttributes,
     _props$showOpaqueBack = props.showOpaqueBackground,
-    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack;
+    showOpaqueBackground = _props$showOpaqueBack === void 0 ? false : _props$showOpaqueBack,
+    _props$showAddReactio = props.showAddReactionText,
+    showAddReactionText = _props$showAddReactio === void 0 ? false : _props$showAddReactio,
+    _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
+    subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction;
   var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
     if (onClick && !disabled) {
       onClick(e, analyticsEvent);
@@ -85,7 +111,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
+    xcss: [triggerStyles, subtleReactionsSummaryAndPicker && subtleTriggerStyles, showAddReactionText && expandedTriggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref
@@ -93,5 +119,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     primaryColor: disabled ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon, #44546F)",
     size: "small",
     label: "Add reaction"
-  })));
+  }), showAddReactionText && jsx(Box, {
+    xcss: addReactionMessageStyles
+  }, formatMessage(i18n.addReaction))));
 });

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

@@ -60,6 +60,14 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary and picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    showAddReactionText?: boolean;
 }
 /**
  * Picker component for adding reactions

package/dist/types/components/ReactionSummary/ReactionSummaryButton.d.ts

@@ -13,6 +13,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary button
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

package/dist/types/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -32,6 +32,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -114,6 +114,18 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary and picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    showAddReactionText?: boolean;
+    /**
+     * Optional prop for hiding default reactions displayed when there are no existing reactions
+     */
+    hideDefaultReactions?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -122,4 +134,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -36,6 +36,14 @@ export interface TriggerProps {
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    showAddReactionText?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

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

@@ -60,6 +60,14 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary and picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    showAddReactionText?: boolean;
 }
 /**
  * Picker component for adding reactions

package/dist/types-ts4.5/components/ReactionSummary/ReactionSummaryButton.d.ts

@@ -13,6 +13,10 @@ interface ReactionSummaryButtonProps extends Pick<ReactionsProps, 'emojiProvider
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary button
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Test id for summary reaction wrapper button

package/dist/types-ts4.5/components/ReactionSummary/ReactionSummaryView.d.ts

@@ -32,6 +32,10 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, handleOpenReactionsDialog, allowUserDialog, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, }: ReactionSummaryViewProps) => JSX.Element;
 export {};

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

@@ -114,6 +114,18 @@ export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmoji
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction summary and picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    showAddReactionText?: boolean;
+    /**
+     * Optional prop for hiding default reactions displayed when there are no existing reactions
+     */
+    hideDefaultReactions?: boolean;
 }
 /**
  * Get content of the tooltip
@@ -122,4 +134,4 @@ export declare function getTooltip(status: ReactionStatus, errorMessage?: string
 /**
  * Renders list of reactions
  */
-export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, }: ReactionsProps) => jsx.JSX.Element>;
+export declare const Reactions: React.MemoExoticComponent<({ flash, particleEffectByEmoji, status, errorMessage, loadReaction, quickReactionEmojis, pickerQuickReactionEmojiIds, getReactionDetails, onReactionHover, onSelection, reactions, emojiProvider, allowAllEmojis, onReactionClick, allowUserDialog, onDialogOpenCallback, onDialogCloseCallback, onDialogSelectReactionCallback, emojiPickerSize, miniMode, summaryViewEnabled, summaryViewThreshold, summaryViewPlacement, showOpaqueBackground, subtleReactionsSummaryAndPicker, showAddReactionText, hideDefaultReactions, }: ReactionsProps) => jsx.JSX.Element>;

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

@@ -36,6 +36,14 @@ export interface TriggerProps {
      * Optional prop for using an opaque button background instead of a transparent background
      */
     showOpaqueBackground?: boolean;
+    /**
+     * Optional prop for displaying text to add a reaction
+     */
+    showAddReactionText?: boolean;
+    /**
+     * Optional prop for applying subtle styling to reaction picker
+     */
+    subtleReactionsSummaryAndPicker?: boolean;
 }
 /**
  * Render an emoji button to open the reactions select picker

package/dist/types-ts4.5/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { type ReactionsProps, type ReactionPickerProps } from '../../components';
 import { ReactionStatus, type Actions, type State, type StorePropInput } from '../../types';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode' | 'summaryViewEnabled' | 'subtleReactionsSummaryAndPicker'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.11.2",
+	"version": "22.12.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
 		"@atlaskit/avatar": "^21.15.0",
 		"@atlaskit/button": "^20.1.0",
 		"@atlaskit/emoji": "^67.7.0",
-		"@atlaskit/icon": "^22.15.0",
+		"@atlaskit/icon": "^22.16.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",