@atlaskit/inline-message 15.3.14 → 15.4.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 (8) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/components/inline-message/index.compiled.css +4 -0
  3. package/dist/cjs/components/inline-message/index.js +4 -3
  4. package/dist/es2019/components/inline-message/index.compiled.css +4 -0
  5. package/dist/es2019/components/inline-message/index.js +4 -3
  6. package/dist/esm/components/inline-message/index.compiled.css +4 -0
  7. package/dist/esm/components/inline-message/index.js +4 -3
  8. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/inline-message
2
2
 
3
+ ## 15.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`0dc4206204f86`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0dc4206204f86) -
8
+ Fixes accessibility issue when tabbing into inline-message. Additionally, behind a feature flag,
9
+ adds height and width constraints to inline-message in line with ADS recommendations.
10
+
3
11
  ## 15.3.14
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/components/inline-message/index.compiled.css CHANGED
@@ -1,19 +1,23 @@
1
1
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
3
3
  ._1rjcze3t{padding-block:var(--ds-space-0,0)}
4
+ ._18m91wug{overflow-y:auto}
4
5
  ._1bsb1wug{width:auto}
5
6
  ._1e0c116y{display:inline-flex}
6
7
  ._1e0c1o8l{display:inline-block}
7
8
  ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
9
+ ._1reo1wug{overflow-x:auto}
8
10
  ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
9
11
  ._4cvr1q9y{align-items:baseline}
10
12
  ._4t3i1wug{height:auto}
11
13
  ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
12
14
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
13
15
  ._bozg1ejb{padding-inline-start:var(--ds-space-300,24px)}
16
+ ._c71llti4{max-height:28pc}
14
17
  ._kqswh2mm{position:relative}
15
18
  ._o5721q9c{white-space:nowrap}
16
19
  ._p12f1osq{max-width:100%}
20
+ ._p12flti4{max-width:28pc}
17
21
  ._s7n41q9y{vertical-align:baseline}
18
22
  ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
19
23
  ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
package/dist/cjs/components/inline-message/index.js CHANGED
@@ -14,7 +14,9 @@ var _runtime = require("@compiled/react/runtime");
14
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
15
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
16
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
17
+ var _react2 = require("@compiled/react");
17
18
  var _useId = require("@atlaskit/ds-lib/use-id");
19
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
20
  var _popup = _interopRequireDefault(require("@atlaskit/popup"));
19
21
  var _compiled = require("@atlaskit/primitives/compiled");
20
22
  var _colors = require("@atlaskit/theme/colors");
@@ -23,6 +25,7 @@ var _excluded = ["ref"];
23
25
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
24
26
  var styles = {
25
27
  contentStyles: "_bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi",
28
+ heightAndWidthConstraints: "_1reo1wug _18m91wug _p12flti4 _c71llti4",
26
29
  rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _y2mv1w7i",
27
30
  pressableStyles: "_11c82smr _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syaz1gjq _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
28
31
  };
@@ -91,7 +94,7 @@ var InlineMessage = function InlineMessage(_ref) {
91
94
  onClose: onCloseDialog,
92
95
  content: function content() {
93
96
  return /*#__PURE__*/React.createElement(_compiled.Box, {
94
- xcss: styles.contentStyles
97
+ xcss: (0, _react2.cx)(styles.contentStyles, (0, _platformFeatureFlags.fg)('add-max-width-and-height-to-inline-message') && styles.heightAndWidthConstraints)
95
98
  }, children);
96
99
  },
97
100
  isOpen: isOpen,
@@ -101,8 +104,6 @@ var InlineMessage = function InlineMessage(_ref) {
101
104
  shouldRenderToParent: true,
102
105
  role: "dialog",
103
106
  titleId: id,
104
- shouldDisableFocusLock: true,
105
- autoFocus: false,
106
107
  trigger: function trigger(_ref2) {
107
108
  var ref = _ref2.ref,
108
109
  triggerProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
package/dist/es2019/components/inline-message/index.compiled.css CHANGED
@@ -1,19 +1,23 @@
1
1
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
3
3
  ._1rjcze3t{padding-block:var(--ds-space-0,0)}
4
+ ._18m91wug{overflow-y:auto}
4
5
  ._1bsb1wug{width:auto}
5
6
  ._1e0c116y{display:inline-flex}
6
7
  ._1e0c1o8l{display:inline-block}
7
8
  ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
9
+ ._1reo1wug{overflow-x:auto}
8
10
  ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
9
11
  ._4cvr1q9y{align-items:baseline}
10
12
  ._4t3i1wug{height:auto}
11
13
  ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
12
14
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
13
15
  ._bozg1ejb{padding-inline-start:var(--ds-space-300,24px)}
16
+ ._c71llti4{max-height:28pc}
14
17
  ._kqswh2mm{position:relative}
15
18
  ._o5721q9c{white-space:nowrap}
16
19
  ._p12f1osq{max-width:100%}
20
+ ._p12flti4{max-width:28pc}
17
21
  ._s7n41q9y{vertical-align:baseline}
18
22
  ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
19
23
  ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
package/dist/es2019/components/inline-message/index.js CHANGED
@@ -4,13 +4,16 @@ import "./index.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { useCallback, useState } from 'react';
7
+ import { cx } from '@compiled/react';
7
8
  import { useId } from '@atlaskit/ds-lib/use-id';
9
+ import { fg } from '@atlaskit/platform-feature-flags';
8
10
  import Popup from '@atlaskit/popup';
9
11
  import { Box, Inline, Pressable, Text } from '@atlaskit/primitives/compiled';
10
12
  import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
11
13
  import MessageIcon from '../message-icon';
12
14
  const styles = {
13
15
  contentStyles: "_bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi",
16
+ heightAndWidthConstraints: "_1reo1wug _18m91wug _p12flti4 _c71llti4",
14
17
  rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _y2mv1w7i",
15
18
  pressableStyles: "_11c82smr _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syaz1gjq _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
16
19
  };
@@ -67,7 +70,7 @@ const InlineMessage = ({
67
70
  }, /*#__PURE__*/React.createElement(Popup, {
68
71
  onClose: onCloseDialog,
69
72
  content: () => /*#__PURE__*/React.createElement(Box, {
70
- xcss: styles.contentStyles
73
+ xcss: cx(styles.contentStyles, fg('add-max-width-and-height-to-inline-message') && styles.heightAndWidthConstraints)
71
74
  }, children),
72
75
  isOpen: isOpen,
73
76
  placement: placement,
@@ -76,8 +79,6 @@ const InlineMessage = ({
76
79
  shouldRenderToParent: true,
77
80
  role: "dialog",
78
81
  titleId: id,
79
- shouldDisableFocusLock: true,
80
- autoFocus: false,
81
82
  trigger: ({
82
83
  ref,
83
84
  ...triggerProps
package/dist/esm/components/inline-message/index.compiled.css CHANGED
@@ -1,19 +1,23 @@
1
1
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
2
  ._18zrze3t{padding-inline:var(--ds-space-0,0)}
3
3
  ._1rjcze3t{padding-block:var(--ds-space-0,0)}
4
+ ._18m91wug{overflow-y:auto}
4
5
  ._1bsb1wug{width:auto}
5
6
  ._1e0c116y{display:inline-flex}
6
7
  ._1e0c1o8l{display:inline-block}
7
8
  ._1q51pxbi{padding-block-start:var(--ds-space-200,1pc)}
9
+ ._1reo1wug{overflow-x:auto}
8
10
  ._1yyu1kum:hover [data-ds--inline-message--icon]{color:var(--icon-accent-color)}
9
11
  ._4cvr1q9y{align-items:baseline}
10
12
  ._4t3i1wug{height:auto}
11
13
  ._85i5pxbi{padding-block-end:var(--ds-space-200,1pc)}
12
14
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
13
15
  ._bozg1ejb{padding-inline-start:var(--ds-space-300,24px)}
16
+ ._c71llti4{max-height:28pc}
14
17
  ._kqswh2mm{position:relative}
15
18
  ._o5721q9c{white-space:nowrap}
16
19
  ._p12f1osq{max-width:100%}
20
+ ._p12flti4{max-width:28pc}
17
21
  ._s7n41q9y{vertical-align:baseline}
18
22
  ._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
19
23
  ._x5v913wx{--icon-accent-color:var(--ds-icon-discovery,#8777d9)}
package/dist/esm/components/inline-message/index.js CHANGED
@@ -7,13 +7,16 @@ import "./index.compiled.css";
7
7
  import * as React from 'react';
8
8
  import { ax, ix } from "@compiled/react/runtime";
9
9
  import { useCallback, useState } from 'react';
10
+ import { cx } from '@compiled/react';
10
11
  import { useId } from '@atlaskit/ds-lib/use-id';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
11
13
  import Popup from '@atlaskit/popup';
12
14
  import { Box, Inline, Pressable, Text } from '@atlaskit/primitives/compiled';
13
15
  import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
14
16
  import MessageIcon from '../message-icon';
15
17
  var styles = {
16
18
  contentStyles: "_bozg1ejb _y4ti1ejb _1q51pxbi _85i5pxbi",
19
+ heightAndWidthConstraints: "_1reo1wug _18m91wug _p12flti4 _c71llti4",
17
20
  rootStyles: "_1e0c1o8l _p12f1osq _1yyu1kum _y2mv1w7i",
18
21
  pressableStyles: "_11c82smr _1rjcze3t _18zrze3t _1e0c116y _bfhksm61 _syaz1gjq _o5721q9c _kqswh2mm _4cvr1q9y _p12f1osq _4t3i1wug _1bsb1wug _s7n41q9y _9oik1r31 _1bnx8stv _jf4cnqa1"
19
22
  };
@@ -82,7 +85,7 @@ var InlineMessage = function InlineMessage(_ref) {
82
85
  onClose: onCloseDialog,
83
86
  content: function content() {
84
87
  return /*#__PURE__*/React.createElement(Box, {
85
- xcss: styles.contentStyles
88
+ xcss: cx(styles.contentStyles, fg('add-max-width-and-height-to-inline-message') && styles.heightAndWidthConstraints)
86
89
  }, children);
87
90
  },
88
91
  isOpen: isOpen,
@@ -92,8 +95,6 @@ var InlineMessage = function InlineMessage(_ref) {
92
95
  shouldRenderToParent: true,
93
96
  role: "dialog",
94
97
  titleId: id,
95
- shouldDisableFocusLock: true,
96
- autoFocus: false,
97
98
  trigger: function trigger(_ref2) {
98
99
  var ref = _ref2.ref,
99
100
  triggerProps = _objectWithoutProperties(_ref2, _excluded);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/inline-message",
3
- "version": "15.3.14",
3
+ "version": "15.4.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/"
@@ -46,7 +46,7 @@
46
46
  "@af/visual-regression": "workspace:^",
47
47
  "@atlaskit/docs": "^11.2.0",
48
48
  "@atlaskit/heading": "^5.2.0",
49
- "@atlaskit/modal-dialog": "^14.5.0",
49
+ "@atlaskit/modal-dialog": "^14.6.0",
50
50
  "@atlaskit/section-message": "^8.7.0",
51
51
  "@atlassian/ssr-tests": "^0.3.0",
52
52
  "@testing-library/react": "^13.4.0",
@@ -90,6 +90,9 @@
90
90
  "platform-feature-flags": {
91
91
  "dst-a11y__replace-anchor-with-link__design-system-": {
92
92
  "type": "boolean"
93
+ },
94
+ "add-max-width-and-height-to-inline-message": {
95
+ "type": "boolean"
93
96
  }
94
97
  }
95
98
  }