@atlaskit/reactions 21.3.2 → 21.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/reactions
 
+## 21.3.3
+
+### Patch Changes
+
+- [`7f1dd280229`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7f1dd280229) - Fix styling issue in the reaction emoji while hovering on it for the first time
+
 ## 21.3.2
 
 ### Patch Changes

package/dist/cjs/components/ReactionTooltip.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,12 +9,12 @@ exports.ReactionTooltip = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = _interopRequireDefault(require("react"));
+
 var _core = require("@emotion/core");
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _reactIntlNext = require("react-intl-next");
 
 var _tokens = require("@atlaskit/tokens");
@@ -25,10 +23,6 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _i18n = require("./i18n");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /** @jsx jsx */
 var verticalMargin = 5;
 var tooltipStyle = (0, _core.css)({
@@ -64,12 +58,7 @@ var ReactionTooltip = function ReactionTooltip(_ref) {
   var emojiName = _ref.emojiName,
       children = _ref.children,
       users = _ref.reaction.users;
-
-  if (!users || users.length === 0) {
-    return (0, _core.jsx)(_react.Fragment, null, _react.default.Children.only(children));
-  }
-
-  var content = (0, _core.jsx)("div", {
+  var content = !users || users.length === 0 ? null : (0, _core.jsx)("div", {
     css: tooltipStyle
   }, (0, _core.jsx)("ul", null, emojiName ? (0, _core.jsx)("li", {
     css: emojiNameStyle

package/dist/cjs/components/Reactions.js

@@ -50,7 +50,7 @@ var reactionStyle = (0, _core.css)({
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-var reactionsStyle = (0, _core.css)({
+var wrapperStyle = (0, _core.css)({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -58,7 +58,7 @@ var reactionsStyle = (0, _core.css)({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  '& > :first-of-type': {
+  '> :first-of-type > :first-child': {
     marginLeft: 0
   }
 });
@@ -177,7 +177,7 @@ var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       return (0, _core.jsx)("div", {
-        css: reactionsStyle
+        css: wrapperStyle
       }, this.props.reactions.map(this.renderReaction), this.renderPicker());
     }
   }]);

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.3.2"
+	"version": "21.3.3"
 }

package/dist/es2019/components/ReactionTooltip.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import React from 'react';
 import { jsx, css } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
@@ -44,11 +44,7 @@ export const ReactionTooltip = ({
     users
   }
 }) => {
-  if (!users || users.length === 0) {
-    return jsx(Fragment, null, React.Children.only(children));
-  }
-
-  const content = jsx("div", {
+  const content = !users || users.length === 0 ? null : jsx("div", {
     css: tooltipStyle
   }, jsx("ul", null, emojiName ? jsx("li", {
     css: emojiNameStyle

package/dist/es2019/components/Reactions.js

@@ -16,7 +16,7 @@ const reactionStyle = css({
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-const reactionsStyle = css({
+const wrapperStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -24,7 +24,7 @@ const reactionsStyle = css({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  '& > :first-of-type': {
+  '> :first-of-type > :first-child': {
     marginLeft: 0
   }
 });
@@ -134,7 +134,7 @@ export class ReactionsWithoutAnalytics extends React.PureComponent {
 
   render() {
     return jsx("div", {
-      css: reactionsStyle
+      css: wrapperStyle
     }, this.props.reactions.map(this.renderReaction), this.renderPicker());
   }
 

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.3.2"
+	"version": "21.3.3"
 }

package/dist/esm/components/ReactionTooltip.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import React from 'react';
 import { jsx, css } from '@emotion/core';
 import Tooltip from '@atlaskit/tooltip';
-import React, { Fragment } from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import { token } from '@atlaskit/tokens';
 import { N90 } from '@atlaskit/theme/colors';
@@ -41,12 +41,7 @@ export var ReactionTooltip = function ReactionTooltip(_ref) {
   var emojiName = _ref.emojiName,
       children = _ref.children,
       users = _ref.reaction.users;
-
-  if (!users || users.length === 0) {
-    return jsx(Fragment, null, React.Children.only(children));
-  }
-
-  var content = jsx("div", {
+  var content = !users || users.length === 0 ? null : jsx("div", {
     css: tooltipStyle
   }, jsx("ul", null, emojiName ? jsx("li", {
     css: emojiNameStyle

package/dist/esm/components/Reactions.js

@@ -26,7 +26,7 @@ var reactionStyle = css({
   // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
   margin: '2px 4px 0 4px'
 });
-var reactionsStyle = css({
+var wrapperStyle = css({
   display: 'flex',
   flexWrap: 'wrap',
   position: 'relative',
@@ -34,7 +34,7 @@ var reactionsStyle = css({
   borderRadius: '15px',
   // To allow to row spacing of 2px on wrap, and 0px on first row
   marginTop: '-2px',
-  '& > :first-of-type': {
+  '> :first-of-type > :first-child': {
     marginLeft: 0
   }
 });
@@ -162,7 +162,7 @@ export var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureCompone
     key: "render",
     value: function render() {
       return jsx("div", {
-        css: reactionsStyle
+        css: wrapperStyle
       }, this.props.reactions.map(this.renderReaction), this.renderPicker());
     }
   }]);

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/reactions",
-	"version": "21.3.2"
+	"version": "21.3.3"
 }

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

@@ -1,3 +1,4 @@
+/** @jsx jsx */
 import React from 'react';
 import { ReactionSummary } from '../types/ReactionSummary';
 export interface Props {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/reactions",
-  "version": "21.3.2",
+  "version": "21.3.3",
   "description": "Reactions component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -53,7 +53,7 @@
     "@atlaskit/editor-test-helpers": "^17.0.0",
     "@atlaskit/elements-test-helpers": "^0.7.0",
     "@atlaskit/tooltip": "^17.5.0",
-    "@atlaskit/util-data-test": "^17.2.0",
+    "@atlaskit/util-data-test": "^17.3.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/ufo": "^0.1.0",
     "@types/webpack-dev-server": "^3.11.2",