@atlaskit/townsquare-emoji-provider 1.0.3 → 1.0.4

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/ProjectIcon.js +16 -3
  3. package/dist/es2019/ProjectIcon.js +16 -3
  4. package/dist/esm/ProjectIcon.js +16 -3
  5. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/townsquare-emoji-provider
2
2
 
3
+ ## 1.0.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`1d6dc826f01b7`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1d6dc826f01b7) -
8
+ [ux] Correct fallbak space not used
9
+
3
10
  ## 1.0.3
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/ProjectIcon.js CHANGED
@@ -48,6 +48,7 @@ var ProjectIcon = exports.ProjectIcon = function ProjectIcon(_ref2) {
48
48
  var emoji = _ref2.emoji,
49
49
  isPrivate = _ref2.isPrivate,
50
50
  height = _ref2.height;
51
+ var iconSize = height !== null && height !== void 0 ? height : 16;
51
52
  var emojiProvider = (0, _react.useMemo)(function () {
52
53
  if (!emoji) {
53
54
  return undefined;
@@ -59,15 +60,27 @@ var ProjectIcon = exports.ProjectIcon = function ProjectIcon(_ref2) {
59
60
  shortName: emoji
60
61
  } : undefined;
61
62
  }, [emoji]);
62
- if (!emojiProvider || !emojiId) {
63
+ if (!emojiId) {
63
64
  return null;
64
65
  }
66
+
67
+ // Reserve width even while emojiProvider is loading using the style prop for dynamic values
68
+ var containerInlineStyle = {
69
+ width: "".concat(iconSize, "px")
70
+ };
71
+ if (!emojiProvider) {
72
+ return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
73
+ xcss: styles.container,
74
+ style: containerInlineStyle
75
+ });
76
+ }
65
77
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
66
- xcss: styles.container
78
+ xcss: styles.container,
79
+ style: containerInlineStyle
67
80
  }, /*#__PURE__*/_react.default.createElement(_emoji.ResourcedEmoji, {
68
81
  emojiId: emojiId,
69
82
  emojiProvider: emojiProvider,
70
- fitToHeight: height !== null && height !== void 0 ? height : 16
83
+ fitToHeight: iconSize
71
84
  }), isPrivate && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
72
85
  xcss: styles.emoji
73
86
  }, /*#__PURE__*/_react.default.createElement(_avatar.Status, {
package/dist/es2019/ProjectIcon.js CHANGED
@@ -19,6 +19,7 @@ export const ProjectIcon = ({
19
19
  isPrivate,
20
20
  height
21
21
  }) => {
22
+ const iconSize = height !== null && height !== void 0 ? height : 16;
22
23
  const emojiProvider = useMemo(() => {
23
24
  if (!emoji) {
24
25
  return undefined;
@@ -28,15 +29,27 @@ export const ProjectIcon = ({
28
29
  const emojiId = useMemo(() => emoji ? {
29
30
  shortName: emoji
30
31
  } : undefined, [emoji]);
31
- if (!emojiProvider || !emojiId) {
32
+ if (!emojiId) {
32
33
  return null;
33
34
  }
35
+
36
+ // Reserve width even while emojiProvider is loading using the style prop for dynamic values
37
+ const containerInlineStyle = {
38
+ width: `${iconSize}px`
39
+ };
40
+ if (!emojiProvider) {
41
+ return /*#__PURE__*/React.createElement(Box, {
42
+ xcss: styles.container,
43
+ style: containerInlineStyle
44
+ });
45
+ }
34
46
  return /*#__PURE__*/React.createElement(Box, {
35
- xcss: styles.container
47
+ xcss: styles.container,
48
+ style: containerInlineStyle
36
49
  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
37
50
  emojiId: emojiId,
38
51
  emojiProvider: emojiProvider,
39
- fitToHeight: height !== null && height !== void 0 ? height : 16
52
+ fitToHeight: iconSize
40
53
  }), isPrivate && /*#__PURE__*/React.createElement(Box, {
41
54
  xcss: styles.emoji
42
55
  }, /*#__PURE__*/React.createElement(Status, {
package/dist/esm/ProjectIcon.js CHANGED
@@ -37,6 +37,7 @@ export var ProjectIcon = function ProjectIcon(_ref2) {
37
37
  var emoji = _ref2.emoji,
38
38
  isPrivate = _ref2.isPrivate,
39
39
  height = _ref2.height;
40
+ var iconSize = height !== null && height !== void 0 ? height : 16;
40
41
  var emojiProvider = useMemo(function () {
41
42
  if (!emoji) {
42
43
  return undefined;
@@ -48,15 +49,27 @@ export var ProjectIcon = function ProjectIcon(_ref2) {
48
49
  shortName: emoji
49
50
  } : undefined;
50
51
  }, [emoji]);
51
- if (!emojiProvider || !emojiId) {
52
+ if (!emojiId) {
52
53
  return null;
53
54
  }
55
+
56
+ // Reserve width even while emojiProvider is loading using the style prop for dynamic values
57
+ var containerInlineStyle = {
58
+ width: "".concat(iconSize, "px")
59
+ };
60
+ if (!emojiProvider) {
61
+ return /*#__PURE__*/React.createElement(Box, {
62
+ xcss: styles.container,
63
+ style: containerInlineStyle
64
+ });
65
+ }
54
66
  return /*#__PURE__*/React.createElement(Box, {
55
- xcss: styles.container
67
+ xcss: styles.container,
68
+ style: containerInlineStyle
56
69
  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
57
70
  emojiId: emojiId,
58
71
  emojiProvider: emojiProvider,
59
- fitToHeight: height !== null && height !== void 0 ? height : 16
72
+ fitToHeight: iconSize
60
73
  }), isPrivate && /*#__PURE__*/React.createElement(Box, {
61
74
  xcss: styles.emoji
62
75
  }, /*#__PURE__*/React.createElement(Status, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/townsquare-emoji-provider",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "Townsquare emoji provider",
5
5
  "atlassian": {
6
6
  "team": "Townsquare"
@@ -25,7 +25,7 @@
25
25
  "@atlaskit/css": "^0.19.0",
26
26
  "@atlaskit/emoji": "^69.10.0",
27
27
  "@atlaskit/primitives": "^17.1.0",
28
- "@atlaskit/tokens": "^10.0.0",
28
+ "@atlaskit/tokens": "^10.1.0",
29
29
  "@babel/runtime": "^7.0.0"
30
30
  },
31
31
  "peerDependencies": {