@atlaskit/emoji 73.2.1 → 73.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/emoji
 
+## 73.3.0
+
+### Minor Changes
+
+- [`69008f6bdcb98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/69008f6bdcb98) -
+  Adjust all mention picker rows and emoji results to use 6px vertical padding, 8px between rows,
+  and 2px between primary and secondary text behind platform_editor_mentions_email_search.
+
+  Center the avatar and text within the 50px selection row and reserve the 8px gap outside the
+  selection and focus backgrounds.
+
+  Share the presentational picker row between mentions and emoji through
+  `@atlaskit/user-picker/picker-item-content`.
+
+  Apply the same gated preview spacing to the emoji picker footer, and use 12px horizontal padding
+  and avatar-to-text spacing for both mentions and emoji.
+
+  Consolidate byline formatting within the email-search layout, keeping the original byline
+  components in the legacy path and subtext presentation internal to each layout.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 73.2.1
 
 ### Patch Changes

package/dist/cjs/components/common/EmojiPreviewComponent.js

@@ -10,6 +10,8 @@ exports.EmojiPreviewComponent = void 0;
 require("./EmojiPreviewComponent.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+var _pickerItemContent = require("@atlaskit/user-picker/picker-item-content");
 var _CachingEmoji = _interopRequireDefault(require("./CachingEmoji"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var emojiName = null;
@@ -17,7 +19,7 @@ var emojiShortName = null;
 var preview = null;
 var previewImg = null;
 var previewText = null;
-var EmojiPreviewComponent = exports.EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
+var EmojiPreviewComponentLegacy = function EmojiPreviewComponentLegacy(_ref) {
   var emoji = _ref.emoji;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
@@ -33,4 +35,23 @@ var EmojiPreviewComponent = exports.EmojiPreviewComponent = function EmojiPrevie
   }, emoji.name), /*#__PURE__*/React.createElement("div", {
     className: (0, _runtime.ax)(["_11c8wadc _1reo15vq _18m915vq _1e0c1ule _syazazsu _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hwfhey _pnmbi7uo"])
   }, emoji.shortName)));
+};
+var previewImageNext = null;
+var EmojiPreviewComponentNext = function EmojiPreviewComponentNext(_ref2) {
+  var emoji = _ref2.emoji;
+  return /*#__PURE__*/React.createElement(_pickerItemContent.PickerItemContent, {
+    avatar: /*#__PURE__*/React.createElement("span", {
+      className: (0, _runtime.ax)(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule", "_1e0c1txw"])
+    }, /*#__PURE__*/React.createElement(_CachingEmoji.default, {
+      key: emoji.id || emoji.shortName,
+      emoji: emoji
+    })),
+    title: emoji.name ? /*#__PURE__*/React.createElement("div", {
+      className: (0, _runtime.ax)(["_1reo15vq _18m915vq _1e0c1ule _syazi7uo _1bto1l2s _o5721q9c _299mangw"])
+    }, emoji.name) : emoji.shortName,
+    subtext: emoji.name ? emoji.shortName : undefined
+  });
+};
+var EmojiPreviewComponent = exports.EmojiPreviewComponent = function EmojiPreviewComponent(props) {
+  return (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_mentions_email_search') ? /*#__PURE__*/React.createElement(EmojiPreviewComponentNext, props) : /*#__PURE__*/React.createElement(EmojiPreviewComponentLegacy, props);
 };

package/dist/cjs/util/analytics/createEvent.js

@@ -19,7 +19,7 @@ var createEvent = exports.createEvent = function createEvent(eventType, action,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "73.2.0"
+      packageVersion: "73.2.1"
     }, attributes)
   };
 };

package/dist/es2019/components/common/EmojiPreviewComponent.js

@@ -2,13 +2,15 @@
 import "./EmojiPreviewComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { PickerItemContent } from '@atlaskit/user-picker/picker-item-content';
 import CachingEmoji from './CachingEmoji';
 const emojiName = null;
 const emojiShortName = null;
 const preview = null;
 const previewImg = null;
 const previewText = null;
-export const EmojiPreviewComponent = ({
+const EmojiPreviewComponentLegacy = ({
   emoji
 }) => {
   return /*#__PURE__*/React.createElement("div", {
@@ -25,4 +27,20 @@ export const EmojiPreviewComponent = ({
   }, emoji.name), /*#__PURE__*/React.createElement("div", {
     className: ax(["_11c8wadc _1reo15vq _18m915vq _1e0c1ule _syazazsu _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hwfhey _pnmbi7uo"])
   }, emoji.shortName)));
-};
+};
+const previewImageNext = null;
+const EmojiPreviewComponentNext = ({
+  emoji
+}) => /*#__PURE__*/React.createElement(PickerItemContent, {
+  avatar: /*#__PURE__*/React.createElement("span", {
+    className: ax(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule", "_1e0c1txw"])
+  }, /*#__PURE__*/React.createElement(CachingEmoji, {
+    key: emoji.id || emoji.shortName,
+    emoji: emoji
+  })),
+  title: emoji.name ? /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1reo15vq _18m915vq _1e0c1ule _syazi7uo _1bto1l2s _o5721q9c _299mangw"])
+  }, emoji.name) : emoji.shortName,
+  subtext: emoji.name ? emoji.shortName : undefined
+});
+export const EmojiPreviewComponent = props => isExperimentEnabled('platform_editor_mentions_email_search') ? /*#__PURE__*/React.createElement(EmojiPreviewComponentNext, props) : /*#__PURE__*/React.createElement(EmojiPreviewComponentLegacy, props);

package/dist/es2019/util/analytics/createEvent.js

@@ -7,7 +7,7 @@ export const createEvent = (eventType, action, actionSubject, actionSubjectId, a
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "73.2.0",
+    packageVersion: "73.2.1",
     ...attributes
   }
 });

package/dist/esm/components/common/EmojiPreviewComponent.js

@@ -2,13 +2,15 @@
 import "./EmojiPreviewComponent.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+import { PickerItemContent } from '@atlaskit/user-picker/picker-item-content';
 import CachingEmoji from './CachingEmoji';
 var emojiName = null;
 var emojiShortName = null;
 var preview = null;
 var previewImg = null;
 var previewText = null;
-export var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
+var EmojiPreviewComponentLegacy = function EmojiPreviewComponentLegacy(_ref) {
   var emoji = _ref.emoji;
   return /*#__PURE__*/React.createElement("div", {
     className: ax(["_ca0q19bv _u5f319bv _n3td19bv _19bv19bv _1e0c1txw _2lx2vrvc _1n261q9c _4t3izwfg _4cvr1h6o"])
@@ -24,4 +26,23 @@ export var EmojiPreviewComponent = function EmojiPreviewComponent(_ref) {
   }, emoji.name), /*#__PURE__*/React.createElement("div", {
     className: ax(["_11c8wadc _1reo15vq _18m915vq _1e0c1ule _syazazsu _vwz4kb7n _otyr1i6y _n3tdv77o _1bto1l2s _o5721q9c _10hwfhey _pnmbi7uo"])
   }, emoji.shortName)));
+};
+var previewImageNext = null;
+var EmojiPreviewComponentNext = function EmojiPreviewComponentNext(_ref2) {
+  var emoji = _ref2.emoji;
+  return /*#__PURE__*/React.createElement(PickerItemContent, {
+    avatar: /*#__PURE__*/React.createElement("span", {
+      className: ax(["_1e0c1o8l _1bsbzwfg _12s6idpf _1e4didpf _1dvqidpf _vwlxidpf _1gdiidpf _1f45idpf _pdfdidpf _mwo3idpf _5ilezwfg _boltzwfg _1pc7zwfg _u5wqzwfg _w7981kw7 _1vqe1kw7 _1l4xidpf _1l79idpf _118didpf _1pa4idpf _1pglh2mm _1vjf1ssb _1h6o1ssb _8fp6dbra _1os4zwfg _1e7azwfg _7mh21ule", "_1e0c1txw"])
+    }, /*#__PURE__*/React.createElement(CachingEmoji, {
+      key: emoji.id || emoji.shortName,
+      emoji: emoji
+    })),
+    title: emoji.name ? /*#__PURE__*/React.createElement("div", {
+      className: ax(["_1reo15vq _18m915vq _1e0c1ule _syazi7uo _1bto1l2s _o5721q9c _299mangw"])
+    }, emoji.name) : emoji.shortName,
+    subtext: emoji.name ? emoji.shortName : undefined
+  });
+};
+export var EmojiPreviewComponent = function EmojiPreviewComponent(props) {
+  return isExperimentEnabled('platform_editor_mentions_email_search') ? /*#__PURE__*/React.createElement(EmojiPreviewComponentNext, props) : /*#__PURE__*/React.createElement(EmojiPreviewComponentLegacy, props);
 };

package/dist/esm/util/analytics/createEvent.js

@@ -12,7 +12,7 @@ export var createEvent = function createEvent(eventType, action, actionSubject,
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "73.2.0"
+      packageVersion: "73.2.1"
     }, attributes)
   };
 };

package/dist/types/components/common/EmojiPreviewComponent.d.ts

@@ -2,5 +2,5 @@ import type { EmojiDescription } from '../../types';
 type Props = {
     emoji: EmojiDescription;
 };
-export declare const EmojiPreviewComponent: ({ emoji }: Props) => JSX.Element;
+export declare const EmojiPreviewComponent: (props: Props) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "73.2.1",
+	"version": "73.3.0",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -58,6 +58,7 @@
 		"@atlaskit/tokens": "^20.8.0",
 		"@atlaskit/tooltip": "^24.4.0",
 		"@atlaskit/ufo": "^2.0.0",
+		"@atlaskit/user-picker": "^14.5.0",
 		"@atlaskit/util-service-support": "^7.4.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
 		"@babel/runtime": "^7.0.0",