@atlaskit/progress-bar 4.1.6 → 4.1.7

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/progress-bar
 
+## 4.1.7
+
+### Patch Changes
+
+- [`7aef1e49e90ea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7aef1e49e90ea) -
+  Removes redundant fallback color values via @atlaskit/theme
+
 ## 4.1.6
 
 ### Patch Changes

package/dist/cjs/components/progress-bar.compiled.css

@@ -8,7 +8,6 @@
 ._4t3ii2wt{height:6px}
 ._5sagymdr{animation-duration:2s}
 ._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
-._bfhk1jmj{background-color:var(--_1j2n3rv)}
 ._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhkkcmj{background-color:var(--ds-background-success-bold,#5b7f24)}

package/dist/cjs/components/progress-bar.js

@@ -1,4 +1,4 @@
-/* progress-bar.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* progress-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -10,7 +10,6 @@ require("./progress-bar.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _colors = require("@atlaskit/theme/colors");
 var MIN_VALUE = 0;
 var MAX_VALUE = 1;
 var increasingBarAnimation = null;
@@ -60,10 +59,7 @@ var ProgressBar = function ProgressBar(_ref) {
     "aria-valuenow": valueParsed,
     "aria-valuemax": MAX_VALUE,
     "data-testid": testId,
-    className: (0, _runtime.ax)(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhk1jmj", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]]),
-    style: {
-      "--_1j2n3rv": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N40A, ")"))
-    }
+    className: (0, _runtime.ax)(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhki8nm", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]])
   }, isIndeterminate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _runtime.ax)(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_5sagymdr _tip812c5 _j7hq7g40", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1rr0"])
   }), /*#__PURE__*/_react.default.createElement("span", {

package/dist/es2019/components/progress-bar.compiled.css

@@ -9,7 +9,6 @@
 ._5sagymdr{animation-duration:2s}
 ._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
 ._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
-._bfhk1vi8{background-color:var(--ds-background-neutral,rgba(9,30,66,.13))}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhkkcmj{background-color:var(--ds-background-success-bold,#5b7f24)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}

package/dist/es2019/components/progress-bar.js

@@ -1,9 +1,8 @@
-/* progress-bar.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* progress-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./progress-bar.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N40A } from '@atlaskit/theme/colors';
 const MIN_VALUE = 0;
 const MAX_VALUE = 1;
 const increasingBarAnimation = null;
@@ -50,7 +49,7 @@ const ProgressBar = ({
     "aria-valuenow": valueParsed,
     "aria-valuemax": MAX_VALUE,
     "data-testid": testId,
-    className: ax(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhk1vi8", fg('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]])
+    className: ax(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhki8nm", fg('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]])
   }, isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_5sagymdr _tip812c5 _j7hq7g40", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
   }), /*#__PURE__*/React.createElement("span", {

package/dist/esm/components/progress-bar.compiled.css

@@ -8,7 +8,6 @@
 ._4t3ii2wt{height:6px}
 ._5sagymdr{animation-duration:2s}
 ._bfhk1aqn{background-color:var(--ds-background-neutral-bold,#292a2e)}
-._bfhk1jmj{background-color:var(--_1j2n3rv)}
 ._bfhk1vck{background-color:var(--ds-background-inverse-subtle,#00000029)}
 ._bfhki8nm{background-color:var(--ds-background-neutral,#0515240f)}
 ._bfhkkcmj{background-color:var(--ds-background-success-bold,#5b7f24)}

package/dist/esm/components/progress-bar.js

@@ -1,9 +1,8 @@
-/* progress-bar.tsx generated by @compiled/babel-plugin v0.38.1 */
+/* progress-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
 import "./progress-bar.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { N40A } from '@atlaskit/theme/colors';
 var MIN_VALUE = 0;
 var MAX_VALUE = 1;
 var increasingBarAnimation = null;
@@ -53,10 +52,7 @@ var ProgressBar = function ProgressBar(_ref) {
     "aria-valuenow": valueParsed,
     "aria-valuemax": MAX_VALUE,
     "data-testid": testId,
-    className: ax(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhk1jmj", fg('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]]),
-    style: {
-      "--_1j2n3rv": ix("var(--ds-background-neutral, ".concat(N40A, ")"))
-    }
+    className: ax(["_2rkofajl _1reo15vq _18m915vq _1bsb1osq _4t3ii2wt _kqswh2mm _bfhki8nm", fg('platform-dst-shape-theme-default') && "_2rko1rr0", containerAppearance[appearance]])
   }, isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: ax(["_2rkofajl _1e0c1ule _4t3ii2wt _kqswstnw", barAppearance[appearance], "_5sagymdr _tip812c5 _j7hq7g40", fg('platform-dst-shape-theme-default') && "_2rko1rr0"])
   }), /*#__PURE__*/React.createElement("span", {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/progress-bar",
-	"version": "4.1.6",
+	"version": "4.1.7",
 	"description": "A progress bar communicates the status of a system process.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,10 +25,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tokens": "^11.0.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"
@@ -37,9 +36,10 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/docs": "^11.5.0",
+		"@atlaskit/docs": "^11.7.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/section-message": "^8.12.0",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0"
 	},

package/progress-bar.docs.tsx

@@ -0,0 +1,113 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-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: {
+			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'),
+			},
+		],
+		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 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'],
+	},
+	{
+		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 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;