@atlaskit/reactions 29.0.0 → 29.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/reactions
2
2
 
3
+ ## 29.1.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#129898](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129898)
8
+ [`81e708666c01b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/81e708666c01b) -
9
+ [ux] Fix reactions button alignment styling
10
+
11
+ ## 29.0.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#129972](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129972)
16
+ [`b2d69a39e6687`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b2d69a39e6687) -
17
+ Update `@compiled/react` dependency for improved type checking support.
18
+ - Updated dependencies
19
+
3
20
  ## 29.0.0
4
21
 
5
22
  ### Major Changes
@@ -11,7 +11,7 @@ var _analyticsGasTypes = require("@atlaskit/analytics-gas-types");
11
11
  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; }
12
12
  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; }
13
13
  var packageName = "@atlaskit/reactions";
14
- var packageVersion = "29.0.0";
14
+ var packageVersion = "29.1.0";
15
15
  /**
16
16
  * TODO: move to utility package?
17
17
  * A random sampling function
@@ -46,5 +46,5 @@ var darkerFontStyle = exports.darkerFontStyle = (0, _react.css)({
46
46
 
47
47
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
48
48
  var updatedStyles = exports.updatedStyles = (0, _react.css)({
49
- marginTop: "var(--ds-space-050, 4px)"
49
+ marginTop: "var(--ds-space-025, 2px)"
50
50
  });
@@ -72,7 +72,6 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
72
72
  _props$reactionPicker = props.reactionPickerAdditionalStyle,
73
73
  reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
74
74
  reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
75
- useButtonAlignmentStyling = props.useButtonAlignmentStyling,
76
75
  reactionPickerPlacement = props.reactionPickerPlacement,
77
76
  reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
78
77
  var _useState = (0, _react.useState)(null),
@@ -259,8 +258,7 @@ var ReactionPicker = exports.ReactionPicker = /*#__PURE__*/_react.default.memo(f
259
258
  showOpaqueBackground: showOpaqueBackground,
260
259
  showAddReactionText: showAddReactionText,
261
260
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
262
- reactionPickerTriggerIcon: reactionPickerTriggerIcon,
263
- useButtonAlignmentStyling: useButtonAlignmentStyling
261
+ reactionPickerTriggerIcon: reactionPickerTriggerIcon
264
262
  })
265
263
  );
266
264
  }), settings.isOpen && (0, _react2.jsx)(PopperWrapper, {
@@ -383,7 +383,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
383
383
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
384
384
  reactionPickerTriggerIcon: reactionPickerTriggerIcon,
385
385
  reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
386
- useButtonAlignmentStyling: useButtonAlignmentStyling,
387
386
  reactionPickerPlacement: reactionPickerPlacement,
388
387
  reactionsPickerPreventOverflowOptions: reactionsPickerPreventOverflowOptions
389
388
  }), (0, _react2.jsx)(_modalDialog.ModalTransition, null, !!selectedEmojiId && (0, _react2.jsx)(_segment.default, {
@@ -90,9 +90,6 @@ var addReactionMessageStyles = (0, _primitives.xcss)({
90
90
  color: 'color.text.subtle',
91
91
  marginLeft: 'space.050'
92
92
  });
93
- var addReactionMarginStyles = (0, _primitives.xcss)({
94
- marginTop: 'space.025'
95
- });
96
93
 
97
94
  /**
98
95
  * Render an emoji button to open the reactions select picker
@@ -114,8 +111,7 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
114
111
  _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
115
112
  subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
116
113
  selectionStyle = props.selectionStyle,
117
- reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
118
- useButtonAlignmentStyling = props.useButtonAlignmentStyling;
114
+ reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
119
115
  var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
120
116
  if (onClick && !disabled) {
121
117
  onClick(e, analyticsEvent);
@@ -140,6 +136,6 @@ var Trigger = exports.Trigger = /*#__PURE__*/_react.default.forwardRef(function
140
136
  LEGACY_size: "small",
141
137
  label: "Add reaction"
142
138
  }), showAddReactionText && (0, _react2.jsx)(_primitives.Box, {
143
- xcss: useButtonAlignmentStyling ? [addReactionMessageStyles, addReactionMarginStyles] : addReactionMessageStyles
139
+ xcss: addReactionMessageStyles
144
140
  }, formatMessage(i18n.addReaction))));
145
141
  });
@@ -358,7 +358,6 @@ var Reactions = exports.Reactions = /*#__PURE__*/_react.default.memo(function (_
358
358
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
359
359
  reactionPickerTriggerIcon: reactionPickerTriggerIcon,
360
360
  reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
361
- useButtonAlignmentStyling: useButtonAlignmentStyling,
362
361
  className: (0, _runtime.ax)(["_1e0c1o8l _19pk1b66"])
363
362
  }), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/_react.default.createElement(_segment.default, {
364
363
  name: "reactions-dialog"
@@ -1,7 +1,7 @@
1
1
  import { createAndFireEvent } from '@atlaskit/analytics-next';
2
2
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
3
3
  const packageName = "@atlaskit/reactions";
4
- const packageVersion = "29.0.0";
4
+ const packageVersion = "29.1.0";
5
5
  /**
6
6
  * TODO: move to utility package?
7
7
  * A random sampling function
@@ -39,5 +39,5 @@ export const darkerFontStyle = css({
39
39
 
40
40
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
41
41
  export const updatedStyles = css({
42
- marginTop: "var(--ds-space-050, 4px)"
42
+ marginTop: "var(--ds-space-025, 2px)"
43
43
  });
@@ -54,7 +54,6 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
54
54
  showAddReactionText = false,
55
55
  reactionPickerAdditionalStyle = undefined,
56
56
  reactionPickerTriggerIcon,
57
- useButtonAlignmentStyling,
58
57
  reactionPickerPlacement,
59
58
  reactionsPickerPreventOverflowOptions
60
59
  } = props;
@@ -233,8 +232,7 @@ export const ReactionPicker = /*#__PURE__*/React.memo(props => {
233
232
  showOpaqueBackground: showOpaqueBackground,
234
233
  showAddReactionText: showAddReactionText,
235
234
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
236
- reactionPickerTriggerIcon: reactionPickerTriggerIcon,
237
- useButtonAlignmentStyling: useButtonAlignmentStyling
235
+ reactionPickerTriggerIcon: reactionPickerTriggerIcon
238
236
  })), settings.isOpen && jsx(PopperWrapper, {
239
237
  settings: settings,
240
238
  popperModifiers: popperModifiers
@@ -330,7 +330,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
330
330
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
331
331
  reactionPickerTriggerIcon: reactionPickerTriggerIcon,
332
332
  reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
333
- useButtonAlignmentStyling: useButtonAlignmentStyling,
334
333
  reactionPickerPlacement: reactionPickerPlacement,
335
334
  reactionsPickerPreventOverflowOptions: reactionsPickerPreventOverflowOptions
336
335
  }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
@@ -82,9 +82,6 @@ const addReactionMessageStyles = xcss({
82
82
  color: 'color.text.subtle',
83
83
  marginLeft: 'space.050'
84
84
  });
85
- const addReactionMarginStyles = xcss({
86
- marginTop: 'space.025'
87
- });
88
85
 
89
86
  /**
90
87
  * Render an emoji button to open the reactions select picker
@@ -103,8 +100,7 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
103
100
  showAddReactionText = false,
104
101
  subtleReactionsSummaryAndPicker = false,
105
102
  selectionStyle,
106
- reactionPickerTriggerIcon,
107
- useButtonAlignmentStyling
103
+ reactionPickerTriggerIcon
108
104
  } = props;
109
105
  const handleMouseDown = (e, analyticsEvent) => {
110
106
  if (onClick && !disabled) {
@@ -130,6 +126,6 @@ export const Trigger = /*#__PURE__*/React.forwardRef((props, ref) => {
130
126
  LEGACY_size: "small",
131
127
  label: "Add reaction"
132
128
  }), showAddReactionText && jsx(Box, {
133
- xcss: useButtonAlignmentStyling ? [addReactionMessageStyles, addReactionMarginStyles] : addReactionMessageStyles
129
+ xcss: addReactionMessageStyles
134
130
  }, formatMessage(i18n.addReaction))));
135
131
  });
@@ -307,7 +307,6 @@ export const Reactions = /*#__PURE__*/React.memo(({
307
307
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
308
308
  reactionPickerTriggerIcon: reactionPickerTriggerIcon,
309
309
  reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
310
- useButtonAlignmentStyling: useButtonAlignmentStyling,
311
310
  className: ax(["_1e0c1o8l _19pk1b66"])
312
311
  }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
313
312
  name: "reactions-dialog"
@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
4
4
  import { createAndFireEvent } from '@atlaskit/analytics-next';
5
5
  import { UI_EVENT_TYPE, OPERATIONAL_EVENT_TYPE } from '@atlaskit/analytics-gas-types';
6
6
  var packageName = "@atlaskit/reactions";
7
- var packageVersion = "29.0.0";
7
+ var packageVersion = "29.1.0";
8
8
  /**
9
9
  * TODO: move to utility package?
10
10
  * A random sampling function
@@ -39,5 +39,5 @@ export var darkerFontStyle = css({
39
39
 
40
40
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
41
41
  export var updatedStyles = css({
42
- marginTop: "var(--ds-space-050, 4px)"
42
+ marginTop: "var(--ds-space-025, 2px)"
43
43
  });
@@ -65,7 +65,6 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
65
65
  _props$reactionPicker = props.reactionPickerAdditionalStyle,
66
66
  reactionPickerAdditionalStyle = _props$reactionPicker === void 0 ? undefined : _props$reactionPicker,
67
67
  reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
68
- useButtonAlignmentStyling = props.useButtonAlignmentStyling,
69
68
  reactionPickerPlacement = props.reactionPickerPlacement,
70
69
  reactionsPickerPreventOverflowOptions = props.reactionsPickerPreventOverflowOptions;
71
70
  var _useState = useState(null),
@@ -252,8 +251,7 @@ export var ReactionPicker = /*#__PURE__*/React.memo(function (props) {
252
251
  showOpaqueBackground: showOpaqueBackground,
253
252
  showAddReactionText: showAddReactionText,
254
253
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
255
- reactionPickerTriggerIcon: reactionPickerTriggerIcon,
256
- useButtonAlignmentStyling: useButtonAlignmentStyling
254
+ reactionPickerTriggerIcon: reactionPickerTriggerIcon
257
255
  })
258
256
  );
259
257
  }), settings.isOpen && jsx(PopperWrapper, {
@@ -369,7 +369,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
369
369
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
370
370
  reactionPickerTriggerIcon: reactionPickerTriggerIcon,
371
371
  reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
372
- useButtonAlignmentStyling: useButtonAlignmentStyling,
373
372
  reactionPickerPlacement: reactionPickerPlacement,
374
373
  reactionsPickerPreventOverflowOptions: reactionsPickerPreventOverflowOptions
375
374
  }), jsx(ModalTransition, null, !!selectedEmojiId && jsx(UFOSegment, {
@@ -82,9 +82,6 @@ var addReactionMessageStyles = xcss({
82
82
  color: 'color.text.subtle',
83
83
  marginLeft: 'space.050'
84
84
  });
85
- var addReactionMarginStyles = xcss({
86
- marginTop: 'space.025'
87
- });
88
85
 
89
86
  /**
90
87
  * Render an emoji button to open the reactions select picker
@@ -106,8 +103,7 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
106
103
  _props$subtleReaction = props.subtleReactionsSummaryAndPicker,
107
104
  subtleReactionsSummaryAndPicker = _props$subtleReaction === void 0 ? false : _props$subtleReaction,
108
105
  selectionStyle = props.selectionStyle,
109
- reactionPickerTriggerIcon = props.reactionPickerTriggerIcon,
110
- useButtonAlignmentStyling = props.useButtonAlignmentStyling;
106
+ reactionPickerTriggerIcon = props.reactionPickerTriggerIcon;
111
107
  var handleMouseDown = function handleMouseDown(e, analyticsEvent) {
112
108
  if (onClick && !disabled) {
113
109
  onClick(e, analyticsEvent);
@@ -132,6 +128,6 @@ export var Trigger = /*#__PURE__*/React.forwardRef(function (props, ref) {
132
128
  LEGACY_size: "small",
133
129
  label: "Add reaction"
134
130
  }), showAddReactionText && jsx(Box, {
135
- xcss: useButtonAlignmentStyling ? [addReactionMessageStyles, addReactionMarginStyles] : addReactionMessageStyles
131
+ xcss: addReactionMessageStyles
136
132
  }, formatMessage(i18n.addReaction))));
137
133
  });
@@ -346,7 +346,6 @@ export var Reactions = /*#__PURE__*/React.memo(function (_ref) {
346
346
  subtleReactionsSummaryAndPicker: subtleReactionsSummaryAndPicker,
347
347
  reactionPickerTriggerIcon: reactionPickerTriggerIcon,
348
348
  reactionPickerAdditionalStyle: reactionPickerAdditionalStyle,
349
- useButtonAlignmentStyling: useButtonAlignmentStyling,
350
349
  className: ax(["_1e0c1o8l _19pk1b66"])
351
350
  }), /*#__PURE__*/React.createElement(ModalTransition, null, !!selectedEmojiId && /*#__PURE__*/React.createElement(UFOSegment, {
352
351
  name: "reactions-dialog"
@@ -86,7 +86,6 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
86
86
  * Optional prop for controlling icon inside Trigger
87
87
  */
88
88
  reactionPickerTriggerIcon?: React.ReactNode;
89
- useButtonAlignmentStyling?: boolean;
90
89
  }
91
90
  /**
92
91
  * Picker component for adding reactions
@@ -53,7 +53,6 @@ export interface TriggerProps {
53
53
  * Optional prop for controlling icon inside Trigger
54
54
  */
55
55
  reactionPickerTriggerIcon?: React.ReactNode;
56
- useButtonAlignmentStyling?: boolean;
57
56
  }
58
57
  /**
59
58
  * Render an emoji button to open the reactions select picker
@@ -86,7 +86,6 @@ export interface ReactionPickerProps extends Pick<SelectorProps, 'pickerQuickRea
86
86
  * Optional prop for controlling icon inside Trigger
87
87
  */
88
88
  reactionPickerTriggerIcon?: React.ReactNode;
89
- useButtonAlignmentStyling?: boolean;
90
89
  }
91
90
  /**
92
91
  * Picker component for adding reactions
@@ -53,7 +53,6 @@ export interface TriggerProps {
53
53
  * Optional prop for controlling icon inside Trigger
54
54
  */
55
55
  reactionPickerTriggerIcon?: React.ReactNode;
56
- useButtonAlignmentStyling?: boolean;
57
56
  }
58
57
  /**
59
58
  * Render an emoji button to open the reactions select picker
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/reactions",
3
- "version": "29.0.0",
3
+ "version": "29.1.0",
4
4
  "description": "Reactions component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -56,7 +56,7 @@
56
56
  "@atlaskit/ufo": "^0.4.0",
57
57
  "@atlaskit/util-service-support": "^6.3.0",
58
58
  "@babel/runtime": "^7.0.0",
59
- "@compiled/react": "^0.18.2",
59
+ "@compiled/react": "^0.18.3",
60
60
  "@emotion/react": "^11.7.1",
61
61
  "focus-trap": "^2.4.5"
62
62
  },