@atlaskit/reactions 22.5.12 → 22.5.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 22.5.13
+
+### Patch Changes
+
+- [#91862](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91862) [`02c06e61c6f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/02c06e61c6f9) - [ux] Update spacing styles to use tokens
+
 ## 22.5.12
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
 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; }
 var packageName = "@atlaskit/reactions";
-var packageVersion = "22.5.12";
+var packageVersion = "22.5.13";
 /**
  * TODO: move to utility package?
  * A random sampling function

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

@@ -10,7 +10,10 @@ var _constants = require("../../shared/constants");
 /** @jsx jsx */
 
 var REACTIONS_CONTAINER_WIDTH = 48;
+
+// These margin values must match
 var REACTION_RIGHT_MARGIN = 8;
+var REACTION_RIGHT_MARGIN_TOKEN = "var(--ds-space-100, 8px)";
 /* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
 var CONTAINER_WIDTH = _constants.NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
 var REACTION_CONTAINER_HEIGHT = 48;
@@ -55,12 +58,10 @@ var counterStyle = exports.counterStyle = function counterStyle(isSelected) {
     fontSize: '11px',
     fontWeight: isSelected ? 700 : 400,
     paddingRight: '0px',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '5px',
+    marginTop: "var(--ds-space-075, 6px)",
     '> div': {
       width: '100%',
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-      padding: '0px!important',
+      padding: "var(--ds-space-0, 0px)".concat("!important"),
       //Counter component has its own styles overriding them to match designs
       color: isSelected ? "".concat("var(--ds-text, ".concat(_colors.B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(_colors.N500, ")"), "!important")
     }
@@ -88,8 +89,7 @@ var customTabWrapper = exports.customTabWrapper = function customTabWrapper(isSe
     justifyContent: 'center',
     minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
     minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    marginRight: "".concat(REACTION_RIGHT_MARGIN, "px"),
+    marginRight: REACTION_RIGHT_MARGIN_TOKEN,
     boxSizing: 'border-box',
     position: 'relative',
     '> div': {

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

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

@@ -3,7 +3,10 @@ import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
 const REACTIONS_CONTAINER_WIDTH = 48;
+
+// These margin values must match
 const REACTION_RIGHT_MARGIN = 8;
+const REACTION_RIGHT_MARGIN_TOKEN = "var(--ds-space-100, 8px)";
 /* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
 const CONTAINER_WIDTH = NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
 const REACTION_CONTAINER_HEIGHT = 48;
@@ -45,12 +48,10 @@ export const counterStyle = isSelected => css({
   fontSize: '11px',
   fontWeight: isSelected ? 700 : 400,
   paddingRight: '0px',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginTop: '5px',
+  marginTop: "var(--ds-space-075, 6px)",
   '> div': {
     width: '100%',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    padding: '0px!important',
+    padding: `${"var(--ds-space-0, 0px)"}!important`,
     //Counter component has its own styles overriding them to match designs
     color: isSelected ? `${`var(--ds-text, ${B400})`}!important` : `2px solid ${`var(--ds-text, ${N500})`}!important`
   }
@@ -74,8 +75,7 @@ export const customTabWrapper = (isSelected, selectedEmojiId, theme) => css({
   justifyContent: 'center',
   minWidth: `${REACTIONS_CONTAINER_WIDTH}px`,
   minHeight: `${REACTION_CONTAINER_HEIGHT}px`,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-  marginRight: `${REACTION_RIGHT_MARGIN}px`,
+  marginRight: REACTION_RIGHT_MARGIN_TOKEN,
   boxSizing: 'border-box',
   position: 'relative',
   '> div': {

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

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

@@ -3,7 +3,10 @@ import { css } from '@emotion/react';
 import { B400, N500, N800 } from '@atlaskit/theme/colors';
 import { NUMBER_OF_REACTIONS_TO_DISPLAY } from '../../shared/constants';
 var REACTIONS_CONTAINER_WIDTH = 48;
+
+// These margin values must match
 var REACTION_RIGHT_MARGIN = 8;
+var REACTION_RIGHT_MARGIN_TOKEN = "var(--ds-space-100, 8px)";
 /* we want to display around 9 reactions and show 10th one as faded so removing 2px from REACTIONS_CONTAINER_WIDTH*/
 var CONTAINER_WIDTH = NUMBER_OF_REACTIONS_TO_DISPLAY * (REACTIONS_CONTAINER_WIDTH + REACTION_RIGHT_MARGIN) + REACTIONS_CONTAINER_WIDTH - 2;
 var REACTION_CONTAINER_HEIGHT = 48;
@@ -48,12 +51,10 @@ export var counterStyle = function counterStyle(isSelected) {
     fontSize: '11px',
     fontWeight: isSelected ? 700 : 400,
     paddingRight: '0px',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-    marginTop: '5px',
+    marginTop: "var(--ds-space-075, 6px)",
     '> div': {
       width: '100%',
-      // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-      padding: '0px!important',
+      padding: "var(--ds-space-0, 0px)".concat("!important"),
       //Counter component has its own styles overriding them to match designs
       color: isSelected ? "".concat("var(--ds-text, ".concat(B400, ")"), "!important") : "2px solid ".concat("var(--ds-text, ".concat(N500, ")"), "!important")
     }
@@ -81,8 +82,7 @@ export var customTabWrapper = function customTabWrapper(isSelected, selectedEmoj
     justifyContent: 'center',
     minWidth: "".concat(REACTIONS_CONTAINER_WIDTH, "px"),
     minHeight: "".concat(REACTION_CONTAINER_HEIGHT, "px"),
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-    marginRight: "".concat(REACTION_RIGHT_MARGIN, "px"),
+    marginRight: REACTION_RIGHT_MARGIN_TOKEN,
     boxSizing: 'border-box',
     position: 'relative',
     '> div': {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.5.12",
+  "version": "22.5.13",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -37,17 +37,17 @@
     "@atlaskit/analytics-namespaced-context": "^6.9.0",
     "@atlaskit/analytics-next": "^9.2.0",
     "@atlaskit/avatar": "^21.5.0",
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.12.0",
     "@atlaskit/emoji": "^67.6.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/modal-dialog": "^12.10.0",
+    "@atlaskit/modal-dialog": "^12.11.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/tabs": "^14.0.0",
-    "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.42.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/tabs": "^14.1.0",
+    "@atlaskit/theme": "^12.7.0",
+    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@babel/runtime": "^7.0.0",