@atlaskit/badge - npm Package Compare versions

Comparing version 15.3.0 to 16.0.0

CHANGELOG.md

 # @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
@@ -4,0 +12,0 @@

dist/cjs/badge.js

@@ -11,2 +11,3 @@ "use strict";
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
@@ -16,5 +17,2 @@ var _utils = require("./internal/utils");
 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)({
@@ -49,11 +47,16 @@ borderRadius: 'border.radius.200',
     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 ? {
@@ -74,3 +77,3 @@ color: style.color
 };
-var textColors = {
+var textColorsOld = {
   added: 'success',
@@ -82,2 +85,10 @@ default: 'color.text',
   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'
 };

dist/es2019/badge.js

@@ -1,6 +0,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 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';
@@ -34,11 +33,16 @@ const boxStyles = xcss({
     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 ? {
@@ -59,3 +63,3 @@ color: style.color
 };
-const textColors = {
+const textColorsOld = {
   added: 'success',
@@ -67,2 +71,10 @@ default: 'color.text',
   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'
 };

dist/esm/badge.js

@@ -1,6 +0,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 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';
@@ -36,11 +35,16 @@ var boxStyles = xcss({
     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 ? {
@@ -61,3 +65,3 @@ color: style.color
 };
-var textColors = {
+var textColorsOld = {
   added: 'success',
@@ -69,2 +73,10 @@ default: 'color.text',
   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.json

 {
   "name": "@atlaskit/badge",
-  "version": "15.3.0",
+  "version": "16.0.0",
   "description": "A badge is a visual indicator for numeric values such as tallies and scores.",
@@ -44,3 +44,4 @@ "publishConfig": {
     "@atlaskit/ds-explorations": "^3.4.0",
-    "@atlaskit/primitives": "^5.4.0",
+    "@atlaskit/platform-feature-flags": "^0.2.5",
+    "@atlaskit/primitives": "^5.5.0",
     "@babel/runtime": "^7.0.0"
@@ -91,3 +92,8 @@ },
   "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"
+    }
+  }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

71208

increased by4.04%

Lines of code

770

increased by4.9%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@atlaskit/platform-feature-flags@^0.2.5

• + Added@atlaskit/platform-feature-flags@0.2.6(transitive)

• Updated@atlaskit/primitives@^5.5.0