@atlaskit/emoji 71.2.1 → 71.2.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/emoji
 
+## 71.2.2
+
+### Patch Changes
+
+- [`deb7c88f3baed`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/deb7c88f3baed) -
+  Update unicode emoji sizing so renderer typography can control text emoji scale.
+- Updated dependencies
+
 ## 71.2.1
 
 ### Patch Changes

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

@@ -281,11 +281,11 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   });
 };
 var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
-  var _props$fitToHeight;
   var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
     className = props.className,
+    fitToHeight = props.fitToHeight,
     _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
     renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
   if (renderUnicodeEmojiAsImage) {
@@ -293,20 +293,14 @@ var UnicodeEmoji = exports.UnicodeEmoji = function UnicodeEmoji(props) {
   }
   var classes = "".concat(_styles.emojiNodeStyles, " ").concat(selected ? _styles.commonSelectedStyles : '', " ").concat(selectOnHover ? _styles.selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : _constants.defaultEmojiHeight;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : _constants.defaultEmojiHeight, "px");
+  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
   var style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "max(1em, ".concat(size, "px)"),
-    width: "max(1em, ".concat(size, "px)"),
-    height: "max(1em, ".concat(size, "px)"),
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.2.0"
+      packageVersion: "71.2.1"
     }, attributes)
   };
 };

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

@@ -256,12 +256,12 @@ const UnicodeEmojiImage = props => {
   });
 };
 export const UnicodeEmoji = props => {
-  var _props$fitToHeight;
   const {
     emoji,
     selected,
     selectOnHover,
     className,
+    fitToHeight,
     renderUnicodeEmojiAsImage = true
   } = props;
   if (renderUnicodeEmojiAsImage) {
@@ -269,20 +269,14 @@ export const UnicodeEmoji = props => {
   }
   const classes = `${emojiNodeStyles} ${selected ? commonSelectedStyles : ''} ${selectOnHover ? selectOnHoverStyles : ''} ${className ? className : ''}`;
   const emojiText = emoji.representation.unicodeEmoji;
-  const size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
+  const defaultSize = `${fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight}px`;
+  const emojiSize = `var(--emoji-common-unicode-size, ${defaultSize})`;
   const style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: `max(1em, ${size}px)`,
-    width: `max(1em, ${size}px)`,
-    height: `max(1em, ${size}px)`,
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -9,7 +9,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "71.2.0",
+    packageVersion: "71.2.1",
     ...attributes
   }
 });

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

@@ -272,11 +272,11 @@ var UnicodeEmojiImage = function UnicodeEmojiImage(props) {
   });
 };
 export var UnicodeEmoji = function UnicodeEmoji(props) {
-  var _props$fitToHeight;
   var emoji = props.emoji,
     selected = props.selected,
     selectOnHover = props.selectOnHover,
     className = props.className,
+    fitToHeight = props.fitToHeight,
     _props$renderUnicodeE = props.renderUnicodeEmojiAsImage,
     renderUnicodeEmojiAsImage = _props$renderUnicodeE === void 0 ? true : _props$renderUnicodeE;
   if (renderUnicodeEmojiAsImage) {
@@ -284,20 +284,14 @@ export var UnicodeEmoji = function UnicodeEmoji(props) {
   }
   var classes = "".concat(emojiNodeStyles, " ").concat(selected ? commonSelectedStyles : '', " ").concat(selectOnHover ? selectOnHoverStyles : '', " ").concat(className ? className : '');
   var emojiText = emoji.representation.unicodeEmoji;
-  var size = (_props$fitToHeight = props.fitToHeight) !== null && _props$fitToHeight !== void 0 ? _props$fitToHeight : defaultEmojiHeight;
+  var defaultSize = "".concat(fitToHeight !== null && fitToHeight !== void 0 ? fitToHeight : defaultEmojiHeight, "px");
+  var emojiSize = "var(--emoji-common-unicode-size, ".concat(defaultSize, ")");
   var style = {
-    display: 'inline-block',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: "max(1em, ".concat(size, "px)"),
-    width: "max(1em, ".concat(size, "px)"),
-    height: "max(1em, ".concat(size, "px)"),
-    textAlign: 'center',
-    alignContent: 'center',
-    alignSelf: 'center',
+    display: 'inline-flex',
     // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    lineHeight: '0',
-    margin: '0',
-    padding: '0'
+    fontSize: emojiSize,
+    alignItems: 'center',
+    aspectRatio: '1/1'
   };
   return (
     /*#__PURE__*/

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

@@ -14,7 +14,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "71.2.0"
+      packageVersion: "71.2.1"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/emoji",
-	"version": "71.2.1",
+	"version": "71.2.2",
 	"description": "Fabric emoji React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
 		"@atlaskit/afm-i18n-platform-elements-emoji": "2.158.0",
 		"@atlaskit/analytics-next": "^12.0.0",
 		"@atlaskit/browser-apis": "^1.0.0",
-		"@atlaskit/button": "^24.0.0",
+		"@atlaskit/button": "^24.1.0",
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/form": "^16.0.0",
@@ -48,7 +48,7 @@
 		"@atlaskit/radio": "^9.0.0",
 		"@atlaskit/spinner": "^20.0.0",
 		"@atlaskit/textfield": "^9.0.0",
-		"@atlaskit/tmp-editor-statsig": "^108.0.0",
+		"@atlaskit/tmp-editor-statsig": "^108.4.0",
 		"@atlaskit/tokens": "^14.0.0",
 		"@atlaskit/tooltip": "^23.0.0",
 		"@atlaskit/ufo": "^1.0.0",