@atlaskit/reactions 27.1.0 → 27.1.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/reactions
 
+## 27.1.2
+
+### Patch Changes
+
+- [#125203](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/125203)
+  [`8b6c24cf0f169`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b6c24cf0f169) -
+  [ux] Update emoji and button styling to smaller for compact style. Also update font color to match
+  other byline items.
+- Updated dependencies
+
+## 27.1.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 27.1.0
 
 ### Minor 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 = "27.1.0";
+var packageVersion = "27.1.2";
 /**
  * TODO: move to utility package?
  * A random sampling function

package/dist/cjs/components/Counter/Counter.js

@@ -43,7 +43,8 @@ var Counter = exports.Counter = function Counter(_ref) {
     className = _ref.className,
     value = _ref.value,
     _ref$animationDuratio = _ref.animationDuration,
-    animationDuration = _ref$animationDuratio === void 0 ? 'medium' : _ref$animationDuratio;
+    animationDuration = _ref$animationDuratio === void 0 ? 'medium' : _ref$animationDuratio,
+    useDarkerFont = _ref.useDarkerFont;
   var getLabel = function getLabel(value) {
     // Check if reached limit
     if (limit && overLimitLabel && value >= limit) {
@@ -68,7 +69,7 @@ var Counter = exports.Counter = function Counter(_ref) {
     "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: _styles.countStyle
+    css: useDarkerFont ? [_styles.countStyle, _styles.darkerFontStyle] : _styles.countStyle
   }, (0, _react2.jsx)(_motion.ExitingPersistence, null, (0, _react2.jsx)(_motion.SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
     exitTo: isIncreasing ? 'top' : 'bottom',

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
+exports.highlightStyle = exports.darkerFontStyle = exports.counterLabelStyle = exports.countStyle = exports.containerStyle = void 0;
 var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -37,4 +37,9 @@ var highlightStyle = exports.highlightStyle = (0, _react.css)({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 var counterLabelStyle = exports.counterLabelStyle = (0, _react.css)({
   fontVariantNumeric: 'tabular-nums'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var darkerFontStyle = exports.darkerFontStyle = (0, _react.css)({
+  color: "var(--ds-text-subtle, #44546F)"
 });

package/dist/cjs/components/ReactionSummary/ReactionSummaryButton.js

@@ -28,7 +28,12 @@ var buttonStyle = (0, _primitives.xcss)({
   paddingLeft: 'space.100'
 });
 var compactButtonStyle = (0, _primitives.xcss)({
-  height: '22px'
+  height: '20px',
+  alignItems: 'center',
+  marginTop: 'space.075'
+});
+var compactPaddingStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.025'
 });
 var opaqueBackgroundStyles = (0, _primitives.xcss)({
   backgroundColor: 'elevation.surface',
@@ -100,7 +105,8 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
     additionalStyles: [].concat(buttonStyles, subtleSummaryStyles, compactButtonStyles)
   }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.050",
-    xcss: buttonStyle
+    xcss: useCompactStyles ? [buttonStyle, compactPaddingStyles] : buttonStyle,
+    testId: "reaction-summary-wrapper"
   }, topReactions.map(function (reaction) {
     return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
       xcss: emojiStyle,
@@ -112,9 +118,10 @@ var ReactionSummaryButton = exports.ReactionSummaryButton = /*#__PURE__*/(0, _re
         id: reaction.emojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: useCompactStyles ? 12 : 16
     }));
   })), /*#__PURE__*/_react.default.createElement(_Counter.Counter, {
-    value: totalReactionsCount
+    value: totalReactionsCount,
+    useDarkerFont: useCompactStyles
   })));
 });

package/dist/cjs/components/ReactionSummary/ReactionSummaryViewEmojiPicker.js

@@ -20,7 +20,6 @@ var _Trigger = require("../Trigger");
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
-;
 var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPicker(_ref) {
   var emojiProvider = _ref.emojiProvider,
     onSelection = _ref.onSelection,
@@ -46,9 +45,9 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
   };
 
   /**
-  * Event callback when the picker is closed
-  * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
-  */
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
+   */
   var close = (0, _react.useCallback)(function (_id) {
     setIsOpen(false);
     // ufo abort reaction experience
@@ -62,9 +61,9 @@ var ReactionSummaryViewEmojiPicker = exports.ReactionSummaryViewEmojiPicker = fu
   }, [setIsOpen]);
 
   /**
-  * Event callback when an emoji icon is selected
-  * @param item selected item
-  */
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
   var onEmojiSelected = (0, _react.useCallback)(function (item) {
     // no emoji was selected
     if (!item.id) {

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

package/dist/es2019/components/Counter/Counter.js

@@ -9,7 +9,7 @@ import { SlideIn, ExitingPersistence } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 import { formatLargeNumber } from '../../shared/utils';
-import { containerStyle, counterLabelStyle, countStyle, highlightStyle } from './styles';
+import { containerStyle, counterLabelStyle, countStyle, highlightStyle, darkerFontStyle } from './styles';
 
 /**
  * Test id for component top level div
@@ -34,7 +34,8 @@ export const Counter = ({
   overLimitLabel,
   className,
   value,
-  animationDuration = 'medium'
+  animationDuration = 'medium',
+  useDarkerFont
 }) => {
   const getLabel = value => {
     // Check if reached limit
@@ -60,7 +61,7 @@ export const Counter = ({
     "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
+    css: useDarkerFont ? [countStyle, darkerFontStyle] : countStyle
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
     exitTo: isIncreasing ? 'top' : 'bottom',

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

@@ -30,4 +30,9 @@ export const highlightStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const counterLabelStyle = css({
   fontVariantNumeric: 'tabular-nums'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const darkerFontStyle = css({
+  color: "var(--ds-text-subtle, #44546F)"
 });

package/dist/es2019/components/ReactionSummary/ReactionSummaryButton.js

@@ -17,7 +17,12 @@ const buttonStyle = xcss({
   paddingLeft: 'space.100'
 });
 const compactButtonStyle = xcss({
-  height: '22px'
+  height: '20px',
+  alignItems: 'center',
+  marginTop: 'space.075'
+});
+const compactPaddingStyles = xcss({
+  paddingTop: 'space.025'
 });
 const opaqueBackgroundStyles = xcss({
   backgroundColor: 'elevation.surface',
@@ -81,7 +86,8 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
     additionalStyles: [...buttonStyles, ...subtleSummaryStyles, ...compactButtonStyles]
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: buttonStyle
+    xcss: useCompactStyles ? [buttonStyle, compactPaddingStyles] : buttonStyle,
+    testId: "reaction-summary-wrapper"
   }, topReactions.map(reaction => /*#__PURE__*/React.createElement(Box, {
     xcss: emojiStyle,
     testId: RENDER_SUMMARY_EMOJI_TESTID
@@ -92,8 +98,9 @@ export const ReactionSummaryButton = /*#__PURE__*/forwardRef(({
       id: reaction.emojiId,
       shortName: ''
     },
-    fitToHeight: 16
+    fitToHeight: useCompactStyles ? 12 : 16
   })))), /*#__PURE__*/React.createElement(Counter, {
-    value: totalReactionsCount
+    value: totalReactionsCount,
+    useDarkerFont: useCompactStyles
   })));
 });

package/dist/es2019/components/ReactionSummary/ReactionSummaryViewEmojiPicker.js

@@ -10,7 +10,6 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
 import Popup from '@atlaskit/popup';
 import { PickerRender } from '../../ufo';
 import { Trigger } from '../Trigger';
-;
 export const ReactionSummaryViewEmojiPicker = ({
   emojiProvider,
   onSelection,
@@ -32,9 +31,9 @@ export const ReactionSummaryViewEmojiPicker = ({
   };
 
   /**
-  * Event callback when the picker is closed
-  * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
-  */
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
+   */
   const close = useCallback(_id => {
     setIsOpen(false);
     // ufo abort reaction experience
@@ -48,9 +47,9 @@ export const ReactionSummaryViewEmojiPicker = ({
   }, [setIsOpen]);
 
   /**
-  * Event callback when an emoji icon is selected
-  * @param item selected item
-  */
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
   const onEmojiSelected = useCallback(item => {
     // no emoji was selected
     if (!item.id) {

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

package/dist/esm/components/Counter/Counter.js

@@ -9,7 +9,7 @@ import { SlideIn, ExitingPersistence } from '@atlaskit/motion';
 // eslint-disable-next-line @atlaskit/design-system/no-banned-imports
 
 import { formatLargeNumber } from '../../shared/utils';
-import { containerStyle, counterLabelStyle, countStyle, highlightStyle } from './styles';
+import { containerStyle, counterLabelStyle, countStyle, highlightStyle, darkerFontStyle } from './styles';
 
 /**
  * Test id for component top level div
@@ -36,7 +36,8 @@ export var Counter = function Counter(_ref) {
     className = _ref.className,
     value = _ref.value,
     _ref$animationDuratio = _ref.animationDuration,
-    animationDuration = _ref$animationDuratio === void 0 ? 'medium' : _ref$animationDuratio;
+    animationDuration = _ref$animationDuratio === void 0 ? 'medium' : _ref$animationDuratio,
+    useDarkerFont = _ref.useDarkerFont;
   var getLabel = function getLabel(value) {
     // Check if reached limit
     if (limit && overLimitLabel && value >= limit) {
@@ -61,7 +62,7 @@ export var Counter = function Counter(_ref) {
     "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
+    css: useDarkerFont ? [countStyle, darkerFontStyle] : countStyle
   }, jsx(ExitingPersistence, null, jsx(SlideIn, {
     enterFrom: isIncreasing ? 'top' : 'bottom',
     exitTo: isIncreasing ? 'top' : 'bottom',

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

@@ -30,4 +30,9 @@ export var highlightStyle = css({
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var counterLabelStyle = css({
   fontVariantNumeric: 'tabular-nums'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var darkerFontStyle = css({
+  color: "var(--ds-text-subtle, #44546F)"
 });

package/dist/esm/components/ReactionSummary/ReactionSummaryButton.js

@@ -18,7 +18,12 @@ var buttonStyle = xcss({
   paddingLeft: 'space.100'
 });
 var compactButtonStyle = xcss({
-  height: '22px'
+  height: '20px',
+  alignItems: 'center',
+  marginTop: 'space.075'
+});
+var compactPaddingStyles = xcss({
+  paddingTop: 'space.025'
 });
 var opaqueBackgroundStyles = xcss({
   backgroundColor: 'elevation.surface',
@@ -90,7 +95,8 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
     additionalStyles: [].concat(buttonStyles, subtleSummaryStyles, compactButtonStyles)
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.050",
-    xcss: buttonStyle
+    xcss: useCompactStyles ? [buttonStyle, compactPaddingStyles] : buttonStyle,
+    testId: "reaction-summary-wrapper"
   }, topReactions.map(function (reaction) {
     return /*#__PURE__*/React.createElement(Box, {
       xcss: emojiStyle,
@@ -102,9 +108,10 @@ export var ReactionSummaryButton = /*#__PURE__*/forwardRef(function (_ref, ref)
         id: reaction.emojiId,
         shortName: ''
       },
-      fitToHeight: 16
+      fitToHeight: useCompactStyles ? 12 : 16
     }));
   })), /*#__PURE__*/React.createElement(Counter, {
-    value: totalReactionsCount
+    value: totalReactionsCount,
+    useDarkerFont: useCompactStyles
   })));
 });

package/dist/esm/components/ReactionSummary/ReactionSummaryViewEmojiPicker.js

@@ -11,7 +11,6 @@ import { EmojiPicker } from '@atlaskit/emoji/picker';
 import Popup from '@atlaskit/popup';
 import { PickerRender } from '../../ufo';
 import { Trigger } from '../Trigger';
-;
 export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPicker(_ref) {
   var emojiProvider = _ref.emojiProvider,
     onSelection = _ref.onSelection,
@@ -37,9 +36,9 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
   };
 
   /**
-  * Event callback when the picker is closed
-  * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
-  */
+   * Event callback when the picker is closed
+   * @param _id Optional id if an emoji button was selected or undefined if was clicked outside the picker
+   */
   var close = useCallback(function (_id) {
     setIsOpen(false);
     // ufo abort reaction experience
@@ -53,9 +52,9 @@ export var ReactionSummaryViewEmojiPicker = function ReactionSummaryViewEmojiPic
   }, [setIsOpen]);
 
   /**
-  * Event callback when an emoji icon is selected
-  * @param item selected item
-  */
+   * Event callback when an emoji icon is selected
+   * @param item selected item
+   */
   var onEmojiSelected = useCallback(function (item) {
     // no emoji was selected
     if (!item.id) {

package/dist/types/components/Counter/Counter.d.ts

@@ -37,8 +37,12 @@ export interface CounterProps {
      * Duration of how long the motion will take (defaults to "medium" from '@atlaskit/motion')
      */
     animationDuration?: Durations;
+    /**
+     * Optional prop to use a darker text color for the counter
+     */
+    useDarkerFont?: boolean;
 }
 /**
  * Display reaction count next to the emoji button
  */
-export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, }: CounterProps) => jsx.JSX.Element;
+export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, useDarkerFont, }: CounterProps) => jsx.JSX.Element;

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

@@ -2,3 +2,4 @@ export declare const countStyle: import("@emotion/react").SerializedStyles;
 export declare const containerStyle: import("@emotion/react").SerializedStyles;
 export declare const highlightStyle: import("@emotion/react").SerializedStyles;
 export declare const counterLabelStyle: import("@emotion/react").SerializedStyles;
+export declare const darkerFontStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/components/Counter/Counter.d.ts

@@ -37,8 +37,12 @@ export interface CounterProps {
      * Duration of how long the motion will take (defaults to "medium" from '@atlaskit/motion')
      */
     animationDuration?: Durations;
+    /**
+     * Optional prop to use a darker text color for the counter
+     */
+    useDarkerFont?: boolean;
 }
 /**
  * Display reaction count next to the emoji button
  */
-export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, }: CounterProps) => jsx.JSX.Element;
+export declare const Counter: ({ highlight, limit, overLimitLabel, className, value, animationDuration, useDarkerFont, }: CounterProps) => jsx.JSX.Element;

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

@@ -2,3 +2,4 @@ export declare const countStyle: import("@emotion/react").SerializedStyles;
 export declare const containerStyle: import("@emotion/react").SerializedStyles;
 export declare const highlightStyle: import("@emotion/react").SerializedStyles;
 export declare const counterLabelStyle: import("@emotion/react").SerializedStyles;
+export declare const darkerFontStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "27.1.0",
+	"version": "27.1.2",
 	"description": "Reactions component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
 		"@atlaskit/analytics-gas-types": "^5.1.0",
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
-		"@atlaskit/avatar": "^24.0.0",
+		"@atlaskit/avatar": "^25.0.0",
 		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/emoji": "^68.0.0",
 		"@atlaskit/heading": "^5.1.0",
@@ -46,14 +46,14 @@
 		"@atlaskit/popper": "^7.0.0",
 		"@atlaskit/popup": "^2.0.0",
 		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/react-ufo": "^3.3.0",
+		"@atlaskit/react-ufo": "^3.4.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/tabs": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.3.0",
+		"@atlaskit/tokens": "^4.4.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@atlaskit/ufo": "^0.4.0",
-		"@atlaskit/util-service-support": "^6.2.0",
+		"@atlaskit/util-service-support": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"focus-trap": "^2.4.5"