@atlaskit/badge 18.4.0 → 18.4.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/badge
 
+## 18.4.2
+
+### Patch Changes
+
+- [`22bf79dbdcdca`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22bf79dbdcdca) -
+  Internal changes to remove unnecessary token fallbacks and imports from `@atlaskit/theme`
+
+## 18.4.1
+
+### Patch Changes
+
+- [`5db9e3f21a52f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5db9e3f21a52f) -
+  Internal refactoring
+- Updated dependencies
+
 ## 18.4.0
 
 ### Minor Changes

package/badge.docs.tsx

@@ -0,0 +1,53 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Badge',
+		description:
+			'A badge is a visual indicator for numeric values such as tallies and scores, providing quick visual feedback.',
+		status: 'general-availability', // beta badge is feature-flagged
+		import: {
+			name: 'Badge',
+			package: '@atlaskit/badge',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for displaying counts, scores, or status indicators for a single item or label',
+			'Use with one item/label only to avoid ambiguity',
+			'Keep badge content concise and meaningful',
+			'Use appropriate appearance variants for different contexts',
+			'Position badges near relevant content',
+			'Consider maximum value display limits',
+			'Add a tooltip when the badge has an icon or needs extra context.',
+			'Use Lozenge for non-numeric status; use Tag for labels',
+		],
+		contentGuidelines: [
+			'Use clear, concise numeric or text values',
+			'Ensure values are meaningful to users',
+			'Use consistent formatting across similar badges',
+			'Consider localization for number formatting (locale-aware numbers)',
+		],
+		accessibilityGuidelines: [
+			'Ensure badge content is announced by screen readers',
+			'Do not rely on color alone for positive/negative meaning',
+			'Use appropriate color contrast for text readability',
+			'Provide meaningful context for numeric values',
+			'Consider alternative text for non-numeric badges',
+		],
+		examples: [
+			{
+				name: 'Badge',
+				description: 'Badge example',
+				source: path.resolve(__dirname, './examples/ai/badge.tsx'),
+			},
+		],
+		keywords: ['badge', 'indicator', 'numeric', 'tally', 'score', 'count', 'status'],
+		categories: ['status-indicators'],
+	},
+];
+
+export default documentation;

package/dist/cjs/badge-new.js

@@ -1,4 +1,4 @@
-/* badge-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");

package/dist/cjs/badge.js

@@ -1,4 +1,4 @@
-/* badge.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
@@ -60,16 +60,12 @@ var Badge = /*#__PURE__*/(0, _react.memo)(function Badge(_ref) {
   if ((0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts')) {
     // Map old appearance names to new ones
     var newAppearance = _badgeNew.appearanceMapping[appearance];
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      React.createElement(_badgeNew.default, {
-        appearance: newAppearance,
-        max: max,
-        style: style,
-        testId: testId
-      }, children)
-    );
+    return /*#__PURE__*/React.createElement(_badgeNew.default, {
+      appearance: newAppearance,
+      max: max,
+      style: style,
+      testId: testId
+    }, children);
   }
   var oldAppearance = _badgeNew.appearanceMappingToOld[appearance];
   return /*#__PURE__*/React.createElement("span", {

package/dist/es2019/badge-new.js

@@ -1,4 +1,4 @@
-/* badge-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./badge-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/es2019/badge.js

@@ -1,4 +1,4 @@
-/* badge.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./badge.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -50,16 +50,12 @@ const Badge = /*#__PURE__*/memo(function Badge({
   if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
     // Map old appearance names to new ones
     const newAppearance = appearanceMapping[appearance];
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      React.createElement(BadgeNew, {
-        appearance: newAppearance,
-        max: max,
-        style: style,
-        testId: testId
-      }, children)
-    );
+    return /*#__PURE__*/React.createElement(BadgeNew, {
+      appearance: newAppearance,
+      max: max,
+      style: style,
+      testId: testId
+    }, children);
   }
   const oldAppearance = appearanceMappingToOld[appearance];
   return /*#__PURE__*/React.createElement("span", {

package/dist/esm/badge-new.js

@@ -1,4 +1,4 @@
-/* badge-new.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge-new.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./badge-new.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";

package/dist/esm/badge.js

@@ -1,4 +1,4 @@
-/* badge.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* badge.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./badge.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
@@ -52,16 +52,12 @@ var Badge = /*#__PURE__*/memo(function Badge(_ref) {
   if (fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
     // Map old appearance names to new ones
     var newAppearance = appearanceMapping[appearance];
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-      React.createElement(BadgeNew, {
-        appearance: newAppearance,
-        max: max,
-        style: style,
-        testId: testId
-      }, children)
-    );
+    return /*#__PURE__*/React.createElement(BadgeNew, {
+      appearance: newAppearance,
+      max: max,
+      style: style,
+      testId: testId
+    }, children);
   }
   var oldAppearance = appearanceMappingToOld[appearance];
   return /*#__PURE__*/React.createElement("span", {

package/dist/types/badge-new.d.ts

@@ -24,5 +24,5 @@ export declare const appearanceMappingToOld: Record<'added' | 'removed' | 'defau
  * - warning (orange/yellow)
  * - discovery (purple)
  */
-declare const BadgeNew: import("react").NamedExoticComponent<BadgeNewProps>;
+declare const BadgeNew: import('react').NamedExoticComponent<BadgeNewProps>;
 export default BadgeNew;

package/dist/types/badge.d.ts

@@ -8,5 +8,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: import('react').NamedExoticComponent<BadgeProps>;
 export default Badge;

package/dist/types-ts4.5/badge-new.d.ts

@@ -24,5 +24,5 @@ export declare const appearanceMappingToOld: Record<'added' | 'removed' | 'defau
  * - warning (orange/yellow)
  * - discovery (purple)
  */
-declare const BadgeNew: import("react").NamedExoticComponent<BadgeNewProps>;
+declare const BadgeNew: import('react').NamedExoticComponent<BadgeNewProps>;
 export default BadgeNew;

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

@@ -8,5 +8,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: import('react').NamedExoticComponent<BadgeProps>;
 export default Badge;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/badge",
-	"version": "18.4.0",
+	"version": "18.4.2",
 	"description": "A badge is a visual indicator for numeric values such as tallies and scores.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,8 +34,8 @@
 					"title": "Badge",
 					"id": "badge",
 					"status": {
-						"type": "alpha",
-						"description": "This is an experiment under a feature flag. We may make frequent breaking changes with limited notice. We don't recommend using this without support from our team."
+						"type": "beta",
+						"description": "New and ready to use. These visual updates are currently behind the feature flag: `platform-dst-lozenge-tag-badge-visual-uplifts`. We'll provide comms and support for any major changes."
 					}
 				}
 			]
@@ -43,10 +43,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^18.0.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0"
@@ -55,13 +55,14 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.3.0",
+		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/theme": "^21.0.0",
+		"@atlaskit/theme": "^22.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:*",
-		"@atlassian/testing-library": "0.4.0",
+		"@atlassian/structured-docs-types": "workspace:^",
+		"@atlassian/testing-library": "0.5.0",
 		"react-dom": "^18.2.0"
 	},
 	"techstack": {