@atlaskit/modal-dialog 15.1.3 → 15.2.1
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
CHANGED
|
@@ -1,5 +1,30 @@
|
|
|
1
1
|
# @atlaskit/modal-dialog
|
|
2
2
|
|
|
3
|
+
## 15.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 15.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`8e9ab10567283`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8e9ab10567283) -
|
|
14
|
+
When `platform-dst-top-layer` is enabled, the open layer observer registration now happens inside
|
|
15
|
+
the `Dialog` and `Popover` primitives directly, so `popup`, `modal-dialog`, and `tooltip` no
|
|
16
|
+
longer register with the open layer observer separately (avoiding double-counting).
|
|
17
|
+
- `Dialog` registers as `type: 'modal'`, with a no-op `onClose`, as there is no current use case
|
|
18
|
+
for programmatic close of modals via the open layer observer.
|
|
19
|
+
- `Popover` registers as `type: 'popup'` for interactive overlay roles (`dialog`, `alertdialog`,
|
|
20
|
+
`menu`, `listbox`, `tree`, `grid`) and omits `type` for other roles (e.g. `tooltip`).
|
|
21
|
+
- A new `programmatic` value has been added to `TPopoverCloseReason` to distinguish programmatic
|
|
22
|
+
closes, such as those from the open layer observer's `closeLayers()` calls.
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
|
|
3
28
|
## 15.1.3
|
|
4
29
|
|
|
5
30
|
### Patch Changes
|
|
@@ -113,7 +113,7 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
|
113
113
|
action: 'closed',
|
|
114
114
|
componentName: 'modalDialog',
|
|
115
115
|
packageName: "@atlaskit/modal-dialog",
|
|
116
|
-
packageVersion: "15.
|
|
116
|
+
packageVersion: "15.2.0"
|
|
117
117
|
});
|
|
118
118
|
var onBlanketClicked = (0, _react.useCallback)(function (e) {
|
|
119
119
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -138,13 +138,20 @@ var InternalModalWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props,
|
|
|
138
138
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
139
139
|
(0, _usePreventProgrammaticScroll.default)();
|
|
140
140
|
}
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
141
|
+
|
|
142
|
+
// On the top-layer path, the Dialog primitive registers with the observer
|
|
143
|
+
// directly, so we skip registration here to avoid double-counting.
|
|
144
|
+
// Safe conditional hook: feature flags are resolved once at startup.
|
|
145
|
+
if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
|
|
146
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
147
|
+
(0, _openLayerObserver.useNotifyOpenLayerObserver)({
|
|
148
|
+
type: 'modal',
|
|
149
|
+
// Always open — modal is conditionally rendered when visible.
|
|
150
|
+
isOpen: true,
|
|
151
|
+
// No-op: no current use case for programmatic close via OpenLayerObserver.
|
|
152
|
+
onClose: _noop.default
|
|
153
|
+
});
|
|
154
|
+
}
|
|
148
155
|
|
|
149
156
|
/**
|
|
150
157
|
* Top-layer path (platform-dst-top-layer).
|
|
@@ -99,7 +99,7 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
99
99
|
action: 'closed',
|
|
100
100
|
componentName: 'modalDialog',
|
|
101
101
|
packageName: "@atlaskit/modal-dialog",
|
|
102
|
-
packageVersion: "15.
|
|
102
|
+
packageVersion: "15.2.0"
|
|
103
103
|
});
|
|
104
104
|
const onBlanketClicked = useCallback(e => {
|
|
105
105
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -123,13 +123,20 @@ const InternalModalWrapper = /*#__PURE__*/forwardRef((props, ref) => {
|
|
|
123
123
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
124
124
|
usePreventProgrammaticScroll();
|
|
125
125
|
}
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
126
|
+
|
|
127
|
+
// On the top-layer path, the Dialog primitive registers with the observer
|
|
128
|
+
// directly, so we skip registration here to avoid double-counting.
|
|
129
|
+
// Safe conditional hook: feature flags are resolved once at startup.
|
|
130
|
+
if (!fg('platform-dst-top-layer')) {
|
|
131
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
132
|
+
useNotifyOpenLayerObserver({
|
|
133
|
+
type: 'modal',
|
|
134
|
+
// Always open — modal is conditionally rendered when visible.
|
|
135
|
+
isOpen: true,
|
|
136
|
+
// No-op: no current use case for programmatic close via OpenLayerObserver.
|
|
137
|
+
onClose: noop
|
|
138
|
+
});
|
|
139
|
+
}
|
|
133
140
|
|
|
134
141
|
/**
|
|
135
142
|
* Top-layer path (platform-dst-top-layer).
|
|
@@ -104,7 +104,7 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
104
104
|
action: 'closed',
|
|
105
105
|
componentName: 'modalDialog',
|
|
106
106
|
packageName: "@atlaskit/modal-dialog",
|
|
107
|
-
packageVersion: "15.
|
|
107
|
+
packageVersion: "15.2.0"
|
|
108
108
|
});
|
|
109
109
|
var onBlanketClicked = useCallback(function (e) {
|
|
110
110
|
if (shouldCloseOnOverlayClick) {
|
|
@@ -129,13 +129,20 @@ var InternalModalWrapper = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
|
129
129
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
130
130
|
usePreventProgrammaticScroll();
|
|
131
131
|
}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
132
|
+
|
|
133
|
+
// On the top-layer path, the Dialog primitive registers with the observer
|
|
134
|
+
// directly, so we skip registration here to avoid double-counting.
|
|
135
|
+
// Safe conditional hook: feature flags are resolved once at startup.
|
|
136
|
+
if (!fg('platform-dst-top-layer')) {
|
|
137
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
138
|
+
useNotifyOpenLayerObserver({
|
|
139
|
+
type: 'modal',
|
|
140
|
+
// Always open — modal is conditionally rendered when visible.
|
|
141
|
+
isOpen: true,
|
|
142
|
+
// No-op: no current use case for programmatic close via OpenLayerObserver.
|
|
143
|
+
onClose: noop
|
|
144
|
+
});
|
|
145
|
+
}
|
|
139
146
|
|
|
140
147
|
/**
|
|
141
148
|
* Top-layer path (platform-dst-top-layer).
|
package/modal-dialog.docs.tsx
CHANGED
|
@@ -1,226 +1,228 @@
|
|
|
1
1
|
import path from 'path';
|
|
2
2
|
|
|
3
|
-
import type {
|
|
3
|
+
import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
|
|
4
4
|
|
|
5
|
-
const documentation:
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
description: 'A modal dialog component for important content.',
|
|
9
|
-
status: 'general-availability',
|
|
10
|
-
import: {
|
|
5
|
+
const documentation: StructuredContentSource = {
|
|
6
|
+
components: [
|
|
7
|
+
{
|
|
11
8
|
name: 'Modal',
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
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'),
|
|
9
|
+
description: 'A modal dialog component for important content.',
|
|
10
|
+
status: 'general-availability',
|
|
11
|
+
import: {
|
|
12
|
+
name: 'Modal',
|
|
13
|
+
package: '@atlaskit/modal-dialog',
|
|
14
|
+
type: 'default',
|
|
15
|
+
packagePath: path.resolve(__dirname),
|
|
16
|
+
packageJson: require('./package.json'),
|
|
47
17
|
},
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
18
|
+
usageGuidelines: [
|
|
19
|
+
'Use for immediate task or critical/warning requiring a response; blocking until closed',
|
|
20
|
+
'Use sparingly—modals are invasive',
|
|
21
|
+
'One task per modal; limit interactions; no nested modals (inaccessible)',
|
|
22
|
+
'Anatomy: header (h1 title), close button, body, footer with primary + cancel/close',
|
|
23
|
+
'Footer: primary button on the right of secondary; multiple dismissal methods (close button, Esc, blanket click, Cancel/Close)',
|
|
24
|
+
'Use Popup for smaller info + controls; Spotlight for onboarding; Inline message for alert/action',
|
|
25
|
+
],
|
|
26
|
+
contentGuidelines: [
|
|
27
|
+
'Use clear, descriptive titles',
|
|
28
|
+
'Primary button label should reflect the modal title',
|
|
29
|
+
'Use action verbs in button labels',
|
|
30
|
+
'Keep content focused on a single task or message',
|
|
31
|
+
'Use sentence case for all text',
|
|
32
|
+
],
|
|
33
|
+
accessibilityGuidelines: [
|
|
34
|
+
'Modal must have a title: use title component, or titleId from useModal, or label (avoid if no visual title)',
|
|
35
|
+
'Close button is required (except rare cases—consult a11y team)',
|
|
36
|
+
'Do not rely on color alone for severity; provide accessible label for icons',
|
|
37
|
+
'Focus order: 1) close (or title or container), 2) first focusable, 3) secondary button, 4) primary, 5) return focus to trigger on close',
|
|
38
|
+
'Dismiss via: close button, Esc, click blanket, Cancel/Close in footer',
|
|
39
|
+
'Ensure modal content is announced by screen readers',
|
|
40
|
+
'Ensure keyboard navigation and escape key support',
|
|
41
|
+
'Maintain focus within modal when open',
|
|
42
|
+
],
|
|
43
|
+
examples: [
|
|
44
|
+
{
|
|
45
|
+
name: 'Default',
|
|
46
|
+
description: 'The default form of a modal dialog.',
|
|
47
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
48
|
+
},
|
|
49
|
+
],
|
|
50
|
+
keywords: ['modal', 'dialog', 'popup', 'overlay', 'focused', 'interaction', 'layer'],
|
|
51
|
+
categories: ['overlay'],
|
|
63
52
|
},
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
source: path.resolve(__dirname, './examples/constellation/modal-header-default.tsx'),
|
|
53
|
+
{
|
|
54
|
+
name: 'ModalHeader',
|
|
55
|
+
description:
|
|
56
|
+
'The header section of a modal dialog, typically containing the title and optional close button.',
|
|
57
|
+
status: 'general-availability',
|
|
58
|
+
import: {
|
|
59
|
+
name: 'ModalHeader',
|
|
60
|
+
package: '@atlaskit/modal-dialog',
|
|
61
|
+
type: 'named',
|
|
62
|
+
packagePath: path.resolve(__dirname),
|
|
63
|
+
packageJson: require('./package.json'),
|
|
76
64
|
},
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
65
|
+
usageGuidelines: [
|
|
66
|
+
'Use as the first child of Modal',
|
|
67
|
+
'Use hasCloseButton prop for standard close affordance',
|
|
68
|
+
'Ensure header contains ModalTitle or equivalent for accessibility',
|
|
69
|
+
'For custom headers, use CloseButton as first element in DOM',
|
|
70
|
+
],
|
|
71
|
+
contentGuidelines: ['Use clear, descriptive titles', 'Keep header content focused'],
|
|
72
|
+
examples: [
|
|
73
|
+
{
|
|
74
|
+
name: 'Modal Header',
|
|
75
|
+
description: 'ModalHeader example',
|
|
76
|
+
source: path.resolve(__dirname, './examples/constellation/modal-header-default.tsx'),
|
|
77
|
+
},
|
|
78
|
+
],
|
|
79
|
+
keywords: ['modal', 'header', 'title', 'close'],
|
|
80
|
+
categories: ['overlay'],
|
|
91
81
|
},
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
'
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
82
|
+
{
|
|
83
|
+
name: 'ModalTitle',
|
|
84
|
+
description: 'The title element for a modal dialog. Renders as h1 for accessibility.',
|
|
85
|
+
status: 'general-availability',
|
|
86
|
+
import: {
|
|
87
|
+
name: 'ModalTitle',
|
|
88
|
+
package: '@atlaskit/modal-dialog',
|
|
89
|
+
type: 'named',
|
|
90
|
+
packagePath: path.resolve(__dirname),
|
|
91
|
+
packageJson: require('./package.json'),
|
|
103
92
|
},
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
93
|
+
usageGuidelines: [
|
|
94
|
+
'Use inside ModalHeader for the modal title',
|
|
95
|
+
'Modal must have a title for accessibility',
|
|
96
|
+
'Supports any valid React element as children',
|
|
97
|
+
],
|
|
98
|
+
contentGuidelines: ['Use clear, descriptive titles', 'Use sentence case'],
|
|
99
|
+
examples: [
|
|
100
|
+
{
|
|
101
|
+
name: 'Modal Title',
|
|
102
|
+
description: 'ModalTitle example',
|
|
103
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
104
|
+
},
|
|
105
|
+
],
|
|
106
|
+
keywords: ['modal', 'title', 'heading'],
|
|
107
|
+
categories: ['overlay'],
|
|
118
108
|
},
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
'
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
109
|
+
{
|
|
110
|
+
name: 'ModalBody',
|
|
111
|
+
description: 'The main content area of a modal dialog.',
|
|
112
|
+
status: 'general-availability',
|
|
113
|
+
import: {
|
|
114
|
+
name: 'ModalBody',
|
|
115
|
+
package: '@atlaskit/modal-dialog',
|
|
116
|
+
type: 'named',
|
|
117
|
+
packagePath: path.resolve(__dirname),
|
|
118
|
+
packageJson: require('./package.json'),
|
|
130
119
|
},
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
120
|
+
usageGuidelines: [
|
|
121
|
+
'Use for the primary content between header and footer',
|
|
122
|
+
'Accepts any valid React element as children',
|
|
123
|
+
'Handles overflow and scrolling when content exceeds viewport',
|
|
124
|
+
],
|
|
125
|
+
contentGuidelines: ['Keep content focused on a single task', 'Use clear, readable content'],
|
|
126
|
+
examples: [
|
|
127
|
+
{
|
|
128
|
+
name: 'Modal Body',
|
|
129
|
+
description: 'ModalBody example',
|
|
130
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
131
|
+
},
|
|
132
|
+
],
|
|
133
|
+
keywords: ['modal', 'body', 'content'],
|
|
134
|
+
categories: ['overlay'],
|
|
145
135
|
},
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
'
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
examples: [
|
|
157
|
-
{
|
|
158
|
-
name: 'Modal Footer',
|
|
159
|
-
description: 'ModalFooter example',
|
|
160
|
-
source: path.resolve(__dirname, './examples/constellation/modal-footer-default.tsx'),
|
|
136
|
+
{
|
|
137
|
+
name: 'ModalFooter',
|
|
138
|
+
description: 'The footer section of a modal dialog, typically containing action buttons.',
|
|
139
|
+
status: 'general-availability',
|
|
140
|
+
import: {
|
|
141
|
+
name: 'ModalFooter',
|
|
142
|
+
package: '@atlaskit/modal-dialog',
|
|
143
|
+
type: 'named',
|
|
144
|
+
packagePath: path.resolve(__dirname),
|
|
145
|
+
packageJson: require('./package.json'),
|
|
161
146
|
},
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
147
|
+
usageGuidelines: [
|
|
148
|
+
'Use for primary and secondary actions',
|
|
149
|
+
'Primary button on the right of secondary',
|
|
150
|
+
'Include Cancel/Close for dismissal',
|
|
151
|
+
'Accepts any valid React element for custom layouts',
|
|
152
|
+
],
|
|
153
|
+
contentGuidelines: [
|
|
154
|
+
'Primary button label should reflect the modal title',
|
|
155
|
+
'Use action verbs in button labels',
|
|
156
|
+
],
|
|
157
|
+
examples: [
|
|
158
|
+
{
|
|
159
|
+
name: 'Modal Footer',
|
|
160
|
+
description: 'ModalFooter example',
|
|
161
|
+
source: path.resolve(__dirname, './examples/constellation/modal-footer-default.tsx'),
|
|
162
|
+
},
|
|
163
|
+
],
|
|
164
|
+
keywords: ['modal', 'footer', 'actions', 'buttons'],
|
|
165
|
+
categories: ['overlay'],
|
|
176
166
|
},
|
|
177
|
-
|
|
178
|
-
'
|
|
179
|
-
'
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
167
|
+
{
|
|
168
|
+
name: 'ModalTransition',
|
|
169
|
+
description: 'A wrapper that provides enter/exit transitions for modal content.',
|
|
170
|
+
status: 'general-availability',
|
|
171
|
+
import: {
|
|
172
|
+
name: 'ModalTransition',
|
|
173
|
+
package: '@atlaskit/modal-dialog',
|
|
174
|
+
type: 'named',
|
|
175
|
+
packagePath: path.resolve(__dirname),
|
|
176
|
+
packageJson: require('./package.json'),
|
|
187
177
|
},
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
packageJson: require('./package.json'),
|
|
178
|
+
usageGuidelines: [
|
|
179
|
+
'Wrap Modal with ModalTransition for animated open/close',
|
|
180
|
+
'Use when modal visibility is controlled by state',
|
|
181
|
+
'Children mount when visible and unmount when closed',
|
|
182
|
+
],
|
|
183
|
+
examples: [
|
|
184
|
+
{
|
|
185
|
+
name: 'Modal Transition',
|
|
186
|
+
description: 'ModalTransition example',
|
|
187
|
+
source: path.resolve(__dirname, './examples/constellation/modal-default.tsx'),
|
|
188
|
+
},
|
|
189
|
+
],
|
|
190
|
+
keywords: ['modal', 'transition', 'animation'],
|
|
191
|
+
categories: ['overlay'],
|
|
203
192
|
},
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
{
|
|
216
|
-
name: 'Close Button',
|
|
217
|
-
description: 'CloseButton example',
|
|
218
|
-
source: path.resolve(__dirname, './examples/constellation/modal-header-custom.tsx'),
|
|
193
|
+
{
|
|
194
|
+
name: 'CloseButton',
|
|
195
|
+
description:
|
|
196
|
+
'An accessible close button for use in custom modal headers. Ensures users have an obvious way to close the modal.',
|
|
197
|
+
status: 'general-availability',
|
|
198
|
+
import: {
|
|
199
|
+
name: 'CloseButton',
|
|
200
|
+
package: '@atlaskit/modal-dialog',
|
|
201
|
+
type: 'named',
|
|
202
|
+
packagePath: path.resolve(__dirname),
|
|
203
|
+
packageJson: require('./package.json'),
|
|
219
204
|
},
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
205
|
+
usageGuidelines: [
|
|
206
|
+
'Use when customizing ModalHeader without hasCloseButton',
|
|
207
|
+
'Render CloseButton first in DOM for proper focus order',
|
|
208
|
+
'Use Flex with row-reverse if close should appear on the right',
|
|
209
|
+
'Provide label prop for custom accessible name',
|
|
210
|
+
],
|
|
211
|
+
accessibilityGuidelines: [
|
|
212
|
+
'Close button is required for modals (consult a11y team for rare exceptions)',
|
|
213
|
+
'Ensure close button is keyboard accessible',
|
|
214
|
+
],
|
|
215
|
+
examples: [
|
|
216
|
+
{
|
|
217
|
+
name: 'Close Button',
|
|
218
|
+
description: 'CloseButton example',
|
|
219
|
+
source: path.resolve(__dirname, './examples/constellation/modal-header-custom.tsx'),
|
|
220
|
+
},
|
|
221
|
+
],
|
|
222
|
+
keywords: ['modal', 'close', 'button', 'dismiss'],
|
|
223
|
+
categories: ['overlay'],
|
|
224
|
+
},
|
|
225
|
+
],
|
|
226
|
+
};
|
|
225
227
|
|
|
226
228
|
export default documentation;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/modal-dialog",
|
|
3
|
-
"version": "15.1
|
|
3
|
+
"version": "15.2.1",
|
|
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/"
|
|
@@ -39,16 +39,16 @@
|
|
|
39
39
|
"@atlaskit/button": "^23.11.0",
|
|
40
40
|
"@atlaskit/css": "^0.19.0",
|
|
41
41
|
"@atlaskit/ds-lib": "^7.0.0",
|
|
42
|
-
"@atlaskit/icon": "^35.
|
|
42
|
+
"@atlaskit/icon": "^35.1.0",
|
|
43
43
|
"@atlaskit/layering": "^3.7.0",
|
|
44
44
|
"@atlaskit/motion": "^6.2.0",
|
|
45
45
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
46
46
|
"@atlaskit/portal": "^5.5.0",
|
|
47
47
|
"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
|
|
48
48
|
"@atlaskit/primitives": "^19.0.0",
|
|
49
|
-
"@atlaskit/theme": "^
|
|
49
|
+
"@atlaskit/theme": "^25.0.0",
|
|
50
50
|
"@atlaskit/tokens": "^13.0.0",
|
|
51
|
-
"@atlaskit/top-layer": "^0.
|
|
51
|
+
"@atlaskit/top-layer": "^0.9.0",
|
|
52
52
|
"@babel/runtime": "^7.0.0",
|
|
53
53
|
"@compiled/react": "^0.20.0",
|
|
54
54
|
"bind-event-listener": "^3.0.0",
|
|
@@ -76,13 +76,13 @@
|
|
|
76
76
|
"@atlaskit/form": "^15.5.0",
|
|
77
77
|
"@atlaskit/heading": "^5.4.0",
|
|
78
78
|
"@atlaskit/link": "^3.4.0",
|
|
79
|
-
"@atlaskit/popup": "^4.
|
|
79
|
+
"@atlaskit/popup": "^4.21.0",
|
|
80
80
|
"@atlaskit/radio": "^8.6.0",
|
|
81
81
|
"@atlaskit/section-message": "^8.13.0",
|
|
82
82
|
"@atlaskit/select": "^21.12.0",
|
|
83
83
|
"@atlaskit/spotlight": "^0.14.0",
|
|
84
84
|
"@atlaskit/textfield": "^8.3.0",
|
|
85
|
-
"@atlaskit/tooltip": "^22.
|
|
85
|
+
"@atlaskit/tooltip": "^22.3.0",
|
|
86
86
|
"@atlassian/feature-flags-test-utils": "^1.1.0",
|
|
87
87
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
88
88
|
"@atlassian/ssr-tests": "workspace:^",
|