@atlaskit/progress-indicator 9.5.17 → 10.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.
Files changed (10) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/components/appearances.js +8 -33
  3. package/dist/cjs/components/progress-dots.js +3 -7
  4. package/dist/es2019/components/appearances.js +9 -34
  5. package/dist/es2019/components/progress-dots.js +3 -7
  6. package/dist/esm/components/appearances.js +9 -34
  7. package/dist/esm/components/progress-dots.js +3 -7
  8. package/dist/types/components/appearances.d.ts +1 -1
  9. package/dist/types-ts4.5/components/appearances.d.ts +1 -1
  10. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/progress-indicator
2
2
 
3
+ ## 10.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#41812](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41812) [`48b3b440f51`](https://bitbucket.org/atlassian/atlassian-frontend/commits/48b3b440f51) - Removed all remaining legacy theming logic from the Icon and ProgressIndicator components.
8
+
9
+ ## 9.5.18
10
+
11
+ ### Patch Changes
12
+
13
+ - [#42460](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42460) [`a2a52116171`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a2a52116171) - Remove role=tablist when progress indicator is not interactive
14
+
3
15
  ## 9.5.17
4
16
 
5
17
  ### Patch Changes
package/dist/cjs/components/appearances.js CHANGED
@@ -5,43 +5,18 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.getBgColor = void 0;
7
7
  var _colors = require("@atlaskit/theme/colors");
8
- var _components = require("@atlaskit/theme/components");
9
8
  // TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
10
9
  var colorMap = {
11
- default: (0, _components.themed)({
12
- light: "var(--ds-background-neutral, ".concat(_colors.N50, ")"),
13
- dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
14
- }),
15
- help: (0, _components.themed)({
16
- light: "var(--ds-background-neutral, ".concat(_colors.P75, ")"),
17
- dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
18
- }),
19
- inverted: (0, _components.themed)({
20
- light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
21
- dark: "var(--ds-icon-subtle, ".concat(_colors.DN300A, ")")
22
- }),
23
- primary: (0, _components.themed)({
24
- light: "var(--ds-background-neutral, ".concat(_colors.B75, ")"),
25
- dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
26
- })
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, ")")
27
14
  };
28
15
  var selectedColorMap = {
29
- default: (0, _components.themed)({
30
- light: "var(--ds-icon, ".concat(_colors.N900, ")"),
31
- dark: "var(--ds-icon, ".concat(_colors.DN600, ")")
32
- }),
33
- help: (0, _components.themed)({
34
- light: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
35
- dark: "var(--ds-icon-discovery, ".concat(_colors.P300, ")")
36
- }),
37
- inverted: (0, _components.themed)({
38
- light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
39
- dark: "var(--ds-icon-inverse, ".concat(_colors.DN30, ")")
40
- }),
41
- primary: (0, _components.themed)({
42
- light: "var(--ds-icon-brand, ".concat(_colors.B400, ")"),
43
- dark: "var(--ds-icon-brand, ".concat(_colors.B100, ")")
44
- })
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, ")")
45
20
  };
46
21
  var getBgColor = exports.getBgColor = function getBgColor(appearance, isSelected) {
47
22
  return isSelected ? selectedColorMap[appearance] : colorMap[appearance];
package/dist/cjs/components/progress-dots.js CHANGED
@@ -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 _components = require("@atlaskit/theme/components");
18
17
  var _appearances = require("./appearances");
19
18
  var _constants = require("./constants");
20
19
  var _indicator = require("./indicator");
@@ -23,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
23
22
  /** @jsx jsx */
24
23
 
25
24
  var packageName = "@atlaskit/progress-indicator";
26
- var packageVersion = "9.5.17";
25
+ var packageVersion = "10.0.0";
27
26
 
28
27
  /**
29
28
  * __ProgressDots__
@@ -103,10 +102,9 @@ var ProgressDots = function ProgressDots(_ref) {
103
102
  }
104
103
  });
105
104
  }, [onSelect, handleKeyDown]);
106
- var theme = (0, _components.useGlobalTheme)();
107
105
  return (0, _react2.jsx)(_primitives.Box, {
108
106
  style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, rawGapValue), _ref2),
109
- role: "tablist"
107
+ role: onSelect && 'tablist'
110
108
  }, (0, _react2.jsx)(_primitives.Inline, {
111
109
  testId: testId,
112
110
  ref: function ref(r) {
@@ -118,9 +116,7 @@ var ProgressDots = function ProgressDots(_ref) {
118
116
  var isSelected = selectedIndex === index;
119
117
  var tabId = "".concat(ariaLabel).concat(index);
120
118
  var panelId = "".concat(ariaControls).concat(index);
121
- var backgroundColor = (0, _appearances.getBgColor)(appearance, isSelected)({
122
- theme: theme
123
- });
119
+ var backgroundColor = (0, _appearances.getBgColor)(appearance, isSelected);
124
120
  return onSelect ? (0, _react2.jsx)(_indicator.ButtonIndicator, {
125
121
  key: index,
126
122
  style: {
package/dist/es2019/components/appearances.js CHANGED
@@ -1,40 +1,15 @@
1
- import { B100, B400, B75, DN30, DN300A, DN600, DN70, N0, N50, N900, P300, P400, P75 } from '@atlaskit/theme/colors';
2
- import { themed } from '@atlaskit/theme/components';
1
+ import { B400, B75, N0, N50, N900, P400, P75 } from '@atlaskit/theme/colors';
3
2
  // TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
4
3
  const colorMap = {
5
- default: themed({
6
- light: `var(--ds-background-neutral, ${N50})`,
7
- dark: `var(--ds-background-neutral, ${DN70})`
8
- }),
9
- help: themed({
10
- light: `var(--ds-background-neutral, ${P75})`,
11
- dark: `var(--ds-background-neutral, ${DN70})`
12
- }),
13
- inverted: themed({
14
- light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
15
- dark: `var(--ds-icon-subtle, ${DN300A})`
16
- }),
17
- primary: themed({
18
- light: `var(--ds-background-neutral, ${B75})`,
19
- dark: `var(--ds-background-neutral, ${DN70})`
20
- })
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})`
21
8
  };
22
9
  const selectedColorMap = {
23
- default: themed({
24
- light: `var(--ds-icon, ${N900})`,
25
- dark: `var(--ds-icon, ${DN600})`
26
- }),
27
- help: themed({
28
- light: `var(--ds-icon-discovery, ${P400})`,
29
- dark: `var(--ds-icon-discovery, ${P300})`
30
- }),
31
- inverted: themed({
32
- light: `var(--ds-icon-inverse, ${N0})`,
33
- dark: `var(--ds-icon-inverse, ${DN30})`
34
- }),
35
- primary: themed({
36
- light: `var(--ds-icon-brand, ${B400})`,
37
- dark: `var(--ds-icon-brand, ${B100})`
38
- })
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})`
39
14
  };
40
15
  export const getBgColor = (appearance, isSelected) => isSelected ? selectedColorMap[appearance] : colorMap[appearance];
package/dist/es2019/components/progress-dots.js CHANGED
@@ -5,12 +5,11 @@ 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 { useGlobalTheme } from '@atlaskit/theme/components';
9
8
  import { getBgColor } from './appearances';
10
9
  import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
11
10
  import { ButtonIndicator, PresentationalIndicator } from './indicator';
12
11
  const packageName = "@atlaskit/progress-indicator";
13
- const packageVersion = "9.5.17";
12
+ const packageVersion = "10.0.0";
14
13
 
15
14
  /**
16
15
  * __ProgressDots__
@@ -85,13 +84,12 @@ const ProgressDots = ({
85
84
  }
86
85
  });
87
86
  }, [onSelect, handleKeyDown]);
88
- const theme = useGlobalTheme();
89
87
  return jsx(Box, {
90
88
  style: {
91
89
  [varDotsSize]: `${sizes[size]}px`,
92
90
  [varDotsMargin]: rawGapValue
93
91
  },
94
- role: "tablist"
92
+ role: onSelect && 'tablist'
95
93
  }, jsx(Inline, {
96
94
  testId: testId,
97
95
  ref: r => {
@@ -103,9 +101,7 @@ const ProgressDots = ({
103
101
  const isSelected = selectedIndex === index;
104
102
  const tabId = `${ariaLabel}${index}`;
105
103
  const panelId = `${ariaControls}${index}`;
106
- const backgroundColor = getBgColor(appearance, isSelected)({
107
- theme
108
- });
104
+ const backgroundColor = getBgColor(appearance, isSelected);
109
105
  return onSelect ? jsx(ButtonIndicator, {
110
106
  key: index,
111
107
  style: {
package/dist/esm/components/appearances.js CHANGED
@@ -1,41 +1,16 @@
1
- import { B100, B400, B75, DN30, DN300A, DN600, DN70, N0, N50, N900, P300, P400, P75 } from '@atlaskit/theme/colors';
2
- import { themed } from '@atlaskit/theme/components';
1
+ import { B400, B75, N0, N50, N900, P400, P75 } from '@atlaskit/theme/colors';
3
2
  // TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
4
3
  var colorMap = {
5
- default: themed({
6
- light: "var(--ds-background-neutral, ".concat(N50, ")"),
7
- dark: "var(--ds-background-neutral, ".concat(DN70, ")")
8
- }),
9
- help: themed({
10
- light: "var(--ds-background-neutral, ".concat(P75, ")"),
11
- dark: "var(--ds-background-neutral, ".concat(DN70, ")")
12
- }),
13
- inverted: themed({
14
- light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
15
- dark: "var(--ds-icon-subtle, ".concat(DN300A, ")")
16
- }),
17
- primary: themed({
18
- light: "var(--ds-background-neutral, ".concat(B75, ")"),
19
- dark: "var(--ds-background-neutral, ".concat(DN70, ")")
20
- })
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, ")")
21
8
  };
22
9
  var selectedColorMap = {
23
- default: themed({
24
- light: "var(--ds-icon, ".concat(N900, ")"),
25
- dark: "var(--ds-icon, ".concat(DN600, ")")
26
- }),
27
- help: themed({
28
- light: "var(--ds-icon-discovery, ".concat(P400, ")"),
29
- dark: "var(--ds-icon-discovery, ".concat(P300, ")")
30
- }),
31
- inverted: themed({
32
- light: "var(--ds-icon-inverse, ".concat(N0, ")"),
33
- dark: "var(--ds-icon-inverse, ".concat(DN30, ")")
34
- }),
35
- primary: themed({
36
- light: "var(--ds-icon-brand, ".concat(B400, ")"),
37
- dark: "var(--ds-icon-brand, ".concat(B100, ")")
38
- })
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, ")")
39
14
  };
40
15
  export var getBgColor = function getBgColor(appearance, isSelected) {
41
16
  return isSelected ? selectedColorMap[appearance] : colorMap[appearance];
package/dist/esm/components/progress-dots.js CHANGED
@@ -7,12 +7,11 @@ 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 { useGlobalTheme } from '@atlaskit/theme/components';
11
10
  import { getBgColor } from './appearances';
12
11
  import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
13
12
  import { ButtonIndicator, PresentationalIndicator } from './indicator';
14
13
  var packageName = "@atlaskit/progress-indicator";
15
- var packageVersion = "9.5.17";
14
+ var packageVersion = "10.0.0";
16
15
 
17
16
  /**
18
17
  * __ProgressDots__
@@ -92,10 +91,9 @@ var ProgressDots = function ProgressDots(_ref) {
92
91
  }
93
92
  });
94
93
  }, [onSelect, handleKeyDown]);
95
- var theme = useGlobalTheme();
96
94
  return jsx(Box, {
97
95
  style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, rawGapValue), _ref2),
98
- role: "tablist"
96
+ role: onSelect && 'tablist'
99
97
  }, jsx(Inline, {
100
98
  testId: testId,
101
99
  ref: function ref(r) {
@@ -107,9 +105,7 @@ var ProgressDots = function ProgressDots(_ref) {
107
105
  var isSelected = selectedIndex === index;
108
106
  var tabId = "".concat(ariaLabel).concat(index);
109
107
  var panelId = "".concat(ariaControls).concat(index);
110
- var backgroundColor = getBgColor(appearance, isSelected)({
111
- theme: theme
112
- });
108
+ var backgroundColor = getBgColor(appearance, isSelected);
113
109
  return onSelect ? jsx(ButtonIndicator, {
114
110
  key: index,
115
111
  style: {
package/dist/types/components/appearances.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import type { DotsAppearance } from './types';
2
- export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-discovery)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-brand)">;
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)";
package/dist/types-ts4.5/components/appearances.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import type { DotsAppearance } from './types';
2
- export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-discovery)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-brand)">;
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)";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/progress-indicator",
3
- "version": "9.5.17",
3
+ "version": "10.0.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/"
@@ -29,7 +29,7 @@
29
29
  "@atlaskit/analytics-next": "^9.1.0",
30
30
  "@atlaskit/ds-lib": "^2.2.0",
31
31
  "@atlaskit/focus-ring": "^1.3.0",
32
- "@atlaskit/primitives": "^1.6.0",
32
+ "@atlaskit/primitives": "^1.10.0",
33
33
  "@atlaskit/theme": "^12.6.0",
34
34
  "@atlaskit/tokens": "^1.28.0",
35
35
  "@babel/runtime": "^7.0.0",