@atlaskit/reactions 22.7.0 → 22.7.2

package/dist/es2019/components/ReactionDialog/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 { B400, N500, N800 } from '@atlaskit/theme/colors';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
@@ -16,23 +17,30 @@ border blue below the reaction. Setting Border Width based on number of reaction
 in case the container overflows */
 export const containerStyle = reactionsBorderWidth => css({
   overflow: 'hidden',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   maxWidth: `${CONTAINER_WIDTH}px`,
   height: '100%',
   display: 'flex',
   justifyContent: 'start',
   position: 'relative',
   scrollBehavior: 'smooth',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&:after': {
     content: '""',
     zIndex: 0,
     display: 'block',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     minWidth: `${reactionsBorderWidth}%`,
     bottom: '0px',
     position: 'absolute'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const titleStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '& > h1': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     fontSize: '24px!important',
     color: `${`var(--ds-text, ${N800})`}`
   }
@@ -46,13 +54,17 @@ export const counterStyle = isSelected => css({
   alignSelf: 'center',
   lineHeight: '14px',
   fontSize: '11px',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   fontWeight: isSelected ? 700 : 400,
   paddingRight: '0px',
   marginTop: "var(--ds-space-075, 6px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {
     width: '100%',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     padding: `${"var(--ds-space-0, 0px)"}!important`,
     //Counter component has its own styles overriding them to match designs
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     color: isSelected ? `${`var(--ds-text, ${B400})`}!important` : `2px solid ${`var(--ds-text, ${N500})`}!important`
   }
 });
@@ -64,7 +76,9 @@ const fadedCss = (edge, theme) => css({
   width: `${REACTIONS_CONTAINER_WIDTH}px`,
   height: `${REACTION_CONTAINER_HEIGHT}px`,
   zIndex: 0,
-  background: theme === 'dark' ? `linear-gradient(${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(${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%)`
+  background:
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  theme === 'dark' ? `linear-gradient(${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(${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%)`
 });
 export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   flexShrink: 0,
@@ -78,19 +92,25 @@ export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   marginRight: REACTION_RIGHT_MARGIN_TOKEN,
   boxSizing: 'border-box',
   position: 'relative',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> div': {
     minWidth: `${REACTIONS_CONTAINER_WIDTH}px`,
     minHeight: `${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-unsafe-values -- Ignored via go/DSP-18766
   '&:after': isSelected ? {
     content: '""',
     borderBottom: `2px solid ${`var(--ds-text, ${B400})`}`,
@@ -109,18 +129,25 @@ export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
     zIndex: 1
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const navigationContainerStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> button': {
     cursor: 'pointer'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   'button:last-child': {
     marginLeft: "var(--ds-space-200, 16px)"
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const reactionViewStyle = 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: `${`var(--ds-text, ${N800})`}`,
@@ -128,40 +155,52 @@ export const reactionViewStyle = css({
     fontWeight: 600,
     fontSize: 16,
     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, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const userListStyle = css({
   listStyle: 'none',
   marginTop: "var(--ds-space-200, 16px)",
   padding: 0,
   textAlign: 'left',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     color: `${`var(--ds-text, ${N500})`}`,
     fontSize: 14
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const userStyle = css({
   display: 'flex',
   alignItems: 'center',
   padding: `${"var(--ds-space-100, 8px)"} 0px ${"var(--ds-space-100, 8px)"} 0px`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '> span': {
     marginLeft: "var(--ds-space-200, 16px)"
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const customTabListStyles = css({
   overflow: 'auto',
   scrollBehavior: 'smooth',
   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,
     // paddingInline exists to maintain styling prior to @atlaskit/tabs update that removed baked in horizontal padding
     paddingInline: "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 centerSpinner = css({
   display: 'flex',
   justifyContent: 'center',

package/dist/es2019/components/ReactionParticleEffect/ReactionParticleEffect.js

@@ -1,20 +1,26 @@
 /** @jsx jsx */
 import { ResourcedEmoji } from '@atlaskit/emoji';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { containerStyle, reactionParticleStyle } from './styles';
 export const PARTICLE_COUNT = 4;
 export const ReactionParticleEffect = ({
   emojiProvider,
   emojiId
-}) => 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
+jsx("div", {
   css: containerStyle
 }, [...Array(PARTICLE_COUNT)].map((_, index) => {
-  return jsx("div", {
-    key: index,
-    css: reactionParticleStyle
-  }, jsx(ResourcedEmoji, {
-    emojiProvider: emojiProvider,
-    emojiId: emojiId,
-    fitToHeight: 16
-  }));
+  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", {
+      key: index,
+      css: reactionParticleStyle
+    }, jsx(ResourcedEmoji, {
+      emojiProvider: emojiProvider,
+      emojiId: emojiId,
+      fitToHeight: 16
+    }))
+  );
 }));

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

@@ -1,4 +1,6 @@
 import { layers } from '@atlaskit/theme/constants';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, keyframes } from '@emotion/react';
 const fade = keyframes({
   '0%': {
@@ -22,12 +24,16 @@ const float = keyframes({
     transform: 'translateY(-120px) scale(1.7)'
   }
 });
+
+// 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',
   left: 8,
   // Ensure the effect displays above tooltips
   zIndex: layers.tooltip() + 1
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css, @atlaskit/design-system/no-exported-keyframes -- Ignored via go/DSP-18766
 export const reactionParticleStyle = css({
   position: 'absolute',
   top: 0,
@@ -37,14 +43,17 @@ export const reactionParticleStyle = css({
   animation: `${fade} ease-in-out, ${float} ease`,
   animationDuration: '700ms',
   // Override position and delay for each particle
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':nth-child(2)': {
     left: -5,
     animationDelay: '0.15s'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':nth-child(3)': {
     left: 8,
     animationDelay: '0.3s'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':nth-child(4)': {
     left: -1,
     animationDelay: '0.45s'

package/dist/es2019/components/ReactionPicker/ReactionPicker.js

@@ -1,5 +1,6 @@
 /** @jsx jsx */
 import React, { useCallback, useLayoutEffect, 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 { FormattedMessage } from 'react-intl-next';
 import { EmojiPicker } from '@atlaskit/emoji/picker';
@@ -30,11 +31,11 @@ export const RENDER_REACTIONPICKERPANEL_TESTID = 'reactionPickerPanel-testid';
 const PICKER_CONTROL_ID = 'emoji-picker';
 const popperModifiers = [
 /**
- Removing this applyStyle modifier as it throws client errors ref:
-https://popper.js.org/docs/v1/#modifiers
-https://popper.js.org/docs/v1/#modifiers..applyStyle
-{ name: 'applyStyle', enabled: false },
- */
+  Removing this applyStyle modifier as it throws client errors ref:
+ https://popper.js.org/docs/v1/#modifiers
+ https://popper.js.org/docs/v1/#modifiers..applyStyle
+ { name: 'applyStyle', enabled: false },
+  */
 {
   name: 'hide',
   enabled: false
@@ -167,7 +168,10 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     (_updatePopper$current = updatePopper.current) === null || _updatePopper$current === void 0 ? void 0 : _updatePopper$current.call(updatePopper);
   }, [settings]);
   return jsx("div", {
-    className: wrapperClassName,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: wrapperClassName
+    // 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: pickerStyle,
     "data-testid": RENDER_REACTIONPICKER_TESTID,
     ref: wrapperRef
@@ -200,7 +204,9 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
     emojiProvider: emojiProvider,
     onSelection: onEmojiSelected,
     size: emojiPickerSize
-  }) : 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
+  jsx("div", {
     css: contentStyle
   }, jsx(Selector, {
     emojiProvider: emojiProvider,
@@ -233,7 +239,9 @@ const PopperWrapper = props => {
   }) => {
     return jsx("div", {
       id: PICKER_CONTROL_ID,
-      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID,
+      "data-testid": RENDER_REACTIONPICKERPANEL_TESTID
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: {
         zIndex: layers.layer(),
         ...style
@@ -247,7 +255,9 @@ const PopperWrapper = props => {
           }
           setPopupRef(node);
         }
-      },
+      }
+      // 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: popupWrapperStyle,
       tabIndex: 0
     }, jsx(RepositionOnUpdate, {

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

@@ -1,26 +1,39 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } 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 pickerStyle = css({
   verticalAlign: 'middle',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&.miniMode': {
     display: 'inline-block'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const contentStyle = css({
   display: 'flex'
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const popupWrapperStyle = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':focus': {
     outline: 'none'
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const popupStyle = css({
   background: `var(--ds-surface-overlay, ${N0})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
   borderRadius: `${borderRadius()}px`,
   boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   '&> div': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     boxShadow: undefined,
     marginTop: "var(--ds-space-050, 4px)",
     marginBottom: "var(--ds-space-050, 4px)"

package/dist/es2019/components/ReactionTooltip/ReactionTooltip.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 Tooltip from '@atlaskit/tooltip';
 import { FormattedMessage } from 'react-intl-next';
@@ -27,7 +28,9 @@ export const ReactionTooltip = ({
   /**
    * Render list of users in the tooltip box
    */
-  const content = !users || users.length === 0 || !isEnabled ? null : jsx("div", {
+  const content = !users || users.length === 0 || !isEnabled ? null :
+  // 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: tooltipStyle,
     tabIndex: 0
   }, jsx("ul", null, emojiName ? jsx("li", {
@@ -37,6 +40,7 @@ export const ReactionTooltip = ({
       key: user.id
     }, user.displayName);
   }), jsx("li", {
+    // 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: allowUserDialog ? [footerStyle, underlineStyle] : footerStyle,
     onClick: () => {
       if (allowUserDialog && handleUserListClick) {

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

@@ -1,37 +1,49 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
 import { N90, N800, N0 } from '@atlaskit/theme/colors';
 export const verticalMargin = 5;
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const tooltipStyle = css({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
   marginBottom: verticalMargin,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   ul: {
     listStyle: 'none',
     margin: 0,
     padding: 0,
     textAlign: 'left'
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
   li: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     marginTop: verticalMargin
   }
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const emojiNameStyle = css({
   textTransform: 'capitalize',
   color: `var(--ds-text-inverse, ${N90})`,
   fontWeight: 600
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const footerStyle = css({
   color: `var(--ds-text-inverse, ${N90})`,
   fontWeight: 300
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const underlineStyle = css({
   cursor: 'pointer',
   textDecoration: 'underline',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     backgroundColor: `var(--ds-background-neutral-bold, ${N800})`,
     color: `var(--ds-text-inverse, ${N0})`

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

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useMemo, 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 { FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ModalTransition } from '@atlaskit/modal-dialog';
-import Button from '@atlaskit/button';
+import Button from '@atlaskit/button/standard-button';
 import Tooltip from '@atlaskit/tooltip';
 import { createAndFireSafe, createPickerButtonClickedEvent, createPickerCancelledEvent, createPickerMoreClickedEvent, createReactionsRenderedEvent, createReactionSelectionEvent, isSampled } from '../../analytics';
 import { SAMPLING_RATE_REACTIONS_RENDERED_EXP } from '../../shared/constants';
@@ -231,46 +232,57 @@ export const Reactions = /*#__PURE__*/React.memo(({
     });
     return reactions.concat(items);
   }, [quickReactionEmojis, reactions]);
-  return jsx("div", {
-    css: wrapperStyle,
-    "data-testid": RENDER_REACTIONS_TESTID
-  }, memorizedReactions.map(reaction => jsx(Reaction, {
-    key: reaction.emojiId,
-    reaction: reaction,
-    emojiProvider: emojiProvider,
-    onClick: onReactionClick,
-    onMouseEnter: handleReactionMouseEnter,
-    onFocused: handleReactionFocused,
-    flash: flash[reaction.emojiId],
-    handleUserListClick: handleOpenReactionsDialog,
-    allowUserDialog: allowUserDialog,
-    showParticleEffect: particleEffectByEmoji[reaction.emojiId]
-  })), jsx(ReactionPicker, {
-    css: reactionPickerStyle,
-    emojiProvider: emojiProvider,
-    allowAllEmojis: allowAllEmojis,
-    pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
-    disabled: status !== ReactionStatus.ready,
-    onSelection: handleOnSelection,
-    onOpen: handlePickerOpen,
-    onCancel: handleOnCancel,
-    onShowMore: handleOnMore,
-    tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize,
-    miniMode: miniMode
-  }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
-    content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
-    hideTooltipOnClick: true
-  }, jsx(Button, {
-    appearance: "subtle-link",
-    onClick: handleOpenAllReactionsDialog,
-    css: seeWhoReactedStyle,
-    testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
-  }, jsx(FormattedMessage, messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
-    selectedEmojiId: selectedEmojiId,
-    reactions: memorizedReactions,
-    emojiProvider: emojiProvider,
-    handleCloseReactionsDialog: handleCloseReactionsDialog,
-    handleSelectReaction: handleSelectReactionInDialog
-  })));
+  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", {
+      css: wrapperStyle,
+      "data-testid": RENDER_REACTIONS_TESTID
+    }, memorizedReactions.map(reaction => jsx(Reaction, {
+      key: reaction.emojiId,
+      reaction: reaction,
+      emojiProvider: emojiProvider,
+      onClick: onReactionClick,
+      onMouseEnter: handleReactionMouseEnter,
+      onFocused: handleReactionFocused,
+      flash: flash[reaction.emojiId],
+      handleUserListClick: handleOpenReactionsDialog,
+      allowUserDialog: allowUserDialog,
+      showParticleEffect: particleEffectByEmoji[reaction.emojiId]
+    })), jsx(ReactionPicker
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    , {
+      css: reactionPickerStyle,
+      emojiProvider: emojiProvider,
+      allowAllEmojis: allowAllEmojis,
+      pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
+      disabled: status !== ReactionStatus.ready,
+      onSelection: handleOnSelection,
+      onOpen: handlePickerOpen,
+      onCancel: handleOnCancel,
+      onShowMore: handleOnMore,
+      tooltipContent: getTooltip(status, errorMessage),
+      emojiPickerSize: emojiPickerSize,
+      miniMode: miniMode
+    }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
+      content: jsx(FormattedMessage, messages.seeWhoReactedTooltip),
+      hideTooltipOnClick: true
+    }, jsx(Button
+    // TODO: (from codemod) "link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
+    // https://product-fabric.atlassian.net/browse/DSP-18982
+    , {
+      appearance: "subtle-link",
+      onClick: handleOpenAllReactionsDialog
+      // TODO: (from codemod) Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ,
+      css: seeWhoReactedStyle,
+      testId: RENDER_VIEWALL_REACTED_USERS_DIALOG
+    }, jsx(FormattedMessage, messages.seeWhoReacted))), jsx(ModalTransition, null, !!selectedEmojiId && jsx(ReactionsDialog, {
+      selectedEmojiId: selectedEmojiId,
+      reactions: memorizedReactions,
+      emojiProvider: emojiProvider,
+      handleCloseReactionsDialog: handleCloseReactionsDialog,
+      handleSelectReaction: handleSelectReactionInDialog
+    })))
+  );
 });

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

@@ -1,9 +1,13 @@
 /** @jsx jsx */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const reactionPickerStyle = css({
   display: 'inline-block',
   marginTop: "var(--ds-space-050, 4px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const seeWhoReactedStyle = css({
   height: '24px',
   lineHeight: '24px',
@@ -12,6 +16,8 @@ export const seeWhoReactedStyle = css({
   marginTop: "var(--ds-space-050, 4px)",
   marginLeft: "var(--ds-space-050, 4px)"
 });
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles, @atlaskit/design-system/no-exported-css -- Ignored via go/DSP-18766
 export const wrapperStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
@@ -19,6 +25,7 @@ export const wrapperStyle = css({
   alignItems: 'center',
   borderRadius: '15px',
   marginTop: "var(--ds-space-negative-050, -4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '> :first-of-type > :first-of-type': {
     marginLeft: 0
   }