@atlaskit/inline-message 12.1.0 → 12.1.2

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 (15) hide show
  1. package/CHANGELOG.md +575 -559
  2. package/dist/cjs/components/inline-message/index.js +22 -39
  3. package/dist/cjs/components/message-icon/index.js +3 -1
  4. package/dist/cjs/constants.js +2 -3
  5. package/dist/es2019/components/inline-message/index.js +23 -41
  6. package/dist/es2019/components/message-icon/index.js +3 -1
  7. package/dist/es2019/constants.js +1 -2
  8. package/dist/esm/components/inline-message/index.js +23 -40
  9. package/dist/esm/components/message-icon/index.js +3 -1
  10. package/dist/esm/constants.js +1 -2
  11. package/dist/types/constants.d.ts +0 -1
  12. package/dist/types/types.d.ts +1 -1
  13. package/dist/types-ts4.5/constants.d.ts +0 -1
  14. package/dist/types-ts4.5/types.d.ts +1 -1
  15. package/package.json +19 -9
package/dist/cjs/components/inline-message/index.js CHANGED
@@ -5,33 +5,18 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports.default = void 0;
8
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
9
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
9
  var _react = require("react");
11
10
  var _react2 = require("@emotion/react");
12
11
  var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
13
12
  var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
13
+ var _layering = require("@atlaskit/layering");
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
+ var _primitives = require("@atlaskit/primitives");
14
16
  var _colors = require("@atlaskit/theme/colors");
15
- var _constants = require("../../constants");
16
17
  var _messageIcon = _interopRequireDefault(require("../message-icon"));
17
18
  /** @jsx jsx */
18
19
 
19
- var buttonContentsStyles = (0, _react2.css)({
20
- display: 'flex',
21
- alignItems: 'center',
22
- textDecoration: 'none'
23
- });
24
- var titleStyles = (0, _react2.css)({
25
- padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
26
- fontWeight: "var(--ds-font-weight-medium, 500)"
27
- });
28
- var textStyles = (0, _react2.css)({
29
- padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
30
- color: "var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"),
31
- overflow: 'hidden',
32
- textOverflow: 'ellipsis',
33
- whiteSpace: 'nowrap'
34
- });
35
20
  var rootStyles = (0, _react2.css)({
36
21
  display: 'inline-block',
37
22
  maxWidth: '100%',
@@ -48,12 +33,6 @@ var rootStyles = (0, _react2.css)({
48
33
  '[data-ds--inline-message--button]': {
49
34
  textDecoration: 'underline'
50
35
  }
51
- },
52
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
53
- '[data-ds--inline-message--button]': {
54
- '&:active [data-ds--inline-message--secondary-text]': {
55
- color: "var(--ds-text-subtle, ".concat("var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"), ")")
56
- }
57
36
  }
58
37
  });
59
38
  var iconColor = function iconColor(appearance) {
@@ -122,11 +101,15 @@ var InlineMessage = function InlineMessage(_ref) {
122
101
  appearance = type;
123
102
  }
124
103
  return (0, _react2.jsx)("div", {
125
- css: rootStyles,
104
+ css: rootStyles
105
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
106
+ ,
126
107
  style: {
127
108
  '--icon-accent-color': iconColor(appearance)
128
109
  },
129
110
  "data-testid": testId
111
+ }, (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
112
+ isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
130
113
  }, (0, _react2.jsx)(_inlineDialog.default, {
131
114
  onClose: onCloseDialog,
132
115
  content: children,
@@ -140,23 +123,23 @@ var InlineMessage = function InlineMessage(_ref) {
140
123
  spacing: "none",
141
124
  testId: testId && "".concat(testId, "--button"),
142
125
  "aria-expanded": isOpen
143
- }, (0, _react2.jsx)("div", {
144
- css: buttonContentsStyles
126
+ }, (0, _react2.jsx)(_primitives.Inline, {
127
+ space: "space.050",
128
+ alignBlock: "center"
145
129
  }, (0, _react2.jsx)(_messageIcon.default, {
146
130
  isOpen: isOpen,
147
131
  appearance: appearance,
148
132
  label: iconLabel
149
- }), title && (0, _react2.jsx)("span", {
150
- style: {
151
- color: "var(--ds-text, ".concat(_colors.N600, ")")
152
- },
153
- css: titleStyles,
154
- "data-testid": testId && "".concat(testId, "--title")
155
- }, title), secondaryText && (0, _react2.jsx)("span", {
156
- "data-ds--inline-message--secondary-text": true,
157
- style: (0, _defineProperty2.default)({}, _constants.VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
158
- css: textStyles,
159
- "data-testid": testId && "".concat(testId, "--text")
160
- }, secondaryText)))));
133
+ }), (0, _react2.jsx)(_primitives.Inline, {
134
+ space: "space.100"
135
+ }, title && (0, _react2.jsx)(_primitives.Text, {
136
+ weight: "medium",
137
+ testId: testId && "".concat(testId, "--title")
138
+ }, title), secondaryText && (0, _react2.jsx)(_primitives.Text, {
139
+ weight: "medium",
140
+ color: "color.text.subtlest",
141
+ maxLines: 1,
142
+ testId: testId && "".concat(testId, "--text")
143
+ }, secondaryText)))))));
161
144
  };
162
145
  var _default = exports.default = InlineMessage;
package/dist/cjs/components/message-icon/index.js CHANGED
@@ -47,7 +47,9 @@ var SelectedIcon = function SelectedIcon(_ref) {
47
47
  Icon = _typesMapping$appeara.icon,
48
48
  defaultLabel = _typesMapping$appeara.defaultLabel;
49
49
  return (0, _react.jsx)("span", {
50
- "data-ds--inline-message--icon": true,
50
+ "data-ds--inline-message--icon": true
51
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
52
+ ,
51
53
  style: {
52
54
  '--icon-color': iconColor(appearance)
53
55
  },
package/dist/cjs/constants.js CHANGED
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
4
4
  Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
- exports.typesMapping = exports.VAR_SECONDARY_TEXT_COLOR = void 0;
7
+ exports.typesMapping = void 0;
8
8
  var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
9
9
  var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
10
10
  var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
@@ -30,5 +30,4 @@ var typesMapping = exports.typesMapping = {
30
30
  icon: _error.default,
31
31
  defaultLabel: 'error inline message'
32
32
  }
33
- };
34
- var VAR_SECONDARY_TEXT_COLOR = exports.VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
33
+ };
package/dist/es2019/components/inline-message/index.js CHANGED
@@ -3,25 +3,11 @@ 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 { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
7
- import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
6
+ import { UNSAFE_LAYERING } from '@atlaskit/layering';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
+ import { Inline, Text } from '@atlaskit/primitives';
9
+ import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
8
10
  import MessageIcon from '../message-icon';
9
- const buttonContentsStyles = css({
10
- display: 'flex',
11
- alignItems: 'center',
12
- textDecoration: 'none'
13
- });
14
- const titleStyles = css({
15
- padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
16
- fontWeight: "var(--ds-font-weight-medium, 500)"
17
- });
18
- const textStyles = css({
19
- padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
20
- color: `var(${VAR_SECONDARY_TEXT_COLOR})`,
21
- overflow: 'hidden',
22
- textOverflow: 'ellipsis',
23
- whiteSpace: 'nowrap'
24
- });
25
11
  const rootStyles = css({
26
12
  display: 'inline-block',
27
13
  maxWidth: '100%',
@@ -38,12 +24,6 @@ const rootStyles = css({
38
24
  '[data-ds--inline-message--button]': {
39
25
  textDecoration: 'underline'
40
26
  }
41
- },
42
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
43
- '[data-ds--inline-message--button]': {
44
- '&:active [data-ds--inline-message--secondary-text]': {
45
- color: `var(--ds-text-subtle, ${`var(${VAR_SECONDARY_TEXT_COLOR})`})`
46
- }
47
27
  }
48
28
  });
49
29
  const iconColor = appearance => {
@@ -102,11 +82,15 @@ const InlineMessage = ({
102
82
  appearance = type;
103
83
  }
104
84
  return jsx("div", {
105
- css: rootStyles,
85
+ css: rootStyles
86
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
87
+ ,
106
88
  style: {
107
89
  '--icon-accent-color': iconColor(appearance)
108
90
  },
109
91
  "data-testid": testId
92
+ }, jsx(UNSAFE_LAYERING, {
93
+ isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
110
94
  }, jsx(InlineDialog, {
111
95
  onClose: onCloseDialog,
112
96
  content: children,
@@ -120,25 +104,23 @@ const InlineMessage = ({
120
104
  spacing: "none",
121
105
  testId: testId && `${testId}--button`,
122
106
  "aria-expanded": isOpen
123
- }, jsx("div", {
124
- css: buttonContentsStyles
107
+ }, jsx(Inline, {
108
+ space: "space.050",
109
+ alignBlock: "center"
125
110
  }, jsx(MessageIcon, {
126
111
  isOpen: isOpen,
127
112
  appearance: appearance,
128
113
  label: iconLabel
129
- }), title && jsx("span", {
130
- style: {
131
- color: `var(--ds-text, ${N600})`
132
- },
133
- css: titleStyles,
134
- "data-testid": testId && `${testId}--title`
135
- }, title), secondaryText && jsx("span", {
136
- "data-ds--inline-message--secondary-text": true,
137
- style: {
138
- [VAR_SECONDARY_TEXT_COLOR]: `var(--ds-text-subtlest, ${N300})`
139
- },
140
- css: textStyles,
141
- "data-testid": testId && `${testId}--text`
142
- }, secondaryText)))));
114
+ }), jsx(Inline, {
115
+ space: "space.100"
116
+ }, title && jsx(Text, {
117
+ weight: "medium",
118
+ testId: testId && `${testId}--title`
119
+ }, title), secondaryText && jsx(Text, {
120
+ weight: "medium",
121
+ color: "color.text.subtlest",
122
+ maxLines: 1,
123
+ testId: testId && `${testId}--text`
124
+ }, secondaryText)))))));
143
125
  };
144
126
  export default InlineMessage;
package/dist/es2019/components/message-icon/index.js CHANGED
@@ -45,7 +45,9 @@ const SelectedIcon = ({
45
45
  }
46
46
  } = typesMapping;
47
47
  return jsx("span", {
48
- "data-ds--inline-message--icon": true,
48
+ "data-ds--inline-message--icon": true
49
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
50
+ ,
49
51
  style: {
50
52
  '--icon-color': iconColor(appearance)
51
53
  },
package/dist/es2019/constants.js CHANGED
@@ -23,5 +23,4 @@ export const typesMapping = {
23
23
  icon: ErrorIcon,
24
24
  defaultLabel: 'error inline message'
25
25
  }
26
- };
27
- export const VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
26
+ };
package/dist/esm/components/inline-message/index.js CHANGED
@@ -1,29 +1,14 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
1
  import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
2
  /** @jsx jsx */
4
3
  import { useCallback, useState } from 'react';
5
4
  import { css, jsx } from '@emotion/react';
6
5
  import Button from '@atlaskit/button/custom-theme-button';
7
6
  import InlineDialog from '@atlaskit/inline-dialog';
8
- import { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
9
- import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
7
+ import { UNSAFE_LAYERING } from '@atlaskit/layering';
8
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
+ import { Inline, Text } from '@atlaskit/primitives';
10
+ import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
10
11
  import MessageIcon from '../message-icon';
11
- var buttonContentsStyles = css({
12
- display: 'flex',
13
- alignItems: 'center',
14
- textDecoration: 'none'
15
- });
16
- var titleStyles = css({
17
- padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
18
- fontWeight: "var(--ds-font-weight-medium, 500)"
19
- });
20
- var textStyles = css({
21
- padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
22
- color: "var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"),
23
- overflow: 'hidden',
24
- textOverflow: 'ellipsis',
25
- whiteSpace: 'nowrap'
26
- });
27
12
  var rootStyles = css({
28
13
  display: 'inline-block',
29
14
  maxWidth: '100%',
@@ -40,12 +25,6 @@ var rootStyles = css({
40
25
  '[data-ds--inline-message--button]': {
41
26
  textDecoration: 'underline'
42
27
  }
43
- },
44
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
45
- '[data-ds--inline-message--button]': {
46
- '&:active [data-ds--inline-message--secondary-text]': {
47
- color: "var(--ds-text-subtle, ".concat("var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"), ")")
48
- }
49
28
  }
50
29
  });
51
30
  var iconColor = function iconColor(appearance) {
@@ -114,11 +93,15 @@ var InlineMessage = function InlineMessage(_ref) {
114
93
  appearance = type;
115
94
  }
116
95
  return jsx("div", {
117
- css: rootStyles,
96
+ css: rootStyles
97
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
98
+ ,
118
99
  style: {
119
100
  '--icon-accent-color': iconColor(appearance)
120
101
  },
121
102
  "data-testid": testId
103
+ }, jsx(UNSAFE_LAYERING, {
104
+ isDisabled: getBooleanFF('platform.design-system-team.inline-message-layering_wfp1p') ? !isOpen : true
122
105
  }, jsx(InlineDialog, {
123
106
  onClose: onCloseDialog,
124
107
  content: children,
@@ -132,23 +115,23 @@ var InlineMessage = function InlineMessage(_ref) {
132
115
  spacing: "none",
133
116
  testId: testId && "".concat(testId, "--button"),
134
117
  "aria-expanded": isOpen
135
- }, jsx("div", {
136
- css: buttonContentsStyles
118
+ }, jsx(Inline, {
119
+ space: "space.050",
120
+ alignBlock: "center"
137
121
  }, jsx(MessageIcon, {
138
122
  isOpen: isOpen,
139
123
  appearance: appearance,
140
124
  label: iconLabel
141
- }), title && jsx("span", {
142
- style: {
143
- color: "var(--ds-text, ".concat(N600, ")")
144
- },
145
- css: titleStyles,
146
- "data-testid": testId && "".concat(testId, "--title")
147
- }, title), secondaryText && jsx("span", {
148
- "data-ds--inline-message--secondary-text": true,
149
- style: _defineProperty({}, VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(N300, ")")),
150
- css: textStyles,
151
- "data-testid": testId && "".concat(testId, "--text")
152
- }, secondaryText)))));
125
+ }), jsx(Inline, {
126
+ space: "space.100"
127
+ }, title && jsx(Text, {
128
+ weight: "medium",
129
+ testId: testId && "".concat(testId, "--title")
130
+ }, title), secondaryText && jsx(Text, {
131
+ weight: "medium",
132
+ color: "color.text.subtlest",
133
+ maxLines: 1,
134
+ testId: testId && "".concat(testId, "--text")
135
+ }, secondaryText)))))));
153
136
  };
154
137
  export default InlineMessage;
package/dist/esm/components/message-icon/index.js CHANGED
@@ -41,7 +41,9 @@ var SelectedIcon = function SelectedIcon(_ref) {
41
41
  Icon = _typesMapping$appeara.icon,
42
42
  defaultLabel = _typesMapping$appeara.defaultLabel;
43
43
  return jsx("span", {
44
- "data-ds--inline-message--icon": true,
44
+ "data-ds--inline-message--icon": true
45
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
46
+ ,
45
47
  style: {
46
48
  '--icon-color': iconColor(appearance)
47
49
  },
package/dist/esm/constants.js CHANGED
@@ -23,5 +23,4 @@ export var typesMapping = {
23
23
  icon: ErrorIcon,
24
24
  defaultLabel: 'error inline message'
25
25
  }
26
- };
27
- export var VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
26
+ };
package/dist/types/constants.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  import type { IconAppearanceMap } from './types';
2
2
  export declare const typesMapping: IconAppearanceMap;
3
- export declare const VAR_SECONDARY_TEXT_COLOR = "--secondary-text-color";
package/dist/types/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ComponentType } from 'react';
1
+ import { type ComponentType } from 'react';
2
2
  import type { GlyphProps } from '@atlaskit/icon';
3
3
  export interface Icon {
4
4
  defaultLabel: string;
package/dist/types-ts4.5/constants.d.ts CHANGED
@@ -1,3 +1,2 @@
1
1
  import type { IconAppearanceMap } from './types';
2
2
  export declare const typesMapping: IconAppearanceMap;
3
- export declare const VAR_SECONDARY_TEXT_COLOR = "--secondary-text-color";
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ComponentType } from 'react';
1
+ import { type ComponentType } from 'react';
2
2
  import type { GlyphProps } from '@atlaskit/icon';
3
3
  export interface Icon {
4
4
  defaultLabel: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "12.1.0",
3
+ "version": "12.1.2",
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/"
@@ -32,11 +32,14 @@
32
32
  "runReact18": true
33
33
  },
34
34
  "dependencies": {
35
- "@atlaskit/button": "^17.14.0",
36
- "@atlaskit/icon": "^22.1.0",
37
- "@atlaskit/inline-dialog": "^14.0.0",
38
- "@atlaskit/theme": "^12.7.0",
39
- "@atlaskit/tokens": "^1.45.0",
35
+ "@atlaskit/button": "^17.17.0",
36
+ "@atlaskit/icon": "^22.3.0",
37
+ "@atlaskit/inline-dialog": "^14.1.0",
38
+ "@atlaskit/layering": "^0.3.0",
39
+ "@atlaskit/platform-feature-flags": "^0.2.0",
40
+ "@atlaskit/primitives": "^6.4.0",
41
+ "@atlaskit/theme": "^12.8.0",
42
+ "@atlaskit/tokens": "^1.49.0",
40
43
  "@babel/runtime": "^7.0.0",
41
44
  "@emotion/react": "^11.7.1"
42
45
  },
@@ -50,7 +53,6 @@
50
53
  "@atlaskit/ds-lib": "^2.3.0",
51
54
  "@atlaskit/ssr": "*",
52
55
  "@atlaskit/visual-regression": "*",
53
- "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
54
56
  "@emotion/jest": "^11.8.0",
55
57
  "@testing-library/react": "^12.1.5",
56
58
  "@testing-library/user-event": "^14.4.3",
@@ -90,6 +92,14 @@
90
92
  ]
91
93
  }
92
94
  },
93
- "homepage": "https://atlassian.design/components/inline-message/",
94
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
95
+ "platform-feature-flags": {
96
+ "platform.design-system-team.layering_qmiw3": {
97
+ "type": "boolean",
98
+ "referenceOnly": true
99
+ },
100
+ "platform.design-system-team.inline-message-layering_wfp1p": {
101
+ "type": "boolean"
102
+ }
103
+ },
104
+ "homepage": "https://atlassian.design/components/inline-message/"
95
105
  }