@atlaskit/inline-message 12.4.3 → 13.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 (14) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/cjs/components/inline-message/index.compiled.css +14 -0
  3. package/dist/cjs/components/inline-message/index.js +26 -57
  4. package/dist/cjs/components/message-icon/index.compiled.css +12 -0
  5. package/dist/cjs/components/message-icon/index.js +19 -39
  6. package/dist/es2019/components/inline-message/index.compiled.css +14 -0
  7. package/dist/es2019/components/inline-message/index.js +22 -55
  8. package/dist/es2019/components/message-icon/index.compiled.css +12 -0
  9. package/dist/es2019/components/message-icon/index.js +16 -38
  10. package/dist/esm/components/inline-message/index.compiled.css +14 -0
  11. package/dist/esm/components/inline-message/index.js +22 -55
  12. package/dist/esm/components/message-icon/index.compiled.css +12 -0
  13. package/dist/esm/components/message-icon/index.js +16 -38
  14. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 13.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#175912](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175912)
8
+ [`4facbe306465b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4facbe306465b) -
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. Please note, in order to
11
+ use this version of `@atlaskit/inline-message`, you will need to ensure that your bundler is
12
+ configured to handle `.css` imports correctly. Most bundlers come with built-in support for `.css`
13
+ imports, so you may not need to do anything. If you are using a different bundler, please refer to
14
+ the documentation for that bundler to understand how to handle `.css` imports. For more
15
+ information on the migration, please refer to
16
+ [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).
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies
21
+
3
22
  ## 12.4.3
4
23
 
5
24
  ### Patch Changes
package/dist/cjs/components/inline-message/index.compiled.css ADDED
@@ -0,0 +1,14 @@
1
+ ._1e0c1o8l{display:inline-block}
2
+ ._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
3
+ ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
4
+ ._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
5
+ ._kvh018uv:hover [data-ds--inline-message--button]{text-decoration-color:initial}
6
+ ._p12f1osq{max-width:100%}
7
+ ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
8
+ ._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
9
+ ._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
10
+ ._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
11
+ ._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
12
+ ._1hvwt94y:focus{outline-width:1px}
13
+ ._49pcnqa1:focus{outline-style:solid}
14
+ ._nt751r31:focus{outline-color:currentColor}
package/dist/cjs/components/inline-message/index.js CHANGED
@@ -1,56 +1,31 @@
1
+ /* index.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
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.default = void 0;
10
+ require("./index.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
8
14
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _react = require("react");
10
- var _react2 = require("@emotion/react");
11
15
  var _button = _interopRequireDefault(require("@atlaskit/button"));
12
16
  var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
13
- var _primitives = require("@atlaskit/primitives");
17
+ var _compiled = require("@atlaskit/primitives/compiled");
14
18
  var _colors = require("@atlaskit/theme/colors");
15
19
  var _messageIcon = _interopRequireDefault(require("../message-icon"));
16
- /**
17
- * @jsxRuntime classic
18
- * @jsx jsx
19
- */
20
-
21
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
22
-
23
- var rootStyles = (0, _react2.css)({
24
- display: 'inline-block',
25
- maxWidth: '100%',
26
- '&:focus': {
27
- outline: '1px solid'
28
- },
29
- '&:hover': {
30
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
31
- '[data-ds--inline-message--icon]': {
32
- // Legacy style
33
- color: 'var(--icon-accent-color)'
34
- },
35
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
36
- '[data-ds--inline-message--button]': {
37
- textDecoration: 'underline'
38
- }
39
- }
40
- });
41
- var iconColor = function iconColor(appearance) {
42
- switch (appearance) {
43
- case 'connectivity':
44
- return "var(--ds-icon-brand, ".concat(_colors.B300, ")");
45
- case 'confirmation':
46
- return "var(--ds-icon-success, ".concat(_colors.G200, ")");
47
- case 'info':
48
- return "var(--ds-icon-discovery, ".concat(_colors.P200, ")");
49
- case 'warning':
50
- return "var(--ds-icon-warning, ".concat(_colors.Y200, ")");
51
- case 'error':
52
- return "var(--ds-icon-danger, ".concat(_colors.R300, ")");
53
- }
20
+ 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); }
21
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
+ var rootStyles = null;
23
+ var iconColor = {
24
+ connectivity: "_x5v91r2e",
25
+ confirmation: "_x5v91fgg",
26
+ info: "_x5v913wx",
27
+ warning: "_x5v9f6ss",
28
+ error: "_x5v9k8x7"
54
29
  };
55
30
 
56
31
  /**
@@ -103,41 +78,35 @@ var InlineMessage = function InlineMessage(_ref) {
103
78
  if (!appearance) {
104
79
  appearance = type;
105
80
  }
106
- return (0, _react2.jsx)("div", {
107
- css: rootStyles
108
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
109
- ,
110
- style: {
111
- '--icon-accent-color': iconColor(appearance)
112
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
113
- },
114
- "data-testid": testId
115
- }, (0, _react2.jsx)(_inlineDialog.default, {
81
+ return /*#__PURE__*/React.createElement("div", {
82
+ "data-testid": testId,
83
+ className: (0, _runtime.ax)(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _1yyu1kum _kvh018uv _38q98stv _1o0knqa1", iconColor[appearance]])
84
+ }, /*#__PURE__*/React.createElement(_inlineDialog.default, {
116
85
  onClose: onCloseDialog,
117
86
  content: children,
118
87
  isOpen: isOpen,
119
88
  placement: placement,
120
89
  testId: testId && "".concat(testId, "--inline-dialog")
121
- }, (0, _react2.jsx)(_button.default, {
90
+ }, /*#__PURE__*/React.createElement(_button.default, {
122
91
  "data-ds--inline-message--button": true,
123
92
  appearance: "subtle-link",
124
93
  onClick: toggleDialog,
125
94
  spacing: "none",
126
95
  testId: testId && "".concat(testId, "--button"),
127
96
  "aria-expanded": isOpen
128
- }, (0, _react2.jsx)(_primitives.Inline, {
97
+ }, /*#__PURE__*/React.createElement(_compiled.Inline, {
129
98
  space: "space.050",
130
99
  alignBlock: "center"
131
- }, (0, _react2.jsx)(_messageIcon.default, {
100
+ }, /*#__PURE__*/React.createElement(_messageIcon.default, {
132
101
  isOpen: isOpen,
133
102
  appearance: appearance,
134
103
  label: iconLabel
135
- }), (0, _react2.jsx)(_primitives.Inline, {
104
+ }), /*#__PURE__*/React.createElement(_compiled.Inline, {
136
105
  space: "space.100"
137
- }, title && (0, _react2.jsx)(_primitives.Text, {
106
+ }, title && /*#__PURE__*/React.createElement(_compiled.Text, {
138
107
  weight: "medium",
139
108
  testId: testId && "".concat(testId, "--title")
140
- }, title), secondaryText && (0, _react2.jsx)(_primitives.Text, {
109
+ }, title), secondaryText && /*#__PURE__*/React.createElement(_compiled.Text, {
141
110
  weight: "medium",
142
111
  color: "color.text.subtlest",
143
112
  maxLines: 1,
package/dist/cjs/components/message-icon/index.compiled.css ADDED
@@ -0,0 +1,12 @@
1
+ ._16jlidpf{flex-grow:0}
2
+ ._1b3i1378{--icon-color:var(--ds-icon-danger,#de350b)}
3
+ ._1b3i1c86{--icon-color:var(--ds-icon-brand,#0052cc)}
4
+ ._1b3i1n6p{--icon-color:var(--ds-icon-warning,#ffab00)}
5
+ ._1b3icdx1{--icon-color:var(--ds-icon-success,#36b37e)}
6
+ ._1b3ige5s{--icon-color:var(--ds-icon-discovery,#6554c0)}
7
+ ._1e0c1txw{display:flex}
8
+ ._1o9zidpf{flex-shrink:0}
9
+ ._4cvr1h6o{align-items:center}
10
+ ._i0dl1wug{flex-basis:auto}
11
+ ._syaz1kum{color:var(--icon-accent-color)}
12
+ ._syazkr0v{color:var(--icon-color)}
package/dist/cjs/components/message-icon/index.js CHANGED
@@ -1,42 +1,27 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  "use strict";
2
3
 
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
- var _react = require("@emotion/react");
9
+ require("./index.compiled.css");
10
+ var React = _interopRequireWildcard(require("react"));
11
+ var _runtime = require("@compiled/react/runtime");
8
12
  var _colors = require("@atlaskit/theme/colors");
9
13
  var _constants = require("../../constants");
10
- /**
11
- * @jsxRuntime classic
12
- * @jsx jsx
13
- */
14
-
15
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
16
-
17
- var iconColor = function iconColor(appearance) {
18
- switch (appearance) {
19
- case 'connectivity':
20
- return "var(--ds-icon-brand, ".concat(_colors.B400, ")");
21
- case 'confirmation':
22
- return "var(--ds-icon-success, ".concat(_colors.G300, ")");
23
- case 'info':
24
- return "var(--ds-icon-discovery, ".concat(_colors.P300, ")");
25
- case 'warning':
26
- return "var(--ds-icon-warning, ".concat(_colors.Y300, ")");
27
- case 'error':
28
- return "var(--ds-icon-danger, ".concat(_colors.R400, ")");
29
- }
14
+ 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); }
15
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
16
+ var iconColor = {
17
+ connectivity: "_1b3i1c86",
18
+ confirmation: "_1b3icdx1",
19
+ info: "_1b3ige5s",
20
+ warning: "_1b3i1n6p",
21
+ error: "_1b3i1378"
30
22
  };
31
- var iconWrapperStyles = (0, _react.css)({
32
- display: 'flex',
33
- alignItems: 'center',
34
- flex: '0 0 auto',
35
- color: 'var(--icon-color)'
36
- });
37
- var iconColorStyles = (0, _react.css)({
38
- color: 'var(--icon-accent-color)'
39
- });
23
+ var iconWrapperStyles = null;
24
+ var iconColorStyles = null;
40
25
 
41
26
  /**
42
27
  * __Selected icon__
@@ -51,15 +36,10 @@ var SelectedIcon = function SelectedIcon(_ref) {
51
36
  var _typesMapping$appeara = _constants.typesMapping[appearance],
52
37
  Icon = _typesMapping$appeara.icon,
53
38
  defaultLabel = _typesMapping$appeara.defaultLabel;
54
- return (0, _react.jsx)("span", {
55
- "data-ds--inline-message--icon": true
56
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
57
- ,
58
- style: {
59
- '--icon-color': iconColor(appearance)
60
- },
61
- css: [iconWrapperStyles, isOpen && iconColorStyles]
62
- }, (0, _react.jsx)(Icon, {
39
+ return /*#__PURE__*/React.createElement("span", {
40
+ "data-ds--inline-message--icon": true,
41
+ className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _16jlidpf _1o9zidpf _i0dl1wug _syazkr0v", isOpen && "_syaz1kum", iconColor[appearance]])
42
+ }, /*#__PURE__*/React.createElement(Icon, {
63
43
  testId: "inline-message-icon",
64
44
  label: label || defaultLabel,
65
45
  color: "currentColor",
package/dist/es2019/components/inline-message/index.compiled.css ADDED
@@ -0,0 +1,14 @@
1
+ ._1e0c1o8l{display:inline-block}
2
+ ._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
3
+ ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
4
+ ._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
5
+ ._kvh018uv:hover [data-ds--inline-message--button]{text-decoration-color:initial}
6
+ ._p12f1osq{max-width:100%}
7
+ ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
8
+ ._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
9
+ ._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
10
+ ._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
11
+ ._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
12
+ ._1hvwt94y:focus{outline-width:1px}
13
+ ._49pcnqa1:focus{outline-style:solid}
14
+ ._nt751r31:focus{outline-color:currentColor}
package/dist/es2019/components/inline-message/index.js CHANGED
@@ -1,47 +1,20 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
2
+ import "./index.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useCallback, useState } from 'react';
6
-
7
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
8
- import { css, jsx } from '@emotion/react';
9
6
  import Button from '@atlaskit/button';
10
7
  import InlineDialog from '@atlaskit/inline-dialog';
11
- import { Inline, Text } from '@atlaskit/primitives';
8
+ import { Inline, Text } from '@atlaskit/primitives/compiled';
12
9
  import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
13
10
  import MessageIcon from '../message-icon';
14
- const rootStyles = css({
15
- display: 'inline-block',
16
- maxWidth: '100%',
17
- '&:focus': {
18
- outline: '1px solid'
19
- },
20
- '&:hover': {
21
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
22
- '[data-ds--inline-message--icon]': {
23
- // Legacy style
24
- color: 'var(--icon-accent-color)'
25
- },
26
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
27
- '[data-ds--inline-message--button]': {
28
- textDecoration: 'underline'
29
- }
30
- }
31
- });
32
- const iconColor = appearance => {
33
- switch (appearance) {
34
- case 'connectivity':
35
- return `var(--ds-icon-brand, ${B300})`;
36
- case 'confirmation':
37
- return `var(--ds-icon-success, ${G200})`;
38
- case 'info':
39
- return `var(--ds-icon-discovery, ${P200})`;
40
- case 'warning':
41
- return `var(--ds-icon-warning, ${Y200})`;
42
- case 'error':
43
- return `var(--ds-icon-danger, ${R300})`;
44
- }
11
+ const rootStyles = null;
12
+ const iconColor = {
13
+ connectivity: "_x5v91r2e",
14
+ confirmation: "_x5v91fgg",
15
+ info: "_x5v913wx",
16
+ warning: "_x5v9f6ss",
17
+ error: "_x5v9k8x7"
45
18
  };
46
19
 
47
20
  /**
@@ -84,41 +57,35 @@ const InlineMessage = ({
84
57
  if (!appearance) {
85
58
  appearance = type;
86
59
  }
87
- return jsx("div", {
88
- css: rootStyles
89
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
90
- ,
91
- style: {
92
- '--icon-accent-color': iconColor(appearance)
93
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
94
- },
95
- "data-testid": testId
96
- }, jsx(InlineDialog, {
60
+ return /*#__PURE__*/React.createElement("div", {
61
+ "data-testid": testId,
62
+ className: ax(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _1yyu1kum _kvh018uv _38q98stv _1o0knqa1", iconColor[appearance]])
63
+ }, /*#__PURE__*/React.createElement(InlineDialog, {
97
64
  onClose: onCloseDialog,
98
65
  content: children,
99
66
  isOpen: isOpen,
100
67
  placement: placement,
101
68
  testId: testId && `${testId}--inline-dialog`
102
- }, jsx(Button, {
69
+ }, /*#__PURE__*/React.createElement(Button, {
103
70
  "data-ds--inline-message--button": true,
104
71
  appearance: "subtle-link",
105
72
  onClick: toggleDialog,
106
73
  spacing: "none",
107
74
  testId: testId && `${testId}--button`,
108
75
  "aria-expanded": isOpen
109
- }, jsx(Inline, {
76
+ }, /*#__PURE__*/React.createElement(Inline, {
110
77
  space: "space.050",
111
78
  alignBlock: "center"
112
- }, jsx(MessageIcon, {
79
+ }, /*#__PURE__*/React.createElement(MessageIcon, {
113
80
  isOpen: isOpen,
114
81
  appearance: appearance,
115
82
  label: iconLabel
116
- }), jsx(Inline, {
83
+ }), /*#__PURE__*/React.createElement(Inline, {
117
84
  space: "space.100"
118
- }, title && jsx(Text, {
85
+ }, title && /*#__PURE__*/React.createElement(Text, {
119
86
  weight: "medium",
120
87
  testId: testId && `${testId}--title`
121
- }, title), secondaryText && jsx(Text, {
88
+ }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
122
89
  weight: "medium",
123
90
  color: "color.text.subtlest",
124
91
  maxLines: 1,
package/dist/es2019/components/message-icon/index.compiled.css ADDED
@@ -0,0 +1,12 @@
1
+ ._16jlidpf{flex-grow:0}
2
+ ._1b3i1378{--icon-color:var(--ds-icon-danger,#de350b)}
3
+ ._1b3i1c86{--icon-color:var(--ds-icon-brand,#0052cc)}
4
+ ._1b3i1n6p{--icon-color:var(--ds-icon-warning,#ffab00)}
5
+ ._1b3icdx1{--icon-color:var(--ds-icon-success,#36b37e)}
6
+ ._1b3ige5s{--icon-color:var(--ds-icon-discovery,#6554c0)}
7
+ ._1e0c1txw{display:flex}
8
+ ._1o9zidpf{flex-shrink:0}
9
+ ._4cvr1h6o{align-items:center}
10
+ ._i0dl1wug{flex-basis:auto}
11
+ ._syaz1kum{color:var(--icon-accent-color)}
12
+ ._syazkr0v{color:var(--icon-color)}
package/dist/es2019/components/message-icon/index.js CHANGED
@@ -1,35 +1,18 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
-
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
- import { css, jsx } from '@emotion/react';
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
2
+ import "./index.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
8
5
  import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
9
6
  import { typesMapping } from '../../constants';
10
- const iconColor = appearance => {
11
- switch (appearance) {
12
- case 'connectivity':
13
- return `var(--ds-icon-brand, ${B400})`;
14
- case 'confirmation':
15
- return `var(--ds-icon-success, ${G300})`;
16
- case 'info':
17
- return `var(--ds-icon-discovery, ${P300})`;
18
- case 'warning':
19
- return `var(--ds-icon-warning, ${Y300})`;
20
- case 'error':
21
- return `var(--ds-icon-danger, ${R400})`;
22
- }
7
+ const iconColor = {
8
+ connectivity: "_1b3i1c86",
9
+ confirmation: "_1b3icdx1",
10
+ info: "_1b3ige5s",
11
+ warning: "_1b3i1n6p",
12
+ error: "_1b3i1378"
23
13
  };
24
- const iconWrapperStyles = css({
25
- display: 'flex',
26
- alignItems: 'center',
27
- flex: '0 0 auto',
28
- color: 'var(--icon-color)'
29
- });
30
- const iconColorStyles = css({
31
- color: 'var(--icon-accent-color)'
32
- });
14
+ const iconWrapperStyles = null;
15
+ const iconColorStyles = null;
33
16
 
34
17
  /**
35
18
  * __Selected icon__
@@ -48,15 +31,10 @@ const SelectedIcon = ({
48
31
  defaultLabel
49
32
  }
50
33
  } = typesMapping;
51
- return jsx("span", {
52
- "data-ds--inline-message--icon": true
53
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
54
- ,
55
- style: {
56
- '--icon-color': iconColor(appearance)
57
- },
58
- css: [iconWrapperStyles, isOpen && iconColorStyles]
59
- }, jsx(Icon, {
34
+ return /*#__PURE__*/React.createElement("span", {
35
+ "data-ds--inline-message--icon": true,
36
+ className: ax(["_1e0c1txw _4cvr1h6o _16jlidpf _1o9zidpf _i0dl1wug _syazkr0v", isOpen && "_syaz1kum", iconColor[appearance]])
37
+ }, /*#__PURE__*/React.createElement(Icon, {
60
38
  testId: "inline-message-icon",
61
39
  label: label || defaultLabel,
62
40
  color: "currentColor",
package/dist/esm/components/inline-message/index.compiled.css ADDED
@@ -0,0 +1,14 @@
1
+ ._1e0c1o8l{display:inline-block}
2
+ ._1o0knqa1:hover [data-ds--inline-message--button]{text-decoration-style:solid}
3
+ ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
4
+ ._38q98stv:hover [data-ds--inline-message--button]{text-decoration-line:underline}
5
+ ._kvh018uv:hover [data-ds--inline-message--button]{text-decoration-color:initial}
6
+ ._p12f1osq{max-width:100%}
7
+ ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
8
+ ._x5v91fgg{--icon-accent-color:var(--ds-icon-success,#57d9a3)}
9
+ ._x5v91r2e{--icon-accent-color:var(--ds-icon-brand,#0065ff)}
10
+ ._x5v9f6ss{--icon-accent-color:var(--ds-icon-warning,#ffc400)}
11
+ ._x5v9k8x7{--icon-accent-color:var(--ds-icon-danger,#ff5630)}
12
+ ._1hvwt94y:focus{outline-width:1px}
13
+ ._49pcnqa1:focus{outline-style:solid}
14
+ ._nt751r31:focus{outline-color:currentColor}
package/dist/esm/components/inline-message/index.js CHANGED
@@ -1,48 +1,21 @@
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
3
+ import "./index.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useCallback, useState } from 'react';
7
-
8
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
- import { css, jsx } from '@emotion/react';
10
7
  import Button from '@atlaskit/button';
11
8
  import InlineDialog from '@atlaskit/inline-dialog';
12
- import { Inline, Text } from '@atlaskit/primitives';
9
+ import { Inline, Text } from '@atlaskit/primitives/compiled';
13
10
  import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
14
11
  import MessageIcon from '../message-icon';
15
- var rootStyles = css({
16
- display: 'inline-block',
17
- maxWidth: '100%',
18
- '&:focus': {
19
- outline: '1px solid'
20
- },
21
- '&:hover': {
22
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
23
- '[data-ds--inline-message--icon]': {
24
- // Legacy style
25
- color: 'var(--icon-accent-color)'
26
- },
27
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
28
- '[data-ds--inline-message--button]': {
29
- textDecoration: 'underline'
30
- }
31
- }
32
- });
33
- var iconColor = function iconColor(appearance) {
34
- switch (appearance) {
35
- case 'connectivity':
36
- return "var(--ds-icon-brand, ".concat(B300, ")");
37
- case 'confirmation':
38
- return "var(--ds-icon-success, ".concat(G200, ")");
39
- case 'info':
40
- return "var(--ds-icon-discovery, ".concat(P200, ")");
41
- case 'warning':
42
- return "var(--ds-icon-warning, ".concat(Y200, ")");
43
- case 'error':
44
- return "var(--ds-icon-danger, ".concat(R300, ")");
45
- }
12
+ var rootStyles = null;
13
+ var iconColor = {
14
+ connectivity: "_x5v91r2e",
15
+ confirmation: "_x5v91fgg",
16
+ info: "_x5v913wx",
17
+ warning: "_x5v9f6ss",
18
+ error: "_x5v9k8x7"
46
19
  };
47
20
 
48
21
  /**
@@ -95,41 +68,35 @@ var InlineMessage = function InlineMessage(_ref) {
95
68
  if (!appearance) {
96
69
  appearance = type;
97
70
  }
98
- return jsx("div", {
99
- css: rootStyles
100
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
101
- ,
102
- style: {
103
- '--icon-accent-color': iconColor(appearance)
104
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
105
- },
106
- "data-testid": testId
107
- }, jsx(InlineDialog, {
71
+ return /*#__PURE__*/React.createElement("div", {
72
+ "data-testid": testId,
73
+ className: ax(["_1e0c1o8l _p12f1osq _nt751r31 _49pcnqa1 _1hvwt94y _1yyu1kum _kvh018uv _38q98stv _1o0knqa1", iconColor[appearance]])
74
+ }, /*#__PURE__*/React.createElement(InlineDialog, {
108
75
  onClose: onCloseDialog,
109
76
  content: children,
110
77
  isOpen: isOpen,
111
78
  placement: placement,
112
79
  testId: testId && "".concat(testId, "--inline-dialog")
113
- }, jsx(Button, {
80
+ }, /*#__PURE__*/React.createElement(Button, {
114
81
  "data-ds--inline-message--button": true,
115
82
  appearance: "subtle-link",
116
83
  onClick: toggleDialog,
117
84
  spacing: "none",
118
85
  testId: testId && "".concat(testId, "--button"),
119
86
  "aria-expanded": isOpen
120
- }, jsx(Inline, {
87
+ }, /*#__PURE__*/React.createElement(Inline, {
121
88
  space: "space.050",
122
89
  alignBlock: "center"
123
- }, jsx(MessageIcon, {
90
+ }, /*#__PURE__*/React.createElement(MessageIcon, {
124
91
  isOpen: isOpen,
125
92
  appearance: appearance,
126
93
  label: iconLabel
127
- }), jsx(Inline, {
94
+ }), /*#__PURE__*/React.createElement(Inline, {
128
95
  space: "space.100"
129
- }, title && jsx(Text, {
96
+ }, title && /*#__PURE__*/React.createElement(Text, {
130
97
  weight: "medium",
131
98
  testId: testId && "".concat(testId, "--title")
132
- }, title), secondaryText && jsx(Text, {
99
+ }, title), secondaryText && /*#__PURE__*/React.createElement(Text, {
133
100
  weight: "medium",
134
101
  color: "color.text.subtlest",
135
102
  maxLines: 1,
package/dist/esm/components/message-icon/index.compiled.css ADDED
@@ -0,0 +1,12 @@
1
+ ._16jlidpf{flex-grow:0}
2
+ ._1b3i1378{--icon-color:var(--ds-icon-danger,#de350b)}
3
+ ._1b3i1c86{--icon-color:var(--ds-icon-brand,#0052cc)}
4
+ ._1b3i1n6p{--icon-color:var(--ds-icon-warning,#ffab00)}
5
+ ._1b3icdx1{--icon-color:var(--ds-icon-success,#36b37e)}
6
+ ._1b3ige5s{--icon-color:var(--ds-icon-discovery,#6554c0)}
7
+ ._1e0c1txw{display:flex}
8
+ ._1o9zidpf{flex-shrink:0}
9
+ ._4cvr1h6o{align-items:center}
10
+ ._i0dl1wug{flex-basis:auto}
11
+ ._syaz1kum{color:var(--icon-accent-color)}
12
+ ._syazkr0v{color:var(--icon-color)}
package/dist/esm/components/message-icon/index.js CHANGED
@@ -1,35 +1,18 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
-
6
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
7
- import { css, jsx } from '@emotion/react';
1
+ /* index.tsx generated by @compiled/babel-plugin v0.32.2 */
2
+ import "./index.compiled.css";
3
+ import * as React from 'react';
4
+ import { ax, ix } from "@compiled/react/runtime";
8
5
  import { B400, G300, P300, R400, Y300 } from '@atlaskit/theme/colors';
9
6
  import { typesMapping } from '../../constants';
10
- var iconColor = function iconColor(appearance) {
11
- switch (appearance) {
12
- case 'connectivity':
13
- return "var(--ds-icon-brand, ".concat(B400, ")");
14
- case 'confirmation':
15
- return "var(--ds-icon-success, ".concat(G300, ")");
16
- case 'info':
17
- return "var(--ds-icon-discovery, ".concat(P300, ")");
18
- case 'warning':
19
- return "var(--ds-icon-warning, ".concat(Y300, ")");
20
- case 'error':
21
- return "var(--ds-icon-danger, ".concat(R400, ")");
22
- }
7
+ var iconColor = {
8
+ connectivity: "_1b3i1c86",
9
+ confirmation: "_1b3icdx1",
10
+ info: "_1b3ige5s",
11
+ warning: "_1b3i1n6p",
12
+ error: "_1b3i1378"
23
13
  };
24
- var iconWrapperStyles = css({
25
- display: 'flex',
26
- alignItems: 'center',
27
- flex: '0 0 auto',
28
- color: 'var(--icon-color)'
29
- });
30
- var iconColorStyles = css({
31
- color: 'var(--icon-accent-color)'
32
- });
14
+ var iconWrapperStyles = null;
15
+ var iconColorStyles = null;
33
16
 
34
17
  /**
35
18
  * __Selected icon__
@@ -44,15 +27,10 @@ var SelectedIcon = function SelectedIcon(_ref) {
44
27
  var _typesMapping$appeara = typesMapping[appearance],
45
28
  Icon = _typesMapping$appeara.icon,
46
29
  defaultLabel = _typesMapping$appeara.defaultLabel;
47
- return jsx("span", {
48
- "data-ds--inline-message--icon": true
49
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
50
- ,
51
- style: {
52
- '--icon-color': iconColor(appearance)
53
- },
54
- css: [iconWrapperStyles, isOpen && iconColorStyles]
55
- }, jsx(Icon, {
30
+ return /*#__PURE__*/React.createElement("span", {
31
+ "data-ds--inline-message--icon": true,
32
+ className: ax(["_1e0c1txw _4cvr1h6o _16jlidpf _1o9zidpf _i0dl1wug _syazkr0v", isOpen && "_syaz1kum", iconColor[appearance]])
33
+ }, /*#__PURE__*/React.createElement(Icon, {
56
34
  testId: "inline-message-icon",
57
35
  label: label || defaultLabel,
58
36
  color: "currentColor",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "12.4.3",
3
+ "version": "13.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/"
@@ -31,13 +31,13 @@
31
31
  },
32
32
  "dependencies": {
33
33
  "@atlaskit/button": "^20.3.0",
34
- "@atlaskit/icon": "^23.0.0",
34
+ "@atlaskit/icon": "^23.1.0",
35
35
  "@atlaskit/inline-dialog": "^15.3.0",
36
36
  "@atlaskit/primitives": "^13.3.0",
37
37
  "@atlaskit/theme": "^14.0.0",
38
38
  "@atlaskit/tokens": "^2.4.0",
39
39
  "@babel/runtime": "^7.0.0",
40
- "@emotion/react": "^11.7.1"
40
+ "@compiled/react": "^0.18.1"
41
41
  },
42
42
  "peerDependencies": {
43
43
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"