@atlaskit/lozenge 13.6.0 → 13.6.1

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 +8 -0
  2. package/dist/cjs/new/lozenge-base.js +7 -7
  3. package/dist/es2019/new/lozenge-base.js +7 -7
  4. package/dist/esm/new/lozenge-base.js +7 -7
  5. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/lozenge
2
2
 
3
+ ## 13.6.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`82429debcd5e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82429debcd5e8) -
8
+ Fixed issue where with motion enabled the lozenge was displaying ellipsis on resize
9
+ - Updated dependencies
10
+
3
11
  ## 13.6.0
4
12
 
5
13
  ### Minor Changes
package/dist/cjs/new/lozenge-base.js CHANGED
@@ -50,8 +50,9 @@ var styles = {
50
50
  motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
51
51
  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
52
52
  containerBadgePadding: "_y4ti303w",
53
- text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
54
- textResizing: "_1btozryt",
53
+ text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
54
+ textEllipsis: "_1bto1l2s",
55
+ textClip: "_1btozryt",
55
56
  textSpacious: "_11c8fhey _k48p1wq8",
56
57
  textSelected: "_syaz6x5g",
57
58
  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -172,17 +173,16 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
172
173
  isInitialRender.current = false;
173
174
  return;
174
175
  }
175
- if ((0, _platformFeatureFlags.fg)('platform-dst-motion-uplift')) {
176
- setResizing(true);
177
- }
176
+ setResizing(true);
178
177
  }, [childrenKey]);
178
+ var enableMotionFG = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift');
179
179
  var innerContent = /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
180
180
  style: {
181
181
  // When maxWidth is a percentage, constrain the content wrapper
182
182
  // so text truncation works correctly within the flex layout
183
183
  maxWidth: maxWidthIsPc ? '100%' : undefined
184
184
  }
185
- }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? resizingWidth : undefined, {
185
+ }, enableMotionFG ? resizingWidth : undefined, {
186
186
  className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
187
187
  }), iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
188
188
  size: spacing === 'spacious' ? 'medium' : 'small',
@@ -195,7 +195,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
195
195
  color: style === null || style === void 0 ? void 0 : style.color
196
196
  },
197
197
  "data-testid": testId && "".concat(testId, "--text"),
198
- className: (0, _runtime.ax)([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
198
+ className: (0, _runtime.ax)([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
199
199
  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
200
200
  "data-lozenge-metric-wrapper": true,
201
201
  "data-testid": testId && "".concat(testId, "--metric"),
package/dist/es2019/new/lozenge-base.js CHANGED
@@ -37,8 +37,9 @@ const styles = {
37
37
  motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
38
38
  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
39
39
  containerBadgePadding: "_y4ti303w",
40
- text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
41
- textResizing: "_1btozryt",
40
+ text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
41
+ textEllipsis: "_1bto1l2s",
42
+ textClip: "_1btozryt",
42
43
  textSpacious: "_11c8fhey _k48p1wq8",
43
44
  textSelected: "_syaz6x5g",
44
45
  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -156,17 +157,16 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
156
157
  isInitialRender.current = false;
157
158
  return;
158
159
  }
159
- if (fg('platform-dst-motion-uplift')) {
160
- setResizing(true);
161
- }
160
+ setResizing(true);
162
161
  }, [childrenKey]);
162
+ const enableMotionFG = fg('platform-dst-motion-uplift');
163
163
  const innerContent = /*#__PURE__*/React.createElement("span", _extends({
164
164
  style: {
165
165
  // When maxWidth is a percentage, constrain the content wrapper
166
166
  // so text truncation works correctly within the flex layout
167
167
  maxWidth: maxWidthIsPc ? '100%' : undefined
168
168
  }
169
- }, fg('platform-dst-motion-uplift') ? resizingWidth : undefined, {
169
+ }, enableMotionFG ? resizingWidth : undefined, {
170
170
  className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
171
171
  }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
172
172
  size: spacing === 'spacious' ? 'medium' : 'small',
@@ -179,7 +179,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
179
179
  color: style === null || style === void 0 ? void 0 : style.color
180
180
  },
181
181
  "data-testid": testId && `${testId}--text`,
182
- className: ax([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
182
+ className: ax([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
183
183
  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
184
184
  "data-lozenge-metric-wrapper": true,
185
185
  "data-testid": testId && `${testId}--metric`,
package/dist/esm/new/lozenge-base.js CHANGED
@@ -41,8 +41,9 @@ var styles = {
41
41
  motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
42
42
  containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
43
43
  containerBadgePadding: "_y4ti303w",
44
- text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
45
- textResizing: "_1btozryt",
44
+ text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
45
+ textEllipsis: "_1bto1l2s",
46
+ textClip: "_1btozryt",
46
47
  textSpacious: "_11c8fhey _k48p1wq8",
47
48
  textSelected: "_syaz6x5g",
48
49
  loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -163,17 +164,16 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
163
164
  isInitialRender.current = false;
164
165
  return;
165
166
  }
166
- if (fg('platform-dst-motion-uplift')) {
167
- setResizing(true);
168
- }
167
+ setResizing(true);
169
168
  }, [childrenKey]);
169
+ var enableMotionFG = fg('platform-dst-motion-uplift');
170
170
  var innerContent = /*#__PURE__*/React.createElement("span", _extends({
171
171
  style: {
172
172
  // When maxWidth is a percentage, constrain the content wrapper
173
173
  // so text truncation works correctly within the flex layout
174
174
  maxWidth: maxWidthIsPc ? '100%' : undefined
175
175
  }
176
- }, fg('platform-dst-motion-uplift') ? resizingWidth : undefined, {
176
+ }, enableMotionFG ? resizingWidth : undefined, {
177
177
  className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
178
178
  }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
179
179
  size: spacing === 'spacious' ? 'medium' : 'small',
@@ -186,7 +186,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
186
186
  color: style === null || style === void 0 ? void 0 : style.color
187
187
  },
188
188
  "data-testid": testId && "".concat(testId, "--text"),
189
- className: ax([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
189
+ className: ax([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
190
190
  }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
191
191
  "data-lozenge-metric-wrapper": true,
192
192
  "data-testid": testId && "".concat(testId, "--metric"),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/lozenge",
3
- "version": "13.6.0",
3
+ "version": "13.6.1",
4
4
  "description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -64,9 +64,9 @@
64
64
  "@atlaskit/icon": "^34.0.0",
65
65
  "@atlaskit/motion": "^5.6.0",
66
66
  "@atlaskit/platform-feature-flags": "^1.1.0",
67
- "@atlaskit/primitives": "^18.1.0",
67
+ "@atlaskit/primitives": "^19.0.0",
68
68
  "@atlaskit/spinner": "^19.1.0",
69
- "@atlaskit/tokens": "^12.0.0",
69
+ "@atlaskit/tokens": "^13.0.0",
70
70
  "@babel/runtime": "^7.0.0",
71
71
  "@compiled/react": "^0.20.0"
72
72
  },