@atlaskit/reactions 22.0.4 → 22.1.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 22.1.0
+
+### Minor Changes
+
+- [`14258b03842`](https://bitbucket.org/atlassian/atlassian-frontend/commits/14258b03842) - make reaction buttons more compact, and introduce miniMode for add reaction button
+
 ## 22.0.4
 
 ### Patch Changes

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

@@ -39,7 +39,7 @@ var reactionStyle = (0, _react.css)({
   borderRadius: '20px',
   color: "".concat("var(--ds-text-subtle, ".concat(_colors.N400, ")")),
   cursor: 'pointer',
-  margin: 0,
+  margin: '4px 4px 0 0',
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {

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

@@ -15,8 +15,7 @@ var _colors = require("@atlaskit/theme/colors");
 var pickerStyle = (0, _react.css)({
   verticalAlign: 'middle',
   '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
+    display: 'inline-block'
   }
 });
 exports.pickerStyle = pickerStyle;

package/dist/cjs/components/Reactions/Reactions.js

@@ -131,7 +131,9 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
       onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
       _ref$emojiPickerSize = _ref.emojiPickerSize,
-      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize;
+      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
+      _ref$miniMode = _ref.miniMode,
+      miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -297,7 +299,6 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
   }, memorizedReactions.map(function (reaction) {
     return (0, _react2.jsx)(_Reaction.Reaction, {
       key: reaction.emojiId,
-      css: styles.reactionStyle,
       reaction: reaction,
       emojiProvider: emojiProvider,
       onClick: onReactionClick,
@@ -308,9 +309,8 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
       allowUserDialog: allowUserDialog
     });
   }), (0, _react2.jsx)(_ReactionPicker.ReactionPicker, {
-    css: styles.reactionStyle,
+    css: styles.reactionPickerStyle,
     emojiProvider: emojiProvider,
-    miniMode: true,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     disabled: status !== _types.ReactionStatus.ready,
@@ -319,7 +319,8 @@ var Reactions = /*#__PURE__*/_react.default.memo(function (_ref) {
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
     tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode
   }), allowUserDialog && reactions.length > 0 && (0, _react2.jsx)(_tooltip.default, {
     content: (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _shared.i18n.messages.seeWhoReactedTooltip),
     hideTooltipOnClick: true

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

@@ -3,22 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.wrapperStyle = exports.seeWhoReacted = exports.reactionStyle = void 0;
+exports.wrapperStyle = exports.seeWhoReacted = exports.reactionPickerStyle = void 0;
 
 var _react = require("@emotion/react");
 
 /** @jsx jsx */
-var reactionStyle = (0, _react.css)({
+var reactionPickerStyle = (0, _react.css)({
   display: 'inline-block',
-  margin: '4px'
+  marginTop: '4px'
 });
-exports.reactionStyle = reactionStyle;
+exports.reactionPickerStyle = reactionPickerStyle;
 var seeWhoReacted = (0, _react.css)({
   height: '24px',
   lineHeight: '24px',
-  paddingLeft: '4px',
-  paddingRight: '4px',
-  margin: '4px'
+  paddingLeft: 0,
+  paddingRight: 0,
+  marginTop: '4px',
+  marginLeft: '4px'
 });
 exports.seeWhoReacted = seeWhoReacted;
 var wrapperStyle = (0, _react.css)({

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

@@ -13,6 +13,8 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _constants = require("@atlaskit/theme/constants");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -27,16 +29,19 @@ var triggerStyle = function triggerStyle(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return (0, _react.css)(_objectSpread(_objectSpread(_objectSpread({
     minWidth: '32px',
-    height: '32px',
+    height: '24px',
+    padding: 0,
+    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
+    borderRadius: '20px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     lineHeight: '16px'
   }, miniMode && {
-    height: '24px',
-    padding: 0,
-    border: "1px solid ".concat("var(--ds-border, ".concat(_colors.N40, ")")),
-    borderRadius: '20px'
+    minWidth: '24px',
+    padding: '4px',
+    border: 'none',
+    borderRadius: "".concat((0, _constants.borderRadius)(), "px")
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.4"
+	"version": "22.1.0"
 }

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

@@ -29,7 +29,7 @@ export const reactionStyle = css({
   borderRadius: '20px',
   color: `${`var(--ds-text-subtle, ${N400})`}`,
   cursor: 'pointer',
-  margin: 0,
+  margin: '4px 4px 0 0',
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {

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

@@ -5,8 +5,7 @@ import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 export const pickerStyle = css({
   verticalAlign: 'middle',
   '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
+    display: 'inline-block'
   }
 });
 export const contentStyle = css({

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

@@ -86,7 +86,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
   onDialogOpenCallback = () => {},
   onDialogCloseCallback = () => {},
   onDialogSelectReactionCallback = () => {},
-  emojiPickerSize = 'medium'
+  emojiPickerSize = 'medium',
+  miniMode = false
 }) => {
   const [selectedEmojiId, setSelectedEmojiId] = useState();
   const {
@@ -239,7 +240,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
     "data-testid": RENDER_REACTIONS_TESTID
   }, memorizedReactions.map(reaction => jsx(Reaction, {
     key: reaction.emojiId,
-    css: styles.reactionStyle,
     reaction: reaction,
     emojiProvider: emojiProvider,
     onClick: onReactionClick,
@@ -249,9 +249,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     handleUserListClick: handleOpenReactionsDialog,
     allowUserDialog: allowUserDialog
   })), jsx(ReactionPicker, {
-    css: styles.reactionStyle,
+    css: styles.reactionPickerStyle,
     emojiProvider: emojiProvider,
-    miniMode: true,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     disabled: status !== ReactionStatus.ready,
@@ -260,7 +259,8 @@ export const Reactions = /*#__PURE__*/React.memo(({
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
     tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode
   }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
     content: jsx(FormattedMessage, i18n.messages.seeWhoReactedTooltip),
     hideTooltipOnClick: true

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

@@ -1,15 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-export const reactionStyle = css({
+export const reactionPickerStyle = css({
   display: 'inline-block',
-  margin: '4px'
+  marginTop: '4px'
 });
 export const seeWhoReacted = css({
   height: '24px',
   lineHeight: '24px',
-  paddingLeft: '4px',
-  paddingRight: '4px',
-  margin: '4px'
+  paddingLeft: 0,
+  paddingRight: 0,
+  marginTop: '4px',
+  marginLeft: '4px'
 });
 export const wrapperStyle = css({
   display: 'flex',

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

@@ -1,22 +1,26 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N70, N20, N40 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
 export const DISABLED_BUTTON_COLOR = `${`var(--ds-text-disabled, ${N70})`} !important`;
 export const triggerStyle = ({
   miniMode = false,
   disabled = false
 }) => css({
   minWidth: '32px',
-  height: '32px',
+  height: '24px',
+  padding: 0,
+  border: `1px solid ${`var(--ds-border, ${N40})`}`,
+  borderRadius: '20px',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   lineHeight: '16px',
   ...(miniMode && {
-    height: '24px',
-    padding: 0,
-    border: `1px solid ${`var(--ds-border, ${N40})`}`,
-    borderRadius: '20px'
+    minWidth: '24px',
+    padding: '4px',
+    border: 'none',
+    borderRadius: `${borderRadius()}px`
   }),
   ...(disabled && {
     color: DISABLED_BUTTON_COLOR,

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.4"
+	"version": "22.1.0"
 }

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

@@ -29,7 +29,7 @@ export var reactionStyle = css({
   borderRadius: '20px',
   color: "".concat("var(--ds-text-subtle, ".concat(N400, ")")),
   cursor: 'pointer',
-  margin: 0,
+  margin: '4px 4px 0 0',
   padding: 0,
   transition: '200ms ease-in-out',
   '&:hover': {

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

@@ -5,8 +5,7 @@ import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 export var pickerStyle = css({
   verticalAlign: 'middle',
   '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
+    display: 'inline-block'
   }
 });
 export var contentStyle = css({

package/dist/esm/components/Reactions/Reactions.js

@@ -96,7 +96,9 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       _ref$onDialogSelectRe = _ref.onDialogSelectReactionCallback,
       onDialogSelectReactionCallback = _ref$onDialogSelectRe === void 0 ? function () {} : _ref$onDialogSelectRe,
       _ref$emojiPickerSize = _ref.emojiPickerSize,
-      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize;
+      emojiPickerSize = _ref$emojiPickerSize === void 0 ? 'medium' : _ref$emojiPickerSize,
+      _ref$miniMode = _ref.miniMode,
+      miniMode = _ref$miniMode === void 0 ? false : _ref$miniMode;
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -258,7 +260,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
   }, memorizedReactions.map(function (reaction) {
     return jsx(Reaction, {
       key: reaction.emojiId,
-      css: styles.reactionStyle,
       reaction: reaction,
       emojiProvider: emojiProvider,
       onClick: onReactionClick,
@@ -269,9 +270,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
       allowUserDialog: allowUserDialog
     });
   }), jsx(ReactionPicker, {
-    css: styles.reactionStyle,
+    css: styles.reactionPickerStyle,
     emojiProvider: emojiProvider,
-    miniMode: true,
     allowAllEmojis: allowAllEmojis,
     pickerQuickReactionEmojiIds: pickerQuickReactionEmojiIds,
     disabled: status !== ReactionStatus.ready,
@@ -280,7 +280,8 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
     onCancel: handleOnCancel,
     onShowMore: handleOnMore,
     tooltipContent: getTooltip(status, errorMessage),
-    emojiPickerSize: emojiPickerSize
+    emojiPickerSize: emojiPickerSize,
+    miniMode: miniMode
   }), allowUserDialog && reactions.length > 0 && jsx(Tooltip, {
     content: jsx(FormattedMessage, i18n.messages.seeWhoReactedTooltip),
     hideTooltipOnClick: true

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

@@ -1,15 +1,16 @@
 /** @jsx jsx */
 import { css } from '@emotion/react';
-export var reactionStyle = css({
+export var reactionPickerStyle = css({
   display: 'inline-block',
-  margin: '4px'
+  marginTop: '4px'
 });
 export var seeWhoReacted = css({
   height: '24px',
   lineHeight: '24px',
-  paddingLeft: '4px',
-  paddingRight: '4px',
-  margin: '4px'
+  paddingLeft: 0,
+  paddingRight: 0,
+  marginTop: '4px',
+  marginLeft: '4px'
 });
 export var wrapperStyle = css({
   display: 'flex',

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

@@ -7,6 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 import { css } from '@emotion/react';
 import { N70, N20, N40 } from '@atlaskit/theme/colors';
+import { borderRadius } from '@atlaskit/theme/constants';
 export var DISABLED_BUTTON_COLOR = "".concat("var(--ds-text-disabled, ".concat(N70, ")"), " !important");
 export var triggerStyle = function triggerStyle(_ref) {
   var _ref$miniMode = _ref.miniMode,
@@ -15,16 +16,19 @@ export var triggerStyle = function triggerStyle(_ref) {
       disabled = _ref$disabled === void 0 ? false : _ref$disabled;
   return css(_objectSpread(_objectSpread(_objectSpread({
     minWidth: '32px',
-    height: '32px',
+    height: '24px',
+    padding: 0,
+    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
+    borderRadius: '20px',
     display: 'flex',
     justifyContent: 'center',
     alignItems: 'center',
     lineHeight: '16px'
   }, miniMode && {
-    height: '24px',
-    padding: 0,
-    border: "1px solid ".concat("var(--ds-border, ".concat(N40, ")")),
-    borderRadius: '20px'
+    minWidth: '24px',
+    padding: '4px',
+    border: 'none',
+    borderRadius: "".concat(borderRadius(), "px")
   }), disabled && {
     color: DISABLED_BUTTON_COLOR,
     cursor: 'not-allowed'

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "22.0.4"
+	"version": "22.1.0"
 }

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

@@ -31,7 +31,7 @@ export declare const RENDER_REACTIONS_TESTID = "render-reactions";
  * Test id for the view all reacted user to trigger the dialog
  */
 export declare const RENDER_VIEWALL_REACTED_USERS_DIALOG = "viewall-reacted-users-dialog";
-export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Pick<ReactionProps, 'allowUserDialog'> {
+export interface ReactionsProps extends Pick<ReactionPickerProps, 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<SelectorProps, 'pickerQuickReactionEmojiIds'>, Pick<ReactionProps, 'allowUserDialog'> {
     /**
      * event handler to fetching the reactions
      */

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

@@ -1,3 +1,3 @@
-export declare const reactionStyle: import("@emotion/react").SerializedStyles;
+export declare const reactionPickerStyle: import("@emotion/react").SerializedStyles;
 export declare const seeWhoReacted: import("@emotion/react").SerializedStyles;
 export declare const wrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types/containers/ConnectedReactionsView/ConnectedReactionsView.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ReactionsProps, ReactionPickerProps } from '../../components';
 import { ReactionStatus, Actions, State, StorePropInput } from '../../types';
-export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
+export interface ConnectedReactionsViewProps extends Pick<ReactionsProps, 'quickReactionEmojis' | 'onDialogOpenCallback' | 'onDialogCloseCallback' | 'onDialogSelectReactionCallback' | 'allowUserDialog' | 'allowAllEmojis' | 'emojiProvider' | 'emojiPickerSize' | 'miniMode'>, Pick<ReactionPickerProps, 'pickerQuickReactionEmojiIds'> {
     /**
      * Wrapper id for reactions list
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "22.0.4",
+  "version": "22.1.0",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"