@atlaskit/badge 15.3.0 → 16.1.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/badge
 
+## 16.1.0
+
+### Minor Changes
+
+- [#94806](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94806) [`6f40240a7290`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6f40240a7290) - Removed feature flag from previous release, keeping the newer changes.
+
+## 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

package/dist/cjs/badge.js

@@ -1,20 +1,15 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
 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,18 +39,15 @@ 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, {
-    fontSize: "size.075",
-    lineHeight: "lineHeight.100",
-    textAlign: "center",
-    color: textColors[appearance],
-    UNSAFE_style: style !== null && style !== void 0 && style.color ? {
-      color: style.color
-    } : undefined
+  }, /*#__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));
 });
 Badge.displayName = 'Badge';
@@ -69,10 +61,10 @@ var backgroundColors = {
   removed: 'color.background.danger'
 };
 var textColors = {
-  added: 'success',
+  added: 'color.text.success',
   default: 'color.text',
-  important: 'inverse',
-  primary: 'inverse',
-  primaryInverted: 'brand',
-  removed: 'danger'
+  important: 'color.text.inverse',
+  primary: 'color.text.inverse',
+  primaryInverted: 'color.text.brand',
+  removed: 'color.text.danger'
 };

package/dist/es2019/badge.js

@@ -1,8 +1,5 @@
-/* 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 { Box, Text, xcss } from '@atlaskit/primitives';
 import { formatValue } from './internal/utils';
 const boxStyles = xcss({
   borderRadius: 'border.radius.200',
@@ -31,18 +28,15 @@ 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, {
-    fontSize: "size.075",
-    lineHeight: "lineHeight.100",
-    textAlign: "center",
-    color: textColors[appearance],
-    UNSAFE_style: style !== null && style !== void 0 && style.color ? {
-      color: style.color
-    } : undefined
+    size: "UNSAFE_small",
+    align: "center",
+    color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
   }, typeof children === 'number' && max ? formatValue(children, max) : children));
 });
 Badge.displayName = 'Badge';
@@ -56,10 +50,10 @@ const backgroundColors = {
   removed: 'color.background.danger'
 };
 const textColors = {
-  added: 'success',
+  added: 'color.text.success',
   default: 'color.text',
-  important: 'inverse',
-  primary: 'inverse',
-  primaryInverted: 'brand',
-  removed: 'danger'
+  important: 'color.text.inverse',
+  primary: 'color.text.inverse',
+  primaryInverted: 'color.text.brand',
+  removed: 'color.text.danger'
 };

package/dist/esm/badge.js

@@ -1,8 +1,5 @@
-/* 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 { Box, Text, xcss } from '@atlaskit/primitives';
 import { formatValue } from './internal/utils';
 var boxStyles = xcss({
   borderRadius: 'border.radius.200',
@@ -33,18 +30,15 @@ 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, {
-    fontSize: "size.075",
-    lineHeight: "lineHeight.100",
-    textAlign: "center",
-    color: textColors[appearance],
-    UNSAFE_style: style !== null && style !== void 0 && style.color ? {
-      color: style.color
-    } : undefined
+    size: "UNSAFE_small",
+    align: "center",
+    color: style !== null && style !== void 0 && style.color ? 'inherit' : textColors[appearance]
   }, typeof children === 'number' && max ? formatValue(children, max) : children));
 });
 Badge.displayName = 'Badge';
@@ -58,10 +52,10 @@ var backgroundColors = {
   removed: 'color.background.danger'
 };
 var textColors = {
-  added: 'success',
+  added: 'color.text.success',
   default: 'color.text',
-  important: 'inverse',
-  primary: 'inverse',
-  primaryInverted: 'brand',
-  removed: 'danger'
+  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.3.0",
+  "version": "16.1.0",
   "description": "A badge is a visual indicator for numeric values such as tallies and scores.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,8 +40,7 @@
   },
   "dependencies": {
     "@atlaskit/codemod-utils": "^4.2.0",
-    "@atlaskit/ds-explorations": "^3.4.0",
-    "@atlaskit/primitives": "^5.4.0",
+    "@atlaskit/primitives": "^5.6.0",
     "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
@@ -51,7 +50,7 @@
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/ssr": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@emotion/react": "^11.7.1",