@atlaskit/modal-dialog 14.11.5 → 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 +11 -0
- package/close-button/package.json +17 -0
- package/dist/cjs/internal/components/modal-wrapper.js +1 -1
- package/dist/es2019/internal/components/modal-wrapper.js +1 -1
- package/dist/esm/internal/components/modal-wrapper.js +1 -1
- package/modal-dialog.docs.tsx +172 -0
- package/package.json +8 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
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
|
+
|
|
3
14
|
## 14.11.5
|
|
4
15
|
|
|
5
16
|
### 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
|
+
}
|
|
@@ -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) {
|
|
@@ -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) {
|
|
@@ -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/modal-dialog.docs.tsx
CHANGED
|
@@ -49,6 +49,178 @@ const documentation: ComponentStructuredContentSource[] = [
|
|
|
49
49
|
keywords: ['modal', 'dialog', 'popup', 'overlay', 'focused', 'interaction', 'layer'],
|
|
50
50
|
categories: ['overlay'],
|
|
51
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
|
+
},
|
|
52
224
|
];
|
|
53
225
|
|
|
54
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,7 +27,7 @@
|
|
|
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",
|
|
@@ -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,18 +63,18 @@
|
|
|
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
79
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
80
80
|
"@testing-library/dom": "^10.1.0",
|