@atlaskit/modal-dialog 14.9.5 → 14.10.1
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 +16 -0
- package/dist/cjs/internal/components/modal-wrapper.js +1 -1
- package/dist/cjs/modal-body.compiled.css +1 -1
- package/dist/cjs/modal-body.js +3 -5
- package/dist/cjs/modal-title.compiled.css +1 -1
- package/dist/cjs/modal-title.js +1 -1
- package/dist/es2019/internal/components/modal-wrapper.js +1 -1
- package/dist/es2019/modal-body.compiled.css +1 -1
- package/dist/es2019/modal-body.js +3 -5
- package/dist/es2019/modal-title.compiled.css +1 -1
- package/dist/es2019/modal-title.js +1 -1
- package/dist/esm/internal/components/modal-wrapper.js +1 -1
- package/dist/esm/modal-body.compiled.css +1 -1
- package/dist/esm/modal-body.js +3 -5
- package/dist/esm/modal-title.compiled.css +1 -1
- package/dist/esm/modal-title.js +1 -1
- package/package.json +8 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 14.10.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 14.10.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`a6376c3a0cd91`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a6376c3a0cd91) -
|
|
14
|
+
Modal body now explicitly sets the font style to use typography tokens, instead of relying on the
|
|
15
|
+
CSS reset to be present. This change is no longer behind a feature flag.
|
|
16
|
+
|
|
17
|
+
This change was previously reverted and is being redone.
|
|
18
|
+
|
|
3
19
|
## 14.9.5
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -88,7 +88,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
|
|
|
88
88
|
action: 'closed',
|
|
89
89
|
componentName: 'modalDialog',
|
|
90
90
|
packageName: "@atlaskit/modal-dialog",
|
|
91
|
-
packageVersion: "14.
|
|
91
|
+
packageVersion: "14.10.0"
|
|
92
92
|
});
|
|
93
93
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
94
94
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
|
|
3
3
|
._1rjcv77o{padding-block:var(--ds-space-025,2px)}
|
|
4
4
|
._16jlkb7n{flex-grow:1}
|
package/dist/cjs/modal-body.js
CHANGED
|
@@ -10,13 +10,11 @@ require("./modal-body.compiled.css");
|
|
|
10
10
|
var _runtime = require("@compiled/react/runtime");
|
|
11
11
|
var _react = _interopRequireDefault(require("react"));
|
|
12
12
|
var _reactScrolllock = require("react-scrolllock");
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
13
|
var _hooks = require("./hooks");
|
|
15
14
|
var _scrollContainer = _interopRequireDefault(require("./internal/components/scroll-container"));
|
|
16
15
|
var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
|
|
17
16
|
var styles = {
|
|
18
|
-
root: "_16jlkb7n _1o9zkb7n _i0dl1wug",
|
|
19
|
-
font: "_11c82smr",
|
|
17
|
+
root: "_16jlkb7n _1o9zkb7n _i0dl1wug _11c8fhey",
|
|
20
18
|
paddingBlock: "_1rjcv77o",
|
|
21
19
|
paddingInline: "_18zr1ejb"
|
|
22
20
|
};
|
|
@@ -40,7 +38,7 @@ var ModalBody = function ModalBody(props) {
|
|
|
40
38
|
var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
|
|
41
39
|
return shouldScrollInViewport ? /*#__PURE__*/_react.default.createElement("div", {
|
|
42
40
|
"data-testid": testId,
|
|
43
|
-
className: (0, _runtime.ax)([styles.root, hasInlinePadding && styles.paddingInline
|
|
41
|
+
className: (0, _runtime.ax)([styles.root, hasInlinePadding && styles.paddingInline])
|
|
44
42
|
}, children) : /*#__PURE__*/_react.default.createElement(_reactScrolllock.TouchScrollable, null, /*#__PURE__*/_react.default.createElement(_scrollContainer.default, {
|
|
45
43
|
testId: userDefinedTestId || modalTestId
|
|
46
44
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -50,7 +48,7 @@ var ModalBody = function ModalBody(props) {
|
|
|
50
48
|
* Adding block padding for scroll keylines, which are only shown when the scrolling
|
|
51
49
|
* is on the container.
|
|
52
50
|
*/
|
|
53
|
-
styles.paddingBlock, hasInlinePadding && styles.paddingInline
|
|
51
|
+
styles.paddingBlock, hasInlinePadding && styles.paddingInline])
|
|
54
52
|
}, children)));
|
|
55
53
|
};
|
|
56
54
|
var _default = exports.default = ModalBody;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
3
3
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
|
4
4
|
._16jlidpf{flex-grow:0}
|
package/dist/cjs/modal-title.js
CHANGED
|
@@ -54,7 +54,7 @@ var ModalTitle = function ModalTitle(props) {
|
|
|
54
54
|
var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--title");
|
|
55
55
|
return /*#__PURE__*/React.createElement("h1", {
|
|
56
56
|
"data-testid": testId,
|
|
57
|
-
className: (0, _runtime.ax)(["_zulpu2gc
|
|
57
|
+
className: (0, _runtime.ax)(["_zulpu2gc _11c81af2 _1e0c1txw _1ul9idpf _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t"])
|
|
58
58
|
}, appearance && /*#__PURE__*/React.createElement(TitleIcon, {
|
|
59
59
|
appearance: appearance
|
|
60
60
|
}), /*#__PURE__*/React.createElement("span", {
|
|
@@ -75,7 +75,7 @@ const InternalModalWrapper = props => {
|
|
|
75
75
|
action: 'closed',
|
|
76
76
|
componentName: 'modalDialog',
|
|
77
77
|
packageName: "@atlaskit/modal-dialog",
|
|
78
|
-
packageVersion: "14.
|
|
78
|
+
packageVersion: "14.10.0"
|
|
79
79
|
});
|
|
80
80
|
const onBlanketClicked = useCallback(e => {
|
|
81
81
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
|
|
3
3
|
._1rjcv77o{padding-block:var(--ds-space-025,2px)}
|
|
4
4
|
._16jlkb7n{flex-grow:1}
|
|
@@ -3,13 +3,11 @@ import "./modal-body.compiled.css";
|
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { TouchScrollable } from 'react-scrolllock';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { useModal } from './hooks';
|
|
8
7
|
import ScrollContainer from './internal/components/scroll-container';
|
|
9
8
|
import useScroll from './internal/hooks/use-scroll';
|
|
10
9
|
const styles = {
|
|
11
|
-
root: "_16jlkb7n _1o9zkb7n _i0dl1wug",
|
|
12
|
-
font: "_11c82smr",
|
|
10
|
+
root: "_16jlkb7n _1o9zkb7n _i0dl1wug _11c8fhey",
|
|
13
11
|
paddingBlock: "_1rjcv77o",
|
|
14
12
|
paddingInline: "_18zr1ejb"
|
|
15
13
|
};
|
|
@@ -35,7 +33,7 @@ const ModalBody = props => {
|
|
|
35
33
|
const testId = userDefinedTestId || modalTestId && `${modalTestId}--body`;
|
|
36
34
|
return shouldScrollInViewport ? /*#__PURE__*/React.createElement("div", {
|
|
37
35
|
"data-testid": testId,
|
|
38
|
-
className: ax([styles.root, hasInlinePadding && styles.paddingInline
|
|
36
|
+
className: ax([styles.root, hasInlinePadding && styles.paddingInline])
|
|
39
37
|
}, children) : /*#__PURE__*/React.createElement(TouchScrollable, null, /*#__PURE__*/React.createElement(ScrollContainer, {
|
|
40
38
|
testId: userDefinedTestId || modalTestId
|
|
41
39
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -45,7 +43,7 @@ const ModalBody = props => {
|
|
|
45
43
|
* Adding block padding for scroll keylines, which are only shown when the scrolling
|
|
46
44
|
* is on the container.
|
|
47
45
|
*/
|
|
48
|
-
styles.paddingBlock, hasInlinePadding && styles.paddingInline
|
|
46
|
+
styles.paddingBlock, hasInlinePadding && styles.paddingInline])
|
|
49
47
|
}, children)));
|
|
50
48
|
};
|
|
51
49
|
export default ModalBody;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
3
3
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
|
4
4
|
._16jlidpf{flex-grow:0}
|
|
@@ -48,7 +48,7 @@ const ModalTitle = props => {
|
|
|
48
48
|
const testId = userDefinedTestId || modalTestId && `${modalTestId}--title`;
|
|
49
49
|
return /*#__PURE__*/React.createElement("h1", {
|
|
50
50
|
"data-testid": testId,
|
|
51
|
-
className: ax(["_zulpu2gc
|
|
51
|
+
className: ax(["_zulpu2gc _11c81af2 _1e0c1txw _1ul9idpf _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t"])
|
|
52
52
|
}, appearance && /*#__PURE__*/React.createElement(TitleIcon, {
|
|
53
53
|
appearance: appearance
|
|
54
54
|
}), /*#__PURE__*/React.createElement("span", {
|
|
@@ -79,7 +79,7 @@ var InternalModalWrapper = function InternalModalWrapper(props) {
|
|
|
79
79
|
action: 'closed',
|
|
80
80
|
componentName: 'modalDialog',
|
|
81
81
|
packageName: "@atlaskit/modal-dialog",
|
|
82
|
-
packageVersion: "14.
|
|
82
|
+
packageVersion: "14.10.0"
|
|
83
83
|
});
|
|
84
84
|
var onBlanketClicked = useCallback(function (e) {
|
|
85
85
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._18zr1ejb{padding-inline:var(--ds-space-300,24px)}
|
|
3
3
|
._1rjcv77o{padding-block:var(--ds-space-025,2px)}
|
|
4
4
|
._16jlkb7n{flex-grow:1}
|
package/dist/esm/modal-body.js
CHANGED
|
@@ -3,13 +3,11 @@ import "./modal-body.compiled.css";
|
|
|
3
3
|
import { ax, ix } from "@compiled/react/runtime";
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { TouchScrollable } from 'react-scrolllock';
|
|
6
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
6
|
import { useModal } from './hooks';
|
|
8
7
|
import ScrollContainer from './internal/components/scroll-container';
|
|
9
8
|
import useScroll from './internal/hooks/use-scroll';
|
|
10
9
|
var styles = {
|
|
11
|
-
root: "_16jlkb7n _1o9zkb7n _i0dl1wug",
|
|
12
|
-
font: "_11c82smr",
|
|
10
|
+
root: "_16jlkb7n _1o9zkb7n _i0dl1wug _11c8fhey",
|
|
13
11
|
paddingBlock: "_1rjcv77o",
|
|
14
12
|
paddingInline: "_18zr1ejb"
|
|
15
13
|
};
|
|
@@ -33,7 +31,7 @@ var ModalBody = function ModalBody(props) {
|
|
|
33
31
|
var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
|
|
34
32
|
return shouldScrollInViewport ? /*#__PURE__*/React.createElement("div", {
|
|
35
33
|
"data-testid": testId,
|
|
36
|
-
className: ax([styles.root, hasInlinePadding && styles.paddingInline
|
|
34
|
+
className: ax([styles.root, hasInlinePadding && styles.paddingInline])
|
|
37
35
|
}, children) : /*#__PURE__*/React.createElement(TouchScrollable, null, /*#__PURE__*/React.createElement(ScrollContainer, {
|
|
38
36
|
testId: userDefinedTestId || modalTestId
|
|
39
37
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -43,7 +41,7 @@ var ModalBody = function ModalBody(props) {
|
|
|
43
41
|
* Adding block padding for scroll keylines, which are only shown when the scrolling
|
|
44
42
|
* is on the container.
|
|
45
43
|
*/
|
|
46
|
-
styles.paddingBlock, hasInlinePadding && styles.paddingInline
|
|
44
|
+
styles.paddingBlock, hasInlinePadding && styles.paddingInline])
|
|
47
45
|
}, children)));
|
|
48
46
|
};
|
|
49
47
|
export default ModalBody;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c81af2{font:var(--ds-font-heading-medium,normal 653 20px/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
3
3
|
._12l2ze3t{margin-inline-end:var(--ds-space-0,0)}
|
|
4
4
|
._16jlidpf{flex-grow:0}
|
package/dist/esm/modal-title.js
CHANGED
|
@@ -45,7 +45,7 @@ var ModalTitle = function ModalTitle(props) {
|
|
|
45
45
|
var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--title");
|
|
46
46
|
return /*#__PURE__*/React.createElement("h1", {
|
|
47
47
|
"data-testid": testId,
|
|
48
|
-
className: ax(["_zulpu2gc
|
|
48
|
+
className: ax(["_zulpu2gc _11c81af2 _1e0c1txw _1ul9idpf _6rthze3t _1pfhze3t _12l2ze3t _ahbqze3t"])
|
|
49
49
|
}, appearance && /*#__PURE__*/React.createElement(TitleIcon, {
|
|
50
50
|
appearance: appearance
|
|
51
51
|
}), /*#__PURE__*/React.createElement("span", {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.10.1",
|
|
4
4
|
"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
"@atlaskit/layering": "^3.6.0",
|
|
37
37
|
"@atlaskit/motion": "^5.3.0",
|
|
38
38
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
39
|
-
"@atlaskit/portal": "^5.
|
|
39
|
+
"@atlaskit/portal": "^5.2.0",
|
|
40
40
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
41
|
-
"@atlaskit/primitives": "^17.
|
|
41
|
+
"@atlaskit/primitives": "^17.1.0",
|
|
42
42
|
"@atlaskit/theme": "^21.0.0",
|
|
43
|
-
"@atlaskit/tokens": "^
|
|
43
|
+
"@atlaskit/tokens": "^10.0.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@compiled/react": "^0.18.6",
|
|
46
46
|
"bind-event-listener": "^3.0.0",
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
"@atlaskit/checkbox": "^17.3.0",
|
|
63
63
|
"@atlaskit/code": "^17.4.0",
|
|
64
64
|
"@atlaskit/datetime-picker": "^17.4.0",
|
|
65
|
-
"@atlaskit/docs": "^11.
|
|
65
|
+
"@atlaskit/docs": "^11.3.0",
|
|
66
66
|
"@atlaskit/dropdown-menu": "^16.4.0",
|
|
67
67
|
"@atlaskit/flag": "^17.8.0",
|
|
68
68
|
"@atlaskit/form": "^15.3.0",
|
|
@@ -71,13 +71,13 @@
|
|
|
71
71
|
"@atlaskit/popup": "^4.13.0",
|
|
72
72
|
"@atlaskit/radio": "^8.4.0",
|
|
73
73
|
"@atlaskit/section-message": "^8.12.0",
|
|
74
|
-
"@atlaskit/select": "^21.
|
|
74
|
+
"@atlaskit/select": "^21.7.0",
|
|
75
75
|
"@atlaskit/spotlight": "^0.10.0",
|
|
76
76
|
"@atlaskit/textfield": "^8.2.0",
|
|
77
|
-
"@atlaskit/tooltip": "^20.
|
|
77
|
+
"@atlaskit/tooltip": "^20.14.0",
|
|
78
78
|
"@atlassian/ssr-tests": "workspace:^",
|
|
79
79
|
"@testing-library/dom": "^10.1.0",
|
|
80
|
-
"@testing-library/react": "^
|
|
80
|
+
"@testing-library/react": "^16.3.0",
|
|
81
81
|
"@testing-library/user-event": "^14.4.3",
|
|
82
82
|
"@types/raf-schd": "^4.0.1",
|
|
83
83
|
"react-dom": "^18.2.0",
|
|
@@ -126,9 +126,6 @@
|
|
|
126
126
|
"platform_dst_autofocus-never-false": {
|
|
127
127
|
"type": "boolean"
|
|
128
128
|
},
|
|
129
|
-
"platform_ads_explicit_font_styles": {
|
|
130
|
-
"type": "boolean"
|
|
131
|
-
},
|
|
132
129
|
"platform-dst-shape-theme-default": {
|
|
133
130
|
"type": "boolean"
|
|
134
131
|
}
|