@atlaskit/reactions 22.7.0 → 22.7.2

package/dist/es2019/components/Selector/Selector.js

@@ -1,16 +1,50 @@
 /** @jsx jsx */
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { DefaultReactions } from '../../shared/constants';
 import { EmojiButton } from '../EmojiButton';
 import { ShowMore } from '../ShowMore';
-import { emojiStyle, revealStyle, selectorStyle } from './styles';
+import { emojiStyle, revealStyle } from './styles';
 
 /**
  * Test id for wrapper Selector div
  */
 export const RENDER_SELECTOR_TESTID = 'render-selector';
+
+/**
+ * Delay for each emoji reveal animation, in ms
+ */
+const REVEAL_DELAY = 50;
+const containerStyles = xcss({
+  padding: 'space.050'
+});
+const separatorStyles = xcss({
+  borderLeftColor: 'color.border',
+  borderLeftStyle: 'solid',
+  borderLeftWidth: 'border.width',
+  marginInlineStart: 'space.050',
+  marginInlineEnd: 'space.100',
+  height: '24px',
+  display: 'inline-block'
+});
+const Reveal = ({
+  children,
+  delay
+}) => {
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
+    css: revealStyle
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: delay ? {
+      animationDelay: `${delay}ms`
+    } : undefined
+  }, children);
+};
+
 /**
  * Reactions picker panel part of the <ReactionPicker /> component
  */
@@ -50,14 +84,6 @@ export const Selector = ({
     setSelection(item);
   };
 
-  /**
-   * custom css styling for the emoji icon
-   * @param index location of the emoji in the rendered list of items
-   */
-  const emojiStyleAnimation = index => ({
-    animationDelay: `${index * 50}ms`
-  });
-
   /**
    * Render the default emoji icon
    * @param emoji emoji item
@@ -65,11 +91,15 @@ export const Selector = ({
    */
   const renderEmoji = (emoji, index) => {
     var _emoji$id;
-    return jsx("div", {
-      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName,
-      className: emoji === selection ? 'selected' : undefined,
-      css: [emojiStyle, revealStyle],
-      style: emojiStyleAnimation(index),
+    return jsx(Reveal, {
+      delay: index * REVEAL_DELAY,
+      key: (_emoji$id = emoji.id) !== null && _emoji$id !== void 0 ? _emoji$id : emoji.shortName
+    }, jsx("div", {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      className: emoji === selection ? 'selected' : undefined
+      // 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: emojiStyle,
       "data-testid": RENDER_SELECTOR_TESTID
     }, jsx(Tooltip, {
       content: emoji.shortName
@@ -77,16 +107,17 @@ export const Selector = ({
       emojiId: emoji,
       emojiProvider: emojiProvider,
       onClick: onSelected
-    })));
+    }))));
   };
-  return jsx("div", {
-    css: selectorStyle
-  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(ShowMore, {
+  return jsx(Inline, {
+    alignBlock: "center",
+    xcss: containerStyles
+  }, pickerQuickReactionEmojiIds ? pickerQuickReactionEmojiIds.map(renderEmoji) : null, showMore ? jsx(Fragment, null, jsx(Box, {
+    xcss: separatorStyles
+  }), jsx(Reveal, {
+    delay: DefaultReactions.length * REVEAL_DELAY
+  }, jsx(ShowMore, {
     key: "more",
-    buttonStyle: revealStyle,
-    style: {
-      button: emojiStyleAnimation(DefaultReactions.length)
-    },
     onClick: onMoreClick
-  }) : null);
+  }))) : null);
 };

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

@@ -1,18 +1,18 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
-export const selectorStyle = css({
-  boxSizing: 'border-box',
-  display: 'flex',
-  padding: 0
-});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const emojiStyle = css({
   display: 'inline-block',
-  opacity: 0,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.selected': {
-    transition: 'transform 200ms ease-in-out  ',
+    transition: 'transform 200ms ease-in-out',
     transform: 'translateY(-48px) scale(2.667)'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 export const revealAnimation = keyframes({
   '0%': {
     opacity: 1,
@@ -26,14 +26,10 @@ export const revealAnimation = keyframes({
     transform: 'scale(1)'
   }
 });
-export const revealStyle = css({
-  animation: `${revealAnimation} 150ms ease-in-out forwards`
-});
 
-/**
- * custom css styling for the emoji icon
- * @param index location of the emoji in the rendered list of items
- */
-export const emojiStyleAnimation = index => ({
-  animationDelay: `${index * 50}ms`
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
+export const revealStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  animation: `${revealAnimation} 150ms ease-in-out forwards`,
+  opacity: 0
 });

package/dist/es2019/components/ShowMore/ShowMore.js

@@ -1,44 +1,28 @@
 /** @jsx jsx */
-import React from 'react';
 import { jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
+import { IconButton } from '@atlaskit/button/new';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../../shared/i18n';
-import { moreButtonStyle, moreEmojiContainerStyle, separatorStyle } from './styles';
 
 /**
  * Test id for wrapper button
  */
 export const RENDER_SHOWMORE_TESTID = 'show-more-button';
-export const RENDER_WRAPPER_TESTID = 'show-more-wrapper';
 /**
  * Show more custom emojis button
  */
 export const ShowMore = ({
-  onClick,
-  style = {},
-  className = {},
-  buttonStyle
+  onClick
 }) => {
-  return jsx("div", {
-    className: className.container,
-    css: moreEmojiContainerStyle,
-    style: style.container,
-    "data-testid": RENDER_WRAPPER_TESTID
-  }, jsx("div", {
-    css: separatorStyle
-  }), jsx(FormattedMessage, messages.moreEmoji, message => jsx(Tooltip, {
+  return jsx(FormattedMessage, messages.moreEmoji, message => jsx(Tooltip, {
     content: message
-  }, jsx("button", {
-    className: className.button,
-    css: [moreButtonStyle, buttonStyle],
-    "aria-label": messages.moreEmoji.defaultMessage,
-    type: "button",
-    style: style.button,
+  }, jsx(IconButton, {
+    label: messages.moreEmoji.defaultMessage,
     onClick: onClick,
-    "data-testid": RENDER_SHOWMORE_TESTID
-  }, jsx(EditorMoreIcon, {
-    label: "More"
-  })))));
+    testId: RENDER_SHOWMORE_TESTID,
+    icon: EditorMoreIcon,
+    appearance: "subtle"
+  })));
 };

package/dist/es2019/components/ShowMore/index.js

@@ -1 +1 @@
-export { ShowMore, RENDER_SHOWMORE_TESTID, RENDER_WRAPPER_TESTID } from './ShowMore';
+export { ShowMore, RENDER_SHOWMORE_TESTID } from './ShowMore';

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

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import Tooltip from '@atlaskit/tooltip';
@@ -32,7 +33,10 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent
   }, jsx(Button, _extends({
-    testId: RENDER_TRIGGER_BUTTON_TESTID,
+    testId: RENDER_TRIGGER_BUTTON_TESTID
+    // 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: triggerStyle({
       miniMode,
       disabled

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N70, N20, N40, B100 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
@@ -11,17 +12,21 @@ export const triggerStyle = ({
   height: '24px',
   padding: 0,
   border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
   borderRadius: '20px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   lineHeight: '16px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   ...(miniMode && {
     minWidth: '24px',
     padding: "var(--ds-space-050, 4px)",
     border: 'none',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     borderRadius: `${borderRadius()}px`
   }),
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   ...(disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'

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

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

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import { useEffect, useMemo, useRef } from 'react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx, css } from '@emotion/react';
 import { SlideIn, ExitingPersistence, mediumDurationMs } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
@@ -52,8 +53,11 @@ export var Counter = function Counter(_ref) {
     return lastValue.current ? lastValue.current < value : false;
   }, [value]);
   return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     className: className,
-    "data-testid": RENDER_COMPONENT_WRAPPER,
+    "data-testid": RENDER_COMPONENT_WRAPPER
+    // 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: countStyle
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
@@ -63,13 +67,22 @@ export var Counter = function Counter(_ref) {
   }, function (motion, direction) {
     return jsx("div", {
       ref: motion.ref,
-      css: [containerStyle, css({
+      css: [
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      containerStyle,
+      // 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({
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
         position: direction === 'exiting' ? 'absolute' : undefined
-      })],
+      })]
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
       className: motion.className,
       "data-testid": RENDER_COUNTER_TESTID
     }, jsx("span", {
-      "data-testid": RENDER_LABEL_TESTID,
+      "data-testid": RENDER_LABEL_TESTID
+      // 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: highlight ? [counterLabelStyle, highlightStyle] : counterLabelStyle,
       key: value
     }, label));

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

@@ -1,6 +1,8 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N90, B400 } from '@atlaskit/theme/colors';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var countStyle = css({
   fontSize: 11,
   color: "var(--ds-text-subtlest, ".concat(N90, ")"),
@@ -9,13 +11,19 @@ export var countStyle = css({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)", " 0"),
   lineHeight: '14px'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var containerStyle = css({
   display: 'flex',
   flexDirection: 'column'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var highlightStyle = css({
   color: "var(--ds-text-selected, ".concat(B400, ")")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var counterLabelStyle = css({
   fontVariantNumeric: 'tabular-nums'
 });

package/dist/esm/components/EmojiButton/EmojiButton.js

@@ -1,11 +1,27 @@
 /** @jsx jsx */
 import React 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 { ResourcedEmoji } from '@atlaskit/emoji';
+import { Pressable, xcss } from '@atlaskit/primitives';
 import { messages } from '../../shared/i18n';
 import { isLeftClick } from '../../shared/utils';
-import { emojiButtonStyle } from './styles';
+var emojiButtonStyles = xcss({
+  outline: 'none',
+  display: 'flex',
+  backgroundColor: 'color.background.neutral.subtle',
+  border: 0,
+  borderRadius: 'border.radius',
+  margin: 'space.0',
+  padding: 'space.100',
+  // @ts-expect-error - Nested selectors not supported in XCSS
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+  ':hover > span': {
+    transition: 'transform cubic-bezier(0.23, 1, 0.32, 1) 200ms',
+    transform: 'scale(1.33)'
+  }
+});
 export var RENDER_BUTTON_TESTID = 'button-emoji-id';
 /**
  * custom button to render the custom emoji selector inside the reaction picker
@@ -21,14 +37,13 @@ export var EmojiButton = function EmojiButton(_ref) {
     }
   };
   var intl = useIntl();
-  return jsx("button", {
-    "data-testid": RENDER_BUTTON_TESTID,
+  return jsx(Pressable, {
+    testId: RENDER_BUTTON_TESTID,
     onClick: onButtonClick,
     "aria-label": intl.formatMessage(messages.reactWithEmoji, {
       emoji: emojiId.shortName
     }),
-    type: "button",
-    css: emojiButtonStyle
+    xcss: emojiButtonStyles
   }, jsx(ResourcedEmoji, {
     emojiProvider: emojiProvider,
     emojiId: emojiId

package/dist/esm/components/FlashAnimation/FlashAnimation.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { containerStyle, flashStyle } from './styles';
 /**
@@ -12,7 +13,10 @@ export var RENDER_FLASHANIMATION_TESTID = 'flash-animation';
  */
 export var FlashAnimation = function FlashAnimation(props) {
   return jsx("div", {
-    className: props.className,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: props.className
+    // 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: [containerStyle, props.flash && flashStyle],
     "data-testid": RENDER_FLASHANIMATION_TESTID
   }, props.children);

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

@@ -1,7 +1,10 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
 import { B75, B300 } from '@atlaskit/theme/colors';
 var flashTime = 700;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 export var flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
@@ -19,10 +22,15 @@ export var flashAnimation = keyframes({
     borderColor: "var(--ds-border-selected, ".concat(B300, ")")
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var containerStyle = css({
   width: '100%',
   height: '100%'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var flashStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   animation: "".concat(flashAnimation, " ").concat(flashTime, "ms ease-in-out")
 });

package/dist/esm/components/Reaction/Reaction.js

@@ -4,9 +4,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef, 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 } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji';
+import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import { createAndFireSafe, createReactionClickedEvent, createReactionFocusedEvent, createReactionHoveredEvent } from '../../analytics';
 import { Counter } from '../Counter';
 import { FlashAnimation } from '../FlashAnimation';
@@ -14,11 +16,48 @@ import { ReactionParticleEffect } from '../ReactionParticleEffect';
 import { ReactionTooltip } from '../ReactionTooltip';
 import { messages } from '../../shared/i18n';
 import { isLeftClick } from '../../shared/utils';
-import { containerStyle, emojiStyle, emojiNoReactionStyle, flashStyle, reactedStyle, reactionStyle } from './styles';
+import { emojiStyle, emojiNoReactionStyle, flashStyle } from './styles';
 /**
  * Test id for Reaction item wrapper div
  */
 export var RENDER_REACTION_TESTID = 'render_reaction_wrapper';
+var containerStyles = xcss({
+  position: 'relative'
+});
+var reactionStyles = xcss({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  minWidth: '36px',
+  height: '24px',
+  backgroundColor: 'color.background.neutral.subtle',
+  borderWidth: 'border.width',
+  borderStyle: 'solid',
+  borderColor: 'color.border',
+  borderRadius: 'border.radius.circle',
+  color: 'color.text.subtle',
+  marginBlockStart: 'space.050',
+  marginInlineEnd: 'space.050',
+  padding: 'space.0',
+  overflow: 'hidden',
+  ':hover': {
+    backgroundColor: 'color.background.neutral.subtle.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.neutral.subtle.pressed'
+  }
+});
+var reactedStyles = xcss({
+  backgroundColor: 'color.background.selected',
+  borderColor: 'color.border.selected',
+  ':hover': {
+    backgroundColor: 'color.background.selected.hovered'
+  },
+  ':active': {
+    backgroundColor: 'color.background.selected.pressed'
+  }
+});
+
 /**
  * Render an emoji reaction button
  */
@@ -30,7 +69,6 @@ export var Reaction = function Reaction(_ref) {
     onMouseEnter = _ref$onMouseEnter === void 0 ? function () {} : _ref$onMouseEnter,
     _ref$onFocused = _ref.onFocused,
     onFocused = _ref$onFocused === void 0 ? function () {} : _ref$onFocused,
-    className = _ref.className,
     _ref$flash = _ref.flash,
     flash = _ref$flash === void 0 ? false : _ref$flash,
     _ref$showParticleEffe = _ref.showParticleEffect,
@@ -113,8 +151,8 @@ export var Reaction = function Reaction(_ref) {
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
-  return jsx("div", {
-    css: containerStyle
+  return jsx(Box, {
+    xcss: containerStyles
   }, showParticleEffect && jsx(ReactionParticleEffect, {
     emojiId: emojiId,
     emojiProvider: emojiProvider
@@ -124,15 +162,13 @@ export var Reaction = function Reaction(_ref) {
     handleUserListClick: handleOpenReactionsDialog,
     allowUserDialog: allowUserDialog,
     isEnabled: isTooltipEnabled
-  }, jsx("button", {
-    className: className,
-    css: [reactionStyle, reaction.reacted && reactedStyle],
+  }, jsx(Pressable, {
+    xcss: [reactionStyles, reaction.reacted && reactedStyles],
     "aria-label": intl.formatMessage(messages.reactWithEmoji, {
       emoji: emojiName
     }),
-    type: "button",
     "data-emoji-id": reaction.emojiId,
-    "data-testid": RENDER_REACTION_TESTID,
+    testId: RENDER_REACTION_TESTID,
     onClick: handleClick,
     onMouseEnter: handleMouseEnter,
     onFocus: handleFocused,

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { B50, B75, B300, N20, N40, N400, B100 } from '@atlaskit/theme/colors';
 /**
@@ -12,14 +13,19 @@ var akHeight = 24;
  * of FlashAnimation b/c it otherwise throws off the flash styling
  */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var containerStyle = css({
   position: 'relative'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-050, 4px)", " ", "var(--ds-space-100, 8px)")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var reactionStyle = css({
   display: 'flex',
   flexDirection: 'row',
@@ -47,6 +53,8 @@ export var reactionStyle = css({
   },
   overflow: 'hidden'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var reactedStyle = css({
   backgroundColor: "var(--ds-background-selected, ".concat(B50, ")"),
   borderColor: "var(--ds-border-selected, ".concat(B300, ")"),
@@ -56,13 +64,17 @@ export var reactedStyle = css({
 });
 export var flashHeight = akHeight - 2; // height without the 1px border
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var flashStyle = css({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   borderRadius: '10px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   height: "".concat(flashHeight, "px")
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export var emojiNoReactionStyle = css({
   padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-025, 2px)", " ", "var(--ds-space-050, 4px)", " 10px")
 });