@atlaskit/inline-message 11.4.7 → 11.4.8

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 CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 11.4.8
4
+
5
+ ### Patch Changes
6
+
7
+ - [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
8
+
3
9
  ## 11.4.7
4
10
 
5
11
  ### Patch Changes
@@ -1,50 +1,36 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
5
  Object.defineProperty(exports, "__esModule", {
8
6
  value: true
9
7
  });
10
8
  exports.default = void 0;
11
-
12
9
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
10
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
15
-
16
11
  var _react = require("react");
17
-
18
12
  var _react2 = require("@emotion/react");
19
-
20
13
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
21
-
22
14
  var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
23
-
24
15
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
25
-
26
16
  var _components = require("@atlaskit/theme/components");
27
-
28
17
  var _constants = require("../../constants");
29
-
30
18
  var _messageIcon = _interopRequireDefault(require("../message-icon"));
31
-
32
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); }
33
-
34
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; }
35
-
36
21
  /** @jsx jsx */
22
+
37
23
  var buttonContentsStyles = (0, _react2.css)({
38
24
  display: 'flex',
39
25
  alignItems: 'center',
40
26
  textDecoration: 'none'
41
27
  });
42
28
  var titleStyles = (0, _react2.css)({
43
- padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
29
+ padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
44
30
  fontWeight: "var(--ds-font-weight-medium, 500)"
45
31
  });
46
32
  var textStyles = (0, _react2.css)({
47
- padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
33
+ padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
48
34
  color: "var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"),
49
35
  overflow: 'hidden',
50
36
  textOverflow: 'ellipsis',
@@ -104,6 +90,7 @@ var iconColor = (0, _components.themed)('appearance', {
104
90
  dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
105
91
  }
106
92
  });
93
+
107
94
  /**
108
95
  * __Inline message__
109
96
  *
@@ -126,26 +113,23 @@ var iconColor = (0, _components.themed)('appearance', {
126
113
  * );
127
114
  * ```
128
115
  */
129
-
130
116
  var InlineMessage = function InlineMessage(_ref) {
131
117
  var _ref$placement = _ref.placement,
132
- placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
133
- _ref$secondaryText = _ref.secondaryText,
134
- secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
135
- _ref$title = _ref.title,
136
- title = _ref$title === void 0 ? '' : _ref$title,
137
- _ref$type = _ref.type,
138
- type = _ref$type === void 0 ? 'connectivity' : _ref$type,
139
- appearance = _ref.appearance,
140
- children = _ref.children,
141
- testId = _ref.testId,
142
- iconLabel = _ref.iconLabel;
143
-
118
+ placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
119
+ _ref$secondaryText = _ref.secondaryText,
120
+ secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
121
+ _ref$title = _ref.title,
122
+ title = _ref$title === void 0 ? '' : _ref$title,
123
+ _ref$type = _ref.type,
124
+ type = _ref$type === void 0 ? 'connectivity' : _ref$type,
125
+ appearance = _ref.appearance,
126
+ children = _ref.children,
127
+ testId = _ref.testId,
128
+ iconLabel = _ref.iconLabel;
144
129
  var _useState = (0, _react.useState)(false),
145
- _useState2 = (0, _slicedToArray2.default)(_useState, 2),
146
- isOpen = _useState2[0],
147
- setIsOpen = _useState2[1];
148
-
130
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
131
+ isOpen = _useState2[0],
132
+ setIsOpen = _useState2[1];
149
133
  var toggleDialog = (0, _react.useCallback)(function () {
150
134
  setIsOpen(function (oldState) {
151
135
  return !oldState;
@@ -155,11 +139,9 @@ var InlineMessage = function InlineMessage(_ref) {
155
139
  return setIsOpen(false);
156
140
  }, [setIsOpen]);
157
141
  var theme = (0, _components.useGlobalTheme)();
158
-
159
142
  if (!appearance) {
160
143
  appearance = type;
161
144
  }
162
-
163
145
  return (0, _react2.jsx)("div", {
164
146
  css: rootStyles,
165
147
  style: {
@@ -204,6 +186,5 @@ var InlineMessage = function InlineMessage(_ref) {
204
186
  "data-testid": testId && "".concat(testId, "--text")
205
187
  }, secondaryText)))));
206
188
  };
207
-
208
189
  var _default = InlineMessage;
209
190
  exports.default = _default;
@@ -1,25 +1,18 @@
1
1
  "use strict";
2
2
 
3
3
  var _typeof = require("@babel/runtime/helpers/typeof");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _react = require("@emotion/react");
11
-
12
9
  var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
13
-
14
10
  var _components = require("@atlaskit/theme/components");
15
-
16
11
  var _constants = require("../../constants");
17
-
18
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); }
19
-
20
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; }
21
-
22
14
  /** @jsx jsx */
15
+
23
16
  var iconColor = (0, _components.themed)('appearance', {
24
17
  connectivity: {
25
18
  light: "var(--ds-icon-brand, ".concat(colors.B400, ")"),
@@ -51,20 +44,20 @@ var iconWrapperStyles = (0, _react.css)({
51
44
  var iconColorStyles = (0, _react.css)({
52
45
  color: 'var(--icon-accent-color)'
53
46
  });
47
+
54
48
  /**
55
49
  * __Selected icon__
56
50
  *
57
51
  * The selected icon is used as the primary interactive element for the dialog.
58
52
  * Can be used with or without supporting text.
59
53
  */
60
-
61
54
  var SelectedIcon = function SelectedIcon(_ref) {
62
55
  var appearance = _ref.appearance,
63
- isOpen = _ref.isOpen,
64
- label = _ref.label;
56
+ isOpen = _ref.isOpen,
57
+ label = _ref.label;
65
58
  var _typesMapping$appeara = _constants.typesMapping[appearance],
66
- SelectedIcon = _typesMapping$appeara.icon,
67
- defaultLabel = _typesMapping$appeara.defaultLabel;
59
+ SelectedIcon = _typesMapping$appeara.icon,
60
+ defaultLabel = _typesMapping$appeara.defaultLabel;
68
61
  var theme = (0, _components.useGlobalTheme)();
69
62
  return (0, _react.jsx)("span", {
70
63
  "data-ds--inline-message--icon": true,
@@ -81,6 +74,5 @@ var SelectedIcon = function SelectedIcon(_ref) {
81
74
  size: "medium"
82
75
  }));
83
76
  };
84
-
85
77
  var _default = SelectedIcon;
86
78
  exports.default = _default;
@@ -1,20 +1,14 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.typesMapping = exports.VAR_SECONDARY_TEXT_COLOR = void 0;
9
-
10
8
  var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
11
-
12
9
  var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
13
-
14
10
  var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
15
-
16
11
  var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
17
-
18
12
  var typesMapping = {
19
13
  connectivity: {
20
14
  icon: _warning.default,
package/dist/cjs/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
11
10
  return _inlineMessage.default;
12
11
  }
13
12
  });
14
-
15
13
  var _inlineMessage = _interopRequireDefault(require("./components/inline-message"));
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.4.7",
3
+ "version": "11.4.8",
4
4
  "sideEffects": false
5
5
  }
@@ -13,11 +13,11 @@ const buttonContentsStyles = css({
13
13
  textDecoration: 'none'
14
14
  });
15
15
  const titleStyles = css({
16
- padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
16
+ padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
17
17
  fontWeight: "var(--ds-font-weight-medium, 500)"
18
18
  });
19
19
  const textStyles = css({
20
- padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
20
+ padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
21
21
  color: `var(${VAR_SECONDARY_TEXT_COLOR})`,
22
22
  overflow: 'hidden',
23
23
  textOverflow: 'ellipsis',
@@ -77,6 +77,7 @@ const iconColor = themed('appearance', {
77
77
  dark: `var(--ds-icon-danger, ${colors.R300})`
78
78
  }
79
79
  });
80
+
80
81
  /**
81
82
  * __Inline message__
82
83
  *
@@ -99,7 +100,6 @@ const iconColor = themed('appearance', {
99
100
  * );
100
101
  * ```
101
102
  */
102
-
103
103
  const InlineMessage = ({
104
104
  placement = 'bottom-start',
105
105
  secondaryText = '',
@@ -116,11 +116,9 @@ const InlineMessage = ({
116
116
  }, [setIsOpen]);
117
117
  const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
118
118
  const theme = useGlobalTheme();
119
-
120
119
  if (!appearance) {
121
120
  appearance = type;
122
121
  }
123
-
124
122
  return jsx("div", {
125
123
  css: rootStyles,
126
124
  style: {
@@ -167,5 +165,4 @@ const InlineMessage = ({
167
165
  "data-testid": testId && `${testId}--text`
168
166
  }, secondaryText)))));
169
167
  };
170
-
171
168
  export default InlineMessage;
@@ -1,4 +1,5 @@
1
1
  /** @jsx jsx */
2
+
2
3
  import { css, jsx } from '@emotion/react';
3
4
  import * as colors from '@atlaskit/theme/colors';
4
5
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
@@ -34,13 +35,13 @@ const iconWrapperStyles = css({
34
35
  const iconColorStyles = css({
35
36
  color: 'var(--icon-accent-color)'
36
37
  });
38
+
37
39
  /**
38
40
  * __Selected icon__
39
41
  *
40
42
  * The selected icon is used as the primary interactive element for the dialog.
41
43
  * Can be used with or without supporting text.
42
44
  */
43
-
44
45
  const SelectedIcon = ({
45
46
  appearance,
46
47
  isOpen,
@@ -68,5 +69,4 @@ const SelectedIcon = ({
68
69
  size: "medium"
69
70
  }));
70
71
  };
71
-
72
72
  export default SelectedIcon;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.4.7",
3
+ "version": "11.4.8",
4
4
  "sideEffects": false
5
5
  }
@@ -1,6 +1,5 @@
1
1
  import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
-
4
3
  /** @jsx jsx */
5
4
  import { useCallback, useState } from 'react';
6
5
  import { css, jsx } from '@emotion/react';
@@ -16,11 +15,11 @@ var buttonContentsStyles = css({
16
15
  textDecoration: 'none'
17
16
  });
18
17
  var titleStyles = css({
19
- padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
18
+ padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
20
19
  fontWeight: "var(--ds-font-weight-medium, 500)"
21
20
  });
22
21
  var textStyles = css({
23
- padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
22
+ padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
24
23
  color: "var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"),
25
24
  overflow: 'hidden',
26
25
  textOverflow: 'ellipsis',
@@ -80,6 +79,7 @@ var iconColor = themed('appearance', {
80
79
  dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
81
80
  }
82
81
  });
82
+
83
83
  /**
84
84
  * __Inline message__
85
85
  *
@@ -102,26 +102,23 @@ var iconColor = themed('appearance', {
102
102
  * );
103
103
  * ```
104
104
  */
105
-
106
105
  var InlineMessage = function InlineMessage(_ref) {
107
106
  var _ref$placement = _ref.placement,
108
- placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
109
- _ref$secondaryText = _ref.secondaryText,
110
- secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
111
- _ref$title = _ref.title,
112
- title = _ref$title === void 0 ? '' : _ref$title,
113
- _ref$type = _ref.type,
114
- type = _ref$type === void 0 ? 'connectivity' : _ref$type,
115
- appearance = _ref.appearance,
116
- children = _ref.children,
117
- testId = _ref.testId,
118
- iconLabel = _ref.iconLabel;
119
-
107
+ placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
108
+ _ref$secondaryText = _ref.secondaryText,
109
+ secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
110
+ _ref$title = _ref.title,
111
+ title = _ref$title === void 0 ? '' : _ref$title,
112
+ _ref$type = _ref.type,
113
+ type = _ref$type === void 0 ? 'connectivity' : _ref$type,
114
+ appearance = _ref.appearance,
115
+ children = _ref.children,
116
+ testId = _ref.testId,
117
+ iconLabel = _ref.iconLabel;
120
118
  var _useState = useState(false),
121
- _useState2 = _slicedToArray(_useState, 2),
122
- isOpen = _useState2[0],
123
- setIsOpen = _useState2[1];
124
-
119
+ _useState2 = _slicedToArray(_useState, 2),
120
+ isOpen = _useState2[0],
121
+ setIsOpen = _useState2[1];
125
122
  var toggleDialog = useCallback(function () {
126
123
  setIsOpen(function (oldState) {
127
124
  return !oldState;
@@ -131,11 +128,9 @@ var InlineMessage = function InlineMessage(_ref) {
131
128
  return setIsOpen(false);
132
129
  }, [setIsOpen]);
133
130
  var theme = useGlobalTheme();
134
-
135
131
  if (!appearance) {
136
132
  appearance = type;
137
133
  }
138
-
139
134
  return jsx("div", {
140
135
  css: rootStyles,
141
136
  style: {
@@ -180,5 +175,4 @@ var InlineMessage = function InlineMessage(_ref) {
180
175
  "data-testid": testId && "".concat(testId, "--text")
181
176
  }, secondaryText)))));
182
177
  };
183
-
184
178
  export default InlineMessage;
@@ -1,4 +1,5 @@
1
1
  /** @jsx jsx */
2
+
2
3
  import { css, jsx } from '@emotion/react';
3
4
  import * as colors from '@atlaskit/theme/colors';
4
5
  import { themed, useGlobalTheme } from '@atlaskit/theme/components';
@@ -34,20 +35,20 @@ var iconWrapperStyles = css({
34
35
  var iconColorStyles = css({
35
36
  color: 'var(--icon-accent-color)'
36
37
  });
38
+
37
39
  /**
38
40
  * __Selected icon__
39
41
  *
40
42
  * The selected icon is used as the primary interactive element for the dialog.
41
43
  * Can be used with or without supporting text.
42
44
  */
43
-
44
45
  var SelectedIcon = function SelectedIcon(_ref) {
45
46
  var appearance = _ref.appearance,
46
- isOpen = _ref.isOpen,
47
- label = _ref.label;
47
+ isOpen = _ref.isOpen,
48
+ label = _ref.label;
48
49
  var _typesMapping$appeara = typesMapping[appearance],
49
- SelectedIcon = _typesMapping$appeara.icon,
50
- defaultLabel = _typesMapping$appeara.defaultLabel;
50
+ SelectedIcon = _typesMapping$appeara.icon,
51
+ defaultLabel = _typesMapping$appeara.defaultLabel;
51
52
  var theme = useGlobalTheme();
52
53
  return jsx("span", {
53
54
  "data-ds--inline-message--icon": true,
@@ -64,5 +65,4 @@ var SelectedIcon = function SelectedIcon(_ref) {
64
65
  size: "medium"
65
66
  }));
66
67
  };
67
-
68
68
  export default SelectedIcon;
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.4.7",
3
+ "version": "11.4.8",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "11.4.7",
3
+ "version": "11.4.8",
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/"