@atlaskit/progress-bar 4.2.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/progress-bar
 
+## 5.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
+
+## 5.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
+
 ## 4.2.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "4.2.0",
+	"version": "5.0.1",
 	"description": "A progress bar communicates the status of a system process.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,8 +31,9 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tokens": "^13.0.0",
+		"@atlaskit/platform-feature-flags": "^2.0.0",
+		"@atlaskit/tokens": "^15.0.0",
+		"@atlassian/react-compiler-gating": "^0.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"
 	},
@@ -43,12 +44,12 @@
 		"@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.12.0",
-		"@atlassian/react-compiler-gating": "workspace:^",
+		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/link": "^4.0.0",
+		"@atlaskit/section-message": "^9.1.0",
 		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0"
 	},
 	"keywords": [
@@ -74,14 +75,6 @@
 			]
 		}
 	},
-	"typesVersions": {
-		">=4.5 <4.9": {
-			"*": [
-				"dist/types-ts4.5/*",
-				"dist/types-ts4.5/index.d.ts"
-			]
-		}
-	},
 	"platform-feature-flags": {
 		"platform-dst-shape-theme-default": {
 			"type": "boolean"

package/progress-bar/package.json

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

package/progress-bar.docs.tsx

@@ -1,113 +1,115 @@
 import path from 'path';
 
-import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
 
-const documentation: ComponentStructuredContentSource[] = [
-	{
-		name: 'ProgressBar',
-		description:
-			'A progress bar communicates the status of a system process, showing completion percentage or indeterminate progress.',
-		status: 'general-availability',
-		import: {
+const documentation: StructuredContentSource = {
+	components: [
+		{
 			name: 'ProgressBar',
-			package: '@atlaskit/progress-bar',
-			type: 'default',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
-		},
-		usageGuidelines: [
-			'Use for showing progress of known duration',
-			'Provide clear progress indicators',
-			'Use indeterminate state for unknown duration',
-			'Position progress bars prominently when active',
-			'Consider providing percentage or time estimates',
-		],
-		contentGuidelines: [
-			'Use clear, descriptive progress messages',
-			'Provide meaningful context for progress',
-			'Consider showing estimated time remaining',
-			'Use consistent progress terminology',
-		],
-		accessibilityGuidelines: [
-			'Provide appropriate ARIA labels for progress bars',
-			'Announce progress changes to screen readers',
-			'Use appropriate color contrast for visibility',
-			'Provide alternative text for progress status',
-		],
-		examples: [
-			{
-				name: 'Progress Bar',
-				description: 'Progress Bar example',
-				source: path.resolve(__dirname, './examples/ai/progress-bar.tsx'),
+			description:
+				'A progress bar communicates the status of a system process, showing completion percentage or indeterminate progress.',
+			status: 'general-availability',
+			import: {
+				name: 'ProgressBar',
+				package: '@atlaskit/progress-bar',
+				type: 'default',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['progress', 'bar', 'loading', 'status', 'completion', 'indeterminate'],
-		categories: ['loading'],
-	},
-	{
-		name: 'SuccessProgressBar',
-		description: 'A progress bar variant that indicates successful completion of a process.',
-		status: 'general-availability',
-		import: {
-			name: 'SuccessProgressBar',
-			package: '@atlaskit/progress-bar',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use for showing progress of known duration',
+				'Provide clear progress indicators',
+				'Use indeterminate state for unknown duration',
+				'Position progress bars prominently when active',
+				'Consider providing percentage or time estimates',
+			],
+			contentGuidelines: [
+				'Use clear, descriptive progress messages',
+				'Provide meaningful context for progress',
+				'Consider showing estimated time remaining',
+				'Use consistent progress terminology',
+			],
+			accessibilityGuidelines: [
+				'Provide appropriate ARIA labels for progress bars',
+				'Announce progress changes to screen readers',
+				'Use appropriate color contrast for visibility',
+				'Provide alternative text for progress status',
+			],
+			examples: [
+				{
+					name: 'Progress Bar',
+					description: 'Progress Bar example',
+					source: path.resolve(__dirname, './examples/ai/progress-bar.tsx'),
+				},
+			],
+			keywords: ['progress', 'bar', 'loading', 'status', 'completion', 'indeterminate'],
+			categories: ['loading'],
 		},
-		usageGuidelines: [
-			'Use to indicate successful completion',
-			'Show briefly before transitioning to next state',
-			'Use appropriate success styling',
-			'Consider providing success message',
-		],
-		contentGuidelines: [
-			'Use clear success messaging',
-			'Indicate what was completed successfully',
-			'Provide next steps if applicable',
-		],
-		examples: [
-			{
-				name: 'Success Progress Bar',
-				description: 'Success Progress Bar example',
-				source: path.resolve(__dirname, './examples/ai/success-progress-bar.tsx'),
+		{
+			name: 'SuccessProgressBar',
+			description: 'A progress bar variant that indicates successful completion of a process.',
+			status: 'general-availability',
+			import: {
+				name: 'SuccessProgressBar',
+				package: '@atlaskit/progress-bar',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['progress', 'bar', 'success', 'complete', 'finished'],
-		categories: ['loading'],
-	},
-	{
-		name: 'TransparentProgressBar',
-		description: 'A progress bar variant with transparent background for overlay contexts.',
-		status: 'general-availability',
-		import: {
-			name: 'TransparentProgressBar',
-			package: '@atlaskit/progress-bar',
-			type: 'named',
-			packagePath: path.resolve(__dirname),
-			packageJson: require('./package.json'),
+			usageGuidelines: [
+				'Use to indicate successful completion',
+				'Show briefly before transitioning to next state',
+				'Use appropriate success styling',
+				'Consider providing success message',
+			],
+			contentGuidelines: [
+				'Use clear success messaging',
+				'Indicate what was completed successfully',
+				'Provide next steps if applicable',
+			],
+			examples: [
+				{
+					name: 'Success Progress Bar',
+					description: 'Success Progress Bar example',
+					source: path.resolve(__dirname, './examples/ai/success-progress-bar.tsx'),
+				},
+			],
+			keywords: ['progress', 'bar', 'success', 'complete', 'finished'],
+			categories: ['loading'],
 		},
-		usageGuidelines: [
-			'Use in overlay or modal contexts',
-			'Ensure sufficient contrast with background',
-			'Use for subtle progress indication',
-			'Consider backdrop visibility',
-		],
-		contentGuidelines: [
-			'Ensure progress is visible against background',
-			'Use appropriate contrast for readability',
-			'Keep progress indication clear',
-		],
-		examples: [
-			{
-				name: 'Transparent Progress Bar',
-				description: 'Transparent Progress Bar example',
-				source: path.resolve(__dirname, './examples/ai/transparent-progress-bar.tsx'),
+		{
+			name: 'TransparentProgressBar',
+			description: 'A progress bar variant with transparent background for overlay contexts.',
+			status: 'general-availability',
+			import: {
+				name: 'TransparentProgressBar',
+				package: '@atlaskit/progress-bar',
+				type: 'named',
+				packagePath: path.resolve(__dirname),
+				packageJson: require('./package.json'),
 			},
-		],
-		keywords: ['progress', 'bar', 'transparent', 'overlay', 'subtle'],
-		categories: ['loading'],
-	},
-];
+			usageGuidelines: [
+				'Use in overlay or modal contexts',
+				'Ensure sufficient contrast with background',
+				'Use for subtle progress indication',
+				'Consider backdrop visibility',
+			],
+			contentGuidelines: [
+				'Ensure progress is visible against background',
+				'Use appropriate contrast for readability',
+				'Keep progress indication clear',
+			],
+			examples: [
+				{
+					name: 'Transparent Progress Bar',
+					description: 'Transparent Progress Bar example',
+					source: path.resolve(__dirname, './examples/ai/transparent-progress-bar.tsx'),
+				},
+			],
+			keywords: ['progress', 'bar', 'transparent', 'overlay', 'subtle'],
+			categories: ['loading'],
+		},
+	],
+};
 
 export default documentation;

package/success-progress-bar/package.json

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

package/transparent-progress-bar/package.json

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

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/components/progress-bar.d.ts

@@ -1,16 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type DefaultProgressBarProps } from '../types';
-/**
- * __Progress bar__
- *
- * A progress bar displays the status of a given process.
- *
- * - [Examples](https://atlassian.design/components/progress-bar/examples)
- * - [Code](https://atlassian.design/components/progress-bar/code)
- * - [Usage](https://atlassian.design/components/progress-bar/usage)
- */
-declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, value, }: DefaultProgressBarProps) => JSX.Element;
-export default ProgressBar;

package/dist/types-ts4.5/components/success-progress-bar.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { type CustomProgressBarProps } from '../types';
-/**
- * __Success progress bar__
- *
- * A success progress bar indicates the completion of a process.
- *
- * - [Examples](https://atlassian.design/components/progress-bar/success-progress-bar/examples)
- * - [Code](https://atlassian.design/components/progress-bar/success-progress-bar/code)
- */
-declare const SuccessProgressBar: ({ ariaLabel, isIndeterminate, testId, value, }: CustomProgressBarProps) => React.JSX.Element;
-export default SuccessProgressBar;

package/dist/types-ts4.5/components/transparent-progress-bar.d.ts

@@ -1,12 +0,0 @@
-import React from 'react';
-import { type CustomProgressBarProps } from '../types';
-/**
- * __Transparent progress bar__
- *
- * A transparent progress bar is used on bold backgrounds to maintain suitable contrast.
- *
- * - [Examples](https://atlassian.design/components/progress-bar/transparent-progress-bar/examples)
- * - [Code](https://atlassian.design/components/progress-bar/transparent-progress-bar/code)
- */
-declare const TransparentProgressBar: ({ ariaLabel, isIndeterminate, testId, value, }: CustomProgressBarProps) => React.JSX.Element;
-export default TransparentProgressBar;

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

@@ -1 +0,0 @@
-export { default } from '../components/progress-bar';

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

@@ -1 +0,0 @@
-export { default as SuccessProgressBar } from '../components/success-progress-bar';

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

@@ -1 +0,0 @@
-export { default as TransparentProgressBar } from '../components/transparent-progress-bar';

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

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

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

@@ -1,3 +0,0 @@
-export { default } from './components/progress-bar';
-export { default as SuccessProgressBar } from './components/success-progress-bar';
-export { default as TransparentProgressBar } from './components/transparent-progress-bar';

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

@@ -1,26 +0,0 @@
-export interface CustomProgressBarProps {
-    /**
-     * Sets the value of the progress bar, between `0` and `1` inclusive.
-     */
-    value?: number;
-    /**
-     * Shows the progress bar in an indeterminate state when `true`.
-     */
-    isIndeterminate?: boolean;
-    /**
-     * This is the descriptive label that's associated with the progress bar.
-     * Always include useful information on the current state of the progress bar so that people who use assistive technology can understand what the current state of the progress bar is.
-     */
-    ariaLabel?: string;
-    /**
-     * A `testId` prop 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;
-}
-export interface DefaultProgressBarProps extends CustomProgressBarProps {
-    /**
-     * The visual style of the progress bar.
-     */
-    appearance?: 'default' | 'success' | 'inverse';
-}

package/offerings.json

@@ -1,86 +0,0 @@
-[
-	{
-		"name": "ProgressBar",
-		"package": "@atlaskit/progress-bar",
-		"import": {
-			"name": "ProgressBar",
-			"package": "@atlaskit/progress-bar",
-			"type": "default"
-		},
-		"keywords": ["progress", "bar", "loading", "status", "completion", "indeterminate"],
-		"categories": ["loading"],
-		"shortDescription": "A progress bar communicates the status of a system process, showing completion percentage or indeterminate progress.",
-		"status": "general-availability",
-		"accessibilityGuidelines": [
-			"Provide appropriate ARIA labels for progress bars",
-			"Announce progress changes to screen readers",
-			"Use appropriate color contrast for visibility",
-			"Provide alternative text for progress status"
-		],
-		"usageGuidelines": [
-			"Use for showing progress of known duration",
-			"Provide clear progress indicators",
-			"Use indeterminate state for unknown duration",
-			"Position progress bars prominently when active",
-			"Consider providing percentage or time estimates"
-		],
-		"contentGuidelines": [
-			"Use clear, descriptive progress messages",
-			"Provide meaningful context for progress",
-			"Consider showing estimated time remaining",
-			"Use consistent progress terminology"
-		],
-		"generativeInstructions": "./docs/ai/progress-bar-instructions.md",
-		"examples": ["./examples/ai/progress-bar.tsx"]
-	},
-	{
-		"name": "SuccessProgressBar",
-		"package": "@atlaskit/progress-bar",
-		"import": {
-			"name": "SuccessProgressBar",
-			"package": "@atlaskit/progress-bar",
-			"type": "named"
-		},
-		"keywords": ["progress", "bar", "success", "complete", "finished"],
-		"categories": ["loading"],
-		"shortDescription": "A progress bar variant that indicates successful completion of a process.",
-		"status": "general-availability",
-		"usageGuidelines": [
-			"Use to indicate successful completion",
-			"Show briefly before transitioning to next state",
-			"Use appropriate success styling",
-			"Consider providing success message"
-		],
-		"contentGuidelines": [
-			"Use clear success messaging",
-			"Indicate what was completed successfully",
-			"Provide next steps if applicable"
-		],
-		"examples": ["./examples/ai/success-progress-bar.tsx"]
-	},
-	{
-		"name": "TransparentProgressBar",
-		"package": "@atlaskit/progress-bar",
-		"import": {
-			"name": "TransparentProgressBar",
-			"package": "@atlaskit/progress-bar",
-			"type": "named"
-		},
-		"keywords": ["progress", "bar", "transparent", "overlay", "subtle"],
-		"categories": ["loading"],
-		"shortDescription": "A progress bar variant with transparent background for overlay contexts.",
-		"status": "general-availability",
-		"usageGuidelines": [
-			"Use in overlay or modal contexts",
-			"Ensure sufficient contrast with background",
-			"Use for subtle progress indication",
-			"Consider backdrop visibility"
-		],
-		"contentGuidelines": [
-			"Ensure progress is visible against background",
-			"Use appropriate contrast for readability",
-			"Keep progress indication clear"
-		],
-		"examples": ["./examples/ai/transparent-progress-bar.tsx"]
-	}
-]