@atlaskit/modal-dialog 14.7.3 → 14.8.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.
- package/CHANGELOG.md +11 -0
- package/dist/cjs/internal/components/modal-dialog.compiled.css +1 -1
- package/dist/cjs/internal/components/modal-dialog.js +4 -2
- package/dist/cjs/internal/components/modal-wrapper.js +1 -1
- package/dist/es2019/internal/components/modal-dialog.compiled.css +1 -1
- package/dist/es2019/internal/components/modal-dialog.js +4 -2
- package/dist/es2019/internal/components/modal-wrapper.js +1 -1
- package/dist/esm/internal/components/modal-dialog.compiled.css +1 -1
- package/dist/esm/internal/components/modal-dialog.js +4 -2
- package/dist/esm/internal/components/modal-wrapper.js +1 -1
- package/package.json +13 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 14.8.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`b867e641d818d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b867e641d818d) -
|
|
8
|
+
Updated border radius values behind a feature gate `platform-dst-shape-theme-default`.
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
3
14
|
## 14.7.3
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
|
@@ -22,4 +22,4 @@
|
|
|
22
22
|
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
23
23
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
24
24
|
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
|
|
25
|
-
@media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
|
|
25
|
+
@media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
|
|
@@ -19,6 +19,7 @@ var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-fo
|
|
|
19
19
|
var _useId = require("@atlaskit/ds-lib/use-id");
|
|
20
20
|
var _layering = require("@atlaskit/layering");
|
|
21
21
|
var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
|
|
22
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
23
|
var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
|
|
23
24
|
var _context = require("../context");
|
|
24
25
|
var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
|
|
@@ -31,7 +32,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
31
32
|
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
32
33
|
var dialogStyles = {
|
|
33
34
|
root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
|
|
34
|
-
borderRadius: "_epkxfajl"
|
|
35
|
+
borderRadius: "_epkxfajl",
|
|
36
|
+
borderRadiusT26Shape: "_epkxpb1k"
|
|
35
37
|
};
|
|
36
38
|
var viewportScrollStyles = null;
|
|
37
39
|
var bodyScrollStyles = null;
|
|
@@ -118,7 +120,7 @@ var ModalDialog = function ModalDialog(props) {
|
|
|
118
120
|
'--modal-dialog-height': (0, _utils.dialogHeight)(height)
|
|
119
121
|
},
|
|
120
122
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
121
|
-
className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
123
|
+
className: (0, _runtime.ax)([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
122
124
|
role: "dialog",
|
|
123
125
|
"aria-labelledby": label ? undefined : titleId,
|
|
124
126
|
"data-testid": defaultTestId,
|
|
@@ -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: "
|
|
91
|
+
packageVersion: "0.0.0-development"
|
|
92
92
|
});
|
|
93
93
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
94
94
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -22,4 +22,4 @@
|
|
|
22
22
|
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
23
23
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
24
24
|
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
|
|
25
|
-
@media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
|
|
25
|
+
@media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
|
|
@@ -9,6 +9,7 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
|
9
9
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
10
10
|
import { useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
|
|
11
11
|
import FadeIn from '@atlaskit/motion/fade-in';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
13
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
13
14
|
import { ModalContext, ScrollContext } from '../context';
|
|
14
15
|
import useOnMotionFinish from '../hooks/use-on-motion-finish';
|
|
@@ -20,7 +21,8 @@ import Positioner from './positioner';
|
|
|
20
21
|
const LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
21
22
|
const dialogStyles = {
|
|
22
23
|
root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
|
|
23
|
-
borderRadius: "_epkxfajl"
|
|
24
|
+
borderRadius: "_epkxfajl",
|
|
25
|
+
borderRadiusT26Shape: "_epkxpb1k"
|
|
24
26
|
};
|
|
25
27
|
const viewportScrollStyles = null;
|
|
26
28
|
const bodyScrollStyles = null;
|
|
@@ -101,7 +103,7 @@ const ModalDialog = props => {
|
|
|
101
103
|
'--modal-dialog-height': dialogHeight(height)
|
|
102
104
|
},
|
|
103
105
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
104
|
-
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
106
|
+
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
105
107
|
role: "dialog",
|
|
106
108
|
"aria-labelledby": label ? undefined : titleId,
|
|
107
109
|
"data-testid": defaultTestId,
|
|
@@ -75,7 +75,7 @@ const InternalModalWrapper = props => {
|
|
|
75
75
|
action: 'closed',
|
|
76
76
|
componentName: 'modalDialog',
|
|
77
77
|
packageName: "@atlaskit/modal-dialog",
|
|
78
|
-
packageVersion: "
|
|
78
|
+
packageVersion: "0.0.0-development"
|
|
79
79
|
});
|
|
80
80
|
const onBlanketClicked = useCallback(e => {
|
|
81
81
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -22,4 +22,4 @@
|
|
|
22
22
|
._mizu1v1w:focus-visible{outline-color:var(--ds-border-focused,#4688ec)}
|
|
23
23
|
._ra3xnqa1:focus-visible{outline-style:solid}
|
|
24
24
|
@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){._1cvmnqa1:focus-visible{outline-style:solid}._4davt94y:focus-visible{outline-width:1px}}
|
|
25
|
-
@media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
|
|
25
|
+
@media (min-width:30rem){._8kn617ks._8kn617ks{min-height:var(--modal-dialog-height)}._cbiz17ks._cbiz17ks{height:var(--modal-dialog-height)}._bolh1kw7._bolh1kw7{max-height:inherit}._epkxfajl{border-radius:var(--ds-radius-small,3px)}._epkxpb1k{border-radius:var(--ds-radius-xlarge,9pt)}._we1i1kw7{max-width:inherit}._zg7p130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}._yakv1kw7{margin-inline-end:inherit}._4lht1kw7{margin-inline-start:inherit}._1xlt6m9r._1xlt6m9r{width:var(--modal-dialog-width)}}
|
|
@@ -11,6 +11,7 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
|
|
|
11
11
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
12
12
|
import { useCloseOnEscapePress, useLayering } from '@atlaskit/layering';
|
|
13
13
|
import FadeIn from '@atlaskit/motion/fade-in';
|
|
14
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
15
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
15
16
|
import { ModalContext, ScrollContext } from '../context';
|
|
16
17
|
import useOnMotionFinish from '../hooks/use-on-motion-finish';
|
|
@@ -22,7 +23,8 @@ import Positioner from './positioner';
|
|
|
22
23
|
var LOCAL_CURRENT_SURFACE_CSS_VAR = '--ds-elevation-surface-current';
|
|
23
24
|
var dialogStyles = {
|
|
24
25
|
root: "_16jlidpf _1o9zkb7n _i0dl1wug _1e0c1txw _1bsb1osq _p12fauwl _4t3i1osq _1tkeidpf _c71l1kxc _2lx21bp4 _bfhk1bhr _syazi7uo _1q1l1bhr _lcxv1wug _1mq81kw7 _m01u1kw7 _1dg11kw7 _mizu1v1w _1ah3dkaa _ra3xnqa1 _128mdkaa _1cvmnqa1 _4davt94y _we1i1kw7 _zg7p130s _yakv1kw7 _4lht1kw7 _1xlt6m9r",
|
|
25
|
-
borderRadius: "_epkxfajl"
|
|
26
|
+
borderRadius: "_epkxfajl",
|
|
27
|
+
borderRadiusT26Shape: "_epkxpb1k"
|
|
26
28
|
};
|
|
27
29
|
var viewportScrollStyles = null;
|
|
28
30
|
var bodyScrollStyles = null;
|
|
@@ -109,7 +111,7 @@ var ModalDialog = function ModalDialog(props) {
|
|
|
109
111
|
'--modal-dialog-height': dialogHeight(height)
|
|
110
112
|
},
|
|
111
113
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
112
|
-
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
114
|
+
className: ax([dialogStyles.root, !isFullScreen && dialogStyles.borderRadius, !isFullScreen && fg('platform-dst-shape-theme-default') && dialogStyles.borderRadiusT26Shape, shouldScrollInViewport ? "_1tke1kxc _c71lglyw _8kn617ks" : "_cbiz17ks _bolh1kw7", bottomFadeInProps.className]),
|
|
113
115
|
role: "dialog",
|
|
114
116
|
"aria-labelledby": label ? undefined : titleId,
|
|
115
117
|
"data-testid": defaultTestId,
|
|
@@ -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: "
|
|
82
|
+
packageVersion: "0.0.0-development"
|
|
83
83
|
});
|
|
84
84
|
var onBlanketClicked = useCallback(function (e) {
|
|
85
85
|
if (shouldCloseOnOverlayClick) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.8.0",
|
|
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/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"dependencies": {
|
|
30
30
|
"@atlaskit/analytics-next": "^11.1.0",
|
|
31
31
|
"@atlaskit/blanket": "^15.0.0",
|
|
32
|
-
"@atlaskit/button": "^23.
|
|
32
|
+
"@atlaskit/button": "^23.7.0",
|
|
33
33
|
"@atlaskit/css": "^0.17.0",
|
|
34
34
|
"@atlaskit/ds-lib": "^5.3.0",
|
|
35
35
|
"@atlaskit/icon": "^29.0.0",
|
|
@@ -59,20 +59,20 @@
|
|
|
59
59
|
"@atlaskit/avatar-group": "^12.4.0",
|
|
60
60
|
"@atlaskit/banner": "^14.0.0",
|
|
61
61
|
"@atlaskit/breadcrumbs": "^15.3.0",
|
|
62
|
-
"@atlaskit/checkbox": "^17.
|
|
63
|
-
"@atlaskit/code": "^17.
|
|
64
|
-
"@atlaskit/datetime-picker": "^17.
|
|
62
|
+
"@atlaskit/checkbox": "^17.2.0",
|
|
63
|
+
"@atlaskit/code": "^17.4.0",
|
|
64
|
+
"@atlaskit/datetime-picker": "^17.2.0",
|
|
65
65
|
"@atlaskit/docs": "^11.2.0",
|
|
66
66
|
"@atlaskit/dropdown-menu": "^16.3.0",
|
|
67
|
-
"@atlaskit/flag": "^17.
|
|
67
|
+
"@atlaskit/flag": "^17.6.0",
|
|
68
68
|
"@atlaskit/form": "^14.3.0",
|
|
69
69
|
"@atlaskit/heading": "^5.2.0",
|
|
70
70
|
"@atlaskit/link": "^3.2.0",
|
|
71
|
-
"@atlaskit/popup": "^4.
|
|
71
|
+
"@atlaskit/popup": "^4.7.0",
|
|
72
72
|
"@atlaskit/radio": "^8.3.0",
|
|
73
|
-
"@atlaskit/section-message": "^8.
|
|
74
|
-
"@atlaskit/select": "^21.
|
|
75
|
-
"@atlaskit/textfield": "^8.
|
|
73
|
+
"@atlaskit/section-message": "^8.10.0",
|
|
74
|
+
"@atlaskit/select": "^21.5.0",
|
|
75
|
+
"@atlaskit/textfield": "^8.2.0",
|
|
76
76
|
"@atlaskit/tooltip": "^20.11.0",
|
|
77
77
|
"@atlassian/ssr-tests": "workspace:^",
|
|
78
78
|
"@testing-library/dom": "^10.1.0",
|
|
@@ -124,6 +124,9 @@
|
|
|
124
124
|
},
|
|
125
125
|
"platform_ads_explicit_font_styles": {
|
|
126
126
|
"type": "boolean"
|
|
127
|
+
},
|
|
128
|
+
"platform-dst-shape-theme-default": {
|
|
129
|
+
"type": "boolean"
|
|
127
130
|
}
|
|
128
131
|
},
|
|
129
132
|
"homepage": "https://atlassian.design/components/modal-dialog/"
|