@atlaskit/reactions 19.1.3 → 20.1.0

package/dist/cjs/reaction-store/ReactionsStore.js

@@ -39,6 +39,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
       reactions: {},
       flash: {}
     };
+    var metadata = arguments.length > 2 ? arguments[2] : undefined;
     (0, _classCallCheck2.default)(this, MemoryReactionsStore);
     (0, _defineProperty2.default)(this, "callbacks", []);
     (0, _defineProperty2.default)(this, "setState", function (newState) {
@@ -122,7 +123,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
       _this.flash(reaction);
 
-      _this.client.addReaction(containerAri, ari, emojiId).then(function (reaction) {
+      _this.client.addReaction(containerAri, ari, emojiId, _this.metadata).then(function (_) {
         if (_this.createAnalyticsEvent) {
           (0, _analytics.createAndFireSafe)(_this.createAnalyticsEvent, _analytics.createRestSucceededEvent, 'addReaction');
         }
@@ -141,7 +142,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
 
       _this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
 
-      _this.client.deleteReaction(containerAri, ari, emojiId);
+      _this.client.deleteReaction(containerAri, ari, emojiId, _this.metadata);
     });
     (0, _defineProperty2.default)(this, "setCreateAnalyticsEvent", function (createAnalyticsEvent) {
       _this.createAnalyticsEvent = createAnalyticsEvent;
@@ -185,6 +186,7 @@ var MemoryReactionsStore = /*#__PURE__*/function () {
     });
     this.client = client;
     this.state = state;
+    this.metadata = metadata;
   }
 
   (0, _createClass2.default)(MemoryReactionsStore, [{

package/dist/cjs/reaction-store/index.js

@@ -3,16 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "ReactionConsumer", {
+Object.defineProperty(exports, "MemoryReactionsStore", {
   enumerable: true,
   get: function get() {
-    return _ReactionConsumer.ReactionConsumer;
+    return _ReactionsStore.MemoryReactionsStore;
   }
 });
-Object.defineProperty(exports, "MemoryReactionsStore", {
+Object.defineProperty(exports, "ReactionConsumer", {
   enumerable: true,
   get: function get() {
-    return _ReactionsStore.MemoryReactionsStore;
+    return _ReactionConsumer.ReactionConsumer;
   }
 });
 

package/dist/cjs/reaction-store/utils.js

@@ -5,8 +5,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getReactionsSortFunction = exports.flattenAris = exports.compareEmojiId = exports.byEmojiId = exports.addOne = void 0;
 exports.isRealErrorFromService = isRealErrorFromService;
-exports.flattenAris = exports.getReactionsSortFunction = exports.updateByEmojiId = exports.removeOne = exports.addOne = exports.byEmojiId = exports.readyState = exports.sortByPreviousPosition = exports.sortByRelevance = exports.compareEmojiId = void 0;
+exports.updateByEmojiId = exports.sortByRelevance = exports.sortByPreviousPosition = exports.removeOne = exports.readyState = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "19.1.3"
+	"version": "20.1.0"
 }

package/dist/es2019/client/MockReactionsClient.js

@@ -22,7 +22,7 @@ const defaultUsers = [user('oscar', 'Oscar Wallhult'), user('julien', 'Julien Mi
 export class MockReactionsClient {
   constructor(delay = 0) {
     _defineProperty(this, "mockData", {
-      [objectReactionKey(containerAri, ari)]: [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':hearts:', 100, false)]
+      [objectReactionKey(containerAri, ari)]: [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]
     });
 
     _defineProperty(this, "delayPromise", () => new Promise(resolve => window.setTimeout(resolve, this.delay)));

package/dist/es2019/client/ReactionServiceClient.js

@@ -59,7 +59,7 @@ export class ReactionServiceClient {
     });
   }
 
-  addReaction(containerAri, ari, emojiId) {
+  addReaction(containerAri, ari, emojiId, metadata) {
     return this.requestService('reactions', {
       requestInit: {
         method: 'POST',
@@ -67,7 +67,10 @@ export class ReactionServiceClient {
         body: JSON.stringify({
           emojiId,
           ari,
-          containerAri
+          containerAri,
+          ...(metadata ? {
+            metadata: JSON.stringify(metadata)
+          } : {})
         }),
         credentials: 'include'
       }
@@ -76,12 +79,15 @@ export class ReactionServiceClient {
     }) => reactions);
   }
 
-  deleteReaction(containerAri, ari, emojiId) {
+  deleteReaction(containerAri, ari, emojiId, metadata) {
     return this.requestService('reactions', {
       queryParams: {
         ari,
         emojiId,
-        containerAri
+        containerAri,
+        ...(metadata ? {
+          metadata: JSON.stringify(metadata)
+        } : {})
       },
       requestInit: {
         method: 'DELETE',

package/dist/es2019/components/Counter.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { N90, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -8,13 +9,13 @@ import { akHeight } from './utils';
 const animationTime = 300;
 export const countStyle = style({
   fontSize: '11px',
-  color: N90,
+  color: token('color.text.lowEmphasis', N90),
   overflow: 'hidden',
   height: `${akHeight}px`,
   transition: `width ${animationTime}ms ease-in-out`
 });
 export const highlightStyle = style({
-  color: B400,
+  color: token('color.text.selected', B400),
   fontWeight: 600
 });
 export const containerStyle = style({

package/dist/es2019/components/FlashAnimation.js

@@ -1,4 +1,5 @@
-import { B75 } from '@atlaskit/theme/colors';
+import { B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { keyframes, style } from 'typestyle';
@@ -12,13 +13,16 @@ const flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: B75
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '75%': {
-    backgroundColor: B75
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '100%': {
-    backgroundColor: 'transparent'
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   }
 });
 export const flashStyle = style({

package/dist/es2019/components/Reaction.js

@@ -1,7 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
-import { N20, N40, N400 } from '@atlaskit/theme/colors';
+import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -30,25 +31,36 @@ const reactionStyle = style({
   minWidth: '36px',
   height: `${akHeight}px`,
   background: 'transparent',
-  border: `1px solid ${N40}`,
+  border: `1px solid ${token('color.border.neutral', N40)}`,
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: `${N400}`,
+  color: `${token('color.text.mediumEmphasis', N400)}`,
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: `${N20}`
+      background: `${token('color.background.transparentNeutral.hover', N20)}`
     }
   }
 });
+const reactedStyle = style({
+  backgroundColor: token('color.background.selected.resting', B50),
+  borderColor: token('color.iconBorder.brand', B300),
+  $nest: {
+    '&:hover': {
+      background: `${token('color.background.selected.hover', B75)}`
+    }
+  }
+});
+const flashHeight = akHeight - 2; // height without the 1px border
+
 const flashStyle = style({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',
-  height: `${akHeight}px`
+  height: `${flashHeight}px`
 });
 const counterStyle = style({
   padding: '4px 8px 4px 0',
@@ -133,7 +145,9 @@ class ReactionWithoutAnalytics extends PureComponent {
     const {
       emojiName
     } = this.state;
-    const classNames = cx(reactionStyle, classNameProp);
+    const classNames = cx(reactionStyle, classNameProp, {
+      [reactedStyle]: reaction.reacted
+    });
     const emojiId = {
       id: reaction.emojiId,
       shortName: ''

package/dist/es2019/components/ReactionPicker.js

@@ -3,6 +3,7 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -11,10 +12,6 @@ import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { layers } from '@atlaskit/theme/constants';
-const akBorderRadius = `${borderRadius()}px`;
-const akColorN0 = N0;
-const akColorN50A = N50A;
-const akColorN60A = N60A;
 const pickerStyle = style({
   verticalAlign: 'middle',
   $nest: {
@@ -28,9 +25,9 @@ const contentStyle = style({
   display: 'flex'
 });
 const popupStyle = style({
-  background: akColorN0,
-  borderRadius: akBorderRadius,
-  boxShadow: `0 4px 8px -2px ${akColorN50A}, 0 0 1px ${akColorN60A}`,
+  background: token('color.background.overlay', N0),
+  borderRadius: `${borderRadius()}px`,
+  boxShadow: token('shadow.overlay', `0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`),
   $nest: {
     '&> div': {
       boxShadow: undefined

package/dist/es2019/components/ReactionTooltip.js

@@ -1,11 +1,18 @@
+import _extends from "@babel/runtime/helpers/extends";
 import Tooltip from '@atlaskit/tooltip';
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
 import { style } from 'typestyle';
+import { token } from '@atlaskit/tokens';
+import { N90 } from '@atlaskit/theme/colors';
+import { messages } from './i18n';
+const verticalMargin = 5;
 const tooltipStyle = style({
   maxWidth: '150px',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   overflow: 'hidden',
+  marginBottom: verticalMargin,
   $nest: {
     ul: {
       listStyle: 'none',
@@ -16,16 +23,18 @@ const tooltipStyle = style({
     li: {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      marginTop: 0
+      marginTop: verticalMargin
     }
   }
 });
 const emojiNameStyle = style({
   textTransform: 'capitalize',
-  marginBottom: 5
+  color: token('color.text.mediumEmphasis', N90),
+  fontWeight: 600
 });
 const footerStyle = style({
-  marginTop: 5
+  color: token('color.text.mediumEmphasis', N90),
+  fontWeight: 300
 });
 const TOOLTIP_USERS_LIMIT = 5;
 export const ReactionTooltip = ({
@@ -41,15 +50,19 @@ export const ReactionTooltip = ({
 
   const content = /*#__PURE__*/React.createElement("div", {
     className: tooltipStyle
-  }, emojiName ? /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement("ul", null, emojiName ? /*#__PURE__*/React.createElement("li", {
     className: emojiNameStyle
-  }, emojiName) : null, /*#__PURE__*/React.createElement("ul", null, users.slice(0, TOOLTIP_USERS_LIMIT).map((user, index) => {
+  }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map((user, index) => {
     return /*#__PURE__*/React.createElement("li", {
       key: index
     }, user.displayName);
-  })), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/React.createElement("span", {
+  }), users.length > TOOLTIP_USERS_LIMIT ? /*#__PURE__*/React.createElement("li", {
     className: footerStyle
-  }, "+", users.length - TOOLTIP_USERS_LIMIT, "...") : null);
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, messages.otherUsers, {
+    values: {
+      count: users.length - TOOLTIP_USERS_LIMIT
+    }
+  }))) : null));
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: content,
     position: "bottom"

package/dist/es2019/components/Selector.js

@@ -53,8 +53,8 @@ export const defaultReactions = [{
   id: '1f525',
   shortName: ':fire:'
 }, {
-  id: '2665',
-  shortName: ':hearts:'
+  id: '2764',
+  shortName: ':heart:'
 }, {
   id: '1f632',
   shortName: ':astonished:'

package/dist/es2019/components/ShowMore.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N30A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 import cx from 'classnames';
 import React from 'react';
@@ -24,12 +25,12 @@ const moreButtonStyle = style({
   verticalAlign: 'top',
   $nest: {
     '&:hover': {
-      backgroundColor: N30A
+      backgroundColor: token('color.background.transparentNeutral.hover', N30A)
     }
   }
 });
 const separatorStyle = style({
-  backgroundColor: N30A,
+  backgroundColor: token('color.border.neutral', N30A),
   margin: '8px 8px 8px 4px',
   width: '1px',
   height: '60%',

package/dist/es2019/components/i18n.js

@@ -14,5 +14,10 @@ export const messages = defineMessages({
     id: 'fabric.reactions.error.unexpected',
     defaultMessage: 'Something went wrong',
     description: 'Unexpected error message'
+  },
+  otherUsers: {
+    id: 'fabric.reactions.other.reacted.users',
+    defaultMessage: '{count, plural, one {and one other} other {and {count} others}}',
+    description: "The number of users that have reacted similarly, but aren't shown"
   }
 });

package/dist/es2019/i18n/en.js

@@ -2,5 +2,6 @@
 export default {
   'fabric.reactions.loading': 'Loading...',
   'fabric.reactions.more.emoji': 'More emoji',
-  'fabric.reactions.error.unexpected': 'Something went wrong'
+  'fabric.reactions.error.unexpected': 'Something went wrong',
+  'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and "{count}" others}}'
 };

package/dist/es2019/i18n/en_GB.js

@@ -2,5 +2,6 @@
 export default {
   'fabric.reactions.loading': 'Loading...',
   'fabric.reactions.more.emoji': 'More emoji',
-  'fabric.reactions.error.unexpected': 'Something went wrong'
+  'fabric.reactions.error.unexpected': 'Something went wrong',
+  'fabric.reactions.other.reacted.users': '{count, plural, one {and one other} other {and "{count}" others}}'
 };

package/dist/es2019/reaction-store/ReactionsStore.js

@@ -8,7 +8,7 @@ export class MemoryReactionsStore {
   constructor(client, state = {
     reactions: {},
     flash: {}
-  }) {
+  }, metadata) {
     _defineProperty(this, "callbacks", []);
 
     _defineProperty(this, "setState", newState => {
@@ -90,7 +90,7 @@ export class MemoryReactionsStore {
       } = reaction;
       this.optmisticUpdate(containerAri, ari, emojiId)(utils.addOne);
       this.flash(reaction);
-      this.client.addReaction(containerAri, ari, emojiId).then(reaction => {
+      this.client.addReaction(containerAri, ari, emojiId, this.metadata).then(_ => {
         if (this.createAnalyticsEvent) {
           createAndFireSafe(this.createAnalyticsEvent, createRestSucceededEvent, 'addReaction');
         }
@@ -110,7 +110,7 @@ export class MemoryReactionsStore {
         emojiId
       } = reaction;
       this.optmisticUpdate(containerAri, ari, emojiId)(utils.removeOne);
-      this.client.deleteReaction(containerAri, ari, emojiId);
+      this.client.deleteReaction(containerAri, ari, emojiId, this.metadata);
     });
 
     _defineProperty(this, "setCreateAnalyticsEvent", createAnalyticsEvent => {
@@ -157,6 +157,7 @@ export class MemoryReactionsStore {
 
     this.client = client;
     this.state = state;
+    this.metadata = metadata;
   }
 
   getReactionsState(containerAri, ari) {

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "19.1.3"
+	"version": "20.1.0"
 }

package/dist/esm/client/MockReactionsClient.js

@@ -39,7 +39,7 @@ export var MockReactionsClient = /*#__PURE__*/function () {
 
     _classCallCheck(this, MockReactionsClient);
 
-    _defineProperty(this, "mockData", _defineProperty({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':hearts:', 100, false)]));
+    _defineProperty(this, "mockData", _defineProperty({}, objectReactionKey(containerAri, ari), [reaction(':fire:', 1, true), reaction(':thumbsup:', 9, false), reaction(':astonished:', 5, false), reaction(':heart:', 100, false)]));
 
     _defineProperty(this, "delayPromise", function () {
       return new Promise(function (resolve) {

package/dist/esm/client/ReactionServiceClient.js

@@ -78,16 +78,18 @@ export var ReactionServiceClient = /*#__PURE__*/function () {
     }
   }, {
     key: "addReaction",
-    value: function addReaction(containerAri, ari, emojiId) {
+    value: function addReaction(containerAri, ari, emojiId, metadata) {
       return this.requestService('reactions', {
         requestInit: {
           method: 'POST',
           headers: this.getHeaders(),
-          body: JSON.stringify({
+          body: JSON.stringify(_objectSpread({
             emojiId: emojiId,
             ari: ari,
             containerAri: containerAri
-          }),
+          }, metadata ? {
+            metadata: JSON.stringify(metadata)
+          } : {})),
           credentials: 'include'
         }
       }).then(function (_ref) {
@@ -97,13 +99,15 @@ export var ReactionServiceClient = /*#__PURE__*/function () {
     }
   }, {
     key: "deleteReaction",
-    value: function deleteReaction(containerAri, ari, emojiId) {
+    value: function deleteReaction(containerAri, ari, emojiId, metadata) {
       return this.requestService('reactions', {
-        queryParams: {
+        queryParams: _objectSpread({
           ari: ari,
           emojiId: emojiId,
           containerAri: containerAri
-        },
+        }, metadata ? {
+          metadata: JSON.stringify(metadata)
+        } : {}),
         requestInit: {
           method: 'DELETE',
           headers: this.getHeaders(),

package/dist/esm/components/Counter.js

@@ -11,6 +11,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import { N90, B400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { CSSTransition } from 'react-transition-group';
@@ -19,13 +20,13 @@ import { akHeight } from './utils';
 var animationTime = 300;
 export var countStyle = style({
   fontSize: '11px',
-  color: N90,
+  color: token('color.text.lowEmphasis', N90),
   overflow: 'hidden',
   height: "".concat(akHeight, "px"),
   transition: "width ".concat(animationTime, "ms ease-in-out")
 });
 export var highlightStyle = style({
-  color: B400,
+  color: token('color.text.selected', B400),
   fontWeight: 600
 });
 export var containerStyle = style({

package/dist/esm/components/FlashAnimation.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { B75 } from '@atlaskit/theme/colors';
+import { B75, B300 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { keyframes, style } from 'typestyle';
@@ -13,13 +14,16 @@ var flashAnimation = keyframes({
     backgroundColor: 'transparent'
   },
   '20%': {
-    backgroundColor: B75
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '75%': {
-    backgroundColor: B75
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   },
   '100%': {
-    backgroundColor: 'transparent'
+    backgroundColor: token('color.background.selected.pressed', B75),
+    borderColor: token('color.iconBorder.brand', B300)
   }
 });
 export var flashStyle = style({

package/dist/esm/components/Reaction.js

@@ -12,7 +12,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ResourcedEmoji } from '@atlaskit/emoji/element';
-import { N20, N40, N400 } from '@atlaskit/theme/colors';
+import { B50, B75, B300, N20, N40, N400 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -41,25 +42,36 @@ var reactionStyle = style({
   minWidth: '36px',
   height: "".concat(akHeight, "px"),
   background: 'transparent',
-  border: "1px solid ".concat(N40),
+  border: "1px solid ".concat(token('color.border.neutral', N40)),
   boxSizing: 'border-box',
   borderRadius: '20px',
-  color: "".concat(N400),
+  color: "".concat(token('color.text.mediumEmphasis', N400)),
   cursor: 'pointer',
   margin: 0,
   padding: 0,
   transition: '200ms ease-in-out',
   $nest: {
     '&:hover': {
-      background: "".concat(N20)
+      background: "".concat(token('color.background.transparentNeutral.hover', N20))
     }
   }
 });
+var reactedStyle = style({
+  backgroundColor: token('color.background.selected.resting', B50),
+  borderColor: token('color.iconBorder.brand', B300),
+  $nest: {
+    '&:hover': {
+      background: "".concat(token('color.background.selected.hover', B75))
+    }
+  }
+});
+var flashHeight = akHeight - 2; // height without the 1px border
+
 var flashStyle = style({
   display: 'flex',
   flexDirection: 'row',
   borderRadius: '10px',
-  height: "".concat(akHeight, "px")
+  height: "".concat(flashHeight, "px")
 });
 var counterStyle = style({
   padding: '4px 8px 4px 0',
@@ -156,7 +168,7 @@ var ReactionWithoutAnalytics = /*#__PURE__*/function (_PureComponent) {
           classNameProp = _this$props3.className,
           flash = _this$props3.flash;
       var emojiName = this.state.emojiName;
-      var classNames = cx(reactionStyle, classNameProp);
+      var classNames = cx(reactionStyle, classNameProp, _defineProperty({}, reactedStyle, reaction.reacted));
       var emojiId = {
         id: reaction.emojiId,
         shortName: ''

package/dist/esm/components/ReactionPicker.js

@@ -18,6 +18,7 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 import cx from 'classnames';
 import React from 'react';
 import { PureComponent } from 'react';
@@ -26,10 +27,6 @@ import { style } from 'typestyle';
 import { Selector } from './Selector';
 import { Trigger } from './Trigger';
 import { layers } from '@atlaskit/theme/constants';
-var akBorderRadius = "".concat(borderRadius(), "px");
-var akColorN0 = N0;
-var akColorN50A = N50A;
-var akColorN60A = N60A;
 var pickerStyle = style({
   verticalAlign: 'middle',
   $nest: {
@@ -43,9 +40,9 @@ var contentStyle = style({
   display: 'flex'
 });
 var popupStyle = style({
-  background: akColorN0,
-  borderRadius: akBorderRadius,
-  boxShadow: "0 4px 8px -2px ".concat(akColorN50A, ", 0 0 1px ").concat(akColorN60A),
+  background: token('color.background.overlay', N0),
+  borderRadius: "".concat(borderRadius(), "px"),
+  boxShadow: token('shadow.overlay', "0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A)),
   $nest: {
     '&> div': {
       boxShadow: undefined