@atlaskit/badge 15.2.7 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/badge
 
+## 16.0.0
+
+### Major Changes
+
+- [#88033](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88033) [`8c3fac87dcc9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8c3fac87dcc9) - Badge now sets specific font size, line height, font style, and font family properties under the hood. If you previously had Badge wrapped with elements like `<em>` or `<strong>` that specify font style or font weight properties, there will be a visual difference as these styles are overriden within Badge. Avoid wrapping Badge in elements that modify text properties.
+
+  If you need to preserve these styles, wrap the children of Badge instead, for example: `<Badge><em>1</em></Badge>`. Please note however this is not fully supported and will not work with the `max` prop.
+
+## 15.3.0
+
+### Minor Changes
+
+- [#87252](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/87252) [`eef585934a84`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eef585934a84) - Add react 18 support
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.2.7
 
 ### Patch Changes

package/dist/cjs/badge.js

@@ -8,13 +8,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _utils = require("./internal/utils");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* eslint-disable @atlassian/tangerine/import/entry-points */
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-
 var boxStyles = (0, _primitives.xcss)({
   borderRadius: 'border.radius.200',
   display: 'inline-flex',
@@ -44,15 +42,20 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
     as: "span",
     backgroundColor: backgroundColors[appearance],
     xcss: boxStyles,
-    style: style !== null && style !== void 0 && style.backgroundColor ? {
-      backgroundColor: style.backgroundColor
-    } : undefined,
+    style: {
+      background: style === null || style === void 0 ? void 0 : style.backgroundColor,
+      color: style === null || style === void 0 ? void 0 : style.color
+    },
     paddingInline: "space.075"
-  }, /*#__PURE__*/_react.default.createElement(_text.default, {
+  }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.remove-badge-text-style-inheritance_add9o') ? /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    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) : /*#__PURE__*/_react.default.createElement(_text.default, {
     fontSize: "size.075",
     lineHeight: "lineHeight.100",
     textAlign: "center",
-    color: textColors[appearance],
+    color: textColorsOld[appearance],
     UNSAFE_style: style !== null && style !== void 0 && style.color ? {
       color: style.color
     } : undefined
@@ -68,11 +71,19 @@ var backgroundColors = {
   primaryInverted: 'elevation.surface',
   removed: 'color.background.danger'
 };
-var textColors = {
+var textColorsOld = {
   added: 'success',
   default: 'color.text',
   important: 'inverse',
   primary: 'inverse',
   primaryInverted: 'brand',
   removed: 'danger'
+};
+var textColors = {
+  added: 'color.text.success',
+  default: 'color.text',
+  important: 'color.text.inverse',
+  primary: 'color.text.inverse',
+  primaryInverted: 'color.text.brand',
+  removed: 'color.text.danger'
 };

package/dist/es2019/badge.js

@@ -1,8 +1,7 @@
-/* eslint-disable @atlassian/tangerine/import/entry-points */
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React, { memo } from 'react';
-import Text from '@atlaskit/ds-explorations/text';
-import { Box, xcss } from '@atlaskit/primitives';
+import OldText from '@atlaskit/ds-explorations/text';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { formatValue } from './internal/utils';
 const boxStyles = xcss({
   borderRadius: 'border.radius.200',
@@ -31,15 +30,20 @@ const Badge = /*#__PURE__*/memo(function Badge({
     as: "span",
     backgroundColor: backgroundColors[appearance],
     xcss: boxStyles,
-    style: style !== null && style !== void 0 && style.backgroundColor ? {
-      backgroundColor: style.backgroundColor
-    } : undefined,
+    style: {
+      background: style === null || style === void 0 ? void 0 : style.backgroundColor,
+      color: style === null || style === void 0 ? void 0 : style.color
+    },
     paddingInline: "space.075"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, getBooleanFF('platform.design-system-team.remove-badge-text-style-inheritance_add9o') ? /*#__PURE__*/React.createElement(Text, {
+    size: "UNSAFE_small",
+    align: "center",
+    color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
+  }, typeof children === 'number' && max ? formatValue(children, max) : children) : /*#__PURE__*/React.createElement(OldText, {
     fontSize: "size.075",
     lineHeight: "lineHeight.100",
     textAlign: "center",
-    color: textColors[appearance],
+    color: textColorsOld[appearance],
     UNSAFE_style: style !== null && style !== void 0 && style.color ? {
       color: style.color
     } : undefined
@@ -55,11 +59,19 @@ const backgroundColors = {
   primaryInverted: 'elevation.surface',
   removed: 'color.background.danger'
 };
-const textColors = {
+const textColorsOld = {
   added: 'success',
   default: 'color.text',
   important: 'inverse',
   primary: 'inverse',
   primaryInverted: 'brand',
   removed: 'danger'
+};
+const textColors = {
+  added: 'color.text.success',
+  default: 'color.text',
+  important: 'color.text.inverse',
+  primary: 'color.text.inverse',
+  primaryInverted: 'color.text.brand',
+  removed: 'color.text.danger'
 };

package/dist/esm/badge.js

@@ -1,8 +1,7 @@
-/* eslint-disable @atlassian/tangerine/import/entry-points */
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React, { memo } from 'react';
-import Text from '@atlaskit/ds-explorations/text';
-import { Box, xcss } from '@atlaskit/primitives';
+import OldText from '@atlaskit/ds-explorations/text';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { formatValue } from './internal/utils';
 var boxStyles = xcss({
   borderRadius: 'border.radius.200',
@@ -33,15 +32,20 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
     as: "span",
     backgroundColor: backgroundColors[appearance],
     xcss: boxStyles,
-    style: style !== null && style !== void 0 && style.backgroundColor ? {
-      backgroundColor: style.backgroundColor
-    } : undefined,
+    style: {
+      background: style === null || style === void 0 ? void 0 : style.backgroundColor,
+      color: style === null || style === void 0 ? void 0 : style.color
+    },
     paddingInline: "space.075"
-  }, /*#__PURE__*/React.createElement(Text, {
+  }, getBooleanFF('platform.design-system-team.remove-badge-text-style-inheritance_add9o') ? /*#__PURE__*/React.createElement(Text, {
+    size: "UNSAFE_small",
+    align: "center",
+    color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
+  }, typeof children === 'number' && max ? formatValue(children, max) : children) : /*#__PURE__*/React.createElement(OldText, {
     fontSize: "size.075",
     lineHeight: "lineHeight.100",
     textAlign: "center",
-    color: textColors[appearance],
+    color: textColorsOld[appearance],
     UNSAFE_style: style !== null && style !== void 0 && style.color ? {
       color: style.color
     } : undefined
@@ -57,11 +61,19 @@ var backgroundColors = {
   primaryInverted: 'elevation.surface',
   removed: 'color.background.danger'
 };
-var textColors = {
+var textColorsOld = {
   added: 'success',
   default: 'color.text',
   important: 'inverse',
   primary: 'inverse',
   primaryInverted: 'brand',
   removed: 'danger'
+};
+var textColors = {
+  added: 'color.text.success',
+  default: 'color.text',
+  important: 'color.text.inverse',
+  primary: 'color.text.inverse',
+  primaryInverted: 'color.text.brand',
+  removed: 'color.text.danger'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/badge",
-  "version": "15.2.7",
+  "version": "16.0.0",
   "description": "A badge is a visual indicator for numeric values such as tallies and scores.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
       "name": "Badge",
       "category": "Components"
     },
-    "runReact18": false
+    "runReact18": true
   },
   "af:exports": {
     "./types": "./src/entry-points/types.tsx",
@@ -40,12 +40,13 @@
   },
   "dependencies": {
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-explorations": "^3.3.0",
-    "@atlaskit/primitives": "^5.1.0",
+    "@atlaskit/ds-explorations": "^3.4.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
+    "@atlaskit/primitives": "^5.5.0",
     "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0"
+    "react": "^16.8.0 || ^17.0.0 || ~18.2.0"
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
@@ -87,5 +88,10 @@
     }
   },
   "homepage": "https://atlassian.design/components/badge/",
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.remove-badge-text-style-inheritance_add9o": {
+      "type": "boolean"
+    }
+  }
 }