@atlaskit/badge 18.7.1 → 19.0.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/badge
 
+## 19.0.1
+
+### Patch Changes
+
+- [`ee28cf33718b0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ee28cf33718b0) -
+  Add @atlassian/react-compiler-gating as a runtime dependency to enable React Compiler platform
+  gating.
+- Updated dependencies
+
+## 19.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.7.1
 
 ### Patch Changes

package/badge/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/badge.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/badge.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/badge.d.ts"
 }

package/badge.docs.tsx

@@ -20,7 +20,9 @@ const documentation: StructuredContentSource = {
 				'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',
+				'Use appropriate appearance variants for different contexts. Default semantic appearances: neutral, success, danger, warning, information, discovery, and inverse.',
+				'Bold semantic appearances (successBold, dangerBold, warningBold, informationBold, discoveryBold) give higher visual prominence.',
+				'Only use bold semantic badges for elements of high importance, such as notification counts. Avoid bold badges for elements that are secondary to other labels (e.g. alongside a lozenge).',
 				'Position badges near relevant content',
 				'Consider maximum value display limits',
 				'Add a tooltip when the badge has an icon or needs extra context.',
@@ -46,7 +48,18 @@ const documentation: StructuredContentSource = {
 					source: path.resolve(__dirname, './examples/ai/badge.tsx'),
 				},
 			],
-			keywords: ['badge', 'indicator', 'numeric', 'tally', 'score', 'count', 'status'],
+			keywords: [
+				'badge',
+				'indicator',
+				'numeric',
+				'tally',
+				'score',
+				'count',
+				'status',
+				'bold',
+				'appearance',
+				'notification',
+			],
 			categories: ['status-indicators'],
 		},
 	],

package/new/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/new.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/new.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/new.d.ts"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/badge",
-	"version": "18.7.1",
+	"version": "19.0.1",
 	"description": "A badge is a visual indicator for numeric values such as tallies and scores.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
 	"module": "dist/esm/index.js",
 	"module:es2019": "dist/es2019/index.js",
 	"types": "dist/types/index.d.ts",
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"sideEffects": [
 		"**/*.compiled.css"
 	],
@@ -49,9 +41,10 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tokens": "^13.3.0",
+		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/primitives": "^20.0.0",
+		"@atlaskit/tokens": "^15.0.0",
+		"@atlassian/react-compiler-gating": "^0.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -62,15 +55,14 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.8.0",
-		"@atlaskit/link": "^3.4.0",
-		"@atlaskit/section-message": "^8.13.0",
-		"@atlaskit/theme": "^25.0.0",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/section-message": "^9.1.0",
+		"@atlaskit/theme": "^26.0.0",
 		"@atlassian/feature-flags-test-utils": "^1.1.0",
-		"@atlassian/react-compiler-gating": "workspace:^",
 		"@atlassian/ssr-tests": "workspace:*",
 		"@atlassian/structured-docs-types": "workspace:^",
-		"@atlassian/testing-library": "0.6.1",
+		"@atlassian/testing-library": "0.6.2",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},

package/types/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/types.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/types.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/types.d.ts"
 }

package/dist/types-ts4.5/appearance-mapping-to-old.d.ts

@@ -1,15 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { NewAppearance } from './types';
-type OldAppearance = 'added' | 'removed' | 'default' | 'primary' | 'primaryInverted' | 'important';
-export declare const appearanceMappingToOld: Record<NewAppearance, OldAppearance> & {
-    added: OldAppearance;
-    removed: OldAppearance;
-    default: OldAppearance;
-    primary: OldAppearance;
-    primaryInverted: OldAppearance;
-    important: OldAppearance;
-};
-export {};

package/dist/types-ts4.5/appearance-mapping.d.ts

@@ -1,13 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import type { NewAppearance } from './types';
-export declare const appearanceMapping: Record<NewAppearance, NewAppearance> & {
-    added: NewAppearance;
-    removed: NewAppearance;
-    default: NewAppearance;
-    primary: NewAppearance;
-    primaryInverted: NewAppearance;
-    important: NewAppearance;
-};

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

@@ -1,23 +0,0 @@
-import type { BadgeNewProps } from './types';
-/**
- * __BadgeNew__
- *
- * New visual refresh implementation of Badge component for the labelling system.
- * This component is used when the 'platform-dst-lozenge-tag-badge-visual-uplifts' feature flag is enabled.
- *
- * Uses new appearance naming convention:
- * - success (green)
- * - danger (red)
- * - neutral (gray)
- * - information (blue)
- * - inverse (inverted colors)
- * - warning (orange/yellow)
- * - discovery (purple)
- * - informationBold (bold blue, color.background.information.subtle)
- * - successBold (bold green, color.background.success.subtle)
- * - dangerBold (bold red, color.background.danger.subtle)
- * - warningBold (bold warning, color.background.warning.bold)
- * - discoveryBold (bold purple, color.background.discovery.subtle)
- */
-declare const BadgeNew: import('react').NamedExoticComponent<BadgeNewProps>;
-export default BadgeNew;

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

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

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

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

package/dist/types-ts4.5/entry-points/new.d.ts

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

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

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

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

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

package/dist/types-ts4.5/internal/format-value-with-negative-support.d.ts

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

package/dist/types-ts4.5/internal/format-value.d.ts

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

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

@@ -1,69 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-export type ThemeAppearance = 'added' | 'default' | 'important' | 'primary' | 'primaryInverted' | 'removed' | 'warning' | 'discovery' | 'danger' | 'neutral' | 'success' | 'information' | 'inverse';
-export interface BadgeProps {
-    /**
-     * Affects the visual style of the badge.
-     */
-    appearance?: ThemeAppearance | NewAppearance;
-    /**
-     * 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;
-}
-/**
- * New appearance types for visual refresh.
- */
-export type NewAppearance = 'success' | 'danger' | 'neutral' | 'information' | 'inverse' | 'warning' | 'discovery' | 'informationBold' | 'successBold' | 'dangerBold' | 'warningBold' | 'discoveryBold';
-/**
- * Props for BadgeNew component with new appearance names.
- */
-export interface BadgeNewProps {
-    /**
-     * Affects the visual style of the badge.
-     * Uses the new naming convention:
-     * - success: Green (replaces "added")
-     * - danger: Red (replaces "removed" and "important")
-     * - neutral: Gray (replaces "default")
-     * - information: Blue (replaces "primary")
-     * - inverse: Inverted colors (replaces "primaryInverted")
-     */
-    appearance?: NewAppearance;
-    /**
-     * 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/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;
-}