@atlaskit/progress-indicator 10.0.9 → 10.1.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 +13 -0
- package/dist/cjs/components/indicator.js +68 -27
- package/dist/cjs/components/progress-dots.js +11 -17
- package/dist/es2019/components/indicator.js +69 -26
- package/dist/es2019/components/progress-dots.js +11 -17
- package/dist/esm/components/indicator.js +68 -27
- package/dist/esm/components/progress-dots.js +11 -17
- package/dist/types/components/indicator.d.ts +15 -7
- package/dist/types/components/progress-dots.d.ts +1 -1
- package/dist/types-ts4.5/components/indicator.d.ts +15 -7
- package/dist/types-ts4.5/components/progress-dots.d.ts +1 -1
- package/package.json +3 -4
- package/dist/cjs/components/appearances.js +0 -23
- package/dist/es2019/components/appearances.js +0 -15
- package/dist/esm/components/appearances.js +0 -17
- package/dist/types/components/appearances.d.ts +0 -2
- package/dist/types-ts4.5/components/appearances.d.ts +0 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/progress-indicator
|
|
2
2
|
|
|
3
|
+
## 10.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#96841](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/96841)
|
|
8
|
+
[`6cca90095b7e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6cca90095b7e) -
|
|
9
|
+
[ux] - Fixes a bug where progress indicator dots are not focusable in the tab order.
|
|
10
|
+
- Progress indicator buttons now use the `Pressable` primitive.
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 10.0.9
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -5,58 +5,99 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.PresentationalIndicator = exports.ButtonIndicator = void 0;
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _primitives = require("@atlaskit/primitives");
|
|
10
|
+
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
|
|
11
11
|
var _constants = require("./constants");
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
|
|
13
|
+
var colorMap = {
|
|
14
|
+
default: (0, _primitives.xcss)({
|
|
15
|
+
backgroundColor: 'color.background.neutral'
|
|
16
|
+
}),
|
|
17
|
+
help: (0, _primitives.xcss)({
|
|
18
|
+
backgroundColor: 'color.background.neutral'
|
|
19
|
+
}),
|
|
20
|
+
inverted: (0, _primitives.xcss)({
|
|
21
|
+
// @ts-expect-error
|
|
22
|
+
backgroundColor: "var(--ds-icon-subtle, #626F86)"
|
|
23
|
+
}),
|
|
24
|
+
primary: (0, _primitives.xcss)({
|
|
25
|
+
backgroundColor: 'color.background.neutral'
|
|
26
|
+
})
|
|
27
|
+
};
|
|
28
|
+
var selectedColorMap = {
|
|
29
|
+
default: (0, _primitives.xcss)({
|
|
30
|
+
// @ts-expect-error
|
|
31
|
+
backgroundColor: "var(--ds-icon, #44546F)"
|
|
32
|
+
}),
|
|
33
|
+
help: (0, _primitives.xcss)({
|
|
34
|
+
// @ts-expect-error
|
|
35
|
+
backgroundColor: "var(--ds-icon-discovery, #8270DB)"
|
|
36
|
+
}),
|
|
37
|
+
inverted: (0, _primitives.xcss)({
|
|
38
|
+
// @ts-expect-error
|
|
39
|
+
backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
|
|
40
|
+
}),
|
|
41
|
+
primary: (0, _primitives.xcss)({
|
|
42
|
+
// @ts-expect-error
|
|
43
|
+
backgroundColor: "var(--ds-icon-brand, #0C66E4)"
|
|
44
|
+
})
|
|
45
|
+
};
|
|
46
|
+
var commonStyles = (0, _primitives.xcss)({
|
|
15
47
|
width: "var(".concat(_constants.varDotsSize, ")"),
|
|
16
48
|
height: "var(".concat(_constants.varDotsSize, ")"),
|
|
17
49
|
position: 'relative',
|
|
18
|
-
borderRadius:
|
|
19
|
-
'
|
|
50
|
+
borderRadius: 'border.radius.circle',
|
|
51
|
+
'::before': {
|
|
20
52
|
display: 'block',
|
|
21
53
|
width: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
|
|
22
54
|
height: "calc(var(".concat(_constants.varDotsSize, ") + var(").concat(_constants.varDotsMargin, "))"),
|
|
23
55
|
position: 'absolute',
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
left: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)"),
|
|
28
|
-
content: '""'
|
|
56
|
+
content: '""',
|
|
57
|
+
insetBlockStart: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)"),
|
|
58
|
+
insetInlineStart: "calc(-1 * var(".concat(_constants.varDotsMargin, ") / 2)")
|
|
29
59
|
}
|
|
30
60
|
});
|
|
31
|
-
var buttonStyles = (0,
|
|
32
|
-
padding:
|
|
61
|
+
var buttonStyles = (0, _primitives.xcss)({
|
|
62
|
+
padding: 'space.0',
|
|
33
63
|
border: 0,
|
|
34
64
|
cursor: 'pointer',
|
|
35
65
|
outline: 0
|
|
36
66
|
});
|
|
37
|
-
|
|
38
67
|
/**
|
|
39
68
|
* __Presentational indicator__
|
|
40
69
|
*
|
|
41
70
|
* A presentational indicator with no interactivity
|
|
42
71
|
*/
|
|
43
|
-
var PresentationalIndicator = exports.PresentationalIndicator = function PresentationalIndicator(
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
72
|
+
var PresentationalIndicator = exports.PresentationalIndicator = function PresentationalIndicator(_ref) {
|
|
73
|
+
var appearance = _ref.appearance,
|
|
74
|
+
isSelected = _ref.isSelected,
|
|
75
|
+
testId = _ref.testId;
|
|
76
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
77
|
+
testId: testId,
|
|
78
|
+
xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
|
|
48
79
|
});
|
|
49
80
|
};
|
|
50
|
-
|
|
51
81
|
/**
|
|
52
82
|
* __Button indicator__
|
|
53
83
|
*
|
|
54
84
|
* An interactive indicator.
|
|
55
85
|
*/
|
|
56
|
-
var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(
|
|
57
|
-
|
|
86
|
+
var ButtonIndicator = exports.ButtonIndicator = function ButtonIndicator(_ref2) {
|
|
87
|
+
var appearance = _ref2.appearance,
|
|
88
|
+
panelId = _ref2.panelId,
|
|
89
|
+
tabId = _ref2.tabId,
|
|
90
|
+
isSelected = _ref2.isSelected,
|
|
91
|
+
onClick = _ref2.onClick,
|
|
92
|
+
testId = _ref2.testId;
|
|
93
|
+
return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
|
|
58
94
|
role: "tab",
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
95
|
+
xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
|
|
96
|
+
"aria-controls": panelId,
|
|
97
|
+
"aria-selected": isSelected,
|
|
98
|
+
id: tabId,
|
|
99
|
+
onClick: onClick,
|
|
100
|
+
tabIndex: isSelected ? -1 : undefined,
|
|
101
|
+
testId: testId
|
|
102
|
+
}, /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, tabId));
|
|
62
103
|
};
|
|
@@ -14,7 +14,6 @@ var _bindEventListener = require("bind-event-listener");
|
|
|
14
14
|
var _analyticsNext = require("@atlaskit/analytics-next");
|
|
15
15
|
var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
|
|
16
16
|
var _primitives = require("@atlaskit/primitives");
|
|
17
|
-
var _appearances = require("./appearances");
|
|
18
17
|
var _constants = require("./constants");
|
|
19
18
|
var _indicator = require("./indicator");
|
|
20
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -22,7 +21,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
22
21
|
/** @jsx jsx */
|
|
23
22
|
|
|
24
23
|
var packageName = "@atlaskit/progress-indicator";
|
|
25
|
-
var packageVersion = "10.0
|
|
24
|
+
var packageVersion = "10.1.0";
|
|
26
25
|
|
|
27
26
|
/**
|
|
28
27
|
* __ProgressDots__
|
|
@@ -116,30 +115,25 @@ var ProgressDots = function ProgressDots(_ref) {
|
|
|
116
115
|
var isSelected = selectedIndex === index;
|
|
117
116
|
var tabId = "".concat(ariaLabel).concat(index);
|
|
118
117
|
var panelId = "".concat(ariaControls).concat(index);
|
|
119
|
-
var
|
|
118
|
+
var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
|
|
120
119
|
return onSelect ? (0, _react2.jsx)(_indicator.ButtonIndicator, {
|
|
121
120
|
key: index,
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
"aria-selected": isSelected,
|
|
128
|
-
id: tabId,
|
|
121
|
+
testId: indicatorTestId,
|
|
122
|
+
appearance: appearance,
|
|
123
|
+
isSelected: isSelected,
|
|
124
|
+
tabId: tabId,
|
|
125
|
+
panelId: panelId,
|
|
129
126
|
onClick: function onClick(event) {
|
|
130
127
|
return onSelectWithAnalytics({
|
|
131
128
|
event: event,
|
|
132
129
|
index: index
|
|
133
130
|
});
|
|
134
|
-
}
|
|
135
|
-
tabIndex: isSelected ? 0 : -1,
|
|
136
|
-
"data-testid": testId && "".concat(testId, "-ind-").concat(index)
|
|
131
|
+
}
|
|
137
132
|
}) : (0, _react2.jsx)(_indicator.PresentationalIndicator, {
|
|
138
|
-
testId: testId && "".concat(testId, "-ind-").concat(index),
|
|
139
133
|
key: index,
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
134
|
+
testId: indicatorTestId,
|
|
135
|
+
appearance: appearance,
|
|
136
|
+
isSelected: isSelected
|
|
143
137
|
});
|
|
144
138
|
})));
|
|
145
139
|
};
|
|
@@ -1,53 +1,96 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { css, jsx } from '@emotion/react';
|
|
5
|
-
import FocusRing from '@atlaskit/focus-ring';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
3
|
+
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
6
4
|
import { varDotsMargin, varDotsSize } from './constants';
|
|
7
|
-
|
|
5
|
+
// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
|
|
6
|
+
const colorMap = {
|
|
7
|
+
default: xcss({
|
|
8
|
+
backgroundColor: 'color.background.neutral'
|
|
9
|
+
}),
|
|
10
|
+
help: xcss({
|
|
11
|
+
backgroundColor: 'color.background.neutral'
|
|
12
|
+
}),
|
|
13
|
+
inverted: xcss({
|
|
14
|
+
// @ts-expect-error
|
|
15
|
+
backgroundColor: "var(--ds-icon-subtle, #626F86)"
|
|
16
|
+
}),
|
|
17
|
+
primary: xcss({
|
|
18
|
+
backgroundColor: 'color.background.neutral'
|
|
19
|
+
})
|
|
20
|
+
};
|
|
21
|
+
const selectedColorMap = {
|
|
22
|
+
default: xcss({
|
|
23
|
+
// @ts-expect-error
|
|
24
|
+
backgroundColor: "var(--ds-icon, #44546F)"
|
|
25
|
+
}),
|
|
26
|
+
help: xcss({
|
|
27
|
+
// @ts-expect-error
|
|
28
|
+
backgroundColor: "var(--ds-icon-discovery, #8270DB)"
|
|
29
|
+
}),
|
|
30
|
+
inverted: xcss({
|
|
31
|
+
// @ts-expect-error
|
|
32
|
+
backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
|
|
33
|
+
}),
|
|
34
|
+
primary: xcss({
|
|
35
|
+
// @ts-expect-error
|
|
36
|
+
backgroundColor: "var(--ds-icon-brand, #0C66E4)"
|
|
37
|
+
})
|
|
38
|
+
};
|
|
39
|
+
const commonStyles = xcss({
|
|
8
40
|
width: `var(${varDotsSize})`,
|
|
9
41
|
height: `var(${varDotsSize})`,
|
|
10
42
|
position: 'relative',
|
|
11
|
-
borderRadius:
|
|
12
|
-
'
|
|
43
|
+
borderRadius: 'border.radius.circle',
|
|
44
|
+
'::before': {
|
|
13
45
|
display: 'block',
|
|
14
46
|
width: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
|
|
15
47
|
height: `calc(var(${varDotsSize}) + var(${varDotsMargin}))`,
|
|
16
48
|
position: 'absolute',
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
left: `calc(-1 * var(${varDotsMargin}) / 2)`,
|
|
21
|
-
content: '""'
|
|
49
|
+
content: '""',
|
|
50
|
+
insetBlockStart: `calc(-1 * var(${varDotsMargin}) / 2)`,
|
|
51
|
+
insetInlineStart: `calc(-1 * var(${varDotsMargin}) / 2)`
|
|
22
52
|
}
|
|
23
53
|
});
|
|
24
|
-
const buttonStyles =
|
|
25
|
-
padding:
|
|
54
|
+
const buttonStyles = xcss({
|
|
55
|
+
padding: 'space.0',
|
|
26
56
|
border: 0,
|
|
27
57
|
cursor: 'pointer',
|
|
28
58
|
outline: 0
|
|
29
59
|
});
|
|
30
|
-
|
|
31
60
|
/**
|
|
32
61
|
* __Presentational indicator__
|
|
33
62
|
*
|
|
34
63
|
* A presentational indicator with no interactivity
|
|
35
64
|
*/
|
|
36
|
-
export const PresentationalIndicator =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
65
|
+
export const PresentationalIndicator = ({
|
|
66
|
+
appearance,
|
|
67
|
+
isSelected,
|
|
68
|
+
testId
|
|
69
|
+
}) => /*#__PURE__*/React.createElement(Box, {
|
|
70
|
+
testId: testId,
|
|
71
|
+
xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
|
|
40
72
|
});
|
|
41
|
-
|
|
42
73
|
/**
|
|
43
74
|
* __Button indicator__
|
|
44
75
|
*
|
|
45
76
|
* An interactive indicator.
|
|
46
77
|
*/
|
|
47
|
-
export const ButtonIndicator =
|
|
48
|
-
|
|
78
|
+
export const ButtonIndicator = ({
|
|
79
|
+
appearance,
|
|
80
|
+
panelId,
|
|
81
|
+
tabId,
|
|
82
|
+
isSelected,
|
|
83
|
+
onClick,
|
|
84
|
+
testId
|
|
85
|
+
}) => {
|
|
86
|
+
return /*#__PURE__*/React.createElement(Pressable, {
|
|
49
87
|
role: "tab",
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
88
|
+
xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
|
|
89
|
+
"aria-controls": panelId,
|
|
90
|
+
"aria-selected": isSelected,
|
|
91
|
+
id: tabId,
|
|
92
|
+
onClick: onClick,
|
|
93
|
+
tabIndex: isSelected ? -1 : undefined,
|
|
94
|
+
testId: testId
|
|
95
|
+
}, /*#__PURE__*/React.createElement(VisuallyHidden, null, tabId));
|
|
53
96
|
};
|
|
@@ -5,11 +5,10 @@ import { bind } from 'bind-event-listener';
|
|
|
5
5
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
6
6
|
import noop from '@atlaskit/ds-lib/noop';
|
|
7
7
|
import { Box, Inline } from '@atlaskit/primitives';
|
|
8
|
-
import { getBgColor } from './appearances';
|
|
9
8
|
import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
|
|
10
9
|
import { ButtonIndicator, PresentationalIndicator } from './indicator';
|
|
11
10
|
const packageName = "@atlaskit/progress-indicator";
|
|
12
|
-
const packageVersion = "10.0
|
|
11
|
+
const packageVersion = "10.1.0";
|
|
13
12
|
|
|
14
13
|
/**
|
|
15
14
|
* __ProgressDots__
|
|
@@ -101,28 +100,23 @@ const ProgressDots = ({
|
|
|
101
100
|
const isSelected = selectedIndex === index;
|
|
102
101
|
const tabId = `${ariaLabel}${index}`;
|
|
103
102
|
const panelId = `${ariaControls}${index}`;
|
|
104
|
-
const
|
|
103
|
+
const indicatorTestId = testId && `${testId}-ind-${index}`;
|
|
105
104
|
return onSelect ? jsx(ButtonIndicator, {
|
|
106
105
|
key: index,
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
"aria-selected": isSelected,
|
|
113
|
-
id: tabId,
|
|
106
|
+
testId: indicatorTestId,
|
|
107
|
+
appearance: appearance,
|
|
108
|
+
isSelected: isSelected,
|
|
109
|
+
tabId: tabId,
|
|
110
|
+
panelId: panelId,
|
|
114
111
|
onClick: event => onSelectWithAnalytics({
|
|
115
112
|
event,
|
|
116
113
|
index
|
|
117
|
-
})
|
|
118
|
-
tabIndex: isSelected ? 0 : -1,
|
|
119
|
-
"data-testid": testId && `${testId}-ind-${index}`
|
|
114
|
+
})
|
|
120
115
|
}) : jsx(PresentationalIndicator, {
|
|
121
|
-
testId: testId && `${testId}-ind-${index}`,
|
|
122
116
|
key: index,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
117
|
+
testId: indicatorTestId,
|
|
118
|
+
appearance: appearance,
|
|
119
|
+
isSelected: isSelected
|
|
126
120
|
});
|
|
127
121
|
})));
|
|
128
122
|
};
|
|
@@ -1,55 +1,96 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import { css, jsx } from '@emotion/react';
|
|
5
|
-
import FocusRing from '@atlaskit/focus-ring';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
3
|
+
import VisuallyHidden from '@atlaskit/visually-hidden';
|
|
6
4
|
import { varDotsMargin, varDotsSize } from './constants';
|
|
7
|
-
|
|
5
|
+
// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
|
|
6
|
+
var colorMap = {
|
|
7
|
+
default: xcss({
|
|
8
|
+
backgroundColor: 'color.background.neutral'
|
|
9
|
+
}),
|
|
10
|
+
help: xcss({
|
|
11
|
+
backgroundColor: 'color.background.neutral'
|
|
12
|
+
}),
|
|
13
|
+
inverted: xcss({
|
|
14
|
+
// @ts-expect-error
|
|
15
|
+
backgroundColor: "var(--ds-icon-subtle, #626F86)"
|
|
16
|
+
}),
|
|
17
|
+
primary: xcss({
|
|
18
|
+
backgroundColor: 'color.background.neutral'
|
|
19
|
+
})
|
|
20
|
+
};
|
|
21
|
+
var selectedColorMap = {
|
|
22
|
+
default: xcss({
|
|
23
|
+
// @ts-expect-error
|
|
24
|
+
backgroundColor: "var(--ds-icon, #44546F)"
|
|
25
|
+
}),
|
|
26
|
+
help: xcss({
|
|
27
|
+
// @ts-expect-error
|
|
28
|
+
backgroundColor: "var(--ds-icon-discovery, #8270DB)"
|
|
29
|
+
}),
|
|
30
|
+
inverted: xcss({
|
|
31
|
+
// @ts-expect-error
|
|
32
|
+
backgroundColor: "var(--ds-icon-inverse, #FFFFFF)"
|
|
33
|
+
}),
|
|
34
|
+
primary: xcss({
|
|
35
|
+
// @ts-expect-error
|
|
36
|
+
backgroundColor: "var(--ds-icon-brand, #0C66E4)"
|
|
37
|
+
})
|
|
38
|
+
};
|
|
39
|
+
var commonStyles = xcss({
|
|
8
40
|
width: "var(".concat(varDotsSize, ")"),
|
|
9
41
|
height: "var(".concat(varDotsSize, ")"),
|
|
10
42
|
position: 'relative',
|
|
11
|
-
borderRadius:
|
|
12
|
-
'
|
|
43
|
+
borderRadius: 'border.radius.circle',
|
|
44
|
+
'::before': {
|
|
13
45
|
display: 'block',
|
|
14
46
|
width: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
|
|
15
47
|
height: "calc(var(".concat(varDotsSize, ") + var(").concat(varDotsMargin, "))"),
|
|
16
48
|
position: 'absolute',
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
left: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
|
|
21
|
-
content: '""'
|
|
49
|
+
content: '""',
|
|
50
|
+
insetBlockStart: "calc(-1 * var(".concat(varDotsMargin, ") / 2)"),
|
|
51
|
+
insetInlineStart: "calc(-1 * var(".concat(varDotsMargin, ") / 2)")
|
|
22
52
|
}
|
|
23
53
|
});
|
|
24
|
-
var buttonStyles =
|
|
25
|
-
padding:
|
|
54
|
+
var buttonStyles = xcss({
|
|
55
|
+
padding: 'space.0',
|
|
26
56
|
border: 0,
|
|
27
57
|
cursor: 'pointer',
|
|
28
58
|
outline: 0
|
|
29
59
|
});
|
|
30
|
-
|
|
31
60
|
/**
|
|
32
61
|
* __Presentational indicator__
|
|
33
62
|
*
|
|
34
63
|
* A presentational indicator with no interactivity
|
|
35
64
|
*/
|
|
36
|
-
export var PresentationalIndicator = function PresentationalIndicator(
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
65
|
+
export var PresentationalIndicator = function PresentationalIndicator(_ref) {
|
|
66
|
+
var appearance = _ref.appearance,
|
|
67
|
+
isSelected = _ref.isSelected,
|
|
68
|
+
testId = _ref.testId;
|
|
69
|
+
return /*#__PURE__*/React.createElement(Box, {
|
|
70
|
+
testId: testId,
|
|
71
|
+
xcss: [commonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']]
|
|
41
72
|
});
|
|
42
73
|
};
|
|
43
|
-
|
|
44
74
|
/**
|
|
45
75
|
* __Button indicator__
|
|
46
76
|
*
|
|
47
77
|
* An interactive indicator.
|
|
48
78
|
*/
|
|
49
|
-
export var ButtonIndicator = function ButtonIndicator(
|
|
50
|
-
|
|
79
|
+
export var ButtonIndicator = function ButtonIndicator(_ref2) {
|
|
80
|
+
var appearance = _ref2.appearance,
|
|
81
|
+
panelId = _ref2.panelId,
|
|
82
|
+
tabId = _ref2.tabId,
|
|
83
|
+
isSelected = _ref2.isSelected,
|
|
84
|
+
onClick = _ref2.onClick,
|
|
85
|
+
testId = _ref2.testId;
|
|
86
|
+
return /*#__PURE__*/React.createElement(Pressable, {
|
|
51
87
|
role: "tab",
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
88
|
+
xcss: [commonStyles, buttonStyles, appearance === 'default' && !isSelected && colorMap['default'], appearance === 'help' && !isSelected && colorMap['help'], appearance === 'inverted' && !isSelected && colorMap['inverted'], appearance === 'primary' && !isSelected && colorMap['primary'], appearance === 'default' && isSelected && selectedColorMap['default'], appearance === 'help' && isSelected && selectedColorMap['help'], appearance === 'inverted' && isSelected && selectedColorMap['inverted'], appearance === 'primary' && isSelected && selectedColorMap['primary']],
|
|
89
|
+
"aria-controls": panelId,
|
|
90
|
+
"aria-selected": isSelected,
|
|
91
|
+
id: tabId,
|
|
92
|
+
onClick: onClick,
|
|
93
|
+
tabIndex: isSelected ? -1 : undefined,
|
|
94
|
+
testId: testId
|
|
95
|
+
}, /*#__PURE__*/React.createElement(VisuallyHidden, null, tabId));
|
|
55
96
|
};
|
|
@@ -7,11 +7,10 @@ import { bind } from 'bind-event-listener';
|
|
|
7
7
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
8
8
|
import noop from '@atlaskit/ds-lib/noop';
|
|
9
9
|
import { Box, Inline } from '@atlaskit/primitives';
|
|
10
|
-
import { getBgColor } from './appearances';
|
|
11
10
|
import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
|
|
12
11
|
import { ButtonIndicator, PresentationalIndicator } from './indicator';
|
|
13
12
|
var packageName = "@atlaskit/progress-indicator";
|
|
14
|
-
var packageVersion = "10.0
|
|
13
|
+
var packageVersion = "10.1.0";
|
|
15
14
|
|
|
16
15
|
/**
|
|
17
16
|
* __ProgressDots__
|
|
@@ -105,30 +104,25 @@ var ProgressDots = function ProgressDots(_ref) {
|
|
|
105
104
|
var isSelected = selectedIndex === index;
|
|
106
105
|
var tabId = "".concat(ariaLabel).concat(index);
|
|
107
106
|
var panelId = "".concat(ariaControls).concat(index);
|
|
108
|
-
var
|
|
107
|
+
var indicatorTestId = testId && "".concat(testId, "-ind-").concat(index);
|
|
109
108
|
return onSelect ? jsx(ButtonIndicator, {
|
|
110
109
|
key: index,
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
"aria-selected": isSelected,
|
|
117
|
-
id: tabId,
|
|
110
|
+
testId: indicatorTestId,
|
|
111
|
+
appearance: appearance,
|
|
112
|
+
isSelected: isSelected,
|
|
113
|
+
tabId: tabId,
|
|
114
|
+
panelId: panelId,
|
|
118
115
|
onClick: function onClick(event) {
|
|
119
116
|
return onSelectWithAnalytics({
|
|
120
117
|
event: event,
|
|
121
118
|
index: index
|
|
122
119
|
});
|
|
123
|
-
}
|
|
124
|
-
tabIndex: isSelected ? 0 : -1,
|
|
125
|
-
"data-testid": testId && "".concat(testId, "-ind-").concat(index)
|
|
120
|
+
}
|
|
126
121
|
}) : jsx(PresentationalIndicator, {
|
|
127
|
-
testId: testId && "".concat(testId, "-ind-").concat(index),
|
|
128
122
|
key: index,
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
123
|
+
testId: indicatorTestId,
|
|
124
|
+
appearance: appearance,
|
|
125
|
+
isSelected: isSelected
|
|
132
126
|
});
|
|
133
127
|
})));
|
|
134
128
|
};
|
|
@@ -1,17 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
import type
|
|
3
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DotsAppearance } from './types';
|
|
3
|
+
type CommonProps = {
|
|
4
|
+
appearance: DotsAppearance;
|
|
5
|
+
isSelected: boolean;
|
|
6
|
+
testId?: string;
|
|
7
|
+
};
|
|
4
8
|
/**
|
|
5
9
|
* __Presentational indicator__
|
|
6
10
|
*
|
|
7
11
|
* A presentational indicator with no interactivity
|
|
8
12
|
*/
|
|
9
|
-
export declare const PresentationalIndicator: (
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
export declare const PresentationalIndicator: ({ appearance, isSelected, testId, }: CommonProps) => JSX.Element;
|
|
14
|
+
type ButtonIndicatorProps = {
|
|
15
|
+
panelId: string;
|
|
16
|
+
tabId: string;
|
|
17
|
+
onClick(e: React.MouseEvent<HTMLButtonElement>): void;
|
|
18
|
+
} & CommonProps;
|
|
12
19
|
/**
|
|
13
20
|
* __Button indicator__
|
|
14
21
|
*
|
|
15
22
|
* An interactive indicator.
|
|
16
23
|
*/
|
|
17
|
-
export declare const ButtonIndicator: (
|
|
24
|
+
export declare const ButtonIndicator: ({ appearance, panelId, tabId, isSelected, onClick, testId, }: ButtonIndicatorProps) => JSX.Element;
|
|
25
|
+
export {};
|
|
@@ -1,17 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
import type
|
|
3
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type DotsAppearance } from './types';
|
|
3
|
+
type CommonProps = {
|
|
4
|
+
appearance: DotsAppearance;
|
|
5
|
+
isSelected: boolean;
|
|
6
|
+
testId?: string;
|
|
7
|
+
};
|
|
4
8
|
/**
|
|
5
9
|
* __Presentational indicator__
|
|
6
10
|
*
|
|
7
11
|
* A presentational indicator with no interactivity
|
|
8
12
|
*/
|
|
9
|
-
export declare const PresentationalIndicator: (
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
export declare const PresentationalIndicator: ({ appearance, isSelected, testId, }: CommonProps) => JSX.Element;
|
|
14
|
+
type ButtonIndicatorProps = {
|
|
15
|
+
panelId: string;
|
|
16
|
+
tabId: string;
|
|
17
|
+
onClick(e: React.MouseEvent<HTMLButtonElement>): void;
|
|
18
|
+
} & CommonProps;
|
|
12
19
|
/**
|
|
13
20
|
* __Button indicator__
|
|
14
21
|
*
|
|
15
22
|
* An interactive indicator.
|
|
16
23
|
*/
|
|
17
|
-
export declare const ButtonIndicator: (
|
|
24
|
+
export declare const ButtonIndicator: ({ appearance, panelId, tabId, isSelected, onClick, testId, }: ButtonIndicatorProps) => JSX.Element;
|
|
25
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/progress-indicator",
|
|
3
|
-
"version": "10.0
|
|
3
|
+
"version": "10.1.0",
|
|
4
4
|
"description": "A progress indicator shows the user where they are along the steps of a journey.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,10 +28,9 @@
|
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@atlaskit/analytics-next": "^9.3.0",
|
|
30
30
|
"@atlaskit/ds-lib": "^2.3.0",
|
|
31
|
-
"@atlaskit/
|
|
32
|
-
"@atlaskit/primitives": "^6.0.0",
|
|
33
|
-
"@atlaskit/theme": "^12.7.0",
|
|
31
|
+
"@atlaskit/primitives": "^6.1.0",
|
|
34
32
|
"@atlaskit/tokens": "^1.45.0",
|
|
33
|
+
"@atlaskit/visually-hidden": "^1.3.0",
|
|
35
34
|
"@babel/runtime": "^7.0.0",
|
|
36
35
|
"@emotion/react": "^11.7.1",
|
|
37
36
|
"bind-event-listener": "^3.0.0"
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.getBgColor = void 0;
|
|
7
|
-
var _colors = require("@atlaskit/theme/colors");
|
|
8
|
-
// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
|
|
9
|
-
var colorMap = {
|
|
10
|
-
default: "var(--ds-background-neutral, ".concat(_colors.N50, ")"),
|
|
11
|
-
help: "var(--ds-background-neutral, ".concat(_colors.P75, ")"),
|
|
12
|
-
inverted: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
|
|
13
|
-
primary: "var(--ds-background-neutral, ".concat(_colors.B75, ")")
|
|
14
|
-
};
|
|
15
|
-
var selectedColorMap = {
|
|
16
|
-
default: "var(--ds-icon, ".concat(_colors.N900, ")"),
|
|
17
|
-
help: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
|
|
18
|
-
inverted: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
|
|
19
|
-
primary: "var(--ds-icon-brand, ".concat(_colors.B400, ")")
|
|
20
|
-
};
|
|
21
|
-
var getBgColor = exports.getBgColor = function getBgColor(appearance, isSelected) {
|
|
22
|
-
return isSelected ? selectedColorMap[appearance] : colorMap[appearance];
|
|
23
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { B400, B75, N0, N50, N900, P400, P75 } from '@atlaskit/theme/colors';
|
|
2
|
-
// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
|
|
3
|
-
const colorMap = {
|
|
4
|
-
default: `var(--ds-background-neutral, ${N50})`,
|
|
5
|
-
help: `var(--ds-background-neutral, ${P75})`,
|
|
6
|
-
inverted: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
|
|
7
|
-
primary: `var(--ds-background-neutral, ${B75})`
|
|
8
|
-
};
|
|
9
|
-
const selectedColorMap = {
|
|
10
|
-
default: `var(--ds-icon, ${N900})`,
|
|
11
|
-
help: `var(--ds-icon-discovery, ${P400})`,
|
|
12
|
-
inverted: `var(--ds-icon-inverse, ${N0})`,
|
|
13
|
-
primary: `var(--ds-icon-brand, ${B400})`
|
|
14
|
-
};
|
|
15
|
-
export const getBgColor = (appearance, isSelected) => isSelected ? selectedColorMap[appearance] : colorMap[appearance];
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import { B400, B75, N0, N50, N900, P400, P75 } from '@atlaskit/theme/colors';
|
|
2
|
-
// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
|
|
3
|
-
var colorMap = {
|
|
4
|
-
default: "var(--ds-background-neutral, ".concat(N50, ")"),
|
|
5
|
-
help: "var(--ds-background-neutral, ".concat(P75, ")"),
|
|
6
|
-
inverted: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
|
|
7
|
-
primary: "var(--ds-background-neutral, ".concat(B75, ")")
|
|
8
|
-
};
|
|
9
|
-
var selectedColorMap = {
|
|
10
|
-
default: "var(--ds-icon, ".concat(N900, ")"),
|
|
11
|
-
help: "var(--ds-icon-discovery, ".concat(P400, ")"),
|
|
12
|
-
inverted: "var(--ds-icon-inverse, ".concat(N0, ")"),
|
|
13
|
-
primary: "var(--ds-icon-brand, ".concat(B400, ")")
|
|
14
|
-
};
|
|
15
|
-
export var getBgColor = function getBgColor(appearance, isSelected) {
|
|
16
|
-
return isSelected ? selectedColorMap[appearance] : colorMap[appearance];
|
|
17
|
-
};
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import type { DotsAppearance } from './types';
|
|
2
|
-
export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => "var(--ds-background-neutral)" | "var(--ds-icon-subtle)" | "var(--ds-icon)" | "var(--ds-icon-discovery)" | "var(--ds-icon-inverse)" | "var(--ds-icon-brand)";
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
import type { DotsAppearance } from './types';
|
|
2
|
-
export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => "var(--ds-background-neutral)" | "var(--ds-icon-subtle)" | "var(--ds-icon)" | "var(--ds-icon-discovery)" | "var(--ds-icon-inverse)" | "var(--ds-icon-brand)";
|