@atlaskit/badge 15.0.22 → 15.1.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/badge
 
+## 15.1.0
+
+### Minor Changes
+
+- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
+
+### Patch Changes
+
+- Updated dependencies
+
+## 15.0.23
+
+### Patch Changes
+
+- [`a7f643a0ee7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a7f643a0ee7) - Updated badge line-height to use design system values, removed block padding. There are no visual or behaviour changes.
+- [`eadbf13d8c0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eadbf13d8c0) - Updated usages of `Text`, `Box`, `Stack`, and `Inline` primitives to reflect their updated APIs. There are no visual or behaviour changes.
+- Updated dependencies
+
 ## 15.0.22
 
 ### Patch Changes

package/dist/cjs/badge.js

@@ -1,28 +1,18 @@
 "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 _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-
 var _text = _interopRequireDefault(require("@atlaskit/ds-explorations/text"));
-
 var _utils = require("./internal/utils");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /* eslint-disable @atlassian/tangerine/import/entry-points */
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
 /**
@@ -36,27 +26,26 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
   var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? 0 : _ref$children,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? 99 : _ref$max,
-      style = _ref.style,
-      testId = _ref.testId;
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? 0 : _ref$children,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 99 : _ref$max,
+    style = _ref.style,
+    testId = _ref.testId;
   return /*#__PURE__*/_react.default.createElement(_box.default, {
     testId: testId,
     as: "span",
     backgroundColor: backgroundColors[appearance],
     borderRadius: "badge",
     display: "inlineFlex",
-    paddingInline: "scale.075",
-    paddingBlock: "scale.025",
+    paddingInline: "space.075",
     UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
       backgroundColor: style.backgroundColor
     } : undefined
   }, /*#__PURE__*/_react.default.createElement(_text.default, {
-    fontSize: "12px",
-    lineHeight: "12px",
+    fontSize: "size.075",
+    lineHeight: "lineHeight.100",
     textAlign: "center",
     color: textColors[appearance],
     UNSAFE_style: style !== null && style !== void 0 && style.color ? {

package/dist/cjs/entry-points/badge.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _badge.default;
   }
 });
-
 var _badge = _interopRequireDefault(require("../badge"));

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _badge.default;
   }
 });
-
 var _badge = _interopRequireDefault(require("./badge"));

package/dist/cjs/internal/utils.js

@@ -4,28 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.formatValue = formatValue;
-
 function getSafeValue() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
   if (value < 0) {
     return 0;
   }
-
   return value;
 }
-
 function formatValue(value, max) {
   var safeValue = getSafeValue(value);
   var safeMax = getSafeValue(max);
-
   if (safeMax && safeMax < safeValue) {
     return "".concat(safeMax, "+");
   }
-
   if (safeValue === Infinity) {
     return '∞';
   }
-
   return safeValue.toString();
 }

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/badge",
-	"version": "15.0.22",
+	"version": "15.1.0",
 	"sideEffects": false
 }

package/dist/es2019/badge.js

@@ -1,11 +1,9 @@
 /* eslint-disable @atlassian/tangerine/import/entry-points */
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React, { memo } from 'react';
 import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
 import { formatValue } from './internal/utils';
-
 /**
  * __Badge__
  *
@@ -28,14 +26,13 @@ const Badge = /*#__PURE__*/memo(function Badge({
     backgroundColor: backgroundColors[appearance],
     borderRadius: "badge",
     display: "inlineFlex",
-    paddingInline: "scale.075",
-    paddingBlock: "scale.025",
+    paddingInline: "space.075",
     UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
       backgroundColor: style.backgroundColor
     } : undefined
   }, /*#__PURE__*/React.createElement(Text, {
-    fontSize: "12px",
-    lineHeight: "12px",
+    fontSize: "size.075",
+    lineHeight: "lineHeight.100",
     textAlign: "center",
     color: textColors[appearance],
     UNSAFE_style: style !== null && style !== void 0 && style.color ? {

package/dist/es2019/internal/utils.js

@@ -2,21 +2,16 @@ function getSafeValue(value = 0) {
   if (value < 0) {
     return 0;
   }
-
   return value;
 }
-
 export function formatValue(value, max) {
   const safeValue = getSafeValue(value);
   const safeMax = getSafeValue(max);
-
   if (safeMax && safeMax < safeValue) {
     return `${safeMax}+`;
   }
-
   if (safeValue === Infinity) {
     return '∞';
   }
-
   return safeValue.toString();
 }

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/badge",
-	"version": "15.0.22",
+	"version": "15.1.0",
 	"sideEffects": false
 }

package/dist/esm/badge.js

@@ -1,11 +1,9 @@
 /* eslint-disable @atlassian/tangerine/import/entry-points */
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React, { memo } from 'react';
 import Box from '@atlaskit/ds-explorations/box';
 import Text from '@atlaskit/ds-explorations/text';
 import { formatValue } from './internal/utils';
-
 /**
  * __Badge__
  *
@@ -17,27 +15,26 @@ import { formatValue } from './internal/utils';
  */
 var Badge = /*#__PURE__*/memo(function Badge(_ref) {
   var _ref$appearance = _ref.appearance,
-      appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? 0 : _ref$children,
-      _ref$max = _ref.max,
-      max = _ref$max === void 0 ? 99 : _ref$max,
-      style = _ref.style,
-      testId = _ref.testId;
+    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? 0 : _ref$children,
+    _ref$max = _ref.max,
+    max = _ref$max === void 0 ? 99 : _ref$max,
+    style = _ref.style,
+    testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Box, {
     testId: testId,
     as: "span",
     backgroundColor: backgroundColors[appearance],
     borderRadius: "badge",
     display: "inlineFlex",
-    paddingInline: "scale.075",
-    paddingBlock: "scale.025",
+    paddingInline: "space.075",
     UNSAFE_style: style !== null && style !== void 0 && style.backgroundColor ? {
       backgroundColor: style.backgroundColor
     } : undefined
   }, /*#__PURE__*/React.createElement(Text, {
-    fontSize: "12px",
-    lineHeight: "12px",
+    fontSize: "size.075",
+    lineHeight: "lineHeight.100",
     textAlign: "center",
     color: textColors[appearance],
     UNSAFE_style: style !== null && style !== void 0 && style.color ? {

package/dist/esm/internal/utils.js

@@ -1,24 +1,18 @@
 function getSafeValue() {
   var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
-
   if (value < 0) {
     return 0;
   }
-
   return value;
 }
-
 export function formatValue(value, max) {
   var safeValue = getSafeValue(value);
   var safeMax = getSafeValue(max);
-
   if (safeMax && safeMax < safeValue) {
     return "".concat(safeMax, "+");
   }
-
   if (safeValue === Infinity) {
     return '∞';
   }
-
   return safeValue.toString();
 }

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/badge",
-	"version": "15.0.22",
+	"version": "15.1.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/badge",
-  "version": "15.0.22",
+  "version": "15.1.0",
   "description": "A badge is a visual indicator for numeric values such as tallies and scores.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,18 +12,9 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -36,18 +27,18 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-explorations": "^1.0.0",
+    "@atlaskit/codemod-utils": "^4.2.0",
+    "@atlaskit/ds-explorations": "^2.1.0",
     "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/button": "^16.7.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/ds-lib": "^2.1.1",
-    "@atlaskit/section-message": "^6.3.0",
+    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/theme": "*",
     "@atlaskit/tokens": "*",
@@ -79,8 +70,10 @@
         "lite-mode"
       ],
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },

package/report.api.md

@@ -1,12 +1,17 @@
+<!-- API Report Version: 2.3 -->
+
 ## API Report File for "@atlaskit/badge"
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
+> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+### Table of contents
 
-<!--
-	Generated API Report version: 2.0
--->
+- [Main Entry Types](#main-entry-types)
 
-[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+### Main Entry Types
+
+<!--SECTION START: Main Entry Types-->
 
 ```ts
 import type { CSSProperties } from 'react';
@@ -20,8 +25,8 @@ export default Badge;
 // @public (undocumented)
 export interface BadgeProps {
   appearance?: ThemeAppearance;
-  children?: number | ReactNode;
-  max?: number | false;
+  children?: ReactNode | number;
+  max?: false | number;
   style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
   testId?: string;
 }
@@ -37,3 +42,5 @@ type ThemeAppearance =
 
 // (No @packageDocumentation comment for this package)
 ```
+
+<!--SECTION END: Main Entry Types-->

package/dist/types-ts4.0/badge.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { BadgeProps } from './types';
-/**
- * __Badge__
- *
- * This component gives you the full badge functionality and automatically formats the number you provide in \`children\`.
- *
- * - [Examples](https://atlassian.design/components/badge/examples)
- * - [Code](https://atlassian.design/components/badge/code)
- * - [Usage](https://atlassian.design/components/badge/usage)
- */
-declare const Badge: React.NamedExoticComponent<BadgeProps>;
-export default Badge;

package/dist/types-ts4.0/entry-points/badge.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../badge';
-export type { BadgeProps } from '../types';

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { BadgeProps } from '../types';

package/dist/types-ts4.0/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './badge';
-export type { BadgeProps } from './types';

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

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

package/dist/types-ts4.0/types.d.ts

@@ -1,29 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-export declare type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed';
-export interface BadgeProps {
-    /**
-     * Affects the visual style of the badge.
-     */
-    appearance?: ThemeAppearance;
-    /**
-     * The value displayed within the badge. A `ReactNode` can be provided for
-     * custom-formatted numbers, however, badge should only be used in cases where you want to represent
-     * a number.
-     * Use a [lozenge](/packages/design-system/lozenge) for non-numeric information.
-     */
-    children?: number | ReactNode;
-    /**
-     * The maximum value to display. Defaults to `99`. If the value is 100, and max is 50, "50+" will be displayed.
-     * This value should be greater than 0. If set to `false` the original value will be displayed regardless of
-     * whether it is larger than the default maximum value.
-     */
-    max?: number | false;
-    /**
-     * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
-     */
-    style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique string that appears as a data attribute `data-testid` in the rendered code, serving as a hook for automated tests
-     */
-    testId?: string;
-}