@atlaskit/badge 15.0.13 → 15.0.16

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/badge
 
+## 15.0.16
+
+### Patch Changes
+
+- [`06fd023cd85`](https://bitbucket.org/atlassian/atlassian-frontend/commits/06fd023cd85) - Minor internal change to how text is displayed. No change to consumers.
+- [`52809e4839b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/52809e4839b) - Allow makers to disable max value formatting in the Badge component
+- Updated dependencies
+
+## 15.0.15
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 15.0.14
+
+### Patch Changes
+
+- [`899199caabb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/899199caabb) - Internal changes to the way styles are applied. There should be no noticeable changes to consumers.
+- [`8067cc918d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8067cc918d9) - Update implementation to match changes made to Text primitive
+- [`ea36ea17c4e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ea36ea17c4e) - Text now supports text-align and it's used for Badge to retain existing visuals
+- Updated dependencies
+
 ## 15.0.13
 
 ### Patch Changes

package/dist/cjs/badge.js

@@ -1,13 +1,15 @@
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 
-var _core = require("@emotion/core");
+var _dsExplorations = require("@atlaskit/ds-explorations");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -15,17 +17,10 @@ var _theme = require("./internal/theme");
 
 var _utils = require("./internal/utils");
 
-/** @jsx jsx */
-var badgeStyles = (0, _core.css)({
-  display: 'inline-block',
-  minWidth: '1px',
-  padding: '2px 6px',
-  borderRadius: '8px',
-  fontSize: '12px',
-  fontWeight: 'normal',
-  lineHeight: 1,
-  textAlign: 'center'
-});
+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; }
+
 /**
  * __Badge__
  *
@@ -35,7 +30,6 @@ var badgeStyles = (0, _core.css)({
  * - [Code](https://atlassian.design/components/badge/code)
  * - [Usage](https://atlassian.design/components/badge/usage)
  */
-
 var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
   var _style$backgroundColo, _style$color;
 
@@ -53,14 +47,22 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
 
   var backgroundColor = (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : _theme.backgroundColors[appearance][mode];
   var textColor = (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : _theme.textColors[appearance][mode];
-  return (0, _core.jsx)("span", {
-    "data-testid": testId,
-    css: badgeStyles,
-    style: {
+  return /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
+    testId: testId,
+    as: "span",
+    borderRadius: "badge",
+    display: "inlineFlex",
+    paddingInline: "sp-75",
+    paddingBlock: "sp-25",
+    UNSAFE_style: {
       backgroundColor: backgroundColor,
       color: textColor
     }
-  }, typeof children === 'number' ? (0, _utils.formatValue)(children, max) : children);
+  }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, {
+    fontSize: "12px",
+    lineHeight: "12px",
+    textAlign: "center"
+  }, typeof children === 'number' && max ? (0, _utils.formatValue)(children, max) : children));
 });
 Badge.displayName = 'Badge';
 var _default = Badge;

package/dist/cjs/version.json

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

package/dist/es2019/badge.js

@@ -1,19 +1,9 @@
-/** @jsx jsx */
-import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import React, { memo } from 'react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { backgroundColors, textColors } from './internal/theme';
 import { formatValue } from './internal/utils';
-const badgeStyles = css({
-  display: 'inline-block',
-  minWidth: '1px',
-  padding: '2px 6px',
-  borderRadius: '8px',
-  fontSize: '12px',
-  fontWeight: 'normal',
-  lineHeight: 1,
-  textAlign: 'center'
-});
+
 /**
  * __Badge__
  *
@@ -23,7 +13,6 @@ const badgeStyles = css({
  * - [Code](https://atlassian.design/components/badge/code)
  * - [Usage](https://atlassian.design/components/badge/usage)
  */
-
 const Badge = /*#__PURE__*/memo(function Badge({
   appearance = 'default',
   children = 0,
@@ -38,14 +27,22 @@ const Badge = /*#__PURE__*/memo(function Badge({
   } = useGlobalTheme();
   const backgroundColor = (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : backgroundColors[appearance][mode];
   const textColor = (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : textColors[appearance][mode];
-  return jsx("span", {
-    "data-testid": testId,
-    css: badgeStyles,
-    style: {
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: testId,
+    as: "span",
+    borderRadius: "badge",
+    display: "inlineFlex",
+    paddingInline: "sp-75",
+    paddingBlock: "sp-25",
+    UNSAFE_style: {
       backgroundColor,
       color: textColor
     }
-  }, typeof children === 'number' ? formatValue(children, max) : children);
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "12px",
+    lineHeight: "12px",
+    textAlign: "center"
+  }, typeof children === 'number' && max ? formatValue(children, max) : children));
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/dist/es2019/version.json

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

package/dist/esm/badge.js

@@ -1,19 +1,9 @@
-/** @jsx jsx */
-import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import React, { memo } from 'react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { backgroundColors, textColors } from './internal/theme';
 import { formatValue } from './internal/utils';
-var badgeStyles = css({
-  display: 'inline-block',
-  minWidth: '1px',
-  padding: '2px 6px',
-  borderRadius: '8px',
-  fontSize: '12px',
-  fontWeight: 'normal',
-  lineHeight: 1,
-  textAlign: 'center'
-});
+
 /**
  * __Badge__
  *
@@ -23,7 +13,6 @@ var badgeStyles = css({
  * - [Code](https://atlassian.design/components/badge/code)
  * - [Usage](https://atlassian.design/components/badge/usage)
  */
-
 var Badge = /*#__PURE__*/memo(function Badge(_ref) {
   var _style$backgroundColo, _style$color;
 
@@ -41,14 +30,22 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
 
   var backgroundColor = (_style$backgroundColo = style === null || style === void 0 ? void 0 : style.backgroundColor) !== null && _style$backgroundColo !== void 0 ? _style$backgroundColo : backgroundColors[appearance][mode];
   var textColor = (_style$color = style === null || style === void 0 ? void 0 : style.color) !== null && _style$color !== void 0 ? _style$color : textColors[appearance][mode];
-  return jsx("span", {
-    "data-testid": testId,
-    css: badgeStyles,
-    style: {
+  return /*#__PURE__*/React.createElement(Box, {
+    testId: testId,
+    as: "span",
+    borderRadius: "badge",
+    display: "inlineFlex",
+    paddingInline: "sp-75",
+    paddingBlock: "sp-25",
+    UNSAFE_style: {
       backgroundColor: backgroundColor,
       color: textColor
     }
-  }, typeof children === 'number' ? formatValue(children, max) : children);
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontSize: "12px",
+    lineHeight: "12px",
+    textAlign: "center"
+  }, typeof children === 'number' && max ? formatValue(children, max) : children));
 });
 Badge.displayName = 'Badge';
 export default Badge;

package/dist/esm/version.json

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

package/dist/types/badge.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { BadgeProps } from './types';
 /**
  * __Badge__
@@ -9,5 +9,5 @@ import type { BadgeProps } from './types';
  * - [Code](https://atlassian.design/components/badge/code)
  * - [Usage](https://atlassian.design/components/badge/usage)
  */
-declare const Badge: import("react").NamedExoticComponent<BadgeProps>;
+declare const Badge: React.NamedExoticComponent<BadgeProps>;
 export default Badge;

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

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

package/dist/types/types.d.ts

@@ -14,9 +14,10 @@ export interface BadgeProps {
     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.
+     * 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;
+    max?: number | false;
     /**
      * Style customization to apply to the badge. Only `backgroundColor` and `color` are supported.
      */

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/badge",
-  "version": "15.0.13",
+  "version": "15.0.16",
   "description": "A badge is a visual indicator for numeric values such as tallies and scores.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -18,7 +18,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Badge"
+      "name": "Badge",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -26,11 +27,11 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/codemod-utils": "^4.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/codemod-utils": "^4.1.0",
+    "@atlaskit/ds-explorations": "^0.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
-    "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -38,17 +39,18 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@emotion/core": "^10.0.9",
     "@testing-library/react": "^8.0.1",
     "jscodeshift": "^0.13.0",
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@atlassian/frontend": {
@@ -56,12 +58,16 @@
       "circular-dependencies": "file-and-folder-level"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",
         "emotion"
       ],
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"

package/report.api.md

@@ -0,0 +1,60 @@
+## API Report File for "@atlaskit/badge"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import type { CSSProperties } from 'react';
+import { NamedExoticComponent } from 'react';
+import type { ReactNode } from 'react';
+
+/**
+ * __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: NamedExoticComponent<BadgeProps>;
+export default Badge;
+
+export declare 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.
+   */
+  max?: number;
+  /**
+   * 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;
+}
+
+declare type ThemeAppearance =
+  | 'added'
+  | 'default'
+  | 'important'
+  | 'primary'
+  | 'primaryInverted'
+  | 'removed';
+
+export {};
+```