@atlaskit/reactions 22.7.0 → 22.7.2

package/dist/cjs/components/ShowMore/ShowMore.js

@@ -4,51 +4,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ShowMore = exports.RENDER_WRAPPER_TESTID = exports.RENDER_SHOWMORE_TESTID = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@emotion/react");
+exports.ShowMore = exports.RENDER_SHOWMORE_TESTID = void 0;
+var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _new = require("@atlaskit/button/new");
 var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../../shared/i18n");
-var _styles = require("./styles");
 /** @jsx jsx */
 
 /**
  * Test id for wrapper button
  */
 var RENDER_SHOWMORE_TESTID = exports.RENDER_SHOWMORE_TESTID = 'show-more-button';
-var RENDER_WRAPPER_TESTID = exports.RENDER_WRAPPER_TESTID = 'show-more-wrapper';
 /**
  * Show more custom emojis button
  */
 var ShowMore = exports.ShowMore = function ShowMore(_ref) {
-  var onClick = _ref.onClick,
-    _ref$style = _ref.style,
-    style = _ref$style === void 0 ? {} : _ref$style,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? {} : _ref$className,
-    buttonStyle = _ref.buttonStyle;
-  return (0, _react2.jsx)("div", {
-    className: className.container,
-    css: _styles.moreEmojiContainerStyle,
-    style: style.container,
-    "data-testid": RENDER_WRAPPER_TESTID
-  }, (0, _react2.jsx)("div", {
-    css: _styles.separatorStyle
-  }), (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.moreEmoji, function (message) {
-    return (0, _react2.jsx)(_tooltip.default, {
+  var onClick = _ref.onClick;
+  return (0, _react.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.moreEmoji, function (message) {
+    return (0, _react.jsx)(_tooltip.default, {
       content: message
-    }, (0, _react2.jsx)("button", {
-      className: className.button,
-      css: [_styles.moreButtonStyle, buttonStyle],
-      "aria-label": _i18n.messages.moreEmoji.defaultMessage,
-      type: "button",
-      style: style.button,
+    }, (0, _react.jsx)(_new.IconButton, {
+      label: _i18n.messages.moreEmoji.defaultMessage,
       onClick: onClick,
-      "data-testid": RENDER_SHOWMORE_TESTID
-    }, (0, _react2.jsx)(_more.default, {
-      label: "More"
-    })));
-  }));
+      testId: RENDER_SHOWMORE_TESTID,
+      icon: _more.default,
+      appearance: "subtle"
+    }));
+  });
 };

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

@@ -9,12 +9,6 @@ Object.defineProperty(exports, "RENDER_SHOWMORE_TESTID", {
     return _ShowMore.RENDER_SHOWMORE_TESTID;
   }
 });
-Object.defineProperty(exports, "RENDER_WRAPPER_TESTID", {
-  enumerable: true,
-  get: function get() {
-    return _ShowMore.RENDER_WRAPPER_TESTID;
-  }
-});
 Object.defineProperty(exports, "ShowMore", {
   enumerable: true,
   get: function get() {

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

@@ -14,6 +14,8 @@ var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji-add")
 var _styles = require("./styles");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 /**
  * Test id for the tooltip
  */
@@ -39,7 +41,10 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     testId: RENDER_TOOLTIP_TRIGGER_TESTID,
     content: tooltipContent
   }, (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({
-    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: (0, _styles.triggerStyle)({
       miniMode: miniMode,
       disabled: disabled

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

@@ -10,7 +10,7 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 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; } /** @jsx jsx */
+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; } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var DISABLED_BUTTON_COLOR = exports.DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(_colors.N70, ")"), " !important");
 var triggerStyle = exports.triggerStyle = function triggerStyle(_ref) {
   var _ref$miniMode = _ref.miniMode,
@@ -22,6 +22,7 @@ var triggerStyle = exports.triggerStyle = function triggerStyle(_ref) {
     height: '24px',
     padding: 0,
     border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     borderRadius: '20px',
     display: 'flex',
     justifyContent: 'center',
@@ -31,6 +32,7 @@ var triggerStyle = exports.triggerStyle = function triggerStyle(_ref) {
     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: "".concat((0, _constants.borderRadius)(), "px")
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,

package/dist/es2019/analytics/index.js

@@ -1,7 +1,7 @@
 import { createAndFireEvent } from '@atlaskit/analytics-next';
 import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
 const packageName = "@atlaskit/reactions";
-const packageVersion = "22.7.0";
+const packageVersion = "22.7.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/es2019/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
@@ -51,8 +52,11 @@ export const Counter = ({
     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',
@@ -62,13 +66,22 @@ export const Counter = ({
   }, (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/es2019/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 const countStyle = css({
   fontSize: 11,
   color: `var(--ds-text-subtlest, ${N90})`,
@@ -9,13 +11,19 @@ export const countStyle = css({
   padding: `${"var(--ds-space-050, 4px)"} ${"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 const 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 const highlightStyle = css({
   color: `var(--ds-text-selected, ${B400})`
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const counterLabelStyle = css({
   fontVariantNumeric: 'tabular-nums'
 });

package/dist/es2019/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';
+const 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 const RENDER_BUTTON_TESTID = 'button-emoji-id';
 /**
  * custom button to render the custom emoji selector inside the reaction picker
@@ -22,14 +38,13 @@ export const EmojiButton = ({
     }
   };
   const 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/es2019/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';
 /**
@@ -11,7 +12,10 @@ export const RENDER_FLASHANIMATION_TESTID = 'flash-animation';
  * Flash animation background component. See Reaction component for usage.
  */
 export const FlashAnimation = props => 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/es2019/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';
 const 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 const flashAnimation = keyframes({
   '0%': {
     backgroundColor: 'transparent'
@@ -19,10 +22,15 @@ export const flashAnimation = keyframes({
     borderColor: `var(--ds-border-selected, ${B300})`
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const 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 const flashStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   animation: `${flashAnimation} ${flashTime}ms ease-in-out`
 });

package/dist/es2019/components/Reaction/Reaction.js

@@ -1,9 +1,11 @@
 /** @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';
@@ -11,11 +13,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 const RENDER_REACTION_TESTID = 'render_reaction_wrapper';
+const containerStyles = xcss({
+  position: 'relative'
+});
+const 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'
+  }
+});
+const 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
  */
@@ -25,7 +64,6 @@ export const Reaction = ({
   reaction,
   onMouseEnter = () => {},
   onFocused = () => {},
-  className,
   flash = false,
   showParticleEffect = false,
   handleUserListClick = () => {},
@@ -88,8 +126,8 @@ export const Reaction = ({
     handleUserListClick(emojiId);
     setIsTooltipEnabled(false);
   };
-  return jsx("div", {
-    css: containerStyle
+  return jsx(Box, {
+    xcss: containerStyles
   }, showParticleEffect && jsx(ReactionParticleEffect, {
     emojiId: emojiId,
     emojiProvider: emojiProvider
@@ -99,15 +137,13 @@ export const Reaction = ({
     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/es2019/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 @@ const 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 const 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 const emojiStyle = css({
   transformOrigin: 'center center 0',
   lineHeight: '12px',
   padding: `${"var(--ds-space-050, 4px)"} ${"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 const reactionStyle = css({
   display: 'flex',
   flexDirection: 'row',
@@ -47,6 +53,8 @@ export const 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 const reactedStyle = css({
   backgroundColor: `var(--ds-background-selected, ${B50})`,
   borderColor: `var(--ds-border-selected, ${B300})`,
@@ -56,13 +64,17 @@ export const reactedStyle = css({
 });
 export const 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 const 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: `${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 const emojiNoReactionStyle = css({
   padding: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"} 10px`
 });

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx   jsx */
 import { useEffect, useState, 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 { ResourcedEmoji } from '@atlaskit/emoji/element';
 import Avatar from '@atlaskit/avatar/Avatar';
@@ -34,32 +35,42 @@ export const ReactionView = ({
     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 jsx("div", _extends({
-    css: reactionViewStyle
-  }, tabPanelAttributes), jsx("p", null, jsx(ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: {
-      id: selectedEmojiId,
-      shortName: ''
-    },
-    fitToHeight: 24
-  }), intl.formatMessage(messages.emojiName, {
-    emojiName
-  })), alphabeticalNames.length === 0 ? jsx("div", {
-    css: centerSpinner
-  }, jsx(Spinner, {
-    size: "large"
-  })) : 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 jsx("li", {
-      css: userStyle,
-      key: user.id
-    }, jsx(Avatar, {
-      size: "large",
-      src: profile
-    }), jsx("span", null, user.displayName));
-  })));
+  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("p", null, jsx(ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: {
+        id: selectedEmojiId,
+        shortName: ''
+      },
+      fitToHeight: 24
+    }), intl.formatMessage(messages.emojiName, {
+      emojiName
+    })), 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
+        }, jsx(Avatar, {
+          size: "large",
+          src: profile
+        }), jsx("span", null, user.displayName))
+      );
+    })))
+  );
 };

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

@@ -1,6 +1,7 @@
 /** @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 Button from '@atlaskit/button/new';
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@atlaskit/modal-dialog';

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

@@ -1,5 +1,6 @@
 /** @jsx   jsx */
 import { useCallback, useState } 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 Tabs, { Tab, TabList } from '@atlaskit/tabs';
@@ -47,7 +48,10 @@ export const ReactionsList = ({
       shortName: ''
     };
     return jsx("div", {
-      css: customTabWrapper((emojiId === null || emojiId === void 0 ? void 0 : emojiId.id) === selectedEmoji.id, selectedEmoji.id, colorMode),
+      // 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((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