@atlaskit/modal-dialog 14.11.4 → 14.12.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 +17 -0
- package/close-button/package.json +17 -0
- package/modal-dialog.docs.tsx +226 -0
- package/package.json +10 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 14.12.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`1001eaeabe30f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1001eaeabe30f) -
|
|
8
|
+
Autofix: add explicit package exports (barrel removal)
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
|
|
14
|
+
## 14.11.5
|
|
15
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- Updated dependencies
|
|
19
|
+
|
|
3
20
|
## 14.11.4
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/modal-dialog/close-button",
|
|
3
|
+
"main": "../dist/cjs/close-button.js",
|
|
4
|
+
"module": "../dist/esm/close-button.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/close-button.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"**/*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/close-button.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/close-button.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,226 @@
|
|
|
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
|
+
name: 'ModalHeader',
|
|
54
|
+
description:
|
|
55
|
+
'The header section of a modal dialog, typically containing the title and optional close button.',
|
|
56
|
+
status: 'general-availability',
|
|
57
|
+
import: {
|
|
58
|
+
name: 'ModalHeader',
|
|
59
|
+
package: '@atlaskit/modal-dialog',
|
|
60
|
+
type: 'named',
|
|
61
|
+
packagePath: path.resolve(__dirname),
|
|
62
|
+
packageJson: require('./package.json'),
|
|
63
|
+
},
|
|
64
|
+
usageGuidelines: [
|
|
65
|
+
'Use as the first child of Modal',
|
|
66
|
+
'Use hasCloseButton prop for standard close affordance',
|
|
67
|
+
'Ensure header contains ModalTitle or equivalent for accessibility',
|
|
68
|
+
'For custom headers, use CloseButton as first element in DOM',
|
|
69
|
+
],
|
|
70
|
+
contentGuidelines: ['Use clear, descriptive titles', 'Keep header content focused'],
|
|
71
|
+
examples: [
|
|
72
|
+
{
|
|
73
|
+
name: 'Modal Header',
|
|
74
|
+
description: 'ModalHeader example',
|
|
75
|
+
source: path.resolve(__dirname, './examples/constellation/modal-header-default.tsx'),
|
|
76
|
+
},
|
|
77
|
+
],
|
|
78
|
+
keywords: ['modal', 'header', 'title', 'close'],
|
|
79
|
+
categories: ['overlay'],
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
name: 'ModalTitle',
|
|
83
|
+
description: 'The title element for a modal dialog. Renders as h1 for accessibility.',
|
|
84
|
+
status: 'general-availability',
|
|
85
|
+
import: {
|
|
86
|
+
name: 'ModalTitle',
|
|
87
|
+
package: '@atlaskit/modal-dialog',
|
|
88
|
+
type: 'named',
|
|
89
|
+
packagePath: path.resolve(__dirname),
|
|
90
|
+
packageJson: require('./package.json'),
|
|
91
|
+
},
|
|
92
|
+
usageGuidelines: [
|
|
93
|
+
'Use inside ModalHeader for the modal title',
|
|
94
|
+
'Modal must have a title for accessibility',
|
|
95
|
+
'Supports any valid React element as children',
|
|
96
|
+
],
|
|
97
|
+
contentGuidelines: ['Use clear, descriptive titles', 'Use sentence case'],
|
|
98
|
+
examples: [
|
|
99
|
+
{
|
|
100
|
+
name: 'Modal Title',
|
|
101
|
+
description: 'ModalTitle example',
|
|
102
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
103
|
+
},
|
|
104
|
+
],
|
|
105
|
+
keywords: ['modal', 'title', 'heading'],
|
|
106
|
+
categories: ['overlay'],
|
|
107
|
+
},
|
|
108
|
+
{
|
|
109
|
+
name: 'ModalBody',
|
|
110
|
+
description: 'The main content area of a modal dialog.',
|
|
111
|
+
status: 'general-availability',
|
|
112
|
+
import: {
|
|
113
|
+
name: 'ModalBody',
|
|
114
|
+
package: '@atlaskit/modal-dialog',
|
|
115
|
+
type: 'named',
|
|
116
|
+
packagePath: path.resolve(__dirname),
|
|
117
|
+
packageJson: require('./package.json'),
|
|
118
|
+
},
|
|
119
|
+
usageGuidelines: [
|
|
120
|
+
'Use for the primary content between header and footer',
|
|
121
|
+
'Accepts any valid React element as children',
|
|
122
|
+
'Handles overflow and scrolling when content exceeds viewport',
|
|
123
|
+
],
|
|
124
|
+
contentGuidelines: ['Keep content focused on a single task', 'Use clear, readable content'],
|
|
125
|
+
examples: [
|
|
126
|
+
{
|
|
127
|
+
name: 'Modal Body',
|
|
128
|
+
description: 'ModalBody example',
|
|
129
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
130
|
+
},
|
|
131
|
+
],
|
|
132
|
+
keywords: ['modal', 'body', 'content'],
|
|
133
|
+
categories: ['overlay'],
|
|
134
|
+
},
|
|
135
|
+
{
|
|
136
|
+
name: 'ModalFooter',
|
|
137
|
+
description: 'The footer section of a modal dialog, typically containing action buttons.',
|
|
138
|
+
status: 'general-availability',
|
|
139
|
+
import: {
|
|
140
|
+
name: 'ModalFooter',
|
|
141
|
+
package: '@atlaskit/modal-dialog',
|
|
142
|
+
type: 'named',
|
|
143
|
+
packagePath: path.resolve(__dirname),
|
|
144
|
+
packageJson: require('./package.json'),
|
|
145
|
+
},
|
|
146
|
+
usageGuidelines: [
|
|
147
|
+
'Use for primary and secondary actions',
|
|
148
|
+
'Primary button on the right of secondary',
|
|
149
|
+
'Include Cancel/Close for dismissal',
|
|
150
|
+
'Accepts any valid React element for custom layouts',
|
|
151
|
+
],
|
|
152
|
+
contentGuidelines: [
|
|
153
|
+
'Primary button label should reflect the modal title',
|
|
154
|
+
'Use action verbs in button labels',
|
|
155
|
+
],
|
|
156
|
+
examples: [
|
|
157
|
+
{
|
|
158
|
+
name: 'Modal Footer',
|
|
159
|
+
description: 'ModalFooter example',
|
|
160
|
+
source: path.resolve(__dirname, './examples/constellation/modal-footer-default.tsx'),
|
|
161
|
+
},
|
|
162
|
+
],
|
|
163
|
+
keywords: ['modal', 'footer', 'actions', 'buttons'],
|
|
164
|
+
categories: ['overlay'],
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
name: 'ModalTransition',
|
|
168
|
+
description: 'A wrapper that provides enter/exit transitions for modal content.',
|
|
169
|
+
status: 'general-availability',
|
|
170
|
+
import: {
|
|
171
|
+
name: 'ModalTransition',
|
|
172
|
+
package: '@atlaskit/modal-dialog',
|
|
173
|
+
type: 'named',
|
|
174
|
+
packagePath: path.resolve(__dirname),
|
|
175
|
+
packageJson: require('./package.json'),
|
|
176
|
+
},
|
|
177
|
+
usageGuidelines: [
|
|
178
|
+
'Wrap Modal with ModalTransition for animated open/close',
|
|
179
|
+
'Use when modal visibility is controlled by state',
|
|
180
|
+
'Children mount when visible and unmount when closed',
|
|
181
|
+
],
|
|
182
|
+
examples: [
|
|
183
|
+
{
|
|
184
|
+
name: 'Modal Transition',
|
|
185
|
+
description: 'ModalTransition example',
|
|
186
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
187
|
+
},
|
|
188
|
+
],
|
|
189
|
+
keywords: ['modal', 'transition', 'animation'],
|
|
190
|
+
categories: ['overlay'],
|
|
191
|
+
},
|
|
192
|
+
{
|
|
193
|
+
name: 'CloseButton',
|
|
194
|
+
description:
|
|
195
|
+
'An accessible close button for use in custom modal headers. Ensures users have an obvious way to close the modal.',
|
|
196
|
+
status: 'general-availability',
|
|
197
|
+
import: {
|
|
198
|
+
name: 'CloseButton',
|
|
199
|
+
package: '@atlaskit/modal-dialog',
|
|
200
|
+
type: 'named',
|
|
201
|
+
packagePath: path.resolve(__dirname),
|
|
202
|
+
packageJson: require('./package.json'),
|
|
203
|
+
},
|
|
204
|
+
usageGuidelines: [
|
|
205
|
+
'Use when customizing ModalHeader without hasCloseButton',
|
|
206
|
+
'Render CloseButton first in DOM for proper focus order',
|
|
207
|
+
'Use Flex with row-reverse if close should appear on the right',
|
|
208
|
+
'Provide label prop for custom accessible name',
|
|
209
|
+
],
|
|
210
|
+
accessibilityGuidelines: [
|
|
211
|
+
'Close button is required for modals (consult a11y team for rare exceptions)',
|
|
212
|
+
'Ensure close button is keyboard accessible',
|
|
213
|
+
],
|
|
214
|
+
examples: [
|
|
215
|
+
{
|
|
216
|
+
name: 'Close Button',
|
|
217
|
+
description: 'CloseButton example',
|
|
218
|
+
source: path.resolve(__dirname, './examples/constellation/modal-header-custom.tsx'),
|
|
219
|
+
},
|
|
220
|
+
],
|
|
221
|
+
keywords: ['modal', 'close', 'button', 'dismiss'],
|
|
222
|
+
categories: ['overlay'],
|
|
223
|
+
},
|
|
224
|
+
];
|
|
225
|
+
|
|
226
|
+
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.12.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/"
|
|
@@ -27,12 +27,12 @@
|
|
|
27
27
|
"watch": "tsc --watch --noEmit --project './tsconfig.json'"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@atlaskit/analytics-next": "^11.
|
|
30
|
+
"@atlaskit/analytics-next": "^11.2.0",
|
|
31
31
|
"@atlaskit/blanket": "^15.0.0",
|
|
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",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
|
|
41
41
|
"@atlaskit/primitives": "^18.0.0",
|
|
42
42
|
"@atlaskit/theme": "^22.0.0",
|
|
43
|
-
"@atlaskit/tokens": "^11.
|
|
43
|
+
"@atlaskit/tokens": "^11.2.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@compiled/react": "^0.20.0",
|
|
46
46
|
"bind-event-listener": "^3.0.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
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.10.0",
|
|
59
59
|
"@atlaskit/avatar-group": "^12.4.0",
|
|
60
60
|
"@atlaskit/banner": "^14.0.0",
|
|
61
61
|
"@atlaskit/breadcrumbs": "^15.3.0",
|
|
@@ -63,19 +63,20 @@
|
|
|
63
63
|
"@atlaskit/code": "^17.4.0",
|
|
64
64
|
"@atlaskit/datetime-picker": "^17.5.0",
|
|
65
65
|
"@atlaskit/docs": "^11.7.0",
|
|
66
|
-
"@atlaskit/dropdown-menu": "^16.
|
|
66
|
+
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
67
67
|
"@atlaskit/flag": "^17.8.0",
|
|
68
|
-
"@atlaskit/form": "^15.
|
|
68
|
+
"@atlaskit/form": "^15.5.0",
|
|
69
69
|
"@atlaskit/heading": "^5.3.0",
|
|
70
70
|
"@atlaskit/link": "^3.3.0",
|
|
71
|
-
"@atlaskit/popup": "^4.
|
|
71
|
+
"@atlaskit/popup": "^4.14.0",
|
|
72
72
|
"@atlaskit/radio": "^8.4.0",
|
|
73
73
|
"@atlaskit/section-message": "^8.12.0",
|
|
74
74
|
"@atlaskit/select": "^21.8.0",
|
|
75
75
|
"@atlaskit/spotlight": "^0.10.0",
|
|
76
76
|
"@atlaskit/textfield": "^8.2.0",
|
|
77
|
-
"@atlaskit/tooltip": "^
|
|
77
|
+
"@atlaskit/tooltip": "^21.0.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",
|