@atlaskit/modal-dialog 12.2.1 → 12.2.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.
- package/CHANGELOG.md +9 -0
- package/dist/cjs/internal/components/modal-dialog.js +2 -2
- package/dist/cjs/internal/constants.js +4 -4
- package/dist/cjs/modal-wrapper.js +1 -1
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/internal/components/modal-dialog.js +2 -2
- package/dist/es2019/internal/constants.js +4 -4
- package/dist/es2019/modal-wrapper.js +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/internal/components/modal-dialog.js +2 -2
- package/dist/esm/internal/constants.js +4 -4
- package/dist/esm/modal-wrapper.js +1 -1
- package/dist/esm/version.json +1 -1
- package/dist/types/internal/constants.d.ts +2 -2
- package/package.json +4 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 12.2.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
|
|
8
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - The no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when auto-fixing by correctly formatting token ids.
|
|
9
|
+
- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump raf-schd to latest (4.0.3), including better TS typings.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
3
12
|
## 12.2.1
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -49,7 +49,7 @@ var dialogStyles = (0, _core.css)({
|
|
|
49
49
|
maxHeight: '100vh',
|
|
50
50
|
flex: '1 1 auto',
|
|
51
51
|
flexDirection: 'column',
|
|
52
|
-
backgroundColor: "var(--ds-
|
|
52
|
+
backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
|
|
53
53
|
color: _constants.textColor,
|
|
54
54
|
pointerEvents: 'auto',
|
|
55
55
|
'@media (min-width: 480px)': {
|
|
@@ -58,7 +58,7 @@ var dialogStyles = (0, _core.css)({
|
|
|
58
58
|
marginRight: 'inherit',
|
|
59
59
|
marginLeft: 'inherit',
|
|
60
60
|
borderRadius: _constants.borderRadius,
|
|
61
|
-
boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
|
|
61
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
|
|
62
62
|
},
|
|
63
63
|
|
|
64
64
|
/**
|
|
@@ -35,12 +35,12 @@ var titleIconMargin = gridSize;
|
|
|
35
35
|
exports.titleIconMargin = titleIconMargin;
|
|
36
36
|
var keylineHeight = 2;
|
|
37
37
|
exports.keylineHeight = keylineHeight;
|
|
38
|
-
var keylineColor = "var(--ds-border
|
|
38
|
+
var keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
|
|
39
39
|
exports.keylineColor = keylineColor;
|
|
40
|
-
var textColor = "var(--ds-text
|
|
40
|
+
var textColor = "var(--ds-text, ".concat((0, _colors.text)(), ")");
|
|
41
41
|
exports.textColor = textColor;
|
|
42
42
|
var iconColor = {
|
|
43
|
-
danger: "var(--ds-
|
|
44
|
-
warning: "var(--ds-
|
|
43
|
+
danger: "var(--ds-icon-danger, ".concat(_colors.R400, ")"),
|
|
44
|
+
warning: "var(--ds-icon-warning, ".concat(_colors.Y400, ")")
|
|
45
45
|
};
|
|
46
46
|
exports.iconColor = iconColor;
|
|
@@ -86,7 +86,7 @@ var ModalWrapper = function ModalWrapper(props) {
|
|
|
86
86
|
action: 'closed',
|
|
87
87
|
componentName: 'modalDialog',
|
|
88
88
|
packageName: "@atlaskit/modal-dialog",
|
|
89
|
-
packageVersion: "12.2.
|
|
89
|
+
packageVersion: "12.2.2"
|
|
90
90
|
});
|
|
91
91
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
92
92
|
if (shouldCloseOnOverlayClick) {
|
package/dist/cjs/version.json
CHANGED
|
@@ -23,7 +23,7 @@ const dialogStyles = css({
|
|
|
23
23
|
maxHeight: '100vh',
|
|
24
24
|
flex: '1 1 auto',
|
|
25
25
|
flexDirection: 'column',
|
|
26
|
-
backgroundColor: `var(--ds-
|
|
26
|
+
backgroundColor: `var(--ds-surface-overlay, ${N0})`,
|
|
27
27
|
color: textColor,
|
|
28
28
|
pointerEvents: 'auto',
|
|
29
29
|
'@media (min-width: 480px)': {
|
|
@@ -32,7 +32,7 @@ const dialogStyles = css({
|
|
|
32
32
|
marginRight: 'inherit',
|
|
33
33
|
marginLeft: 'inherit',
|
|
34
34
|
borderRadius,
|
|
35
|
-
boxShadow: `var(--ds-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`
|
|
35
|
+
boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`
|
|
36
36
|
},
|
|
37
37
|
|
|
38
38
|
/**
|
|
@@ -18,9 +18,9 @@ export const padding = gridSize * 3;
|
|
|
18
18
|
export const footerItemGap = gridSize;
|
|
19
19
|
export const titleIconMargin = gridSize;
|
|
20
20
|
export const keylineHeight = 2;
|
|
21
|
-
export const keylineColor = `var(--ds-border
|
|
22
|
-
export const textColor = `var(--ds-text
|
|
21
|
+
export const keylineColor = `var(--ds-border, ${N30})`;
|
|
22
|
+
export const textColor = `var(--ds-text, ${text()})`;
|
|
23
23
|
export const iconColor = {
|
|
24
|
-
danger: `var(--ds-
|
|
25
|
-
warning: `var(--ds-
|
|
24
|
+
danger: `var(--ds-icon-danger, ${R400})`,
|
|
25
|
+
warning: `var(--ds-icon-warning, ${Y400})`
|
|
26
26
|
};
|
|
@@ -50,7 +50,7 @@ const ModalWrapper = props => {
|
|
|
50
50
|
action: 'closed',
|
|
51
51
|
componentName: 'modalDialog',
|
|
52
52
|
packageName: "@atlaskit/modal-dialog",
|
|
53
|
-
packageVersion: "12.2.
|
|
53
|
+
packageVersion: "12.2.2"
|
|
54
54
|
});
|
|
55
55
|
const onBlanketClicked = useCallback(e => {
|
|
56
56
|
if (shouldCloseOnOverlayClick) {
|
package/dist/es2019/version.json
CHANGED
|
@@ -25,7 +25,7 @@ var dialogStyles = css({
|
|
|
25
25
|
maxHeight: '100vh',
|
|
26
26
|
flex: '1 1 auto',
|
|
27
27
|
flexDirection: 'column',
|
|
28
|
-
backgroundColor: "var(--ds-
|
|
28
|
+
backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
|
|
29
29
|
color: textColor,
|
|
30
30
|
pointerEvents: 'auto',
|
|
31
31
|
'@media (min-width: 480px)': {
|
|
@@ -34,7 +34,7 @@ var dialogStyles = css({
|
|
|
34
34
|
marginRight: 'inherit',
|
|
35
35
|
marginLeft: 'inherit',
|
|
36
36
|
borderRadius: borderRadius,
|
|
37
|
-
boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
|
|
37
|
+
boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
|
|
38
38
|
},
|
|
39
39
|
|
|
40
40
|
/**
|
|
@@ -18,9 +18,9 @@ export var padding = gridSize * 3;
|
|
|
18
18
|
export var footerItemGap = gridSize;
|
|
19
19
|
export var titleIconMargin = gridSize;
|
|
20
20
|
export var keylineHeight = 2;
|
|
21
|
-
export var keylineColor = "var(--ds-border
|
|
22
|
-
export var textColor = "var(--ds-text
|
|
21
|
+
export var keylineColor = "var(--ds-border, ".concat(N30, ")");
|
|
22
|
+
export var textColor = "var(--ds-text, ".concat(text(), ")");
|
|
23
23
|
export var iconColor = {
|
|
24
|
-
danger: "var(--ds-
|
|
25
|
-
warning: "var(--ds-
|
|
24
|
+
danger: "var(--ds-icon-danger, ".concat(R400, ")"),
|
|
25
|
+
warning: "var(--ds-icon-warning, ".concat(Y400, ")")
|
|
26
26
|
};
|
|
@@ -57,7 +57,7 @@ var ModalWrapper = function ModalWrapper(props) {
|
|
|
57
57
|
action: 'closed',
|
|
58
58
|
componentName: 'modalDialog',
|
|
59
59
|
packageName: "@atlaskit/modal-dialog",
|
|
60
|
-
packageVersion: "12.2.
|
|
60
|
+
packageVersion: "12.2.2"
|
|
61
61
|
});
|
|
62
62
|
var onBlanketClicked = useCallback(function (e) {
|
|
63
63
|
if (shouldCloseOnOverlayClick) {
|
package/dist/esm/version.json
CHANGED
|
@@ -15,8 +15,8 @@ export declare const padding: number;
|
|
|
15
15
|
export declare const footerItemGap: number;
|
|
16
16
|
export declare const titleIconMargin: number;
|
|
17
17
|
export declare const keylineHeight = 2;
|
|
18
|
-
export declare const keylineColor: "var(--ds-border
|
|
19
|
-
export declare const textColor: "var(--ds-text
|
|
18
|
+
export declare const keylineColor: "var(--ds-border)";
|
|
19
|
+
export declare const textColor: "var(--ds-text)";
|
|
20
20
|
export declare const iconColor: {
|
|
21
21
|
[key in Appearance]: string;
|
|
22
22
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "12.2.
|
|
3
|
+
"version": "12.2.2",
|
|
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/"
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@atlaskit/motion": "^1.0.0",
|
|
46
46
|
"@atlaskit/portal": "^4.1.0",
|
|
47
47
|
"@atlaskit/theme": "^12.1.0",
|
|
48
|
-
"@atlaskit/tokens": "^0.
|
|
48
|
+
"@atlaskit/tokens": "^0.6.0",
|
|
49
49
|
"@babel/runtime": "^7.0.0",
|
|
50
50
|
"@emotion/core": "^10.0.9",
|
|
51
|
-
"raf-schd": "^
|
|
51
|
+
"raf-schd": "^4.0.3",
|
|
52
52
|
"react-focus-lock": "^2.5.2",
|
|
53
53
|
"react-scrolllock": "^5.0.1",
|
|
54
54
|
"react-uid": "^2.2.0"
|
|
@@ -81,6 +81,7 @@
|
|
|
81
81
|
"@testing-library/dom": "^7.7.3",
|
|
82
82
|
"@testing-library/react": "^8.0.1",
|
|
83
83
|
"@testing-library/react-hooks": "^1.0.4",
|
|
84
|
+
"@types/raf-schd": "^4.0.1",
|
|
84
85
|
"@types/react-beautiful-dnd": "^11.0.1",
|
|
85
86
|
"jscodeshift": "^0.13.0",
|
|
86
87
|
"react-beautiful-dnd": "^12.1.1",
|