@radix-ui/react-alert-dialog 1.1.4 → 1.1.5-rc.2

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.
Files changed (4) hide show
  1. package/package.json +12 -3
  2. package/src/AlertDialog.stories.module.css +78 -0
  3. package/src/AlertDialog.stories.tsx +82 -161
  4. package/src/AlertDialog.test.tsx +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@radix-ui/react-alert-dialog",
3
- "version": "1.1.4",
3
+ "version": "1.1.5-rc.2",
4
4
  "license": "MIT",
5
5
  "exports": {
6
6
  ".": {
@@ -31,10 +31,18 @@
31
31
  "@radix-ui/primitive": "1.1.1",
32
32
  "@radix-ui/react-compose-refs": "1.1.1",
33
33
  "@radix-ui/react-context": "1.1.1",
34
- "@radix-ui/react-dialog": "1.1.4",
34
+ "@radix-ui/react-dialog": "1.1.5-rc.2",
35
35
  "@radix-ui/react-primitive": "2.0.1",
36
36
  "@radix-ui/react-slot": "1.1.1"
37
37
  },
38
+ "devDependencies": {
39
+ "@repo/typescript-config": "0.0.0",
40
+ "@types/react": "^19.0.7",
41
+ "@types/react-dom": "^19.0.3",
42
+ "react": "^19.0.0",
43
+ "react-dom": "^19.0.0",
44
+ "typescript": "^5.7.3"
45
+ },
38
46
  "peerDependencies": {
39
47
  "@types/react": "*",
40
48
  "@types/react-dom": "*",
@@ -56,5 +64,6 @@
56
64
  },
57
65
  "bugs": {
58
66
  "url": "https://github.com/radix-ui/primitives/issues"
59
- }
67
+ },
68
+ "stableVersion": "1.1.4"
60
69
  }
package/src/AlertDialog.stories.module.css ADDED
@@ -0,0 +1,78 @@
1
+ .trigger {
2
+ }
3
+
4
+ .overlay,
5
+ .overlayAttr {
6
+ /* ensures overlay is positionned correctly */
7
+ position: fixed;
8
+ inset: 0;
9
+ /* --------- */
10
+ background-color: var(--gray-12);
11
+ opacity: 0.2;
12
+ }
13
+
14
+ .content,
15
+ .chromaticContent,
16
+ .contentAttr {
17
+ /* ensures good default position for content */
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ /* --------- */
22
+ top: 50%;
23
+ left: 50%;
24
+ transform: translate(-50%, -50%);
25
+ background: var(--gray-1);
26
+ min-width: 300px;
27
+ min-height: 150px;
28
+ padding: 50px;
29
+ border-radius: 10px;
30
+ background-color: var(--gray-1);
31
+ box-shadow: 0 2px 10px var(--black-a6);
32
+ }
33
+
34
+ .cancel,
35
+ .action {
36
+ appearance: none;
37
+ padding: 10px;
38
+ border: none;
39
+ }
40
+
41
+ .cancel {
42
+ background: var(--gray-3);
43
+ color: var(--gray-12);
44
+ }
45
+
46
+ .action {
47
+ background: var(--red-9);
48
+ color: var(--gray-1);
49
+ }
50
+
51
+ .title {
52
+ }
53
+
54
+ .description {
55
+ }
56
+
57
+ .chromaticContent {
58
+ padding: 10px;
59
+ min-width: auto;
60
+ min-height: auto;
61
+ }
62
+
63
+ .triggerAttr .overlayAttr,
64
+ .contentAttr,
65
+ .cancelAttr,
66
+ .actionAttr,
67
+ .titleAttr,
68
+ .descriptionAttr {
69
+ background-color: var(--blue-a12);
70
+ border: 2px solid var(--blue-9);
71
+ padding: 10px;
72
+ &[data-state='closed'] {
73
+ border-color: var(--red-9);
74
+ }
75
+ &[data-state='open'] {
76
+ border-color: var(--green-9);
77
+ }
78
+ }
package/src/AlertDialog.stories.tsx CHANGED
@@ -1,21 +1,21 @@
1
1
  import * as React from 'react';
2
- import { css } from '../../../../stitches.config';
3
2
  import * as AlertDialog from '@radix-ui/react-alert-dialog';
3
+ import styles from './AlertDialog.stories.module.css';
4
4
 
5
5
  export default { title: 'Components/AlertDialog' };
6
6
 
7
7
  export const Styled = () => (
8
8
  <AlertDialog.Root>
9
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
9
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
10
10
  <AlertDialog.Portal>
11
- <AlertDialog.Overlay className={overlayClass()} />
12
- <AlertDialog.Content className={contentClass()}>
13
- <AlertDialog.Title className={titleClass()}>Are you sure?</AlertDialog.Title>
14
- <AlertDialog.Description className={descriptionClass()}>
11
+ <AlertDialog.Overlay className={styles.overlay} />
12
+ <AlertDialog.Content className={styles.content}>
13
+ <AlertDialog.Title className={styles.title}>Are you sure?</AlertDialog.Title>
14
+ <AlertDialog.Description className={styles.description}>
15
15
  This will do a very dangerous thing. Thar be dragons!
16
16
  </AlertDialog.Description>
17
- <AlertDialog.Action className={actionClass()}>yolo, do it</AlertDialog.Action>
18
- <AlertDialog.Cancel className={cancelClass()}>maybe not</AlertDialog.Cancel>
17
+ <AlertDialog.Action className={styles.action}>yolo, do it</AlertDialog.Action>
18
+ <AlertDialog.Cancel className={styles.cancel}>maybe not</AlertDialog.Cancel>
19
19
  </AlertDialog.Content>
20
20
  </AlertDialog.Portal>
21
21
  </AlertDialog.Root>
@@ -42,17 +42,17 @@ export const Controlled = () => {
42
42
  {housePurchased ? 'You bought the house! Sell it!' : 'Buy this house'}
43
43
  </AlertDialog.Trigger>
44
44
  <AlertDialog.Portal>
45
- <AlertDialog.Overlay className={overlayClass()} />
46
- <AlertDialog.Content className={contentClass()}>
45
+ <AlertDialog.Overlay className={styles.overlay} />
46
+ <AlertDialog.Content className={styles.content}>
47
47
  <AlertDialog.Title>Are you sure?</AlertDialog.Title>
48
48
  <AlertDialog.Description>
49
49
  Houses are very expensive and it looks like you only have €20 in the bank. Maybe
50
50
  consult with a financial advisor?
51
51
  </AlertDialog.Description>
52
- <AlertDialog.Action className={actionClass()} onClick={() => setHousePurchased(true)}>
52
+ <AlertDialog.Action className={styles.action} onClick={() => setHousePurchased(true)}>
53
53
  buy it anyway
54
54
  </AlertDialog.Action>
55
- <AlertDialog.Cancel className={cancelClass()}>
55
+ <AlertDialog.Cancel className={styles.cancel}>
56
56
  good point, I'll reconsider
57
57
  </AlertDialog.Cancel>
58
58
  </AlertDialog.Content>
@@ -75,38 +75,38 @@ export const Chromatic = () => (
75
75
  <h1>Uncontrolled</h1>
76
76
  <h2>Closed</h2>
77
77
  <AlertDialog.Root>
78
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
78
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
79
79
  <AlertDialog.Portal>
80
- <AlertDialog.Overlay className={overlayClass()} />
81
- <AlertDialog.Content className={chromaticContentClass()}>
82
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
83
- <AlertDialog.Description className={descriptionClass()}>
80
+ <AlertDialog.Overlay className={styles.overlay} />
81
+ <AlertDialog.Content className={styles.chromaticContent}>
82
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
83
+ <AlertDialog.Description className={styles.description}>
84
84
  Description
85
85
  </AlertDialog.Description>
86
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
87
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
86
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
87
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
88
88
  </AlertDialog.Content>
89
89
  </AlertDialog.Portal>
90
90
  </AlertDialog.Root>
91
91
 
92
92
  <h2>Open</h2>
93
93
  <AlertDialog.Root defaultOpen>
94
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
94
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
95
95
  <AlertDialog.Portal>
96
96
  <AlertDialog.Overlay
97
- className={overlayClass()}
97
+ className={styles.overlay}
98
98
  style={{ left: 0, bottom: '50%', width: '25%' }}
99
99
  />
100
100
  <AlertDialog.Content
101
- className={chromaticContentClass()}
101
+ className={styles.chromaticContent}
102
102
  style={{ top: '25%', left: '12%' }}
103
103
  >
104
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
105
- <AlertDialog.Description className={descriptionClass()}>
104
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
105
+ <AlertDialog.Description className={styles.description}>
106
106
  Description
107
107
  </AlertDialog.Description>
108
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
109
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
108
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
109
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
110
110
  </AlertDialog.Content>
111
111
  </AlertDialog.Portal>
112
112
  </AlertDialog.Root>
@@ -117,39 +117,39 @@ export const Chromatic = () => (
117
117
  <h2>Closed</h2>
118
118
  <AlertDialog.Root>
119
119
  <AlertDialog.Portal>
120
- <AlertDialog.Overlay className={overlayClass()} />
121
- <AlertDialog.Content className={chromaticContentClass()}>
122
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
123
- <AlertDialog.Description className={descriptionClass()}>
120
+ <AlertDialog.Overlay className={styles.overlay} />
121
+ <AlertDialog.Content className={styles.chromaticContent}>
122
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
123
+ <AlertDialog.Description className={styles.description}>
124
124
  Description
125
125
  </AlertDialog.Description>
126
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
127
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
126
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
127
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
128
128
  </AlertDialog.Content>
129
129
  </AlertDialog.Portal>
130
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
130
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
131
131
  </AlertDialog.Root>
132
132
 
133
133
  <h2>Open</h2>
134
134
  <AlertDialog.Root defaultOpen>
135
135
  <AlertDialog.Portal>
136
136
  <AlertDialog.Overlay
137
- className={overlayClass()}
137
+ className={styles.overlay}
138
138
  style={{ left: '25%', bottom: '50%', width: '25%' }}
139
139
  />
140
140
  <AlertDialog.Content
141
- className={chromaticContentClass()}
141
+ className={styles.chromaticContent}
142
142
  style={{ top: '25%', left: '37%' }}
143
143
  >
144
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
145
- <AlertDialog.Description className={descriptionClass()}>
144
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
145
+ <AlertDialog.Description className={styles.description}>
146
146
  Description
147
147
  </AlertDialog.Description>
148
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
149
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
148
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
149
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
150
150
  </AlertDialog.Content>
151
151
  </AlertDialog.Portal>
152
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
152
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
153
153
  </AlertDialog.Root>
154
154
  </div>
155
155
 
@@ -157,38 +157,38 @@ export const Chromatic = () => (
157
157
  <h1>Controlled</h1>
158
158
  <h2>Closed</h2>
159
159
  <AlertDialog.Root open={false}>
160
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
160
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
161
161
  <AlertDialog.Portal>
162
- <AlertDialog.Overlay className={overlayClass()} />
163
- <AlertDialog.Content className={chromaticContentClass()}>
164
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
165
- <AlertDialog.Description className={descriptionClass()}>
162
+ <AlertDialog.Overlay className={styles.overlay} />
163
+ <AlertDialog.Content className={styles.chromaticContent}>
164
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
165
+ <AlertDialog.Description className={styles.description}>
166
166
  Description
167
167
  </AlertDialog.Description>
168
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
169
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
168
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
169
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
170
170
  </AlertDialog.Content>
171
171
  </AlertDialog.Portal>
172
172
  </AlertDialog.Root>
173
173
 
174
174
  <h2>Open</h2>
175
175
  <AlertDialog.Root open>
176
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
176
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
177
177
  <AlertDialog.Portal>
178
178
  <AlertDialog.Overlay
179
- className={overlayClass()}
179
+ className={styles.overlay}
180
180
  style={{ left: '50%', bottom: '50%', width: '25%' }}
181
181
  />
182
182
  <AlertDialog.Content
183
- className={chromaticContentClass()}
183
+ className={styles.chromaticContent}
184
184
  style={{ top: '25%', left: '62%' }}
185
185
  >
186
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
187
- <AlertDialog.Description className={descriptionClass()}>
186
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
187
+ <AlertDialog.Description className={styles.description}>
188
188
  Description
189
189
  </AlertDialog.Description>
190
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
191
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
190
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
191
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
192
192
  </AlertDialog.Content>
193
193
  </AlertDialog.Portal>
194
194
  </AlertDialog.Root>
@@ -199,39 +199,39 @@ export const Chromatic = () => (
199
199
  <h2>Closed</h2>
200
200
  <AlertDialog.Root open={false}>
201
201
  <AlertDialog.Portal>
202
- <AlertDialog.Overlay className={overlayClass()} />
203
- <AlertDialog.Content className={chromaticContentClass()}>
204
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
205
- <AlertDialog.Description className={descriptionClass()}>
202
+ <AlertDialog.Overlay className={styles.overlay} />
203
+ <AlertDialog.Content className={styles.chromaticContent}>
204
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
205
+ <AlertDialog.Description className={styles.description}>
206
206
  Description
207
207
  </AlertDialog.Description>
208
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
209
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
208
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
209
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
210
210
  </AlertDialog.Content>
211
211
  </AlertDialog.Portal>
212
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
212
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
213
213
  </AlertDialog.Root>
214
214
 
215
215
  <h2>Open</h2>
216
216
  <AlertDialog.Root open>
217
217
  <AlertDialog.Portal>
218
218
  <AlertDialog.Overlay
219
- className={overlayClass()}
219
+ className={styles.overlay}
220
220
  style={{ left: '75%', bottom: '50%', width: '25%' }}
221
221
  />
222
222
  <AlertDialog.Content
223
- className={chromaticContentClass()}
223
+ className={styles.chromaticContent}
224
224
  style={{ top: '25%', left: '88%' }}
225
225
  >
226
- <AlertDialog.Title className={titleClass()}>Title</AlertDialog.Title>
227
- <AlertDialog.Description className={descriptionClass()}>
226
+ <AlertDialog.Title className={styles.title}>Title</AlertDialog.Title>
227
+ <AlertDialog.Description className={styles.description}>
228
228
  Description
229
229
  </AlertDialog.Description>
230
- <AlertDialog.Action className={actionClass()}>Confirm</AlertDialog.Action>
231
- <AlertDialog.Cancel className={cancelClass()}>Cancel</AlertDialog.Cancel>
230
+ <AlertDialog.Action className={styles.action}>Confirm</AlertDialog.Action>
231
+ <AlertDialog.Cancel className={styles.cancel}>Cancel</AlertDialog.Cancel>
232
232
  </AlertDialog.Content>
233
233
  </AlertDialog.Portal>
234
- <AlertDialog.Trigger className={triggerClass()}>delete everything</AlertDialog.Trigger>
234
+ <AlertDialog.Trigger className={styles.trigger}>delete everything</AlertDialog.Trigger>
235
235
  </AlertDialog.Root>
236
236
  </div>
237
237
 
@@ -239,32 +239,32 @@ export const Chromatic = () => (
239
239
  <h1>State attributes</h1>
240
240
  <h2>Closed</h2>
241
241
  <AlertDialog.Root>
242
- <AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
242
+ <AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>
243
243
  <AlertDialog.Portal>
244
- <AlertDialog.Overlay className={overlayAttrClass()} />
245
- <AlertDialog.Content className={contentAttrClass()}>
246
- <AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
247
- <AlertDialog.Description className={descriptionAttrClass()}>
244
+ <AlertDialog.Overlay className={styles.overlayAttr} />
245
+ <AlertDialog.Content className={styles.contentAttr}>
246
+ <AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>
247
+ <AlertDialog.Description className={styles.descriptionAttr}>
248
248
  Description
249
249
  </AlertDialog.Description>
250
- <AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
251
- <AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
250
+ <AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>
251
+ <AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>
252
252
  </AlertDialog.Content>
253
253
  </AlertDialog.Portal>
254
254
  </AlertDialog.Root>
255
255
 
256
256
  <h2>Open</h2>
257
257
  <AlertDialog.Root defaultOpen>
258
- <AlertDialog.Trigger className={triggerAttrClass()}>delete everything</AlertDialog.Trigger>
258
+ <AlertDialog.Trigger className={styles.triggerAttr}>delete everything</AlertDialog.Trigger>
259
259
  <AlertDialog.Portal>
260
- <AlertDialog.Overlay className={overlayAttrClass()} style={{ top: '50%' }} />
261
- <AlertDialog.Content className={contentAttrClass()} style={{ top: '75%' }}>
262
- <AlertDialog.Title className={titleAttrClass()}>Title</AlertDialog.Title>
263
- <AlertDialog.Description className={descriptionAttrClass()}>
260
+ <AlertDialog.Overlay className={styles.overlayAttr} style={{ top: '50%' }} />
261
+ <AlertDialog.Content className={styles.contentAttr} style={{ top: '75%' }}>
262
+ <AlertDialog.Title className={styles.titleAttr}>Title</AlertDialog.Title>
263
+ <AlertDialog.Description className={styles.descriptionAttr}>
264
264
  Description
265
265
  </AlertDialog.Description>
266
- <AlertDialog.Action className={actionAttrClass()}>Confirm</AlertDialog.Action>
267
- <AlertDialog.Cancel className={cancelAttrClass()}>Cancel</AlertDialog.Cancel>
266
+ <AlertDialog.Action className={styles.actionAttr}>Confirm</AlertDialog.Action>
267
+ <AlertDialog.Cancel className={styles.cancelAttr}>Cancel</AlertDialog.Cancel>
268
268
  </AlertDialog.Content>
269
269
  </AlertDialog.Portal>
270
270
  </AlertDialog.Root>
@@ -272,82 +272,3 @@ export const Chromatic = () => (
272
272
  </div>
273
273
  );
274
274
  Chromatic.parameters = { chromatic: { disable: false } };
275
-
276
- const triggerClass = css({});
277
-
278
- const RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY: any = {
279
- // ensures overlay is positionned correctly
280
- position: 'fixed',
281
- top: 0,
282
- right: 0,
283
- bottom: 0,
284
- left: 0,
285
- };
286
-
287
- const overlayClass = css({
288
- ...RECOMMENDED_CSS__ALERT_DIALOG__OVERLAY,
289
- backgroundColor: 'black',
290
- opacity: 0.2,
291
- });
292
-
293
- const RECOMMENDED_CSS__ALERT_DIALOG__CONTENT: any = {
294
- // ensures good default position for content
295
- position: 'fixed',
296
- top: 0,
297
- left: 0,
298
- };
299
-
300
- const contentClass = css({
301
- ...RECOMMENDED_CSS__ALERT_DIALOG__CONTENT,
302
- top: '50%',
303
- left: '50%',
304
- transform: 'translate(-50%, -50%)',
305
- background: 'white',
306
- minWidth: 300,
307
- minHeight: 150,
308
- padding: 50,
309
- borderRadius: 10,
310
- backgroundColor: 'white',
311
- boxShadow: '0 2px 10px rgba(0, 0, 0, 0.12)',
312
- });
313
-
314
- const cancelClass = css({
315
- appearance: 'none',
316
- padding: 10,
317
- border: 'none',
318
- background: '$grey100',
319
- });
320
-
321
- const actionClass = css({
322
- appearance: 'none',
323
- padding: 10,
324
- border: 'none',
325
- backgroundColor: '$red',
326
- color: '$white',
327
- });
328
-
329
- const titleClass = css({});
330
-
331
- const descriptionClass = css({});
332
-
333
- const chromaticContentClass = css(contentClass, {
334
- padding: 10,
335
- minWidth: 'auto',
336
- minHeight: 'auto',
337
- });
338
-
339
- const styles = {
340
- backgroundColor: 'rgba(0, 0, 255, 0.3)',
341
- border: '2px solid blue',
342
- padding: 10,
343
-
344
- '&[data-state="closed"]': { borderColor: 'red' },
345
- '&[data-state="open"]': { borderColor: 'green' },
346
- };
347
- const triggerAttrClass = css(styles);
348
- const overlayAttrClass = css(overlayClass, styles);
349
- const contentAttrClass = css(chromaticContentClass, styles);
350
- const cancelAttrClass = css(styles);
351
- const actionAttrClass = css(styles);
352
- const titleAttrClass = css(styles);
353
- const descriptionAttrClass = css(styles);
package/src/AlertDialog.test.tsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { axe } from 'jest-axe';
3
- import { RenderResult } from '@testing-library/react';
3
+ import type { RenderResult } from '@testing-library/react';
4
4
  import { render, fireEvent } from '@testing-library/react';
5
5
  import * as AlertDialog from '@radix-ui/react-alert-dialog';
6
6