@atlaskit/lozenge 13.6.0 → 13.7.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/lozenge
 
+## 13.7.0
+
+### Minor Changes
+
+- [`52b7aa6b3d721`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/52b7aa6b3d721) -
+  Added a new `/new` entrypoint for `@atlaskit/lozenge`, `@atlaskit/badge`, and `@atlaskit/tag`.
+  These entrypoints export the new visual refresh components directly, bypassing the
+  `platform-dst-lozenge-tag-badge-visual-uplifts` feature flag. This is intended for products that
+  don't have Statsig integrated and cannot evaluate the feature flag.
+
+  New entrypoints:
+  - `import Lozenge from '@atlaskit/lozenge/new'`
+  - `import Badge from '@atlaskit/badge/new'`
+  - `import Tag from '@atlaskit/tag/new'`
+
+  **Note:** Do not use the `/new` entrypoint if your app can evaluate the
+  `platform-dst-lozenge-tag-badge-visual-uplifts` feature flag. These entrypoints will be removed
+  after the visual uplift rollout is complete, which will require updating import paths back to the
+  default entrypoint.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.6.1
+
+### Patch Changes
+
+- [`82429debcd5e8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/82429debcd5e8) -
+  Fixed issue where with motion enabled the lozenge was displaying ellipsis on resize
+- Updated dependencies
+
 ## 13.6.0
 
 ### Minor Changes

package/dist/cjs/new/entrypoint.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _lozenge.default;
+  }
+});
+var _lozenge = _interopRequireDefault(require("./lozenge"));

package/dist/cjs/new/lozenge-base.js

@@ -50,8 +50,9 @@ var styles = {
   motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
   containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
   containerBadgePadding: "_y4ti303w",
-  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
-  textResizing: "_1btozryt",
+  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
+  textEllipsis: "_1bto1l2s",
+  textClip: "_1btozryt",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   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
       isInitialRender.current = false;
       return;
     }
-    if ((0, _platformFeatureFlags.fg)('platform-dst-motion-uplift')) {
-      setResizing(true);
-    }
+    setResizing(true);
   }, [childrenKey]);
+  var enableMotionFG = (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift');
   var innerContent = /*#__PURE__*/React.createElement("span", (0, _extends2.default)({
     style: {
       // When maxWidth is a percentage, constrain the content wrapper
       // so text truncation works correctly within the flex layout
       maxWidth: maxWidthIsPc ? '100%' : undefined
     }
-  }, (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') ? resizingWidth : undefined, {
+  }, enableMotionFG ? resizingWidth : undefined, {
     className: (0, _runtime.ax)([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
   }), iconBefore && /*#__PURE__*/React.createElement(_iconRenderer.default, {
     size: spacing === 'spacious' ? 'medium' : 'small',
@@ -195,7 +195,7 @@ var LozengeBase = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forward
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: (0, _runtime.ax)([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
+    className: (0, _runtime.ax)([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
   }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
     "data-lozenge-metric-wrapper": true,
     "data-testid": testId && "".concat(testId, "--metric"),

package/dist/es2019/new/entrypoint.js

@@ -0,0 +1 @@
+export { default } from './lozenge';

package/dist/es2019/new/lozenge-base.js

@@ -37,8 +37,9 @@ const styles = {
   motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
   containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
   containerBadgePadding: "_y4ti303w",
-  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
-  textResizing: "_1btozryt",
+  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
+  textEllipsis: "_1bto1l2s",
+  textClip: "_1btozryt",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   loadingOverlay: "_1reo15vq _18m915vq _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _u7coze3t _152tze3t _rjxpze3t _1e02ze3t _lcxvglyw",
@@ -156,17 +157,16 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       isInitialRender.current = false;
       return;
     }
-    if (fg('platform-dst-motion-uplift')) {
-      setResizing(true);
-    }
+    setResizing(true);
   }, [childrenKey]);
+  const enableMotionFG = fg('platform-dst-motion-uplift');
   const innerContent = /*#__PURE__*/React.createElement("span", _extends({
     style: {
       // When maxWidth is a percentage, constrain the content wrapper
       // so text truncation works correctly within the flex layout
       maxWidth: maxWidthIsPc ? '100%' : undefined
     }
-  }, fg('platform-dst-motion-uplift') ? resizingWidth : undefined, {
+  }, enableMotionFG ? resizingWidth : undefined, {
     className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
   }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
     size: spacing === 'spacious' ? 'medium' : 'small',
@@ -179,7 +179,7 @@ const LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && `${testId}--text`,
-    className: ax([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
+    className: ax([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
   }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
     "data-lozenge-metric-wrapper": true,
     "data-testid": testId && `${testId}--metric`,

package/dist/esm/new/entrypoint.js

@@ -0,0 +1 @@
+export { default } from './lozenge';

package/dist/esm/new/lozenge-base.js

@@ -41,8 +41,9 @@ var styles = {
   motionContainer: "_k8m01rje _1oeci9qs _6fl41d08",
   containerSpacious: "_2rko1qi0 _1tkeviql _1q511b66 _85i51b66 _bozgutpp _y4tiutpp",
   containerBadgePadding: "_y4ti303w",
-  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c _1bto1l2s",
-  textResizing: "_1btozryt",
+  text: "_11c8wadc _1reo15vq _18m915vq _o5721q9c",
+  textEllipsis: "_1bto1l2s",
+  textClip: "_1btozryt",
   textSpacious: "_11c8fhey _k48p1wq8",
   textSelected: "_syaz6x5g",
   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
       isInitialRender.current = false;
       return;
     }
-    if (fg('platform-dst-motion-uplift')) {
-      setResizing(true);
-    }
+    setResizing(true);
   }, [childrenKey]);
+  var enableMotionFG = fg('platform-dst-motion-uplift');
   var innerContent = /*#__PURE__*/React.createElement("span", _extends({
     style: {
       // When maxWidth is a percentage, constrain the content wrapper
       // so text truncation works correctly within the flex layout
       maxWidth: maxWidthIsPc ? '100%' : undefined
     }
-  }, fg('platform-dst-motion-uplift') ? resizingWidth : undefined, {
+  }, enableMotionFG ? resizingWidth : undefined, {
     className: ax([styles.content, spacing === 'spacious' && styles.contentSpacious, isLoading && styles.loadingContent])
   }), iconBefore && /*#__PURE__*/React.createElement(IconRenderer, {
     size: spacing === 'spacious' ? 'medium' : 'small',
@@ -186,7 +186,7 @@ var LozengeBase = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref
       color: style === null || style === void 0 ? void 0 : style.color
     },
     "data-testid": testId && "".concat(testId, "--text"),
-    className: ax([styles.text, resizing && styles.textResizing, spacing === 'spacious' && styles.textSpacious])
+    className: ax([styles.text, enableMotionFG && resizing ? styles.textClip : styles.textEllipsis, spacing === 'spacious' && styles.textSpacious])
   }, children), hasTrailingMetric && !resolvedColor.startsWith('accent-') && /*#__PURE__*/React.createElement("span", {
     "data-lozenge-metric-wrapper": true,
     "data-testid": testId && "".concat(testId, "--metric"),

package/dist/types/new/entrypoint.d.ts

@@ -0,0 +1,2 @@
+export { default } from './lozenge';
+export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeSpacing, SemanticColor, AccentColor, } from './types';

package/dist/types-ts4.5/new/entrypoint.d.ts

@@ -0,0 +1,2 @@
+export { default } from './lozenge';
+export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeSpacing, SemanticColor, AccentColor, } from './types';

package/new/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/lozenge/new",
+  "main": "../dist/cjs/new/entrypoint.js",
+  "module": "../dist/esm/new/entrypoint.js",
+  "module:es2019": "../dist/es2019/new/entrypoint.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/new/entrypoint.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/new/entrypoint.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.6.0",
+	"version": "13.7.0",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -58,15 +58,15 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/badge": "^18.4.0",
+		"@atlaskit/badge": "^18.5.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
-		"@atlaskit/icon": "^34.0.0",
+		"@atlaskit/icon": "^34.1.0",
 		"@atlaskit/motion": "^5.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/primitives": "^19.0.0",
 		"@atlaskit/spinner": "^19.1.0",
-		"@atlaskit/tokens": "^12.0.0",
+		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -77,7 +77,7 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/docs": "^11.8.0",
 		"@atlaskit/dropdown-menu": "^16.8.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/link": "^3.4.0",