@atlaskit/badge 17.2.0 → 18.1.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/badge
 
+## 18.1.0
+
+### Minor Changes
+
+- [#117557](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/117557)
+  [`c76a9ef9c9363`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c76a9ef9c9363) -
+  [ux] Add Support for showing negative numbers in Badge Component for Custom Number fields with max
+  prop supported
+
+## 18.0.0
+
+### Major Changes
+
+- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
+  [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
+  This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
+  status of only supporting React 18 going forward. No explicit breaking change to React support has
+  been made in this release, but this is to signify going forward, breaking changes for React 16 or
+  React 17 may come via non-major semver releases.
+
+  Please refer this community post for more details:
+  https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 17.2.0
 
 ### Minor Changes

package/dist/cjs/badge.js

@@ -45,6 +45,14 @@ var styles = {
   primaryInverted: "_bfhkvuon _syaz1e6v",
   removed: "_bfhk1gly _syaz1fxt"
 };
+var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
+  // Use this flag for allowing negative values(numbers) in badge component when custom number field is used
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
+  if ((0, _platformFeatureFlags.fg)('platform_ken_2029_negative_numbers_badge')) {
+    return typeof children === 'number' && typeof max === 'number' ? (0, _utils.formatValueWithNegativeSupport)(children, max) : children;
+  }
+  return typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children;
+};
 
 /**
  * __Badge__
@@ -77,7 +85,7 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
       size: "small",
       align: "center",
       color: "inherit"
-    }, typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children));
+    }, badgeValueWithNegativeNumberSupported(children, max)));
   }
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
@@ -90,7 +98,7 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
     size: "UNSAFE_small",
     align: "center",
     color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
-  }, typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children));
+  }, badgeValueWithNegativeNumberSupported(children, max)));
 });
 Badge.displayName = 'Badge';
 var _default = exports.default = Badge;

package/dist/cjs/internal/utils.js

@@ -4,6 +4,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatValue = formatValue;
+exports.formatValueWithNegativeSupport = formatValueWithNegativeSupport;
+function getSafeValueWithNegativeSupport() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var numericValue = +value;
+  // NOTE: Changing below code as this causes custom fields -ve number to show up as zero in activity timeline.
+  // This will ensure it renders correctly if it is a number otherwise renders 0
+  // If the value is NaN, return it as is (assuming it's a non-numeric string)
+  if (isNaN(numericValue)) {
+    return value;
+  }
+  // Return the numeric value, allowing negative numbers
+  return numericValue;
+}
+function formatValueWithNegativeSupport(value, max) {
+  var safeValue = getSafeValueWithNegativeSupport(value);
+  var safeMax = getSafeValueWithNegativeSupport(max);
+  var hasSafeMaxValue = false;
+  if (max !== undefined) {
+    hasSafeMaxValue = true;
+  }
+  if (safeMax === Infinity && safeValue === Infinity) {
+    return '∞';
+  }
+  if (hasSafeMaxValue && safeMax < safeValue) {
+    return "".concat(safeMax, "+");
+  }
+  if (safeValue === Infinity) {
+    return '∞';
+  }
+  return safeValue.toString();
+}
 function getSafeValue() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var numericValue = +value;

package/dist/es2019/badge.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
-import { formatValue } from './internal/utils';
+import { formatValue, formatValueWithNegativeSupport } from './internal/utils';
 const boxStyles = {
   root: "_2rkopd34 _18zr12x7 _1e0c116y _1o9zidpf _1kz6184x",
   added: "_bfhk1bay",
@@ -36,6 +36,14 @@ const styles = {
   primaryInverted: "_bfhkvuon _syaz1e6v",
   removed: "_bfhk1gly _syaz1fxt"
 };
+const badgeValueWithNegativeNumberSupported = (children, max) => {
+  // Use this flag for allowing negative values(numbers) in badge component when custom number field is used
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
+  if (fg('platform_ken_2029_negative_numbers_badge')) {
+    return typeof children === 'number' && typeof max === 'number' ? formatValueWithNegativeSupport(children, max) : children;
+  }
+  return typeof children === 'number' && max ? formatValue(children, max) : children;
+};
 
 /**
  * __Badge__
@@ -66,7 +74,7 @@ const Badge = /*#__PURE__*/memo(function Badge({
       size: "small",
       align: "center",
       color: "inherit"
-    }, typeof children === 'number' && max ? formatValue(children, max) : children));
+    }, badgeValueWithNegativeNumberSupported(children, max)));
   }
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
@@ -79,7 +87,7 @@ const Badge = /*#__PURE__*/memo(function Badge({
     size: "UNSAFE_small",
     align: "center",
     color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
-  }, typeof children === 'number' && max ? formatValue(children, max) : children));
+  }, badgeValueWithNegativeNumberSupported(children, max)));
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/dist/es2019/internal/utils.js

@@ -1,3 +1,32 @@
+function getSafeValueWithNegativeSupport(value = 0) {
+  const numericValue = +value;
+  // NOTE: Changing below code as this causes custom fields -ve number to show up as zero in activity timeline.
+  // This will ensure it renders correctly if it is a number otherwise renders 0
+  // If the value is NaN, return it as is (assuming it's a non-numeric string)
+  if (isNaN(numericValue)) {
+    return value;
+  }
+  // Return the numeric value, allowing negative numbers
+  return numericValue;
+}
+export function formatValueWithNegativeSupport(value, max) {
+  const safeValue = getSafeValueWithNegativeSupport(value);
+  const safeMax = getSafeValueWithNegativeSupport(max);
+  let hasSafeMaxValue = false;
+  if (max !== undefined) {
+    hasSafeMaxValue = true;
+  }
+  if (safeMax === Infinity && safeValue === Infinity) {
+    return '∞';
+  }
+  if (hasSafeMaxValue && safeMax < safeValue) {
+    return `${safeMax}+`;
+  }
+  if (safeValue === Infinity) {
+    return '∞';
+  }
+  return safeValue.toString();
+}
 function getSafeValue(value = 0) {
   const numericValue = +value;
   if (numericValue < 0) {

package/dist/esm/badge.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
-import { formatValue } from './internal/utils';
+import { formatValue, formatValueWithNegativeSupport } from './internal/utils';
 var boxStyles = {
   root: "_2rkopd34 _18zr12x7 _1e0c116y _1o9zidpf _1kz6184x",
   added: "_bfhk1bay",
@@ -36,6 +36,14 @@ var styles = {
   primaryInverted: "_bfhkvuon _syaz1e6v",
   removed: "_bfhk1gly _syaz1fxt"
 };
+var badgeValueWithNegativeNumberSupported = function badgeValueWithNegativeNumberSupported(children, max) {
+  // Use this flag for allowing negative values(numbers) in badge component when custom number field is used
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-registration
+  if (fg('platform_ken_2029_negative_numbers_badge')) {
+    return typeof children === 'number' && typeof max === 'number' ? formatValueWithNegativeSupport(children, max) : children;
+  }
+  return typeof children === 'number' && max ? formatValue(children, max) : children;
+};
 
 /**
  * __Badge__
@@ -68,7 +76,7 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
       size: "small",
       align: "center",
       color: "inherit"
-    }, typeof children === 'number' && max ? formatValue(children, max) : children));
+    }, badgeValueWithNegativeNumberSupported(children, max)));
   }
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
@@ -81,7 +89,7 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
     size: "UNSAFE_small",
     align: "center",
     color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
-  }, typeof children === 'number' && max ? formatValue(children, max) : children));
+  }, badgeValueWithNegativeNumberSupported(children, max)));
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/dist/esm/internal/utils.js

@@ -1,3 +1,33 @@
+function getSafeValueWithNegativeSupport() {
+  var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+  var numericValue = +value;
+  // NOTE: Changing below code as this causes custom fields -ve number to show up as zero in activity timeline.
+  // This will ensure it renders correctly if it is a number otherwise renders 0
+  // If the value is NaN, return it as is (assuming it's a non-numeric string)
+  if (isNaN(numericValue)) {
+    return value;
+  }
+  // Return the numeric value, allowing negative numbers
+  return numericValue;
+}
+export function formatValueWithNegativeSupport(value, max) {
+  var safeValue = getSafeValueWithNegativeSupport(value);
+  var safeMax = getSafeValueWithNegativeSupport(max);
+  var hasSafeMaxValue = false;
+  if (max !== undefined) {
+    hasSafeMaxValue = true;
+  }
+  if (safeMax === Infinity && safeValue === Infinity) {
+    return '∞';
+  }
+  if (hasSafeMaxValue && safeMax < safeValue) {
+    return "".concat(safeMax, "+");
+  }
+  if (safeValue === Infinity) {
+    return '∞';
+  }
+  return safeValue.toString();
+}
 function getSafeValue() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var numericValue = +value;

package/dist/types/internal/utils.d.ts

@@ -1 +1,2 @@
+export declare function formatValueWithNegativeSupport(value?: string | number, max?: number): string;
 export declare function formatValue(value?: string | number, max?: number): string;

package/dist/types-ts4.5/internal/utils.d.ts

@@ -1 +1,2 @@
+export declare function formatValueWithNegativeSupport(value?: string | number, max?: number): string;
 export declare function formatValue(value?: string | number, max?: number): string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/badge",
-	"version": "17.2.0",
+	"version": "18.1.0",
 	"description": "A badge is a visual indicator for numeric values such as tallies and scores.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -39,24 +39,24 @@
 	"dependencies": {
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^13.6.0",
-		"@atlaskit/tokens": "^3.3.0",
+		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.2"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+		"react": "^18.2.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
 		"@atlaskit/docs": "*",
-		"@atlaskit/ds-lib": "^3.5.0",
+		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/link": "*",
 		"@atlaskit/section-message": "*",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/theme": "^16.0.0",
+		"@atlaskit/theme": "^17.0.0",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^13.4.0",
 		"react-dom": "^18.2.0",
@@ -90,6 +90,9 @@
 	"platform-feature-flags": {
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"platform_ken_2029_negative_numbers_badge": {
+			"type": "boolean"
 		}
 	}
 }