@atlaskit/reactions 22.10.15 → 22.11.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/reactions
 
+## 22.11.0
+
+### Minor Changes
+
+- [#134822](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134822)
+  [`10fb92b357895`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10fb92b357895) -
+  [ux] Jira Visual Refresh changes for reactions
+
+### Patch Changes
+
+- Updated dependencies
+
+## 22.10.16
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.10.15
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -45,6 +45,9 @@
         {
             "path": "../../../design-system/motion/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/popper/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -44,6 +44,9 @@
     {
       "path": "../../../design-system/motion/afm-jira/tsconfig.json"
     },
+    {
+      "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+    },
     {
       "path": "../../../design-system/popper/afm-jira/tsconfig.json"
     },

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

package/dist/cjs/components/Reaction/ReactionButton.js

@@ -12,6 +12,7 @@ var _primitives = require("@atlaskit/primitives");
 var _react2 = require("@emotion/react");
 var _FlashAnimation = require("../FlashAnimation");
 var _styles = require("./styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -19,6 +20,8 @@ var _styles = require("./styles");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+
 var reactionStyles = (0, _primitives.xcss)({
   display: 'flex',
   flexDirection: 'row',
@@ -42,6 +45,9 @@ var reactionStyles = (0, _primitives.xcss)({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   }
 });
+var reactionStylesRefresh = (0, _primitives.xcss)({
+  borderRadius: 'border.radius'
+});
 var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
   var onClick = _ref.onClick,
     _ref$flash = _ref.flash,
@@ -63,9 +69,12 @@ var ReactionButton = exports.ReactionButton = function ReactionButton(_ref) {
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: [reactionStyles].concat((0, _toConsumableArray2.default)(additionalStyles))
+    xcss: [reactionStyles].concat((0, _toConsumableArray2.default)(additionalStyles), [
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && reactionStylesRefresh])
   }, dataAttributes), (0, _react2.jsx)(_FlashAnimation.FlashAnimation, {
-    flash: flash,
-    css: _styles.flashStyle
+    flash: flash
+    /* eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */,
+    css: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? _styles.flashStyle : _styles.flashStyleOld
   }, children));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.reactionStyle = exports.reactedStyle = exports.flashStyle = exports.flashHeight = exports.emojiStyle = exports.emojiNoReactionStyle = exports.containerStyle = void 0;
+exports.reactionStyle = exports.reactedStyle = exports.flashStyleOld = exports.flashStyle = exports.flashHeight = exports.emojiStyle = exports.emojiNoReactionStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -75,7 +75,7 @@ var reactedStyle = exports.reactedStyle = (0, _react.css)({
 var flashHeight = exports.flashHeight = akHeight - 2; // height without the 1px border
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var flashStyle = exports.flashStyle = (0, _react.css)({
+var flashStyleOld = exports.flashStyleOld = (0, _react.css)({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
@@ -83,6 +83,15 @@ var flashStyle = exports.flashStyle = (0, _react.css)({
   // 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 -- Ignored via go/DSP-18766
+var flashStyle = exports.flashStyle = (0, _react.css)({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderRadius: "var(--ds-border-radius-050, 2px)",
+  // 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 -- Ignored via go/DSP-18766
 var emojiNoReactionStyle = exports.emojiNoReactionStyle = (0, _react.css)({

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

@@ -11,6 +11,7 @@ var _react2 = require("@emotion/react");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _emojiAdd = _interopRequireDefault(require("@atlaskit/icon/glyph/emoji-add"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -35,6 +36,9 @@ var triggerStyles = (0, _primitives.xcss)({
   alignItems: 'center',
   lineHeight: '16px'
 });
+var triggerStylesRefresh = (0, _primitives.xcss)({
+  borderRadius: 'border.radius'
+});
 var transparentEnabledTriggerStyles = (0, _primitives.xcss)({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
@@ -89,7 +93,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
     content: tooltipContent
   }, (0, _react2.jsx)(_primitives.Pressable, (0, _extends2.default)({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles],
+    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && triggerStylesRefresh],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

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

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

@@ -8,7 +8,9 @@ import { Pressable, xcss } from '@atlaskit/primitives';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FlashAnimation } from '../FlashAnimation';
-import { flashStyle } from './styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+import { flashStyle, flashStyleOld } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 const reactionStyles = xcss({
   display: 'flex',
   flexDirection: 'row',
@@ -32,6 +34,9 @@ const reactionStyles = xcss({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   }
 });
+const reactionStylesRefresh = xcss({
+  borderRadius: 'border.radius'
+});
 export const ReactionButton = ({
   onClick,
   flash = false,
@@ -51,9 +56,12 @@ export const ReactionButton = ({
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: [reactionStyles, ...additionalStyles]
+    xcss: [reactionStyles, ...additionalStyles,
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-component-visual-refresh') && reactionStylesRefresh]
   }, dataAttributes), jsx(FlashAnimation, {
-    flash: flash,
-    css: flashStyle
+    flash: flash
+    /* eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */,
+    css: fg('platform-component-visual-refresh') ? flashStyle : flashStyleOld
   }, children));
 };

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

@@ -68,7 +68,7 @@ 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 -- Ignored via go/DSP-18766
-export const flashStyle = css({
+export const flashStyleOld = css({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
@@ -76,6 +76,15 @@ export const flashStyle = css({
   // 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 -- Ignored via go/DSP-18766
+export const flashStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderRadius: "var(--ds-border-radius-050, 2px)",
+  // 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 -- Ignored via go/DSP-18766
 export const emojiNoReactionStyle = css({

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

@@ -9,6 +9,7 @@ import { jsx } from '@emotion/react';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * Test id for the tooltip
@@ -27,6 +28,9 @@ const triggerStyles = xcss({
   alignItems: 'center',
   lineHeight: '16px'
 });
+const triggerStylesRefresh = xcss({
+  borderRadius: 'border.radius'
+});
 const transparentEnabledTriggerStyles = xcss({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
@@ -80,7 +84,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles],
+    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

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

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

@@ -9,7 +9,9 @@ import { Pressable, xcss } from '@atlaskit/primitives';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import { FlashAnimation } from '../FlashAnimation';
-import { flashStyle } from './styles';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+import { flashStyle, flashStyleOld } from './styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 var reactionStyles = xcss({
   display: 'flex',
   flexDirection: 'row',
@@ -33,6 +35,9 @@ var reactionStyles = xcss({
     backgroundColor: 'color.background.neutral.subtle.pressed'
   }
 });
+var reactionStylesRefresh = xcss({
+  borderRadius: 'border.radius'
+});
 export var ReactionButton = function ReactionButton(_ref) {
   var onClick = _ref.onClick,
     _ref$flash = _ref.flash,
@@ -54,9 +59,12 @@ export var ReactionButton = function ReactionButton(_ref) {
     "aria-label": ariaLabel,
     "aria-pressed": ariaPressed,
     testId: testId,
-    xcss: [reactionStyles].concat(_toConsumableArray(additionalStyles))
+    xcss: [reactionStyles].concat(_toConsumableArray(additionalStyles), [
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-component-visual-refresh') && reactionStylesRefresh])
   }, dataAttributes), jsx(FlashAnimation, {
-    flash: flash,
-    css: flashStyle
+    flash: flash
+    /* eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766 */,
+    css: fg('platform-component-visual-refresh') ? flashStyle : flashStyleOld
   }, children));
 };

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

@@ -68,7 +68,7 @@ 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 -- Ignored via go/DSP-18766
-export var flashStyle = css({
+export var flashStyleOld = css({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
@@ -76,6 +76,15 @@ export var flashStyle = css({
   // 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 -- Ignored via go/DSP-18766
+export var flashStyle = css({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  borderRadius: "var(--ds-border-radius-050, 2px)",
+  // 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 -- Ignored via go/DSP-18766
 export var emojiNoReactionStyle = css({

package/dist/esm/components/Trigger/Trigger.js

@@ -9,6 +9,7 @@ import { jsx } from '@emotion/react';
 import { Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import EmojiAddIcon from '@atlaskit/icon/glyph/emoji-add';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 /**
  * Test id for the tooltip
@@ -27,6 +28,9 @@ var triggerStyles = xcss({
   alignItems: 'center',
   lineHeight: '16px'
 });
+var triggerStylesRefresh = xcss({
+  borderRadius: 'border.radius'
+});
 var transparentEnabledTriggerStyles = xcss({
   borderColor: 'color.border',
   backgroundColor: 'color.background.neutral.subtle',
@@ -81,7 +85,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     content: tooltipContent
   }, jsx(Pressable, _extends({
     testId: RENDER_TRIGGER_BUTTON_TESTID,
-    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles],
+    xcss: [triggerStyles, disabled ? disabledTriggerStyles : showOpaqueBackground ? opaqueEnabledTriggerStyles : transparentEnabledTriggerStyles, miniMode && miniModeStyles, fg('platform-component-visual-refresh') && triggerStylesRefresh],
     onClick: handleMouseDown,
     isDisabled: disabled,
     ref: ref

package/dist/types/components/Reaction/styles.d.ts

@@ -8,5 +8,6 @@ export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const reactionStyle: import("@emotion/react").SerializedStyles;
 export declare const reactedStyle: import("@emotion/react").SerializedStyles;
 export declare const flashHeight: number;
+export declare const flashStyleOld: import("@emotion/react").SerializedStyles;
 export declare const flashStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiNoReactionStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/components/Reaction/styles.d.ts

@@ -8,5 +8,6 @@ export declare const emojiStyle: import("@emotion/react").SerializedStyles;
 export declare const reactionStyle: import("@emotion/react").SerializedStyles;
 export declare const reactedStyle: import("@emotion/react").SerializedStyles;
 export declare const flashHeight: number;
+export declare const flashStyleOld: import("@emotion/react").SerializedStyles;
 export declare const flashStyle: import("@emotion/react").SerializedStyles;
 export declare const emojiNoReactionStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.10.15",
+	"version": "22.11.0",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,7 +23,6 @@
 	"atlaskit:src": "src/index.ts",
 	"atlassian": {
 		"team": "Editor: Collaboration",
-		"releaseModel": "continuous",
 		"website": {
 			"name": "Reactions"
 		},
@@ -42,9 +41,10 @@
 		"@atlaskit/icon": "^22.15.0",
 		"@atlaskit/modal-dialog": "^12.15.0",
 		"@atlaskit/motion": "^1.9.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.2.0",
-		"@atlaskit/popup": "1.23.1",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/popup": "1.24.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/tabs": "^16.4.0",
 		"@atlaskit/theme": "^13.0.0",
@@ -78,7 +78,7 @@
 		"react-intl-next": "npm:react-intl@^5.18.1",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0",
-		"webpack-dev-server": "^4.11.1"
+		"webpack-dev-server": "^4.15.2"
 	},
 	"keywords": [
 		"fabric",
@@ -107,5 +107,10 @@
 		"typecheck": "cd ../../ && yarn typecheck:package ./packages/elements/reactions",
 		"start:dev": "cd ../../ && yarn start reactions --proxy ./packages/elements/reactions/proxy.ts",
 		"start:edge": "cd ../../ && PROXY_TARGET_ENV=edge yarn start reactions --proxy ./packages/elements/reactions/proxy.ts"
+	},
+	"platform-feature-flags": {
+		"platform-component-visual-refresh": {
+			"type": "boolean"
+		}
 	}
 }