@atlaskit/reactions 24.6.0 → 24.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/reactions
 
+## 24.7.0
+
+### Minor Changes
+
+- [#110663](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/110663)
+  [`ec41000e84d80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ec41000e84d80) -
+  [ux] Update styling of Reactions Dialog entrypoint and the Dialog itself
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 24.6.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 = "24.6.0";
+var packageVersion = "24.7.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -29,6 +29,9 @@ var _styles = require("./styles");
 var userDescriptionStyle = (0, _primitives.xcss)({
   marginLeft: 'space.200'
 });
+var profileWrapperStyle = (0, _primitives.xcss)({
+  marginLeft: 'space.0'
+});
 var ReactionView = exports.ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
@@ -108,17 +111,19 @@ var ReactionView = exports.ReactionView = function ReactionView(_ref) {
         (0, _react2.jsx)("li", {
           css: _styles.userStyle,
           key: user.id
-        }, ProfileCardWrapper && user.accountId ? (0, _react2.jsx)(ProfileCardWrapper, {
+        }, ProfileCardWrapper && user.accountId ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: profileWrapperStyle
+        }, (0, _react2.jsx)(ProfileCardWrapper, {
           userId: user.accountId,
           isAnonymous: false,
           canViewProfile: true,
           position: "left-start"
         }, (0, _react2.jsx)(_Avatar.default, {
-          size: "large",
+          size: "medium",
           src: profile,
           testId: "profile"
-        })) : (0, _react2.jsx)(_Avatar.default, {
-          size: "large",
+        }))) : (0, _react2.jsx)(_Avatar.default, {
+          size: "medium",
           src: profile,
           testId: "profile"
         }), (0, _react2.jsx)(_primitives.Flex, {

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

@@ -26,7 +26,13 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var emojiStyles = (0, _primitives.xcss)({
-  minWidth: '36px'
+  transformOrigin: 'center center 0',
+  paddingInlineStart: 'space.100',
+  paddingBlock: 'space.050',
+  paddingInlineEnd: 'space.050'
+});
+var counterStyle = (0, _primitives.xcss)({
+  marginTop: 'space.025'
 });
 var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
@@ -103,9 +109,11 @@ var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
       emojiId: emojiId,
       fitToHeight: 16,
       showTooltip: true
-    })), (0, _react2.jsx)(_Counter.Counter, {
+    })), (0, _react2.jsx)(_primitives.Box, {
+      xcss: counterStyle
+    }, (0, _react2.jsx)(_Counter.Counter, {
       value: reaction.count
-    }))));
+    })))));
   }))), reactions.map(function (reaction) {
     return (0, _react2.jsx)(_ReactionView.ReactionView, {
       key: reaction.emojiId,

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

@@ -110,7 +110,7 @@ var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
   p: {
     margin: 0,
     color: "".concat("var(--ds-text, ".concat(_colors.N800, ")")),
-    font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '20px',
@@ -138,7 +138,7 @@ var userListStyle = exports.userListStyle = (0, _react.css)({
 var userStyle = exports.userStyle = (0, _react.css)({
   display: 'flex',
   alignItems: 'center',
-  padding: "var(--ds-space-100, 8px)".concat(" 0px ", "var(--ds-space-100, 8px)", " 0px"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0px ", "var(--ds-space-050, 4px)", " 0px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> span': {
     marginLeft: "var(--ds-space-200, 16px)"

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

@@ -23,6 +23,9 @@ var summaryPopupStyles = (0, _primitives.xcss)({
   paddingTop: 'space.050',
   maxWidth: '325px'
 });
+var viewAllButtonStyling = (0, _primitives.xcss)({
+  marginTop: 'space.050'
+});
 
 /**
  * Test id for the Reactions summary view popup
@@ -64,7 +67,8 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
         xcss: summaryPopupStyles,
         testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
         space: "space.025",
-        shouldWrap: true
+        shouldWrap: true,
+        alignBlock: "center"
       }, reactions.map(function (reaction) {
         return /*#__PURE__*/_react.default.createElement(_Reaction.Reaction, {
           key: reaction.emojiId,
@@ -76,15 +80,18 @@ var ReactionSummaryView = exports.ReactionSummaryView = function ReactionSummary
           flash: flash[reaction.emojiId],
           showParticleEffect: particleEffectByEmoji[reaction.emojiId]
         });
-      }), allowUserDialog && /*#__PURE__*/_react.default.createElement(_new.default, {
+      }), allowUserDialog && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+        xcss: viewAllButtonStyling
+      }, /*#__PURE__*/_react.default.createElement(_new.default, {
         appearance: "subtle",
         onClick: function onClick() {
           return handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
-        }
+        },
+        spacing: "compact"
       }, /*#__PURE__*/_react.default.createElement(_primitives.Text, {
         color: "color.text.subtlest",
         weight: "medium"
-      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted))));
+      }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted)))));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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

@@ -8,14 +8,16 @@ Object.defineProperty(exports, "__esModule", {
 exports.Reactions = exports.RENDER_VIEWALL_REACTED_USERS_DIALOG = exports.RENDER_REACTIONS_TESTID = exports.RENDER_REACTIONS_SUMMARY_TESTID = void 0;
 exports.getTooltip = getTooltip;
 exports.ufoExperiences = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
-var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _primitives = require("@atlaskit/primitives");
 var _analytics = require("../../analytics");
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
@@ -35,6 +37,10 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+var tooltipStyle = (0, _primitives.xcss)({
+  paddingLeft: 'space.050'
+});
+
 /**
  * Set of all available UFO experiences relating to reactions dialog
  */
@@ -348,21 +354,19 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_tooltip.default, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_primitives.Box, {
+      xcss: tooltipStyle
+    }, (0, _react2.jsx)(_tooltip.default, {
       content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
-    }, (0, _react2.jsx)(_standardButton.default
-    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
-    // https://product-fabric.atlassian.net/browse/DSP-18982
-    , {
-      appearance: "subtle-link",
-      onClick: handleOpenAllReactionsDialog
-      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: _styles.seeWhoReactedStyle,
-      testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-    }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted))), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
+    }, function (tooltipProps) {
+      return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, tooltipProps, {
+        appearance: "subtle",
+        spacing: "compact",
+        onClick: handleOpenAllReactionsDialog,
+        testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
+      }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted));
+    })), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_ReactionDialog.ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
       reactions: memorizedReactions,
       emojiProvider: emojiProvider,

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.seeWhoReactedStyle = exports.reactionPickerStyle = void 0;
+exports.wrapperStyle = exports.reactionPickerStyle = void 0;
 var _react = require("@emotion/react");
 /**
  * @jsxRuntime classic
@@ -17,17 +17,6 @@ var reactionPickerStyle = exports.reactionPickerStyle = (0, _react.css)({
   marginTop: "var(--ds-space-050, 4px)"
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var seeWhoReactedStyle = exports.seeWhoReactedStyle = (0, _react.css)({
-  height: '24px',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '24px',
-  paddingLeft: 0,
-  paddingRight: 0,
-  marginTop: "var(--ds-space-050, 4px)",
-  marginLeft: "var(--ds-space-050, 4px)"
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var wrapperStyle = exports.wrapperStyle = (0, _react.css)({
   display: 'flex',

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

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

@@ -11,12 +11,15 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { useTabPanel } from '@atlaskit/tabs';
-import { Text, Flex, xcss } from '@atlaskit/primitives';
+import { Box, Text, Flex, xcss } from '@atlaskit/primitives';
 import { messages } from '../../shared/i18n';
 import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
 const userDescriptionStyle = xcss({
   marginLeft: 'space.200'
 });
+const profileWrapperStyle = xcss({
+  marginLeft: 'space.0'
+});
 export const ReactionView = ({
   selectedEmojiId,
   emojiProvider,
@@ -77,17 +80,19 @@ export const ReactionView = ({
         jsx("li", {
           css: userStyle,
           key: user.id
-        }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
+        }, ProfileCardWrapper && user.accountId ? jsx(Box, {
+          xcss: profileWrapperStyle
+        }, jsx(ProfileCardWrapper, {
           userId: user.accountId,
           isAnonymous: false,
           canViewProfile: true,
           position: "left-start"
         }, jsx(Avatar, {
-          size: "large",
+          size: "medium",
           src: profile,
           testId: "profile"
-        })) : jsx(Avatar, {
-          size: "large",
+        }))) : jsx(Avatar, {
+          size: "medium",
           src: profile,
           testId: "profile"
         }), jsx(Flex, {

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

@@ -13,7 +13,13 @@ import { Counter } from '../Counter';
 import { customTabWrapper, customTabListStyles } from './styles';
 import { ReactionView } from './ReactionView';
 const emojiStyles = xcss({
-  minWidth: '36px'
+  transformOrigin: 'center center 0',
+  paddingInlineStart: 'space.100',
+  paddingBlock: 'space.050',
+  paddingInlineEnd: 'space.050'
+});
+const counterStyle = xcss({
+  marginTop: 'space.025'
 });
 export const ReactionsList = ({
   reactions,
@@ -85,9 +91,11 @@ export const ReactionsList = ({
       emojiId: emojiId,
       fitToHeight: 16,
       showTooltip: true
-    })), jsx(Counter, {
+    })), jsx(Box, {
+      xcss: counterStyle
+    }, jsx(Counter, {
       value: reaction.count
-    }))));
+    })))));
   }))), reactions.map(reaction => jsx(ReactionView, {
     key: reaction.emojiId,
     reaction: reaction,

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

@@ -97,7 +97,7 @@ export const reactionViewStyle = css({
   p: {
     margin: 0,
     color: `${`var(--ds-text, ${N800})`}`,
-    font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '20px',
@@ -125,7 +125,7 @@ export const userListStyle = css({
 export const userStyle = css({
   display: 'flex',
   alignItems: 'center',
-  padding: `${"var(--ds-space-100, 8px)"} 0px ${"var(--ds-space-100, 8px)"} 0px`,
+  padding: `${"var(--ds-space-050, 4px)"} 0px ${"var(--ds-space-050, 4px)"} 0px`,
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> span': {
     marginLeft: "var(--ds-space-200, 16px)"

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Inline, Text, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
 import Button from '@atlaskit/button/new';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
@@ -12,6 +12,9 @@ const summaryPopupStyles = xcss({
   paddingTop: 'space.050',
   maxWidth: '325px'
 });
+const viewAllButtonStyling = xcss({
+  marginTop: 'space.050'
+});
 
 /**
  * Test id for the Reactions summary view popup
@@ -40,7 +43,8 @@ export const ReactionSummaryView = ({
       xcss: summaryPopupStyles,
       testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
       space: "space.025",
-      shouldWrap: true
+      shouldWrap: true,
+      alignBlock: "center"
     }, reactions.map(reaction => /*#__PURE__*/React.createElement(Reaction, {
       key: reaction.emojiId,
       reaction: reaction,
@@ -50,13 +54,16 @@ export const ReactionSummaryView = ({
       onMouseEnter: onReactionMouseEnter,
       flash: flash[reaction.emojiId],
       showParticleEffect: particleEffectByEmoji[reaction.emojiId]
-    })), allowUserDialog && /*#__PURE__*/React.createElement(Button, {
+    })), allowUserDialog && /*#__PURE__*/React.createElement(Box, {
+      xcss: viewAllButtonStyling
+    }, /*#__PURE__*/React.createElement(Button, {
       appearance: "subtle",
-      onClick: () => handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId)
+      onClick: () => handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId),
+      spacing: "compact"
     }, /*#__PURE__*/React.createElement(Text, {
       color: "color.text.subtlest",
       weight: "medium"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted)))),
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted))))),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -8,8 +9,9 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
 import Tooltip from '@atlaskit/tooltip';
+import { Box, xcss } from '@atlaskit/primitives';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
@@ -19,7 +21,10 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import { ReactionSummaryView } from '../ReactionSummary/';
-import { reactionPickerStyle, seeWhoReactedStyle, wrapperStyle } from './styles';
+import { reactionPickerStyle, wrapperStyle } from './styles';
+const tooltipStyle = xcss({
+  paddingLeft: 'space.050'
+});
 
 /**
  * Set of all available UFO experiences relating to reactions dialog
@@ -309,21 +314,17 @@ export const Reactions = /*#__PURE__*/React.memo(({
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
+      xcss: tooltipStyle
+    }, jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
-    }, jsx(Button
-    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
-    // https://product-fabric.atlassian.net/browse/DSP-18982
-    , {
-      appearance: "subtle-link",
-      onClick: handleOpenAllReactionsDialog
-      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: seeWhoReactedStyle,
+    }, tooltipProps => jsx(Button, _extends({}, tooltipProps, {
+      appearance: "subtle",
+      spacing: "compact",
+      onClick: handleOpenAllReactionsDialog,
       testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-    }, jsx(FormattedMessage, messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
+    }), jsx(FormattedMessage, messages.seeWhoReacted)))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
       reactions: memorizedReactions,
       emojiProvider: emojiProvider,

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

@@ -10,17 +10,6 @@ export const reactionPickerStyle = css({
   marginTop: "var(--ds-space-050, 4px)"
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const seeWhoReactedStyle = css({
-  height: '24px',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '24px',
-  paddingLeft: 0,
-  paddingRight: 0,
-  marginTop: "var(--ds-space-050, 4px)",
-  marginLeft: "var(--ds-space-050, 4px)"
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const wrapperStyle = css({
   display: 'flex',

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

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

@@ -14,12 +14,15 @@ import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { useTabPanel } from '@atlaskit/tabs';
-import { Text, Flex, xcss } from '@atlaskit/primitives';
+import { Box, Text, Flex, xcss } from '@atlaskit/primitives';
 import { messages } from '../../shared/i18n';
 import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
 var userDescriptionStyle = xcss({
   marginLeft: 'space.200'
 });
+var profileWrapperStyle = xcss({
+  marginLeft: 'space.0'
+});
 export var ReactionView = function ReactionView(_ref) {
   var selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
@@ -99,17 +102,19 @@ export var ReactionView = function ReactionView(_ref) {
         jsx("li", {
           css: userStyle,
           key: user.id
-        }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
+        }, ProfileCardWrapper && user.accountId ? jsx(Box, {
+          xcss: profileWrapperStyle
+        }, jsx(ProfileCardWrapper, {
           userId: user.accountId,
           isAnonymous: false,
           canViewProfile: true,
           position: "left-start"
         }, jsx(Avatar, {
-          size: "large",
+          size: "medium",
           src: profile,
           testId: "profile"
-        })) : jsx(Avatar, {
-          size: "large",
+        }))) : jsx(Avatar, {
+          size: "medium",
           src: profile,
           testId: "profile"
         }), jsx(Flex, {

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

@@ -14,7 +14,13 @@ import { Counter } from '../Counter';
 import { customTabWrapper, customTabListStyles } from './styles';
 import { ReactionView } from './ReactionView';
 var emojiStyles = xcss({
-  minWidth: '36px'
+  transformOrigin: 'center center 0',
+  paddingInlineStart: 'space.100',
+  paddingBlock: 'space.050',
+  paddingInlineEnd: 'space.050'
+});
+var counterStyle = xcss({
+  marginTop: 'space.025'
 });
 export var ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
@@ -91,9 +97,11 @@ export var ReactionsList = function ReactionsList(_ref) {
       emojiId: emojiId,
       fitToHeight: 16,
       showTooltip: true
-    })), jsx(Counter, {
+    })), jsx(Box, {
+      xcss: counterStyle
+    }, jsx(Counter, {
       value: reaction.count
-    }))));
+    })))));
   }))), reactions.map(function (reaction) {
     return jsx(ReactionView, {
       key: reaction.emojiId,

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

@@ -103,7 +103,7 @@ export var reactionViewStyle = css({
   p: {
     margin: 0,
     color: "".concat("var(--ds-text, ".concat(N800, ")")),
-    font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: "var(--ds-font-heading-xsmall, normal 600 14px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     fontWeight: "var(--ds-font-weight-semibold, 600)",
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
     lineHeight: '20px',
@@ -131,7 +131,7 @@ export var userListStyle = css({
 export var userStyle = css({
   display: 'flex',
   alignItems: 'center',
-  padding: "var(--ds-space-100, 8px)".concat(" 0px ", "var(--ds-space-100, 8px)", " 0px"),
+  padding: "var(--ds-space-050, 4px)".concat(" 0px ", "var(--ds-space-050, 4px)", " 0px"),
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> span': {
     marginLeft: "var(--ds-space-200, 16px)"

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

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useCallback, useState } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Inline, Text, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
 import Button from '@atlaskit/button/new';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
@@ -13,6 +13,9 @@ var summaryPopupStyles = xcss({
   paddingTop: 'space.050',
   maxWidth: '325px'
 });
+var viewAllButtonStyling = xcss({
+  marginTop: 'space.050'
+});
 
 /**
  * Test id for the Reactions summary view popup
@@ -54,7 +57,8 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
         xcss: summaryPopupStyles,
         testId: RENDER_SUMMARY_VIEW_POPUP_TESTID,
         space: "space.025",
-        shouldWrap: true
+        shouldWrap: true,
+        alignBlock: "center"
       }, reactions.map(function (reaction) {
         return /*#__PURE__*/React.createElement(Reaction, {
           key: reaction.emojiId,
@@ -66,15 +70,18 @@ export var ReactionSummaryView = function ReactionSummaryView(_ref) {
           flash: flash[reaction.emojiId],
           showParticleEffect: particleEffectByEmoji[reaction.emojiId]
         });
-      }), allowUserDialog && /*#__PURE__*/React.createElement(Button, {
+      }), allowUserDialog && /*#__PURE__*/React.createElement(Box, {
+        xcss: viewAllButtonStyling
+      }, /*#__PURE__*/React.createElement(Button, {
         appearance: "subtle",
         onClick: function onClick() {
           return handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
-        }
+        },
+        spacing: "compact"
       }, /*#__PURE__*/React.createElement(Text, {
         color: "color.text.subtlest",
         weight: "medium"
-      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted))));
+      }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted)))));
     },
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,

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

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
  * @jsxRuntime classic
@@ -9,8 +10,9 @@ import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Button from '@atlaskit/button/standard-button';
+import Button from '@atlaskit/button/new';
 import Tooltip from '@atlaskit/tooltip';
+import { Box, xcss } from '@atlaskit/primitives';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
 import { messages } from '../../shared/i18n';
@@ -20,7 +22,10 @@ import { Reaction } from '../Reaction';
 import { ReactionsDialog } from '../ReactionDialog';
 import { ReactionPicker } from '../ReactionPicker';
 import { ReactionSummaryView } from '../ReactionSummary/';
-import { reactionPickerStyle, seeWhoReactedStyle, wrapperStyle } from './styles';
+import { reactionPickerStyle, wrapperStyle } from './styles';
+var tooltipStyle = xcss({
+  paddingLeft: 'space.050'
+});
 
 /**
  * Set of all available UFO experiences relating to reactions dialog
@@ -335,21 +340,19 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       showOpaqueBackground: showOpaqueBackground,
       showAddReactionText: showAddReactionText,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker
-    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Tooltip, {
+    }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && jsx(Box, {
+      xcss: tooltipStyle
+    }, jsx(Tooltip, {
       content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
       hideTooltipOnClick: true
-    }, jsx(Button
-    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
-    // https://product-fabric.atlassian.net/browse/DSP-18982
-    , {
-      appearance: "subtle-link",
-      onClick: handleOpenAllReactionsDialog
-      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      css: seeWhoReactedStyle,
-      testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-    }, jsx(FormattedMessage, messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
+    }, function (tooltipProps) {
+      return jsx(Button, _extends({}, tooltipProps, {
+        appearance: "subtle",
+        spacing: "compact",
+        onClick: handleOpenAllReactionsDialog,
+        testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
+      }), jsx(FormattedMessage, messages.seeWhoReacted));
+    })), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
       selectedEmojiId: selectedEmojiId,
       reactions: memorizedReactions,
       emojiProvider: emojiProvider,

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

@@ -10,17 +10,6 @@ export var reactionPickerStyle = css({
   marginTop: "var(--ds-space-050, 4px)"
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var seeWhoReactedStyle = css({
-  height: '24px',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: '24px',
-  paddingLeft: 0,
-  paddingRight: 0,
-  marginTop: "var(--ds-space-050, 4px)",
-  marginLeft: "var(--ds-space-050, 4px)"
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var wrapperStyle = css({
   display: 'flex',

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

@@ -10,4 +10,4 @@ export type RepositionOnUpdateProps = {
         showFullPicker: boolean;
     };
 };
-export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => JSX.Element;
+export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type Placement } from '@atlaskit/popper';
 import { type ReactionClick, type ReactionFocused, type ReactionMouseEnter } from '../../types';
 import { type ReactionsProps } from '../Reactions';
@@ -36,5 +36,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     handleOpenReactionsDialog?: (emojiId: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,2 @@
 export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
-export declare const seeWhoReactedStyle: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -20,4 +20,4 @@ export interface ConnectedReactionPickerProps extends Omit<ReactionPickerProps,
 /**
  * Reaction Picker component
  */
-export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => JSX.Element;
+export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => React.JSX.Element;

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

@@ -53,4 +53,4 @@ export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri:
     getReactionDetails: (emojiId: string) => void;
     onSelection: (emojiId: string) => void;
 };
-export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => JSX.Element;
+export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => React.JSX.Element;

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

@@ -10,4 +10,4 @@ export type RepositionOnUpdateProps = {
         showFullPicker: boolean;
     };
 };
-export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => JSX.Element;
+export declare const RepositionOnUpdate: ({ children, update, settings, }: React.PropsWithChildren<RepositionOnUpdateProps>) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { type Placement } from '@atlaskit/popper';
 import { type ReactionClick, type ReactionFocused, type ReactionMouseEnter } from '../../types';
 import { type ReactionsProps } from '../Reactions';
@@ -36,5 +36,5 @@ interface ReactionSummaryViewProps extends Pick<ReactionsProps, 'emojiProvider'
      */
     handleOpenReactionsDialog?: (emojiId: string) => void;
 }
-export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => JSX.Element;
+export declare const ReactionSummaryView: ({ emojiProvider, reactions, flash, particleEffectByEmoji, placement, onReactionClick, onReactionFocused, onReactionMouseEnter, showOpaqueBackground, subtleReactionsSummaryAndPicker, handleOpenReactionsDialog, allowUserDialog, }: ReactionSummaryViewProps) => React.JSX.Element;
 export {};

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

@@ -1,3 +1,2 @@
 export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
-export declare const seeWhoReactedStyle: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

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

@@ -20,4 +20,4 @@ export interface ConnectedReactionPickerProps extends Omit<ReactionPickerProps,
 /**
  * Reaction Picker component
  */
-export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => JSX.Element;
+export declare const ConnectedReactionPicker: (props: React.PropsWithChildren<ConnectedReactionPickerProps>) => React.JSX.Element;

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

@@ -53,4 +53,4 @@ export declare const mapDispatchToPropsHelper: (actions: Actions, containerAri:
     getReactionDetails: (emojiId: string) => void;
     onSelection: (emojiId: string) => void;
 };
-export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => JSX.Element;
+export declare const ConnectedReactionsView: (props: React.PropsWithChildren<ConnectedReactionsViewProps>) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "24.6.0",
+	"version": "24.7.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,10 +36,10 @@
 		"@atlaskit/analytics-namespaced-context": "^6.13.0",
 		"@atlaskit/analytics-next": "^10.3.0",
 		"@atlaskit/avatar": "^21.18.0",
-		"@atlaskit/button": "^20.4.0",
+		"@atlaskit/button": "^20.5.0",
 		"@atlaskit/emoji": "^67.13.0",
 		"@atlaskit/heading": "^4.1.0",
-		"@atlaskit/icon": "^23.6.0",
+		"@atlaskit/icon": "^23.7.0",
 		"@atlaskit/modal-dialog": "^12.20.0",
 		"@atlaskit/motion": "^1.10.0",
 		"@atlaskit/platform-feature-flags": "^1.0.0",