@atlaskit/progress-bar 2.3.2 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/cjs/components/progress-bar.compiled.css +17 -0
- package/dist/cjs/components/progress-bar.js +34 -78
- package/dist/es2019/components/progress-bar.compiled.css +18 -0
- package/dist/es2019/components/progress-bar.js +25 -77
- package/dist/esm/components/progress-bar.compiled.css +17 -0
- package/dist/esm/components/progress-bar.js +34 -77
- package/dist/types/components/progress-bar.d.ts +6 -2
- package/dist/types-ts4.5/components/progress-bar.d.ts +6 -2
- package/package.json +7 -5
- package/types/package.json +3 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @atlaskit/progress-bar
|
|
2
2
|
|
|
3
|
+
## 3.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- [#165802](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165802)
|
|
8
|
+
[`6d9f786733aed`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6d9f786733aed) -
|
|
9
|
+
Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
|
|
10
|
+
the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
|
|
11
|
+
|
|
12
|
+
Please note, in order to use this version of `@atlaskit/image`, you will need to ensure that your
|
|
13
|
+
bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in support
|
|
14
|
+
for `.css` imports, so you may not need to do anything. If you are using a different bundler,
|
|
15
|
+
please refer to the documentation for that bundler to understand how to handle `.css` imports.
|
|
16
|
+
|
|
17
|
+
For more information on the migration, please refer to
|
|
18
|
+
[RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
|
|
19
|
+
|
|
20
|
+
## 2.3.3
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- Updated dependencies
|
|
25
|
+
|
|
3
26
|
## 2.3.2
|
|
4
27
|
|
|
5
28
|
### Patch Changes
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
._11q718ht{background:var(--ds-background-inverse-subtle,hsla(0,0%,100%,.5))}
|
|
2
|
+
._11q71bh5{background:var(--ds-background-success-bold,#36b37e)}
|
|
3
|
+
._11q71jmj{background:var(--_1j2n3rv)}
|
|
4
|
+
._11q71vi8{background:var(--ds-background-neutral,rgba(9,30,66,.13))}
|
|
5
|
+
._11q71wby{background:var(--ds-background-neutral-bold,#42526e)}
|
|
6
|
+
._11q7vuon{background:var(--ds-surface,#fff)}
|
|
7
|
+
._2rko1sit{border-radius:var(--ds-border-radius,3px)}
|
|
8
|
+
._v564calv{transition:width .2s}
|
|
9
|
+
._y44v17o4{animation:var(--_1i6k0rf)}
|
|
10
|
+
._y44vr5uu{animation:var(--_1jqnm6n)}
|
|
11
|
+
._18m915vq{overflow-y:hidden}
|
|
12
|
+
._1bsb1osq{width:100%}
|
|
13
|
+
._1e0c1ule{display:block}
|
|
14
|
+
._1reo15vq{overflow-x:hidden}
|
|
15
|
+
._4t3ii2wt{height:6px}
|
|
16
|
+
._kqswh2mm{position:relative}
|
|
17
|
+
._kqswstnw{position:absolute}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* progress-bar.tsx generated by @compiled/babel-plugin v0.32.2 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -5,83 +6,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.default = void 0;
|
|
9
|
+
require("./progress-bar.compiled.css");
|
|
10
|
+
var _runtime = require("@compiled/react/runtime");
|
|
8
11
|
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
var _react2 = require("@emotion/react");
|
|
10
12
|
var _colors = require("@atlaskit/theme/colors");
|
|
11
|
-
/**
|
|
12
|
-
* @jsxRuntime classic
|
|
13
|
-
* @jsx jsx
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
17
|
-
|
|
18
13
|
var MIN_VALUE = 0;
|
|
19
14
|
var MAX_VALUE = 1;
|
|
20
|
-
var increasingBarAnimation =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
width: '5%'
|
|
24
|
-
},
|
|
25
|
-
to: {
|
|
26
|
-
left: '130%',
|
|
27
|
-
width: ' 100%'
|
|
28
|
-
}
|
|
29
|
-
});
|
|
30
|
-
var decreasingBarAnimation = (0, _react2.keyframes)({
|
|
31
|
-
from: {
|
|
32
|
-
left: '-80%',
|
|
33
|
-
width: '80%'
|
|
34
|
-
},
|
|
35
|
-
to: {
|
|
36
|
-
left: '110%',
|
|
37
|
-
width: '10%'
|
|
38
|
-
}
|
|
39
|
-
});
|
|
40
|
-
var containerStyles = (0, _react2.css)({
|
|
41
|
-
width: "100%",
|
|
42
|
-
height: 6,
|
|
43
|
-
position: 'relative',
|
|
44
|
-
background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")"),
|
|
45
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
46
|
-
overflow: 'hidden'
|
|
47
|
-
});
|
|
15
|
+
var increasingBarAnimation = null;
|
|
16
|
+
var decreasingBarAnimation = null;
|
|
17
|
+
var containerStyles = null;
|
|
48
18
|
var containerAppearance = {
|
|
49
|
-
default:
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
success: (0, _react2.css)({
|
|
53
|
-
background: "var(--ds-background-neutral, ".concat(_colors.N40A, ")")
|
|
54
|
-
}),
|
|
55
|
-
inverse: (0, _react2.css)({
|
|
56
|
-
background: "var(--ds-background-inverse-subtle, rgba(255, 255, 255, 0.5))"
|
|
57
|
-
})
|
|
19
|
+
default: "_11q71vi8",
|
|
20
|
+
success: "_11q71vi8",
|
|
21
|
+
inverse: "_11q718ht"
|
|
58
22
|
};
|
|
59
23
|
var barAppearance = {
|
|
60
|
-
default:
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
success: (0, _react2.css)({
|
|
64
|
-
background: "var(--ds-background-success-bold, ".concat(_colors.G300, ")")
|
|
65
|
-
}),
|
|
66
|
-
inverse: (0, _react2.css)({
|
|
67
|
-
background: "var(--ds-surface, white)"
|
|
68
|
-
})
|
|
24
|
+
default: "_11q71wby",
|
|
25
|
+
success: "_11q71bh5",
|
|
26
|
+
inverse: "_11q7vuon"
|
|
69
27
|
};
|
|
70
|
-
var barStyles =
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
borderRadius: "var(--ds-border-radius, 3px)"
|
|
75
|
-
});
|
|
76
|
-
var determinateBarStyles = (0, _react2.css)({
|
|
77
|
-
transition: 'width 0.2s'
|
|
78
|
-
});
|
|
79
|
-
var increasingBarStyles = (0, _react2.css)({
|
|
80
|
-
animation: "".concat(increasingBarAnimation, " 2s infinite")
|
|
81
|
-
});
|
|
82
|
-
var decreasingBarStyles = (0, _react2.css)({
|
|
83
|
-
animation: "".concat(decreasingBarAnimation, " 2s 0.5s infinite")
|
|
84
|
-
});
|
|
28
|
+
var barStyles = null;
|
|
29
|
+
var determinateBarStyles = null;
|
|
30
|
+
var increasingBarStyles = null;
|
|
31
|
+
var decreasingBarStyles = null;
|
|
85
32
|
|
|
86
33
|
/**
|
|
87
34
|
* __Progress bar__
|
|
@@ -103,24 +50,33 @@ var ProgressBar = function ProgressBar(_ref) {
|
|
|
103
50
|
_ref$value = _ref.value,
|
|
104
51
|
value = _ref$value === void 0 ? 0 : _ref$value;
|
|
105
52
|
var valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
|
|
106
|
-
return
|
|
107
|
-
css: [containerStyles, containerAppearance[appearance]],
|
|
53
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
108
54
|
role: "progressbar",
|
|
109
55
|
"aria-label": ariaLabel,
|
|
110
56
|
"aria-valuemin": MIN_VALUE,
|
|
111
57
|
"aria-valuenow": valueParsed,
|
|
112
58
|
"aria-valuemax": MAX_VALUE,
|
|
113
59
|
tabIndex: 0,
|
|
114
|
-
"data-testid": testId
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
60
|
+
"data-testid": testId,
|
|
61
|
+
className: (0, _runtime.ax)(["_1bsb1osq _4t3ii2wt _kqswh2mm _11q71jmj _2rko1sit _1reo15vq _18m915vq", containerAppearance[appearance]]),
|
|
62
|
+
style: {
|
|
63
|
+
"--_1j2n3rv": (0, _runtime.ix)("var(--ds-background-neutral, ".concat(_colors.N40A, ")"))
|
|
64
|
+
}
|
|
65
|
+
}, isIndeterminate ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
66
|
+
className: (0, _runtime.ax)(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_y44vr5uu"]),
|
|
67
|
+
style: {
|
|
68
|
+
"--_1jqnm6n": (0, _runtime.ix)("".concat(increasingBarAnimation, " 2s infinite"))
|
|
69
|
+
}
|
|
70
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
71
|
+
className: (0, _runtime.ax)(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_y44v17o4"]),
|
|
72
|
+
style: {
|
|
73
|
+
"--_1i6k0rf": (0, _runtime.ix)("".concat(decreasingBarAnimation, " 2s 0.5s infinite"))
|
|
74
|
+
}
|
|
75
|
+
})) : /*#__PURE__*/_react.default.createElement("span", {
|
|
120
76
|
style: {
|
|
121
77
|
width: "".concat(Number(value) * 100, "%")
|
|
122
78
|
},
|
|
123
|
-
|
|
79
|
+
className: (0, _runtime.ax)(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_v564calv"])
|
|
124
80
|
}));
|
|
125
81
|
};
|
|
126
82
|
var _default = exports.default = ProgressBar;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
._11q718ht{background:var(--ds-background-inverse-subtle,hsla(0,0%,100%,.5))}
|
|
2
|
+
._11q71bh5{background:var(--ds-background-success-bold,#36b37e)}
|
|
3
|
+
._11q71vi8{background:var(--ds-background-neutral,rgba(9,30,66,.13))}
|
|
4
|
+
._11q71wby{background:var(--ds-background-neutral-bold,#42526e)}
|
|
5
|
+
._11q7vuon{background:var(--ds-surface,#fff)}
|
|
6
|
+
._2rko1sit{border-radius:var(--ds-border-radius,3px)}
|
|
7
|
+
._v564calv{transition:width .2s}
|
|
8
|
+
._y44v1ud3{animation:kxdgi55 2s infinite}
|
|
9
|
+
._y44voiec{animation:k1h7rxld 2s .5s infinite}
|
|
10
|
+
._18m915vq{overflow-y:hidden}
|
|
11
|
+
._1bsb1osq{width:100%}
|
|
12
|
+
._1e0c1ule{display:block}
|
|
13
|
+
._1reo15vq{overflow-x:hidden}
|
|
14
|
+
._4t3ii2wt{height:6px}
|
|
15
|
+
._kqswh2mm{position:relative}
|
|
16
|
+
._kqswstnw{position:absolute}
|
|
17
|
+
@keyframes k1h7rxld{0%{left:-80%;width:80%}to{left:110%;width:10%}}
|
|
18
|
+
@keyframes kxdgi55{0%{left:-5%;width:5%}to{left:130%;width:100%}}
|
|
@@ -1,79 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
*/
|
|
1
|
+
/* progress-bar.tsx generated by @compiled/babel-plugin v0.32.2 */
|
|
2
|
+
import "./progress-bar.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
4
|
import React from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { css, jsx, keyframes } from '@emotion/react';
|
|
9
5
|
import { G300, N40A, N500 } from '@atlaskit/theme/colors';
|
|
10
6
|
const MIN_VALUE = 0;
|
|
11
7
|
const MAX_VALUE = 1;
|
|
12
|
-
const increasingBarAnimation =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
width: '5%'
|
|
16
|
-
},
|
|
17
|
-
to: {
|
|
18
|
-
left: '130%',
|
|
19
|
-
width: ' 100%'
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
const decreasingBarAnimation = keyframes({
|
|
23
|
-
from: {
|
|
24
|
-
left: '-80%',
|
|
25
|
-
width: '80%'
|
|
26
|
-
},
|
|
27
|
-
to: {
|
|
28
|
-
left: '110%',
|
|
29
|
-
width: '10%'
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
const containerStyles = css({
|
|
33
|
-
width: `100%`,
|
|
34
|
-
height: 6,
|
|
35
|
-
position: 'relative',
|
|
36
|
-
background: `var(--ds-background-neutral, ${N40A})`,
|
|
37
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
38
|
-
overflow: 'hidden'
|
|
39
|
-
});
|
|
8
|
+
const increasingBarAnimation = null;
|
|
9
|
+
const decreasingBarAnimation = null;
|
|
10
|
+
const containerStyles = null;
|
|
40
11
|
const containerAppearance = {
|
|
41
|
-
default:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
success: css({
|
|
45
|
-
background: `var(--ds-background-neutral, ${N40A})`
|
|
46
|
-
}),
|
|
47
|
-
inverse: css({
|
|
48
|
-
background: "var(--ds-background-inverse-subtle, rgba(255, 255, 255, 0.5))"
|
|
49
|
-
})
|
|
12
|
+
default: "_11q71vi8",
|
|
13
|
+
success: "_11q71vi8",
|
|
14
|
+
inverse: "_11q718ht"
|
|
50
15
|
};
|
|
51
16
|
const barAppearance = {
|
|
52
|
-
default:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
success: css({
|
|
56
|
-
background: `var(--ds-background-success-bold, ${G300})`
|
|
57
|
-
}),
|
|
58
|
-
inverse: css({
|
|
59
|
-
background: "var(--ds-surface, white)"
|
|
60
|
-
})
|
|
17
|
+
default: "_11q71wby",
|
|
18
|
+
success: "_11q71bh5",
|
|
19
|
+
inverse: "_11q7vuon"
|
|
61
20
|
};
|
|
62
|
-
const barStyles =
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
borderRadius: "var(--ds-border-radius, 3px)"
|
|
67
|
-
});
|
|
68
|
-
const determinateBarStyles = css({
|
|
69
|
-
transition: 'width 0.2s'
|
|
70
|
-
});
|
|
71
|
-
const increasingBarStyles = css({
|
|
72
|
-
animation: `${increasingBarAnimation} 2s infinite`
|
|
73
|
-
});
|
|
74
|
-
const decreasingBarStyles = css({
|
|
75
|
-
animation: `${decreasingBarAnimation} 2s 0.5s infinite`
|
|
76
|
-
});
|
|
21
|
+
const barStyles = null;
|
|
22
|
+
const determinateBarStyles = null;
|
|
23
|
+
const increasingBarStyles = null;
|
|
24
|
+
const decreasingBarStyles = null;
|
|
77
25
|
|
|
78
26
|
/**
|
|
79
27
|
* __Progress bar__
|
|
@@ -92,24 +40,24 @@ const ProgressBar = ({
|
|
|
92
40
|
value = 0
|
|
93
41
|
}) => {
|
|
94
42
|
const valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
|
|
95
|
-
return
|
|
96
|
-
css: [containerStyles, containerAppearance[appearance]],
|
|
43
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
97
44
|
role: "progressbar",
|
|
98
45
|
"aria-label": ariaLabel,
|
|
99
46
|
"aria-valuemin": MIN_VALUE,
|
|
100
47
|
"aria-valuenow": valueParsed,
|
|
101
48
|
"aria-valuemax": MAX_VALUE,
|
|
102
49
|
tabIndex: 0,
|
|
103
|
-
"data-testid": testId
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
50
|
+
"data-testid": testId,
|
|
51
|
+
className: ax(["_1bsb1osq _4t3ii2wt _kqswh2mm _11q71vi8 _2rko1sit _1reo15vq _18m915vq", containerAppearance[appearance]])
|
|
52
|
+
}, isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
53
|
+
className: ax(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_y44v1ud3"])
|
|
54
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
55
|
+
className: ax(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_y44voiec"])
|
|
56
|
+
})) : /*#__PURE__*/React.createElement("span", {
|
|
109
57
|
style: {
|
|
110
58
|
width: `${Number(value) * 100}%`
|
|
111
59
|
},
|
|
112
|
-
|
|
60
|
+
className: ax(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_v564calv"])
|
|
113
61
|
}));
|
|
114
62
|
};
|
|
115
63
|
export default ProgressBar;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
._11q718ht{background:var(--ds-background-inverse-subtle,hsla(0,0%,100%,.5))}
|
|
2
|
+
._11q71bh5{background:var(--ds-background-success-bold,#36b37e)}
|
|
3
|
+
._11q71jmj{background:var(--_1j2n3rv)}
|
|
4
|
+
._11q71vi8{background:var(--ds-background-neutral,rgba(9,30,66,.13))}
|
|
5
|
+
._11q71wby{background:var(--ds-background-neutral-bold,#42526e)}
|
|
6
|
+
._11q7vuon{background:var(--ds-surface,#fff)}
|
|
7
|
+
._2rko1sit{border-radius:var(--ds-border-radius,3px)}
|
|
8
|
+
._v564calv{transition:width .2s}
|
|
9
|
+
._y44v17o4{animation:var(--_1i6k0rf)}
|
|
10
|
+
._y44vr5uu{animation:var(--_1jqnm6n)}
|
|
11
|
+
._18m915vq{overflow-y:hidden}
|
|
12
|
+
._1bsb1osq{width:100%}
|
|
13
|
+
._1e0c1ule{display:block}
|
|
14
|
+
._1reo15vq{overflow-x:hidden}
|
|
15
|
+
._4t3ii2wt{height:6px}
|
|
16
|
+
._kqswh2mm{position:relative}
|
|
17
|
+
._kqswstnw{position:absolute}
|
|
@@ -1,79 +1,27 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
*/
|
|
1
|
+
/* progress-bar.tsx generated by @compiled/babel-plugin v0.32.2 */
|
|
2
|
+
import "./progress-bar.compiled.css";
|
|
3
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
5
4
|
import React from 'react';
|
|
6
|
-
|
|
7
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
8
|
-
import { css, jsx, keyframes } from '@emotion/react';
|
|
9
5
|
import { G300, N40A, N500 } from '@atlaskit/theme/colors';
|
|
10
6
|
var MIN_VALUE = 0;
|
|
11
7
|
var MAX_VALUE = 1;
|
|
12
|
-
var increasingBarAnimation =
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
width: '5%'
|
|
16
|
-
},
|
|
17
|
-
to: {
|
|
18
|
-
left: '130%',
|
|
19
|
-
width: ' 100%'
|
|
20
|
-
}
|
|
21
|
-
});
|
|
22
|
-
var decreasingBarAnimation = keyframes({
|
|
23
|
-
from: {
|
|
24
|
-
left: '-80%',
|
|
25
|
-
width: '80%'
|
|
26
|
-
},
|
|
27
|
-
to: {
|
|
28
|
-
left: '110%',
|
|
29
|
-
width: '10%'
|
|
30
|
-
}
|
|
31
|
-
});
|
|
32
|
-
var containerStyles = css({
|
|
33
|
-
width: "100%",
|
|
34
|
-
height: 6,
|
|
35
|
-
position: 'relative',
|
|
36
|
-
background: "var(--ds-background-neutral, ".concat(N40A, ")"),
|
|
37
|
-
borderRadius: "var(--ds-border-radius, 3px)",
|
|
38
|
-
overflow: 'hidden'
|
|
39
|
-
});
|
|
8
|
+
var increasingBarAnimation = null;
|
|
9
|
+
var decreasingBarAnimation = null;
|
|
10
|
+
var containerStyles = null;
|
|
40
11
|
var containerAppearance = {
|
|
41
|
-
default:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
success: css({
|
|
45
|
-
background: "var(--ds-background-neutral, ".concat(N40A, ")")
|
|
46
|
-
}),
|
|
47
|
-
inverse: css({
|
|
48
|
-
background: "var(--ds-background-inverse-subtle, rgba(255, 255, 255, 0.5))"
|
|
49
|
-
})
|
|
12
|
+
default: "_11q71vi8",
|
|
13
|
+
success: "_11q71vi8",
|
|
14
|
+
inverse: "_11q718ht"
|
|
50
15
|
};
|
|
51
16
|
var barAppearance = {
|
|
52
|
-
default:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
success: css({
|
|
56
|
-
background: "var(--ds-background-success-bold, ".concat(G300, ")")
|
|
57
|
-
}),
|
|
58
|
-
inverse: css({
|
|
59
|
-
background: "var(--ds-surface, white)"
|
|
60
|
-
})
|
|
17
|
+
default: "_11q71wby",
|
|
18
|
+
success: "_11q71bh5",
|
|
19
|
+
inverse: "_11q7vuon"
|
|
61
20
|
};
|
|
62
|
-
var barStyles =
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
borderRadius: "var(--ds-border-radius, 3px)"
|
|
67
|
-
});
|
|
68
|
-
var determinateBarStyles = css({
|
|
69
|
-
transition: 'width 0.2s'
|
|
70
|
-
});
|
|
71
|
-
var increasingBarStyles = css({
|
|
72
|
-
animation: "".concat(increasingBarAnimation, " 2s infinite")
|
|
73
|
-
});
|
|
74
|
-
var decreasingBarStyles = css({
|
|
75
|
-
animation: "".concat(decreasingBarAnimation, " 2s 0.5s infinite")
|
|
76
|
-
});
|
|
21
|
+
var barStyles = null;
|
|
22
|
+
var determinateBarStyles = null;
|
|
23
|
+
var increasingBarStyles = null;
|
|
24
|
+
var decreasingBarStyles = null;
|
|
77
25
|
|
|
78
26
|
/**
|
|
79
27
|
* __Progress bar__
|
|
@@ -95,24 +43,33 @@ var ProgressBar = function ProgressBar(_ref) {
|
|
|
95
43
|
_ref$value = _ref.value,
|
|
96
44
|
value = _ref$value === void 0 ? 0 : _ref$value;
|
|
97
45
|
var valueParsed = isIndeterminate ? MIN_VALUE : Math.max(MIN_VALUE, Math.min(value, MAX_VALUE));
|
|
98
|
-
return
|
|
99
|
-
css: [containerStyles, containerAppearance[appearance]],
|
|
46
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
100
47
|
role: "progressbar",
|
|
101
48
|
"aria-label": ariaLabel,
|
|
102
49
|
"aria-valuemin": MIN_VALUE,
|
|
103
50
|
"aria-valuenow": valueParsed,
|
|
104
51
|
"aria-valuemax": MAX_VALUE,
|
|
105
52
|
tabIndex: 0,
|
|
106
|
-
"data-testid": testId
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
}
|
|
53
|
+
"data-testid": testId,
|
|
54
|
+
className: ax(["_1bsb1osq _4t3ii2wt _kqswh2mm _11q71jmj _2rko1sit _1reo15vq _18m915vq", containerAppearance[appearance]]),
|
|
55
|
+
style: {
|
|
56
|
+
"--_1j2n3rv": ix("var(--ds-background-neutral, ".concat(N40A, ")"))
|
|
57
|
+
}
|
|
58
|
+
}, isIndeterminate ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
|
|
59
|
+
className: ax(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_y44vr5uu"]),
|
|
60
|
+
style: {
|
|
61
|
+
"--_1jqnm6n": ix("".concat(increasingBarAnimation, " 2s infinite"))
|
|
62
|
+
}
|
|
63
|
+
}), /*#__PURE__*/React.createElement("span", {
|
|
64
|
+
className: ax(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_y44v17o4"]),
|
|
65
|
+
style: {
|
|
66
|
+
"--_1i6k0rf": ix("".concat(decreasingBarAnimation, " 2s 0.5s infinite"))
|
|
67
|
+
}
|
|
68
|
+
})) : /*#__PURE__*/React.createElement("span", {
|
|
112
69
|
style: {
|
|
113
70
|
width: "".concat(Number(value) * 100, "%")
|
|
114
71
|
},
|
|
115
|
-
|
|
72
|
+
className: ax(["_1e0c1ule _4t3ii2wt _kqswstnw _2rko1sit", barAppearance[appearance], "_v564calv"])
|
|
116
73
|
}));
|
|
117
74
|
};
|
|
118
75
|
export default ProgressBar;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
/// <reference types="react" />
|
|
2
6
|
import { type DefaultProgressBarProps } from '../types';
|
|
3
7
|
/**
|
|
4
8
|
* __Progress bar__
|
|
@@ -9,5 +13,5 @@ import { type DefaultProgressBarProps } from '../types';
|
|
|
9
13
|
* - [Code](https://atlassian.design/components/progress-bar/code)
|
|
10
14
|
* - [Usage](https://atlassian.design/components/progress-bar/usage)
|
|
11
15
|
*/
|
|
12
|
-
declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, value, }: DefaultProgressBarProps) =>
|
|
16
|
+
declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, value, }: DefaultProgressBarProps) => JSX.Element;
|
|
13
17
|
export default ProgressBar;
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
* @jsx jsx
|
|
5
|
+
*/
|
|
2
6
|
import { type DefaultProgressBarProps } from '../types';
|
|
3
7
|
/**
|
|
4
8
|
* __Progress bar__
|
|
@@ -9,5 +13,5 @@ import { type DefaultProgressBarProps } from '../types';
|
|
|
9
13
|
* - [Code](https://atlassian.design/components/progress-bar/code)
|
|
10
14
|
* - [Usage](https://atlassian.design/components/progress-bar/usage)
|
|
11
15
|
*/
|
|
12
|
-
declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, value, }: DefaultProgressBarProps) =>
|
|
16
|
+
declare const ProgressBar: ({ appearance, ariaLabel, isIndeterminate, testId, value, }: DefaultProgressBarProps) => JSX.Element;
|
|
13
17
|
export default ProgressBar;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/progress-bar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "A progress bar communicates the status of a system process.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
-
"sideEffects":
|
|
15
|
+
"sideEffects": [
|
|
16
|
+
"**/*.compiled.css"
|
|
17
|
+
],
|
|
16
18
|
"atlaskit:src": "src/index.tsx",
|
|
17
19
|
"af:exports": {
|
|
18
20
|
".": "./src/index.tsx",
|
|
@@ -27,10 +29,10 @@
|
|
|
27
29
|
}
|
|
28
30
|
},
|
|
29
31
|
"dependencies": {
|
|
30
|
-
"@atlaskit/theme": "^
|
|
31
|
-
"@atlaskit/tokens": "^2.
|
|
32
|
+
"@atlaskit/theme": "^14.0.0",
|
|
33
|
+
"@atlaskit/tokens": "^2.2.0",
|
|
32
34
|
"@babel/runtime": "^7.0.0",
|
|
33
|
-
"@
|
|
35
|
+
"@compiled/react": "^0.18.1"
|
|
34
36
|
},
|
|
35
37
|
"peerDependencies": {
|
|
36
38
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
package/types/package.json
CHANGED
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
"main": "../dist/cjs/types.js",
|
|
4
4
|
"module": "../dist/esm/types.js",
|
|
5
5
|
"module:es2019": "../dist/es2019/types.js",
|
|
6
|
-
"sideEffects":
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"**/*.compiled.css"
|
|
8
|
+
],
|
|
7
9
|
"types": "../dist/types/types.d.ts",
|
|
8
10
|
"typesVersions": {
|
|
9
11
|
">=4.5 <5.4": {
|