@atlaskit/reactions 24.6.0 → 24.8.0

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

@@ -1,118 +1,33 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ReactionsList = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _element = require("@atlaskit/emoji/element");
-var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
-var _tokens = require("@atlaskit/tokens");
-var _primitives = require("@atlaskit/primitives");
-var _Counter = require("../Counter");
-var _styles = require("./styles");
+var _react = require("@emotion/react");
 var _ReactionView = require("./ReactionView");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var emojiStyles = (0, _primitives.xcss)({
-  minWidth: '36px'
-});
 var ReactionsList = exports.ReactionsList = function ReactionsList(_ref) {
   var reactions = _ref.reactions,
-    initialEmojiId = _ref.initialEmojiId,
+    selectedEmojiId = _ref.selectedEmojiId,
     emojiProvider = _ref.emojiProvider,
-    onReactionChanged = _ref.onReactionChanged,
     ProfileCardWrapper = _ref.ProfileCardWrapper;
-  var _useState = (0, _react.useState)(function () {
-      // Calculate this only on initialize the List of Tabs and each Reactions View collection
-      return {
-        index: reactions.findIndex(function (reaction) {
-          return reaction.emojiId === initialEmojiId;
-        }),
-        id: initialEmojiId
-      };
-    }),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    selectedEmoji = _useState2[0],
-    setSelectedEmoji = _useState2[1];
-  var _useThemeObserver = (0, _tokens.useThemeObserver)(),
-    colorMode = _useThemeObserver.colorMode;
-  (0, _react.useEffect)(function () {
-    // select first emoji when navigating to a new page
-    var currentPageEmojis = reactions.map(function (reaction) {
-      return reaction.emojiId;
-    });
-    if (!currentPageEmojis.includes(selectedEmoji.id)) {
-      setSelectedEmoji({
-        index: 0,
-        id: initialEmojiId
+  return (0, _react.jsx)("div", null, reactions.map(function (reaction) {
+    if (reaction.emojiId === selectedEmojiId) {
+      return (0, _react.jsx)(_ReactionView.ReactionView, {
+        key: reaction.emojiId,
+        reaction: reaction,
+        selectedEmojiId: selectedEmojiId,
+        emojiProvider: emojiProvider,
+        ProfileCardWrapper: ProfileCardWrapper
       });
+    } else {
+      return null;
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [reactions, initialEmojiId]);
-  var onTabChange = (0, _react.useCallback)(function (index, analyticsEvent) {
-    if (index === selectedEmoji.index) {
-      return;
-    }
-    var emojiId = reactions[index].emojiId;
-    setSelectedEmoji({
-      index: index,
-      id: emojiId
-    });
-    onReactionChanged(emojiId, analyticsEvent);
-  }, [selectedEmoji.index, reactions, onReactionChanged]);
-  return (0, _react2.jsx)(_tabs.default, {
-    id: "reactions-dialog-tabs",
-    onChange: onTabChange,
-    selected: selectedEmoji.index
-  }, (0, _react2.jsx)("div", {
-    css: _styles.customTabListStyles,
-    id: "reactions-dialog-tabs-list"
-  }, (0, _react2.jsx)(_tabs.TabList, null, reactions.map(function (reaction) {
-    var emojiId = {
-      id: reaction.emojiId,
-      shortName: ''
-    };
-    return (0, _react2.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      css: (0, _styles.customTabWrapper)((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, colorMode)
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: "reaction-elements",
-      key: reaction.emojiId,
-      "data-testid": emojiId === null || emojiId === void 0 ? void 0 : emojiId.id
-    }, (0, _react2.jsx)(_tabs.Tab, null, (0, _react2.jsx)(_primitives.Flex, {
-      justifyContent: "center",
-      alignItems: "center",
-      direction: "row"
-    }, (0, _react2.jsx)(_primitives.Box, {
-      xcss: emojiStyles
-    }, (0, _react2.jsx)(_element.ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: emojiId,
-      fitToHeight: 16,
-      showTooltip: true
-    })), (0, _react2.jsx)(_Counter.Counter, {
-      value: reaction.count
-    }))));
-  }))), reactions.map(function (reaction) {
-    return (0, _react2.jsx)(_ReactionView.ReactionView, {
-      key: reaction.emojiId,
-      reaction: reaction,
-      selectedEmojiId: selectedEmoji.id,
-      emojiProvider: emojiProvider,
-      ProfileCardWrapper: ProfileCardWrapper
-    });
   }));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.userStyle = exports.userListStyle = exports.reactionViewStyle = exports.navigationContainerStyle = exports.customTabWrapper = exports.customTabListStyles = exports.containerStyle = exports.centerSpinner = void 0;
+exports.userStyle = exports.userListStyle = exports.navigationContainerStyle = exports.customTabListStyles = exports.containerStyle = exports.centerSpinner = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -12,9 +12,6 @@ var _colors = require("@atlaskit/theme/colors");
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-var REACTIONS_CONTAINER_WIDTH = 48;
-var REACTION_CONTAINER_HEIGHT = 40;
-
 /*Reactions Container. Using pseudo Element :after to set border since with onClick of Reaction to higlight the
 border blue below the reaction. Setting Border Width based on number of reactions to make sure it shows up
 in case the container overflows */
@@ -39,55 +36,6 @@ var containerStyle = exports.containerStyle = function containerStyle(reactionsB
     }
   });
 };
-var containerEdgeAngle = {
-  rightEdge: 270,
-  leftEdge: 90
-};
-var fadedCss = function fadedCss(edge, theme) {
-  return (0, _react.css)({
-    content: '""',
-    position: 'absolute',
-    left: '0px',
-    top: '0px',
-    width: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-    height: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
-    zIndex: 0,
-    background:
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    theme === 'dark' ? "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(34, 39, 43, 0.95) 40.23%, rgba(34, 39, 43, 0.55) 58.33%, rgba(34, 39, 43, 0) 77.49%)") : "linear-gradient(".concat(containerEdgeAngle[edge], "deg, rgba(255, 255, 255, 0.95) 40.23%, rgba(255, 255, 255, 0.55) 58.33%, rgba(255, 255, 255, 0) 77.49%)")
-  });
-};
-var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSelected, selectedEmojiId, theme) {
-  return (0, _react.css)({
-    flexShrink: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    textAlign: 'center',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-    boxSizing: 'border-box',
-    position: 'relative',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> div': {
-      minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
-      minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      padding: '0px !important',
-      alignItems: 'center',
-      justifyContent: 'center'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > span': {
-      minHeight: '16px',
-      minWidth: '16px'
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '&.disabled:after': fadedCss('rightEdge', theme),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    '&.disabled + &.disabled:after': fadedCss('leftEdge', theme)
-  });
-};
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var navigationContainerStyle = exports.navigationContainerStyle = (0, _react.css)({
@@ -101,26 +49,6 @@ var navigationContainerStyle = exports.navigationContainerStyle = (0, _react.css
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var reactionViewStyle = exports.reactionViewStyle = (0, _react.css)({
-  marginTop: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  flexDirection: 'column',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  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)",
-    fontWeight: "var(--ds-font-weight-semibold, 600)",
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '20px',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> span': {
-      marginRight: "var(--ds-space-100, 8px)"
-    }
-  }
-});
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var userListStyle = exports.userListStyle = (0, _react.css)({
   listStyle: 'none',
@@ -138,7 +66,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)"
@@ -149,7 +77,6 @@ var userStyle = exports.userStyle = (0, _react.css)({
 var customTabListStyles = exports.customTabListStyles = (0, _react.css)({
   overflow: 'auto',
   display: 'flex',
-  paddingBottom: "var(--ds-space-050, 4px)",
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   'div[role=tablist]': {
     flexGrow: 1,
@@ -163,5 +90,6 @@ var centerSpinner = exports.centerSpinner = (0, _react.css)({
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
-  height: '100%'
+  height: '100%',
+  marginTop: "var(--ds-space-300, 24px)"
 });

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,17 @@ 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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
@@ -35,6 +38,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
  */
@@ -149,7 +156,8 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     if (status !== _types.ReactionStatus.ready) {
       renderTime.current = Date.now();
     } else {
-      if ((0, _analytics.isSampled)(_constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP)) {
+      var isSSR = process.env.REACT_SSR && (0, _platformFeatureFlags.fg)('platform_fix_analytics_error');
+      if ((0, _analytics.isSampled)(_constants.SAMPLING_RATE_REACTIONS_RENDERED_EXP) && !isSSR) {
         var _renderTime$current;
         (0, _analytics.createAndFireSafe)(createAnalyticsEvent, _analytics.createReactionsRenderedEvent, (_renderTime$current = renderTime.current) !== null && _renderTime$current !== void 0 ? _renderTime$current : Date.now() //renderTime.current can be null during unit test cases
         );
@@ -240,6 +248,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     // ufo selected reaction inside the modal dialog
     ufoExperiences.selectedReactionChangeInsideDialog.start();
     handleReactionMouseEnter(emojiId);
+    setSelectedEmojiId(emojiId);
     if (analyticsEvent) {
       onDialogSelectReactionCallback(emojiId, analyticsEvent);
     }
@@ -317,7 +326,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       showOpaqueBackground: showOpaqueBackground,
       subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
       handleOpenReactionsDialog: handleOpenReactionsDialog,
-      allowUserDialog: allowUserDialog
+      allowUserDialog: allowUserDialog && hasEmojiWithFivePlusReactions
     })) : memorizedReactions.map(function (reaction) {
       return (0, _react2.jsx)(_Reaction.Reaction, {
         key: reaction.emojiId,
@@ -348,21 +357,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.8.0";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -10,12 +10,25 @@ import { jsx } from '@emotion/react';
 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 { TabPanel } from '@atlaskit/tabs';
+import { Box, Flex, xcss, Inline } from '@atlaskit/primitives';
+import Heading from '@atlaskit/heading';
 import { messages } from '../../shared/i18n';
-import { reactionViewStyle, userListStyle, userStyle, centerSpinner } from './styles';
+import { userListStyle, userStyle, centerSpinner } from './styles';
 const userDescriptionStyle = xcss({
-  marginLeft: 'space.200'
+  marginLeft: 'space.150'
+});
+const profileWrapperStyle = xcss({
+  marginLeft: 'space.0'
+});
+const reactionViewStyle = xcss({
+  marginTop: 'space.300'
+});
+const headerStyle = xcss({
+  alignItems: 'flex-end'
+});
+const emojiSpacingStlye = xcss({
+  marginLeft: 'space.100'
 });
 export const ReactionView = ({
   selectedEmojiId,
@@ -32,7 +45,8 @@ export const ReactionView = ({
         id: selectedEmojiId
       });
       if (emoji !== null && emoji !== void 0 && emoji.shortName) {
-        setEmojiShortName(emoji.shortName);
+        const shortNameWithoutColons = emoji.shortName.replace(/:/g, '');
+        setEmojiShortName(shortNameWithoutColons);
       }
     })();
   }, [emojiProvider, selectedEmojiId, reaction]);
@@ -41,59 +55,63 @@ export const ReactionView = ({
     const reactionObj = reaction;
     return ((_reactionObj$users = reactionObj.users) === null || _reactionObj$users === void 0 ? void 0 : _reactionObj$users.sort((a, b) => a.displayName.localeCompare(b.displayName))) || [];
   }, [reaction]);
-  const tabPanelAttributes = useTabPanel();
-  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
-    jsx("div", _extends({
-      css: reactionViewStyle
-    }, tabPanelAttributes), jsx(Text, {
-      as: "p"
-    }, jsx(FormattedMessage, _extends({}, messages.peopleWhoReactedSubheading, {
-      values: {
-        emojiShortName
-      }
-    })), jsx(ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: {
-        id: selectedEmojiId,
-        shortName: ''
-      },
-      fitToHeight: 24
-    })), alphabeticalNames.length === 0 ?
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("div", {
-      css: centerSpinner
-    }, jsx(Spinner, {
-      size: "large"
-    })) :
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    jsx("ul", {
-      css: userListStyle
-    }, alphabeticalNames.map(user => {
-      var _user$profilePicture;
-      const profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
-      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
-        jsx("li", {
-          css: userStyle,
-          key: user.id
-        }, ProfileCardWrapper && user.accountId ? jsx(ProfileCardWrapper, {
-          userId: user.accountId,
-          isAnonymous: false,
-          canViewProfile: true,
-          position: "left-start"
-        }, jsx(Avatar, {
-          size: "large",
-          src: profile,
-          testId: "profile"
-        })) : jsx(Avatar, {
-          size: "large",
-          src: profile,
-          testId: "profile"
-        }), jsx(Flex, {
-          xcss: userDescriptionStyle
-        }, jsx("div", null, user.displayName)))
-      );
-    })))
-  );
+  return jsx(TabPanel, null, jsx(Flex, {
+    direction: "column",
+    xcss: reactionViewStyle
+  }, jsx(Inline, {
+    xcss: headerStyle
+  }, jsx(Heading, {
+    size: "xsmall"
+  }, jsx(FormattedMessage, _extends({}, messages.peopleWhoReactedSubheading, {
+    values: {
+      emojiShortName
+    }
+  }))), jsx(Box, {
+    as: "span",
+    xcss: emojiSpacingStlye
+  }, jsx(ResourcedEmoji, {
+    emojiProvider: emojiProvider,
+    emojiId: {
+      id: selectedEmojiId,
+      shortName: ''
+    },
+    fitToHeight: 24
+  }))), alphabeticalNames.length === 0 ?
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  jsx("div", {
+    css: centerSpinner
+  }, jsx(Spinner, {
+    size: "large"
+  })) :
+  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  jsx("ul", {
+    css: userListStyle
+  }, alphabeticalNames.map(user => {
+    var _user$profilePicture;
+    const profile = (_user$profilePicture = user.profilePicture) === null || _user$profilePicture === void 0 ? void 0 : _user$profilePicture.path;
+    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
+      jsx("li", {
+        css: userStyle,
+        key: user.id
+      }, ProfileCardWrapper && user.accountId ? jsx(Box, {
+        xcss: profileWrapperStyle
+      }, jsx(ProfileCardWrapper, {
+        userId: user.accountId,
+        isAnonymous: false,
+        canViewProfile: true,
+        position: "left-start"
+      }, jsx(Avatar, {
+        size: "medium",
+        src: profile,
+        testId: "profile"
+      }))) : jsx(Avatar, {
+        size: "medium",
+        src: profile,
+        testId: "profile"
+      }), jsx(Flex, {
+        xcss: userDescriptionStyle
+      }, jsx("div", null, user.displayName)))
+    );
+  }))));
 };