@atlaskit/reactions 25.0.0 → 25.1.0

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

@@ -16,10 +16,11 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _modalDialog = require("@atlaskit/modal-dialog");
-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 _showMoreHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/show-more-horizontal"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _analytics = require("../../analytics");
 var _constants = require("../../shared/constants");
 var _i18n = require("../../shared/i18n");
@@ -57,10 +58,6 @@ var ufoExperiences = exports.ufoExperiences = {
   selectedReactionChangeInsideDialog: _ufo.ReactionDialogSelectedReactionChanged,
   pageNavigated: _ufo.ReactionDialogPageNavigation
 };
-var dialogEntrypointButtonStyle = (0, _primitives.xcss)({
-  marginRight: 'space.050',
-  marginTop: 'space.050'
-});
 
 /**
  * Test id for wrapper Reactions div
@@ -92,6 +89,13 @@ function getTooltip(status, errorMessage) {
       return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.addReaction);
   }
 }
+var dialogEntrypointButtonStyle = (0, _primitives.xcss)({
+  marginRight: 'space.050',
+  marginTop: 'space.050'
+});
+var iconStyle = (0, _primitives.xcss)({
+  height: '20px'
+});
 
 /**
  * Renders list of reactions
@@ -149,6 +153,7 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
     setSelectedEmojiId = _useState2[1];
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+  var intl = (0, _reactIntlNext.useIntl)();
   var openTime = (0, _react.useRef)();
   var renderTime = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
@@ -340,18 +345,24 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
       });
     }), allowUserDialog && hasEmojiWithFivePlusReactions && !shouldShowSummaryView && (0, _react2.jsx)(_primitives.Box, {
       xcss: dialogEntrypointButtonStyle
+    }, (0, _react2.jsx)(_primitives.Pressable, {
+      backgroundColor: "color.background.neutral.subtle",
+      padding: "space.0"
     }, (0, _react2.jsx)(_tooltip.default, {
-      content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReactedTooltip),
-      hideTooltipOnClick: true
+      content: intl.formatMessage(_i18n.messages.seeWhoReactedTooltip)
     }, function (tooltipProps) {
       return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, tooltipProps, {
         spacing: "compact",
         onClick: function onClick() {
           return handleOpenReactionsDialog(sortedReactions[0].emojiId);
-        },
-        testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-      }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.seeWhoReacted));
-    })), (0, _react2.jsx)(_ReactionPicker.ReactionPicker
+        }
+      }), (0, _react2.jsx)(_primitives.Flex, {
+        alignItems: "center",
+        xcss: iconStyle
+      }, (0, _react2.jsx)(_showMoreHorizontal.default, {
+        label: intl.formatMessage(_i18n.messages.seeWhoReacted)
+      })));
+    }))), (0, _react2.jsx)(_ReactionPicker.ReactionPicker
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     , {
       css: _styles.reactionPickerStyle,

package/dist/cjs/shared/i18n.js

@@ -75,10 +75,5 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     id: 'reactions.dialog.viewall.tooltip',
     defaultMessage: 'View all user reactions',
     description: 'Tooltip content of see who reacted link'
-  },
-  peopleWhoReactedSubheading: {
-    id: 'reactions.dialog.people-who-reacted.subheader',
-    defaultMessage: 'People who reacted with {emojiShortName}',
-    description: 'Subheading that shows the user which emoji tab they are on'
   }
 });

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

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

@@ -1,19 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useEffect, useState, useMemo } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { useMemo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
 import Spinner from '@atlaskit/spinner';
 import { TabPanel } from '@atlaskit/tabs';
-import { Box, Flex, xcss, Inline } from '@atlaskit/primitives';
-import Heading from '@atlaskit/heading';
-import { messages } from '../../shared/i18n';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
 import { userListStyle, userStyle } from './styles';
 const userDescriptionStyle = xcss({
   marginLeft: 'space.150'
@@ -22,7 +17,7 @@ const profileWrapperStyle = xcss({
   marginLeft: 'space.0'
 });
 const reactionViewStyle = xcss({
-  marginTop: 'space.300',
+  marginTop: 'space.150',
   minHeight: '300px',
   minWidth: '550px'
 });
@@ -33,33 +28,12 @@ const centerSpinnerStyle = xcss({
   height: '100%',
   marginTop: 'space.300'
 });
-const headerStyle = xcss({
-  alignItems: 'flex-end'
-});
-const emojiSpacingStlye = xcss({
-  marginLeft: 'space.100'
-});
 export const ReactionView = ({
   selectedEmojiId,
   emojiProvider,
   reaction,
   ProfileCardWrapper
 }) => {
-  const [emojiName, setEmojiName] = useState('');
-  useEffect(() => {
-    (async () => {
-      const provider = await emojiProvider;
-      const emoji = await provider.findByEmojiId({
-        shortName: '',
-        id: selectedEmojiId
-      });
-      if (emoji !== null && emoji !== void 0 && emoji.name) {
-        // capitalize first letter of each string
-        const capitalizedName = emoji.name.replace(/\b\w/g, char => char.toUpperCase());
-        setEmojiName(capitalizedName);
-      }
-    })();
-  }, [emojiProvider, selectedEmojiId, reaction]);
   const alphabeticalNames = useMemo(() => {
     var _reactionObj$users;
     const reactionObj = reaction;
@@ -68,25 +42,7 @@ export const ReactionView = ({
   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: emojiName
-    }
-  }))), jsx(Box, {
-    as: "span",
-    xcss: emojiSpacingStlye
-  }, jsx(ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: {
-      id: selectedEmojiId,
-      shortName: ''
-    },
-    fitToHeight: 24
-  }))), alphabeticalNames.length === 0 ?
+  }, 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(Box, {
     xcss: centerSpinnerStyle

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

@@ -3,15 +3,12 @@
  * @jsx jsx
  */
 import { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import { 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 Tabs from '@atlaskit/tabs';
-import Button from '@atlaskit/button/new';
+import Modal, { ModalBody } from '@atlaskit/modal-dialog';
 import { Box, xcss } from '@atlaskit/primitives';
-import Modal, { ModalBody, ModalFooter } from '@atlaskit/modal-dialog';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
-import { messages } from '../../shared/i18n';
 import { ReactionsList } from './ReactionsList';
 import { ReactionsDialogHeader } from './ReactionsDialogHeader';
 import { containerStyle } from './styles';
@@ -27,8 +24,8 @@ const getDimensions = container => {
     scrollLeft: container === null || container === void 0 ? void 0 : container.scrollLeft
   };
 };
-const footerStyle = xcss({
-  borderTop: `2px solid ${"var(--ds-border, rgba(11, 18, 14, 0.14))"}`
+const modalBodyStyle = xcss({
+  marginBottom: 'space.300'
 });
 export const ReactionsDialog = ({
   reactions = [],
@@ -37,7 +34,8 @@ export const ReactionsDialog = ({
   selectedEmojiId,
   handleSelectReaction = () => {},
   handlePaginationChange = () => {},
-  ProfileCardWrapper
+  ProfileCardWrapper,
+  handleReactionMouseEnter
 }) => {
   var _currentReactions$;
   const [elementToScroll, setElementToScroll] = useState();
@@ -48,7 +46,6 @@ export const ReactionsDialog = ({
   const [currentPage, setCurrentPage] = useState(1);
   const reactionElementsRef = useRef();
   const observerRef = useRef();
-  const intl = useIntl();
   const isSelectedEmojiViewed = useRef(false);
   const totalReactionsCount = useMemo(() => {
     return reactions.reduce((accum, current) => {
@@ -174,9 +171,11 @@ export const ReactionsDialog = ({
     handleNextPage: handleNextPage,
     currentPage: currentPage,
     emojiProvider: emojiProvider,
-    selectedEmojiId: selectedEmojiId,
-    currentReactions: currentReactions
-  }), jsx(ModalBody, null, jsx("div", {
+    currentReactions: currentReactions,
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  }), jsx(ModalBody, null, jsx(Box, {
+    xcss: modalBodyStyle
+  }, jsx("div", {
     css: containerStyle(reactionsBorderWidth),
     ref: setRef
   }, jsx(ReactionsList, {
@@ -184,10 +183,5 @@ export const ReactionsDialog = ({
     reactions: currentReactions,
     emojiProvider: emojiProvider,
     ProfileCardWrapper: ProfileCardWrapper
-  })))), jsx(Box, {
-    xcss: footerStyle
-  }, jsx(ModalFooter, null, jsx(Button, {
-    appearance: "subtle",
-    onClick: handleCloseReactionsDialog
-  }, intl.formatMessage(messages.closeReactionsDialog)))));
+  }))))));
 };

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

@@ -1,20 +1,21 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
+import { useState } from 'react';
 import { useIntl } from 'react-intl-next';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { useThemeObserver } from '@atlaskit/tokens';
 import { Tab, TabList } from '@atlaskit/tabs';
-import { Box, Flex, xcss, Stack } from '@atlaskit/primitives';
+import { Box, Flex, xcss, Stack, Inline } from '@atlaskit/primitives';
 import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
 import { useModal } from '@atlaskit/modal-dialog';
 import Tooltip from '@atlaskit/tooltip';
 import ChevronLeftIcon from '@atlaskit/icon/utility/chevron-left';
 import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
+import CloseIcon from '@atlaskit/icon/core/close';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
 import { messages } from '../../shared/i18n';
 import { Counter } from '../Counter';
@@ -24,6 +25,17 @@ const containerEdgeAngle = {
   rightEdge: 270,
   leftEdge: 90
 };
+const leftNavigationStyle = xcss({
+  marginLeft: 'space.200',
+  alignSelf: 'self-start',
+  marginTop: 'space.050'
+});
+const rightNavigationStyle = xcss({
+  marginRight: 'space.100',
+  marginLeft: 'auto',
+  alignSelf: 'self-start',
+  marginTop: 'space.050'
+});
 const fadedCss = (edge, theme) => css({
   content: '""',
   position: 'absolute',
@@ -44,7 +56,9 @@ const customTabListStyles = css({
     flexGrow: 1,
     // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
     paddingInline: "var(--ds-space-100, 8px)"
-  }
+  },
+  width: ' 100%',
+  alignItems: 'flex-start'
 });
 const customTabWrapper = theme => css({
   flexShrink: 0,
@@ -92,47 +106,45 @@ const emojiStyles = xcss({
 const counterStyle = xcss({
   marginTop: 'space.025'
 });
-const ReactionsTabs = ({
-  currentReactions,
-  emojiProvider,
-  selectedEmojiId
+const CloseButton = ({
+  handleCloseReactionsDialog
 }) => {
-  const {
-    colorMode
-  } = useThemeObserver();
-  return jsx("div", {
-    css: customTabListStyles,
-    id: "reactions-dialog-tabs-list"
-  }, jsx(TabList, null, currentReactions.map((reaction, index) => {
-    const emojiId = {
-      id: reaction.emojiId,
-      shortName: ''
-    };
-    return 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: [customTabWrapper(colorMode), index === 0 ? firstElement : []]
-      // 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
-    }, jsx(Tab, null, jsx(Flex, {
-      justifyContent: "center",
-      alignItems: "center",
-      direction: "row"
-    }, jsx(Box, {
-      xcss: emojiStyles
-    }, jsx(ResourcedEmoji, {
-      emojiProvider: emojiProvider,
-      emojiId: emojiId,
-      fitToHeight: 16,
-      showTooltip: true
-    })), jsx(Box, {
-      xcss: counterStyle
-    }, jsx(Counter, {
-      value: reaction.count
-    })))));
-  })));
+  const intl = useIntl();
+  return jsx(IconButton, {
+    onClick: handleCloseReactionsDialog,
+    icon: CloseIcon,
+    label: intl.formatMessage(messages.closeReactionsDialog),
+    appearance: "subtle",
+    isTooltipDisabled: false
+  });
+};
+const LeftNavigationButton = ({
+  handlePreviousPage
+}) => {
+  const intl = useIntl();
+  return jsx(Flex, {
+    xcss: leftNavigationStyle
+  }, jsx(IconButton, {
+    spacing: "compact",
+    onClick: handlePreviousPage,
+    icon: ChevronLeftIcon,
+    label: intl.formatMessage(messages.leftNavigateLabel),
+    isTooltipDisabled: false
+  }));
+};
+const RightNavigationButton = ({
+  handleNextPage
+}) => {
+  const intl = useIntl();
+  return jsx(Flex, {
+    xcss: rightNavigationStyle
+  }, jsx(IconButton, {
+    spacing: "compact",
+    onClick: handleNextPage,
+    icon: ChevronRightIcon,
+    label: intl.formatMessage(messages.rightNavigateLabel),
+    isTooltipDisabled: false
+  }));
 };
 export const ReactionsDialogHeader = ({
   totalReactionsCount,
@@ -142,15 +154,42 @@ export const ReactionsDialogHeader = ({
   maxPages,
   currentReactions,
   emojiProvider,
-  selectedEmojiId
+  handleCloseReactionsDialog
 }) => {
+  const [cache, setCache] = useState({});
   const {
     titleId
   } = useModal();
   const intl = useIntl();
+  const {
+    colorMode
+  } = useThemeObserver();
   const isSinglePage = maxPages === 1;
   const isOnFirstPage = currentPage === 1;
   const isOnLastPage = currentPage === maxPages;
+  const handleHover = reaction => {
+    const {
+      emojiId
+    } = reaction;
+    if (!emojiId || cache[emojiId]) {
+      return;
+    }
+    (async () => {
+      const provider = await emojiProvider;
+      const emoji = await provider.findByEmojiId({
+        shortName: '',
+        id: emojiId
+      });
+      if (emoji !== null && emoji !== void 0 && emoji.name) {
+        // capitalize first letter of each string
+        const capitalizedName = emoji.name.replace(/\b\w/g, char => char.toUpperCase());
+        setCache(prevCache => ({
+          ...prevCache,
+          [emojiId]: capitalizedName
+        }));
+      }
+    })();
+  };
   return jsx(Stack, null, jsx(Flex, {
     direction: "row",
     justifyContent: "space-between",
@@ -161,28 +200,50 @@ export const ReactionsDialogHeader = ({
     id: titleId
   }, intl.formatMessage(messages.reactionsCount, {
     count: totalReactionsCount
-  })), !isSinglePage && jsx(Flex, {
-    alignItems: "center",
-    gap: "space.100"
-  }, jsx(Tooltip, {
-    content: intl.formatMessage(messages.leftNavigateLabel),
-    canAppear: () => !isOnFirstPage
-  }, tooltipProps => jsx(IconButton, _extends({}, tooltipProps, {
-    isDisabled: isOnFirstPage,
-    onClick: handlePreviousPage,
-    icon: ChevronLeftIcon,
-    label: intl.formatMessage(messages.leftNavigateLabel)
-  }))), jsx(Tooltip, {
-    content: intl.formatMessage(messages.rightNavigateLabel),
-    canAppear: () => !isOnLastPage
-  }, tooltipProps => jsx(IconButton, _extends({}, tooltipProps, {
-    onClick: handleNextPage,
-    isDisabled: isOnLastPage,
-    icon: ChevronRightIcon,
-    label: intl.formatMessage(messages.rightNavigateLabel)
-  }))))), jsx(ReactionsTabs, {
-    currentReactions: currentReactions,
-    emojiProvider: emojiProvider,
-    selectedEmojiId: selectedEmojiId
-  }));
+  })), jsx(CloseButton, {
+    handleCloseReactionsDialog: handleCloseReactionsDialog
+  })), jsx(Inline, null, jsx("div", {
+    css: customTabListStyles,
+    id: "reactions-dialog-tabs-list"
+  }, jsx(TabList, null, !isSinglePage && !isOnFirstPage && jsx(LeftNavigationButton, {
+    handlePreviousPage: handlePreviousPage
+  }), currentReactions.map((reaction, index) => {
+    const emojiId = {
+      id: reaction.emojiId,
+      shortName: ''
+    };
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      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: [customTabWrapper(colorMode), index === 0 ? firstElement : []]
+        // 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,
+        onMouseEnter: () => handleHover(reaction)
+      }, jsx(Tab, null, jsx(Tooltip, {
+        content: cache[reaction.emojiId],
+        canAppear: () => !!cache[reaction.emojiId]
+      }, jsx(Flex, {
+        justifyContent: "center",
+        alignItems: "center",
+        direction: "row"
+      }, jsx(Box, {
+        xcss: emojiStyles
+      }, jsx(ResourcedEmoji, {
+        emojiProvider: emojiProvider,
+        emojiId: emojiId,
+        fitToHeight: 16,
+        showTooltip: true
+      })), jsx(Box, {
+        xcss: counterStyle
+      }, jsx(Counter, {
+        value: reaction.count
+      }))))))
+    );
+  }), !isSinglePage && !isOnLastPage && jsx(RightNavigationButton, {
+    handleNextPage: handleNextPage
+  })))));
 };

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

@@ -4,6 +4,7 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { Box } from '@atlaskit/primitives';
 import { ReactionView } from './ReactionView';
 export const ReactionsList = ({
   reactions,
@@ -11,7 +12,7 @@ export const ReactionsList = ({
   emojiProvider,
   ProfileCardWrapper
 }) => {
-  return jsx("div", null, reactions.map(reaction => {
+  return jsx(Box, null, reactions.map(reaction => {
     if (reaction.emojiId === selectedEmojiId) {
       return jsx(ReactionView, {
         key: reaction.emojiId,

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

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useState } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { useIntl } from 'react-intl-next';
 import Popup from '@atlaskit/popup';
-import { Box, Inline, Text, xcss } from '@atlaskit/primitives';
+import { Box, Inline, Pressable, Flex, xcss } from '@atlaskit/primitives';
 import Button from '@atlaskit/button/new';
 import Tooltip from '@atlaskit/tooltip';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';
 import { Reaction } from '../Reaction';
 import { ReactionSummaryButton } from './ReactionSummaryButton';
 import { messages } from '../../shared/i18n';
@@ -16,6 +17,9 @@ const summaryPopupStyles = xcss({
 const viewAllButtonStyling = xcss({
   marginTop: 'space.050'
 });
+const iconStyle = xcss({
+  height: '20px'
+});
 
 /**
  * Test id for the Reactions summary view popup
@@ -35,6 +39,7 @@ export const ReactionSummaryView = ({
   handleOpenReactionsDialog,
   allowUserDialog
 }) => {
+  const intl = useIntl();
   const [isSummaryPopupOpen, setSummaryPopupOpen] = useState(false);
   const handlePopupClose = useCallback(() => setSummaryPopupOpen(false), []);
   const handleSummaryClick = useCallback(() => setSummaryPopupOpen(!isSummaryPopupOpen), [isSummaryPopupOpen]);
@@ -57,19 +62,23 @@ export const ReactionSummaryView = ({
       showParticleEffect: particleEffectByEmoji[reaction.emojiId]
     })), allowUserDialog && /*#__PURE__*/React.createElement(Box, {
       xcss: viewAllButtonStyling
+    }, /*#__PURE__*/React.createElement(Pressable, {
+      backgroundColor: "color.background.neutral.subtle",
+      padding: "space.0"
     }, /*#__PURE__*/React.createElement(Tooltip, {
-      content: /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReactedTooltip),
-      hideTooltipOnClick: true
+      content: intl.formatMessage(messages.seeWhoReactedTooltip)
     }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, {
       spacing: "compact",
       onClick: () => {
         handlePopupClose();
         handleOpenReactionsDialog === null || handleOpenReactionsDialog === void 0 ? void 0 : handleOpenReactionsDialog(reactions[0].emojiId);
       }
-    }), /*#__PURE__*/React.createElement(Text, {
-      color: "color.text.subtlest",
-      weight: "medium"
-    }, /*#__PURE__*/React.createElement(FormattedMessage, messages.seeWhoReacted)))))),
+    }), /*#__PURE__*/React.createElement(Flex, {
+      alignItems: "center",
+      xcss: iconStyle
+    }, /*#__PURE__*/React.createElement(ShowMoreHorizontalIcon, {
+      label: intl.formatMessage(messages.seeWhoReacted)
+    }))))))),
     isOpen: isSummaryPopupOpen,
     onClose: handlePopupClose,
     trigger: triggerProps => /*#__PURE__*/React.createElement(ReactionSummaryButton, _extends({}, triggerProps, {