@atlaskit/inline-message 11.5.7 → 12.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 +16 -0
  2. package/dist/cjs/components/inline-message/index.js +17 -45
  3. package/dist/cjs/components/message-icon/index.js +17 -33
  4. package/dist/es2019/components/inline-message/index.js +17 -42
  5. package/dist/es2019/components/message-icon/index.js +17 -30
  6. package/dist/esm/components/inline-message/index.js +17 -42
  7. package/dist/esm/components/message-icon/index.js +17 -30
  8. package/dist/types/components/inline-message/index.d.ts +1 -1
  9. package/dist/types-ts4.5/components/inline-message/index.d.ts +1 -1
  10. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 12.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#41791](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41791) [`ec7c2a38247`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ec7c2a38247) - Removed all remaining legacy theming logic from the Calendar, Form, InlineDialog, InlineEdit and InlineMessage components.
8
+
9
+ ### Patch Changes
10
+
11
+ - Updated dependencies
12
+
13
+ ## 11.5.8
14
+
15
+ ### Patch Changes
16
+
17
+ - [#42261](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42261) [`5bbffa62596`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5bbffa62596) - Remove shadowed variable and use type imports
18
+
3
19
  ## 11.5.7
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/components/inline-message/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- var _typeof = require("@babel/runtime/helpers/typeof");
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -12,12 +11,9 @@ var _react = require("react");
12
11
  var _react2 = require("@emotion/react");
13
12
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
14
13
  var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
15
- var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
16
- var _components = require("@atlaskit/theme/components");
14
+ var _colors = require("@atlaskit/theme/colors");
17
15
  var _constants = require("../../constants");
18
16
  var _messageIcon = _interopRequireDefault(require("../message-icon"));
19
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
20
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
17
  /** @jsx jsx */
22
18
 
23
19
  var buttonContentsStyles = (0, _react2.css)({
@@ -60,36 +56,20 @@ var rootStyles = (0, _react2.css)({
60
56
  }
61
57
  }
62
58
  });
63
- var titleColor = (0, _components.themed)({
64
- light: "var(--ds-text, ".concat(colors.N600, ")"),
65
- dark: "var(--ds-text, ".concat(colors.DN600, ")")
66
- });
67
- var textColor = (0, _components.themed)({
68
- light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
69
- dark: "var(--ds-text-subtlest, ".concat(colors.DN100, ")")
70
- });
71
- var iconColor = (0, _components.themed)('appearance', {
72
- connectivity: {
73
- light: "var(--ds-icon-brand, ".concat(colors.B300, ")"),
74
- dark: "var(--ds-icon-brand, ".concat(colors.B75, ")")
75
- },
76
- confirmation: {
77
- light: "var(--ds-icon-success, ".concat(colors.G200, ")"),
78
- dark: "var(--ds-icon-success, ".concat(colors.G200, ")")
79
- },
80
- info: {
81
- light: "var(--ds-icon-discovery, ".concat(colors.P200, ")"),
82
- dark: "var(--ds-icon-discovery, ".concat(colors.P200, ")")
83
- },
84
- warning: {
85
- light: "var(--ds-icon-warning, ".concat(colors.Y200, ")"),
86
- dark: "var(--ds-icon-warning, ".concat(colors.Y200, ")")
87
- },
88
- error: {
89
- light: "var(--ds-icon-danger, ".concat(colors.R300, ")"),
90
- dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
59
+ var iconColor = function iconColor(appearance) {
60
+ switch (appearance) {
61
+ case 'connectivity':
62
+ return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
63
+ case 'confirmation':
64
+ return "var(--ds-icon-success, ".concat(_colors.G200, ")");
65
+ case 'info':
66
+ return "var(--ds-icon-discovery, ".concat(_colors.P200, ")");
67
+ case 'warning':
68
+ return "var(--ds-icon-warning, ".concat(_colors.Y200, ")");
69
+ case 'error':
70
+ return "var(--ds-icon-danger, ".concat(_colors.R300, ")");
91
71
  }
92
- });
72
+ };
93
73
 
94
74
  /**
95
75
  * __Inline message__
@@ -138,17 +118,13 @@ var InlineMessage = function InlineMessage(_ref) {
138
118
  var onCloseDialog = (0, _react.useCallback)(function () {
139
119
  return setIsOpen(false);
140
120
  }, [setIsOpen]);
141
- var theme = (0, _components.useGlobalTheme)();
142
121
  if (!appearance) {
143
122
  appearance = type;
144
123
  }
145
124
  return (0, _react2.jsx)("div", {
146
125
  css: rootStyles,
147
126
  style: {
148
- '--icon-accent-color': iconColor({
149
- appearance: appearance,
150
- theme: theme
151
- })
127
+ '--icon-accent-color': iconColor(appearance)
152
128
  },
153
129
  "data-testid": testId
154
130
  }, (0, _react2.jsx)(_inlineDialog.default, {
@@ -172,17 +148,13 @@ var InlineMessage = function InlineMessage(_ref) {
172
148
  label: iconLabel
173
149
  }), title && (0, _react2.jsx)("span", {
174
150
  style: {
175
- color: titleColor({
176
- theme: theme
177
- })
151
+ color: "var(--ds-text, ".concat(_colors.N600, ")")
178
152
  },
179
153
  css: titleStyles,
180
154
  "data-testid": testId && "".concat(testId, "--title")
181
155
  }, title), secondaryText && (0, _react2.jsx)("span", {
182
156
  "data-ds--inline-message--secondary-text": true,
183
- style: (0, _defineProperty2.default)({}, _constants.VAR_SECONDARY_TEXT_COLOR, textColor({
184
- theme: theme
185
- })),
157
+ style: (0, _defineProperty2.default)({}, _constants.VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
186
158
  css: textStyles,
187
159
  "data-testid": testId && "".concat(testId, "--text")
188
160
  }, secondaryText)))));
package/dist/cjs/components/message-icon/index.js CHANGED
@@ -1,40 +1,28 @@
1
1
  "use strict";
2
2
 
3
- var _typeof = require("@babel/runtime/helpers/typeof");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.default = void 0;
8
7
  var _react = require("@emotion/react");
9
- var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
10
- var _components = require("@atlaskit/theme/components");
8
+ var _colors = require("@atlaskit/theme/colors");
11
9
  var _constants = require("../../constants");
12
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
10
  /** @jsx jsx */
15
11
 
16
- var iconColor = (0, _components.themed)('appearance', {
17
- connectivity: {
18
- light: "var(--ds-icon-brand, ".concat(colors.B400, ")"),
19
- dark: "var(--ds-icon-brand, ".concat(colors.B100, ")")
20
- },
21
- confirmation: {
22
- light: "var(--ds-icon-success, ".concat(colors.G300, ")"),
23
- dark: "var(--ds-icon-success, ".concat(colors.G300, ")")
24
- },
25
- info: {
26
- light: "var(--ds-icon-discovery, ".concat(colors.P300, ")"),
27
- dark: "var(--ds-icon-discovery, ".concat(colors.P300, ")")
28
- },
29
- warning: {
30
- light: "var(--ds-icon-warning, ".concat(colors.Y300, ")"),
31
- dark: "var(--ds-icon-warning, ".concat(colors.Y300, ")")
32
- },
33
- error: {
34
- light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
35
- dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
12
+ var iconColor = function iconColor(appearance) {
13
+ switch (appearance) {
14
+ case 'connectivity':
15
+ return "var(--ds-icon-brand, ".concat(_colors.B400, ")");
16
+ case 'confirmation':
17
+ return "var(--ds-icon-success, ".concat(_colors.G300, ")");
18
+ case 'info':
19
+ return "var(--ds-icon-discovery, ".concat(_colors.P300, ")");
20
+ case 'warning':
21
+ return "var(--ds-icon-warning, ".concat(_colors.Y300, ")");
22
+ case 'error':
23
+ return "var(--ds-icon-danger, ".concat(_colors.R400, ")");
36
24
  }
37
- });
25
+ };
38
26
  var iconWrapperStyles = (0, _react.css)({
39
27
  display: 'flex',
40
28
  alignItems: 'center',
@@ -56,19 +44,15 @@ var SelectedIcon = function SelectedIcon(_ref) {
56
44
  isOpen = _ref.isOpen,
57
45
  label = _ref.label;
58
46
  var _typesMapping$appeara = _constants.typesMapping[appearance],
59
- SelectedIcon = _typesMapping$appeara.icon,
47
+ Icon = _typesMapping$appeara.icon,
60
48
  defaultLabel = _typesMapping$appeara.defaultLabel;
61
- var theme = (0, _components.useGlobalTheme)();
62
49
  return (0, _react.jsx)("span", {
63
50
  "data-ds--inline-message--icon": true,
64
51
  style: {
65
- '--icon-color': iconColor({
66
- appearance: appearance,
67
- theme: theme
68
- })
52
+ '--icon-color': iconColor(appearance)
69
53
  },
70
54
  css: [iconWrapperStyles, isOpen && iconColorStyles]
71
- }, (0, _react.jsx)(SelectedIcon, {
55
+ }, (0, _react.jsx)(Icon, {
72
56
  testId: "inline-message-icon",
73
57
  label: label || defaultLabel,
74
58
  size: "medium"
package/dist/es2019/components/inline-message/index.js CHANGED
@@ -3,8 +3,7 @@ import { useCallback, useState } from 'react';
3
3
  import { css, jsx } from '@emotion/react';
4
4
  import Button from '@atlaskit/button/custom-theme-button';
5
5
  import InlineDialog from '@atlaskit/inline-dialog';
6
- import * as colors from '@atlaskit/theme/colors';
7
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
6
+ import { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
8
7
  import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
9
8
  import MessageIcon from '../message-icon';
10
9
  const buttonContentsStyles = css({
@@ -47,36 +46,20 @@ const rootStyles = css({
47
46
  }
48
47
  }
49
48
  });
50
- const titleColor = themed({
51
- light: `var(--ds-text, ${colors.N600})`,
52
- dark: `var(--ds-text, ${colors.DN600})`
53
- });
54
- const textColor = themed({
55
- light: `var(--ds-text-subtlest, ${colors.N300})`,
56
- dark: `var(--ds-text-subtlest, ${colors.DN100})`
57
- });
58
- const iconColor = themed('appearance', {
59
- connectivity: {
60
- light: `var(--ds-icon-brand, ${colors.B300})`,
61
- dark: `var(--ds-icon-brand, ${colors.B75})`
62
- },
63
- confirmation: {
64
- light: `var(--ds-icon-success, ${colors.G200})`,
65
- dark: `var(--ds-icon-success, ${colors.G200})`
66
- },
67
- info: {
68
- light: `var(--ds-icon-discovery, ${colors.P200})`,
69
- dark: `var(--ds-icon-discovery, ${colors.P200})`
70
- },
71
- warning: {
72
- light: `var(--ds-icon-warning, ${colors.Y200})`,
73
- dark: `var(--ds-icon-warning, ${colors.Y200})`
74
- },
75
- error: {
76
- light: `var(--ds-icon-danger, ${colors.R300})`,
77
- dark: `var(--ds-icon-danger, ${colors.R300})`
49
+ const iconColor = appearance => {
50
+ switch (appearance) {
51
+ case 'connectivity':
52
+ return `var(--ds-icon-brand, ${B300})`;
53
+ case 'confirmation':
54
+ return `var(--ds-icon-success, ${G200})`;
55
+ case 'info':
56
+ return `var(--ds-icon-discovery, ${P200})`;
57
+ case 'warning':
58
+ return `var(--ds-icon-warning, ${Y200})`;
59
+ case 'error':
60
+ return `var(--ds-icon-danger, ${R300})`;
78
61
  }
79
- });
62
+ };
80
63
 
81
64
  /**
82
65
  * __Inline message__
@@ -115,17 +98,13 @@ const InlineMessage = ({
115
98
  setIsOpen(oldState => !oldState);
116
99
  }, [setIsOpen]);
117
100
  const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
118
- const theme = useGlobalTheme();
119
101
  if (!appearance) {
120
102
  appearance = type;
121
103
  }
122
104
  return jsx("div", {
123
105
  css: rootStyles,
124
106
  style: {
125
- '--icon-accent-color': iconColor({
126
- appearance: appearance,
127
- theme
128
- })
107
+ '--icon-accent-color': iconColor(appearance)
129
108
  },
130
109
  "data-testid": testId
131
110
  }, jsx(InlineDialog, {
@@ -149,18 +128,14 @@ const InlineMessage = ({
149
128
  label: iconLabel
150
129
  }), title && jsx("span", {
151
130
  style: {
152
- color: titleColor({
153
- theme
154
- })
131
+ color: `var(--ds-text, ${N600})`
155
132
  },
156
133
  css: titleStyles,
157
134
  "data-testid": testId && `${testId}--title`
158
135
  }, title), secondaryText && jsx("span", {
159
136
  "data-ds--inline-message--secondary-text": true,
160
137
  style: {
161
- [VAR_SECONDARY_TEXT_COLOR]: textColor({
162
- theme
163
- })
138
+ [VAR_SECONDARY_TEXT_COLOR]: `var(--ds-text-subtlest, ${N300})`
164
139
  },
165
140
  css: textStyles,
166
141
  "data-testid": testId && `${testId}--text`
package/dist/es2019/components/message-icon/index.js CHANGED
@@ -1,31 +1,22 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import * as colors from '@atlaskit/theme/colors';
5
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
4
+ import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
6
5
  import { typesMapping } from '../../constants';
7
- const iconColor = themed('appearance', {
8
- connectivity: {
9
- light: `var(--ds-icon-brand, ${colors.B400})`,
10
- dark: `var(--ds-icon-brand, ${colors.B100})`
11
- },
12
- confirmation: {
13
- light: `var(--ds-icon-success, ${colors.G300})`,
14
- dark: `var(--ds-icon-success, ${colors.G300})`
15
- },
16
- info: {
17
- light: `var(--ds-icon-discovery, ${colors.P300})`,
18
- dark: `var(--ds-icon-discovery, ${colors.P300})`
19
- },
20
- warning: {
21
- light: `var(--ds-icon-warning, ${colors.Y300})`,
22
- dark: `var(--ds-icon-warning, ${colors.Y300})`
23
- },
24
- error: {
25
- light: `var(--ds-icon-danger, ${colors.R400})`,
26
- dark: `var(--ds-icon-danger, ${colors.R400})`
6
+ const iconColor = appearance => {
7
+ switch (appearance) {
8
+ case 'connectivity':
9
+ return `var(--ds-icon-brand, ${B400})`;
10
+ case 'confirmation':
11
+ return `var(--ds-icon-success, ${G300})`;
12
+ case 'info':
13
+ return `var(--ds-icon-discovery, ${P300})`;
14
+ case 'warning':
15
+ return `var(--ds-icon-warning, ${Y300})`;
16
+ case 'error':
17
+ return `var(--ds-icon-danger, ${R400})`;
27
18
  }
28
- });
19
+ };
29
20
  const iconWrapperStyles = css({
30
21
  display: 'flex',
31
22
  alignItems: 'center',
@@ -49,21 +40,17 @@ const SelectedIcon = ({
49
40
  }) => {
50
41
  const {
51
42
  [appearance]: {
52
- icon: SelectedIcon,
43
+ icon: Icon,
53
44
  defaultLabel
54
45
  }
55
46
  } = typesMapping;
56
- const theme = useGlobalTheme();
57
47
  return jsx("span", {
58
48
  "data-ds--inline-message--icon": true,
59
49
  style: {
60
- '--icon-color': iconColor({
61
- appearance,
62
- theme
63
- })
50
+ '--icon-color': iconColor(appearance)
64
51
  },
65
52
  css: [iconWrapperStyles, isOpen && iconColorStyles]
66
- }, jsx(SelectedIcon, {
53
+ }, jsx(Icon, {
67
54
  testId: "inline-message-icon",
68
55
  label: label || defaultLabel,
69
56
  size: "medium"
package/dist/esm/components/inline-message/index.js CHANGED
@@ -5,8 +5,7 @@ import { useCallback, useState } from 'react';
5
5
  import { css, jsx } from '@emotion/react';
6
6
  import Button from '@atlaskit/button/custom-theme-button';
7
7
  import InlineDialog from '@atlaskit/inline-dialog';
8
- import * as colors from '@atlaskit/theme/colors';
9
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
8
+ import { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
10
9
  import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
11
10
  import MessageIcon from '../message-icon';
12
11
  var buttonContentsStyles = css({
@@ -49,36 +48,20 @@ var rootStyles = css({
49
48
  }
50
49
  }
51
50
  });
52
- var titleColor = themed({
53
- light: "var(--ds-text, ".concat(colors.N600, ")"),
54
- dark: "var(--ds-text, ".concat(colors.DN600, ")")
55
- });
56
- var textColor = themed({
57
- light: "var(--ds-text-subtlest, ".concat(colors.N300, ")"),
58
- dark: "var(--ds-text-subtlest, ".concat(colors.DN100, ")")
59
- });
60
- var iconColor = themed('appearance', {
61
- connectivity: {
62
- light: "var(--ds-icon-brand, ".concat(colors.B300, ")"),
63
- dark: "var(--ds-icon-brand, ".concat(colors.B75, ")")
64
- },
65
- confirmation: {
66
- light: "var(--ds-icon-success, ".concat(colors.G200, ")"),
67
- dark: "var(--ds-icon-success, ".concat(colors.G200, ")")
68
- },
69
- info: {
70
- light: "var(--ds-icon-discovery, ".concat(colors.P200, ")"),
71
- dark: "var(--ds-icon-discovery, ".concat(colors.P200, ")")
72
- },
73
- warning: {
74
- light: "var(--ds-icon-warning, ".concat(colors.Y200, ")"),
75
- dark: "var(--ds-icon-warning, ".concat(colors.Y200, ")")
76
- },
77
- error: {
78
- light: "var(--ds-icon-danger, ".concat(colors.R300, ")"),
79
- dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
51
+ var iconColor = function iconColor(appearance) {
52
+ switch (appearance) {
53
+ case 'connectivity':
54
+ return "var(--ds-icon-brand, ".concat(B300, ")");
55
+ case 'confirmation':
56
+ return "var(--ds-icon-success, ".concat(G200, ")");
57
+ case 'info':
58
+ return "var(--ds-icon-discovery, ".concat(P200, ")");
59
+ case 'warning':
60
+ return "var(--ds-icon-warning, ".concat(Y200, ")");
61
+ case 'error':
62
+ return "var(--ds-icon-danger, ".concat(R300, ")");
80
63
  }
81
- });
64
+ };
82
65
 
83
66
  /**
84
67
  * __Inline message__
@@ -127,17 +110,13 @@ var InlineMessage = function InlineMessage(_ref) {
127
110
  var onCloseDialog = useCallback(function () {
128
111
  return setIsOpen(false);
129
112
  }, [setIsOpen]);
130
- var theme = useGlobalTheme();
131
113
  if (!appearance) {
132
114
  appearance = type;
133
115
  }
134
116
  return jsx("div", {
135
117
  css: rootStyles,
136
118
  style: {
137
- '--icon-accent-color': iconColor({
138
- appearance: appearance,
139
- theme: theme
140
- })
119
+ '--icon-accent-color': iconColor(appearance)
141
120
  },
142
121
  "data-testid": testId
143
122
  }, jsx(InlineDialog, {
@@ -161,17 +140,13 @@ var InlineMessage = function InlineMessage(_ref) {
161
140
  label: iconLabel
162
141
  }), title && jsx("span", {
163
142
  style: {
164
- color: titleColor({
165
- theme: theme
166
- })
143
+ color: "var(--ds-text, ".concat(N600, ")")
167
144
  },
168
145
  css: titleStyles,
169
146
  "data-testid": testId && "".concat(testId, "--title")
170
147
  }, title), secondaryText && jsx("span", {
171
148
  "data-ds--inline-message--secondary-text": true,
172
- style: _defineProperty({}, VAR_SECONDARY_TEXT_COLOR, textColor({
173
- theme: theme
174
- })),
149
+ style: _defineProperty({}, VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(N300, ")")),
175
150
  css: textStyles,
176
151
  "data-testid": testId && "".concat(testId, "--text")
177
152
  }, secondaryText)))));
package/dist/esm/components/message-icon/index.js CHANGED
@@ -1,31 +1,22 @@
1
1
  /** @jsx jsx */
2
2
 
3
3
  import { css, jsx } from '@emotion/react';
4
- import * as colors from '@atlaskit/theme/colors';
5
- import { themed, useGlobalTheme } from '@atlaskit/theme/components';
4
+ import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
6
5
  import { typesMapping } from '../../constants';
7
- var iconColor = themed('appearance', {
8
- connectivity: {
9
- light: "var(--ds-icon-brand, ".concat(colors.B400, ")"),
10
- dark: "var(--ds-icon-brand, ".concat(colors.B100, ")")
11
- },
12
- confirmation: {
13
- light: "var(--ds-icon-success, ".concat(colors.G300, ")"),
14
- dark: "var(--ds-icon-success, ".concat(colors.G300, ")")
15
- },
16
- info: {
17
- light: "var(--ds-icon-discovery, ".concat(colors.P300, ")"),
18
- dark: "var(--ds-icon-discovery, ".concat(colors.P300, ")")
19
- },
20
- warning: {
21
- light: "var(--ds-icon-warning, ".concat(colors.Y300, ")"),
22
- dark: "var(--ds-icon-warning, ".concat(colors.Y300, ")")
23
- },
24
- error: {
25
- light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
26
- dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
6
+ var iconColor = function iconColor(appearance) {
7
+ switch (appearance) {
8
+ case 'connectivity':
9
+ return "var(--ds-icon-brand, ".concat(B400, ")");
10
+ case 'confirmation':
11
+ return "var(--ds-icon-success, ".concat(G300, ")");
12
+ case 'info':
13
+ return "var(--ds-icon-discovery, ".concat(P300, ")");
14
+ case 'warning':
15
+ return "var(--ds-icon-warning, ".concat(Y300, ")");
16
+ case 'error':
17
+ return "var(--ds-icon-danger, ".concat(R400, ")");
27
18
  }
28
- });
19
+ };
29
20
  var iconWrapperStyles = css({
30
21
  display: 'flex',
31
22
  alignItems: 'center',
@@ -47,19 +38,15 @@ var SelectedIcon = function SelectedIcon(_ref) {
47
38
  isOpen = _ref.isOpen,
48
39
  label = _ref.label;
49
40
  var _typesMapping$appeara = typesMapping[appearance],
50
- SelectedIcon = _typesMapping$appeara.icon,
41
+ Icon = _typesMapping$appeara.icon,
51
42
  defaultLabel = _typesMapping$appeara.defaultLabel;
52
- var theme = useGlobalTheme();
53
43
  return jsx("span", {
54
44
  "data-ds--inline-message--icon": true,
55
45
  style: {
56
- '--icon-color': iconColor({
57
- appearance: appearance,
58
- theme: theme
59
- })
46
+ '--icon-color': iconColor(appearance)
60
47
  },
61
48
  css: [iconWrapperStyles, isOpen && iconColorStyles]
62
- }, jsx(SelectedIcon, {
49
+ }, jsx(Icon, {
63
50
  testId: "inline-message-icon",
64
51
  label: label || defaultLabel,
65
52
  size: "medium"
package/dist/types/components/inline-message/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
2
+ import { type FC, type ReactNode } from 'react';
3
3
  import type { IconAppearance, InlineDialogPlacement } from '../../types';
4
4
  interface InlineMessageProps {
5
5
  /**
package/dist/types-ts4.5/components/inline-message/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  /** @jsx jsx */
2
- import { FC, ReactNode } from 'react';
2
+ import { type FC, type ReactNode } from 'react';
3
3
  import type { IconAppearance, InlineDialogPlacement } from '../../types';
4
4
  interface InlineMessageProps {
5
5
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.5.7",
3
+ "version": "12.0.0",
4
4
  "description": "An inline message lets users know when important information is available or when an action is required.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -24,11 +24,11 @@
24
24
  }
25
25
  },
26
26
  "dependencies": {
27
- "@atlaskit/button": "^16.10.0",
27
+ "@atlaskit/button": "^16.13.0",
28
28
  "@atlaskit/icon": "^21.12.0",
29
- "@atlaskit/inline-dialog": "^13.6.0",
29
+ "@atlaskit/inline-dialog": "^14.0.0",
30
30
  "@atlaskit/theme": "^12.6.0",
31
- "@atlaskit/tokens": "^1.26.0",
31
+ "@atlaskit/tokens": "^1.28.0",
32
32
  "@babel/runtime": "^7.0.0",
33
33
  "@emotion/react": "^11.7.1"
34
34
  },