@atlaskit/modal-dialog 14.11.3 → 14.11.5
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 +14 -0
- package/dist/cjs/internal/components/modal-wrapper.js +1 -1
- package/dist/cjs/modal-title.js +1 -1
- package/dist/es2019/internal/components/modal-wrapper.js +1 -1
- package/dist/es2019/modal-title.js +1 -1
- package/dist/esm/internal/components/modal-wrapper.js +1 -1
- package/dist/esm/modal-title.js +1 -1
- package/modal-dialog.docs.tsx +54 -0
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 14.11.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 14.11.4
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- [`6e5dce6aa20ee`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e5dce6aa20ee) -
|
|
14
|
+
Fixed an issue where the modal title may have incorrect font styles.
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 14.11.3
|
|
4
18
|
|
|
5
19
|
### 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: "
|
|
91
|
+
packageVersion: "14.11.4"
|
|
92
92
|
});
|
|
93
93
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
94
94
|
if (shouldCloseOnOverlayClick) {
|
package/dist/cjs/modal-title.js
CHANGED
|
@@ -60,7 +60,7 @@ var ModalTitle = function ModalTitle(props) {
|
|
|
60
60
|
}), /*#__PURE__*/React.createElement("span", {
|
|
61
61
|
id: titleId,
|
|
62
62
|
"data-testid": testId && "".concat(testId, "-text"),
|
|
63
|
-
className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _slp31hna", !isMultiline && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
|
|
63
|
+
className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _11c81af2 _1ul9idpf _slp31hna", !isMultiline && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
|
|
64
64
|
}, children));
|
|
65
65
|
};
|
|
66
66
|
var _default = exports.default = ModalTitle;
|
|
@@ -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: "14.11.4"
|
|
79
79
|
});
|
|
80
80
|
const onBlanketClicked = useCallback(e => {
|
|
81
81
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -54,7 +54,7 @@ const ModalTitle = props => {
|
|
|
54
54
|
}), /*#__PURE__*/React.createElement("span", {
|
|
55
55
|
id: titleId,
|
|
56
56
|
"data-testid": testId && `${testId}-text`,
|
|
57
|
-
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _slp31hna", !isMultiline && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
|
|
57
|
+
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _11c81af2 _1ul9idpf _slp31hna", !isMultiline && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
|
|
58
58
|
}, children));
|
|
59
59
|
};
|
|
60
60
|
export default ModalTitle;
|
|
@@ -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: "14.11.4"
|
|
83
83
|
});
|
|
84
84
|
var onBlanketClicked = useCallback(function (e) {
|
|
85
85
|
if (shouldCloseOnOverlayClick) {
|
package/dist/esm/modal-title.js
CHANGED
|
@@ -51,7 +51,7 @@ var ModalTitle = function ModalTitle(props) {
|
|
|
51
51
|
}), /*#__PURE__*/React.createElement("span", {
|
|
52
52
|
id: titleId,
|
|
53
53
|
"data-testid": testId && "".concat(testId, "-text"),
|
|
54
|
-
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _slp31hna", !isMultiline && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
|
|
54
|
+
className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _11c81af2 _1ul9idpf _slp31hna", !isMultiline && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
|
|
55
55
|
}, children));
|
|
56
56
|
};
|
|
57
57
|
export default ModalTitle;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import path from 'path';
|
|
2
|
+
|
|
3
|
+
import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
|
|
4
|
+
|
|
5
|
+
const documentation: ComponentStructuredContentSource[] = [
|
|
6
|
+
{
|
|
7
|
+
name: 'Modal',
|
|
8
|
+
description: 'A modal dialog component for important content.',
|
|
9
|
+
status: 'general-availability',
|
|
10
|
+
import: {
|
|
11
|
+
name: 'Modal',
|
|
12
|
+
package: '@atlaskit/modal-dialog',
|
|
13
|
+
type: 'default',
|
|
14
|
+
packagePath: path.resolve(__dirname),
|
|
15
|
+
packageJson: require('./package.json'),
|
|
16
|
+
},
|
|
17
|
+
usageGuidelines: [
|
|
18
|
+
'Use for immediate task or critical/warning requiring a response; blocking until closed',
|
|
19
|
+
'Use sparingly—modals are invasive',
|
|
20
|
+
'One task per modal; limit interactions; no nested modals (inaccessible)',
|
|
21
|
+
'Anatomy: header (h1 title), close button, body, footer with primary + cancel/close',
|
|
22
|
+
'Footer: primary button on the right of secondary; multiple dismissal methods (close button, Esc, blanket click, Cancel/Close)',
|
|
23
|
+
'Use Popup for smaller info + controls; Spotlight for onboarding; Inline message for alert/action',
|
|
24
|
+
],
|
|
25
|
+
contentGuidelines: [
|
|
26
|
+
'Use clear, descriptive titles',
|
|
27
|
+
'Primary button label should reflect the modal title',
|
|
28
|
+
'Use action verbs in button labels',
|
|
29
|
+
'Keep content focused on a single task or message',
|
|
30
|
+
'Use sentence case for all text',
|
|
31
|
+
],
|
|
32
|
+
accessibilityGuidelines: [
|
|
33
|
+
'Modal must have a title: use title component, or titleId from useModal, or label (avoid if no visual title)',
|
|
34
|
+
'Close button is required (except rare cases—consult a11y team)',
|
|
35
|
+
'Do not rely on color alone for severity; provide accessible label for icons',
|
|
36
|
+
'Focus order: 1) close (or title or container), 2) first focusable, 3) secondary button, 4) primary, 5) return focus to trigger on close',
|
|
37
|
+
'Dismiss via: close button, Esc, click blanket, Cancel/Close in footer',
|
|
38
|
+
'Ensure modal content is announced by screen readers',
|
|
39
|
+
'Ensure keyboard navigation and escape key support',
|
|
40
|
+
'Maintain focus within modal when open',
|
|
41
|
+
],
|
|
42
|
+
examples: [
|
|
43
|
+
{
|
|
44
|
+
name: 'Default',
|
|
45
|
+
description: 'The default form of a modal dialog.',
|
|
46
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
47
|
+
},
|
|
48
|
+
],
|
|
49
|
+
keywords: ['modal', 'dialog', 'popup', 'overlay', 'focused', 'interaction', 'layer'],
|
|
50
|
+
categories: ['overlay'],
|
|
51
|
+
},
|
|
52
|
+
];
|
|
53
|
+
|
|
54
|
+
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "14.11.
|
|
3
|
+
"version": "14.11.5",
|
|
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/"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@atlaskit/button": "^23.10.0",
|
|
33
33
|
"@atlaskit/css": "^0.19.0",
|
|
34
34
|
"@atlaskit/ds-lib": "^6.0.0",
|
|
35
|
-
"@atlaskit/icon": "^
|
|
35
|
+
"@atlaskit/icon": "^33.0.0",
|
|
36
36
|
"@atlaskit/layering": "^3.6.0",
|
|
37
37
|
"@atlaskit/motion": "^5.4.0",
|
|
38
38
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
@@ -55,15 +55,15 @@
|
|
|
55
55
|
"@af/accessibility-testing": "workspace:^",
|
|
56
56
|
"@af/integration-testing": "workspace:^",
|
|
57
57
|
"@af/visual-regression": "workspace:^",
|
|
58
|
-
"@atlaskit/avatar": "^25.
|
|
58
|
+
"@atlaskit/avatar": "^25.9.0",
|
|
59
59
|
"@atlaskit/avatar-group": "^12.4.0",
|
|
60
60
|
"@atlaskit/banner": "^14.0.0",
|
|
61
61
|
"@atlaskit/breadcrumbs": "^15.3.0",
|
|
62
62
|
"@atlaskit/checkbox": "^17.3.0",
|
|
63
63
|
"@atlaskit/code": "^17.4.0",
|
|
64
64
|
"@atlaskit/datetime-picker": "^17.5.0",
|
|
65
|
-
"@atlaskit/docs": "^11.
|
|
66
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
65
|
+
"@atlaskit/docs": "^11.7.0",
|
|
66
|
+
"@atlaskit/dropdown-menu": "^16.7.0",
|
|
67
67
|
"@atlaskit/flag": "^17.8.0",
|
|
68
68
|
"@atlaskit/form": "^15.4.0",
|
|
69
69
|
"@atlaskit/heading": "^5.3.0",
|
|
@@ -76,6 +76,7 @@
|
|
|
76
76
|
"@atlaskit/textfield": "^8.2.0",
|
|
77
77
|
"@atlaskit/tooltip": "^20.14.0",
|
|
78
78
|
"@atlassian/ssr-tests": "workspace:^",
|
|
79
|
+
"@atlassian/structured-docs-types": "workspace:^",
|
|
79
80
|
"@testing-library/dom": "^10.1.0",
|
|
80
81
|
"@testing-library/react": "^16.3.0",
|
|
81
82
|
"@testing-library/user-event": "^14.4.3",
|