Skip to content

Commit 8217bd4

Browse files
devongovettdevongovett
authored
chore: Update S2 Dialog codemods (#7388)
* Rename isDismissable to isDismissible * Update Dialog codemod * Fix TS strict
1 parent 52e167d commit 8217bd4

File tree

8 files changed

+314
-19
lines changed

8 files changed

+314
-19
lines changed

‎packages/@react-spectrum/s2/src/CustomDialog.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,9 @@ export interface CustomDialogProps extends Omit<RACDialogProps, 'className' | 's
2424
*/
2525
size?: 'S' | 'M' | 'L' | 'fullscreen' | 'fullscreenTakeover',
2626
/**
27-
* Whether the Dialog is dismissable.
27+
* Whether the Dialog is dismissible.
2828
*/
29-
isDismissable?: boolean,
29+
isDismissible?: boolean,
3030
/** Whether pressing the escape key to close the dialog should be disabled. */
3131
isKeyboardDismissDisabled?: boolean,
3232
/**
@@ -58,14 +58,14 @@ const dialogStyle = style({
5858
function CustomDialog(props: CustomDialogProps, ref: DOMRef) {
5959
let {
6060
size,
61-
isDismissable,
61+
isDismissible,
6262
isKeyboardDismissDisabled,
6363
padding = 'default'
6464
} = props;
6565
let domRef = useDOMRef(ref);
6666

6767
return (
68-
<Modal size={size} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
68+
<Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
6969
<RACDialog
7070
{...props}
7171
ref={domRef}

‎packages/@react-spectrum/s2/src/Dialog.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@ import {useDOMRef} from '@react-spectrum/utils';
2525
// TODO: what style overrides should be allowed?
2626
export interface DialogProps extends Omit<RACDialogProps, 'className' | 'style'>, StyleProps {
2727
/**
28-
* Whether the Dialog is dismissable.
28+
* Whether the Dialog is dismissible.
2929
*/
30-
isDismissable?: boolean,
30+
isDismissible?: boolean,
3131
/**
3232
* The size of the Dialog.
3333
*
@@ -91,11 +91,11 @@ export const dialogInner = style({
9191
});
9292

9393
function Dialog(props: DialogProps, ref: DOMRef) {
94-
let {size = 'M', isDismissable, isKeyboardDismissDisabled} = props;
94+
let {size = 'M', isDismissible, isKeyboardDismissDisabled} = props;
9595
let domRef = useDOMRef(ref);
9696

9797
return (
98-
<Modal size={size} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
98+
<Modal size={size} isDismissable={isDismissible} isKeyboardDismissDisabled={isKeyboardDismissDisabled}>
9999
<RACDialog
100100
{...props}
101101
ref={domRef}
@@ -130,12 +130,12 @@ function Dialog(props: DialogProps, ref: DOMRef) {
130130
},
131131
marginEnd: {
132132
default: 32,
133-
isDismissable: 12
133+
isDismissible: 12
134134
},
135135
marginTop: {
136136
default: 12 // margin to dismiss button
137137
}
138-
})({isDismissable: props.isDismissable})}>
138+
})({isDismissible: props.isDismissible})}>
139139
<div
140140
className={style({
141141
// Wrapper for heading, header, and button group.
@@ -173,7 +173,7 @@ function Dialog(props: DialogProps, ref: DOMRef) {
173173
{children}
174174
</Provider>
175175
</div>
176-
{props.isDismissable &&
176+
{props.isDismissible &&
177177
<CloseButton styles={style({marginBottom: 12})} />
178178
}
179179
</div>
@@ -214,7 +214,7 @@ function Dialog(props: DialogProps, ref: DOMRef) {
214214
[HeaderContext, {isHidden: true}],
215215
[ContentContext, {isHidden: true}],
216216
[FooterContext, {styles: footer}],
217-
[ButtonGroupContext, {isHidden: props.isDismissable, styles: buttonGroup, align: 'end'}]
217+
[ButtonGroupContext, {isHidden: props.isDismissible, styles: buttonGroup, align: 'end'}]
218218
]}>
219219
{children}
220220
</Provider>

‎packages/@react-spectrum/s2/src/DialogContainer.tsx

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {ModalContext, useSlottedContext} from 'react-aria-components';
1414
import React, {ReactElement, useState} from 'react';
1515
import {SpectrumDialogContainerProps} from '@react-types/dialog';
1616

17-
export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type'> {}
17+
export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps, 'type' | 'isDismissable' | 'isKeyboardDismissDisabled'> {}
1818

1919
/**
2020
* A DialogContainer accepts a single Dialog as a child, and manages showing and hiding
@@ -24,9 +24,7 @@ export interface DialogContainerProps extends Omit<SpectrumDialogContainerProps,
2424
export function DialogContainer(props: DialogContainerProps) {
2525
let {
2626
children,
27-
onDismiss,
28-
isDismissable = false,
29-
isKeyboardDismissDisabled
27+
onDismiss
3028
} = props;
3129

3230
let childArray = React.Children.toArray(children);
@@ -56,7 +54,7 @@ export function DialogContainer(props: DialogContainerProps) {
5654
};
5755

5856
return (
59-
<ModalContext.Provider value={{isOpen: !!child, onOpenChange, isDismissable, isKeyboardDismissDisabled}}>
57+
<ModalContext.Provider value={{isOpen: !!child, onOpenChange}}>
6058
{lastChild}
6159
</ModalContext.Provider>
6260
);

‎packages/@react-spectrum/s2/stories/CustomDialog.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export default meta;
3333
export const WhatsNew = (args: any) => (
3434
<DialogTrigger>
3535
<ActionButton>Open dialog</ActionButton>
36-
<CustomDialog padding="none" {...args} isDismissable styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
36+
<CustomDialog padding="none" {...args} isDismissible styles={style({maxWidth: {isSizeUnset: '[800px]'}})({isSizeUnset: args.size == null})}>
3737
<div className={style({display: 'flex', size: 'full'})}>
3838
<div className={style({display: 'flex', flexDirection: 'column', rowGap: 32, padding: 32, backgroundColor: 'layer-1', width: 192, flexShrink: 0})}>
3939
<Heading slot="title" styles={style({font: 'title-3xl', marginY: 0})}>What's new</Heading>

‎packages/dev/codemods/src/s1-to-s2/__tests__/__snapshots__/dialog.test.ts.snap

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,36 @@ exports[`Moves close function from DialogTrigger to Dialog 1`] = `
6262
</DialogTrigger>"
6363
`;
6464

65+
exports[`Moves isDismissable 1`] = `
66+
"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
67+
68+
<DialogTrigger>
69+
<Button>Test</Button>
70+
<Dialog isDismissible>
71+
<Heading>Test</Heading>
72+
73+
<Content>Content</Content>
74+
</Dialog>
75+
</DialogTrigger>"
76+
`;
77+
78+
exports[`Moves isDismissable from DialogContainer 1`] = `
79+
"import { DialogContainer, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
80+
81+
<DialogContainer>
82+
{showDialog1 && <Dialog isDismissible>
83+
<Heading>Test</Heading>
84+
85+
<Content>Content</Content>
86+
</Dialog>}
87+
{showDialog2 && <Dialog isDismissible>
88+
<Heading>Test</Heading>
89+
90+
<Content>Content</Content>
91+
</Dialog>}
92+
</DialogContainer>"
93+
`;
94+
6595
exports[`Removes divider 1`] = `
6696
"import { Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
6797
@@ -90,6 +120,87 @@ exports[`Removes onDismiss and leaves a comment 1`] = `
90120
</DialogTrigger>"
91121
`;
92122

123+
exports[`Replaces type="fullscreen" with FullscreenDialog component 1`] = `
124+
"import { FullscreenDialog, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
125+
126+
<DialogTrigger>
127+
<Button>Test</Button>
128+
<FullscreenDialog isKeyboardDismissDisabled>
129+
<Heading>Test</Heading>
130+
<Divider />
131+
<Content>Content</Content>
132+
</FullscreenDialog>
133+
</DialogTrigger>"
134+
`;
135+
136+
exports[`Replaces type="fullscreen" with FullscreenDialog component in DialogContainer 1`] = `
137+
"import {
138+
FullscreenDialog,
139+
DialogContainer,
140+
Button,
141+
Dialog,
142+
Heading,
143+
Content,
144+
Divider,
145+
} from "@react-spectrum/s2";
146+
147+
<DialogContainer>
148+
{showDialog1 && <FullscreenDialog isKeyboardDismissDisabled>
149+
<Heading>Test</Heading>
150+
<Divider />
151+
<Content>Content</Content>
152+
</FullscreenDialog>}
153+
{showDialog2 && <FullscreenDialog isKeyboardDismissDisabled>
154+
<Heading>Test</Heading>
155+
<Divider />
156+
<Content>Content</Content>
157+
</FullscreenDialog>}
158+
</DialogContainer>"
159+
`;
160+
161+
exports[`Replaces type="fullscreenTakeover" with FullscreenDialog component 1`] = `
162+
"import { FullscreenDialog, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
163+
164+
<DialogTrigger>
165+
<Button>Test</Button>
166+
<FullscreenDialog variant="fullscreenTakeover">
167+
<Heading>Test</Heading>
168+
<Divider />
169+
<Content>Content</Content>
170+
</FullscreenDialog>
171+
</DialogTrigger>"
172+
`;
173+
174+
exports[`Replaces type="fullscreenTakeover" with FullscreenDialog component and close function 1`] = `
175+
"import { FullscreenDialog, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
176+
177+
<DialogTrigger>
178+
<Button>Test</Button>
179+
<FullscreenDialog variant="fullscreenTakeover">{(
180+
{
181+
close
182+
}
183+
) => <>
184+
<Heading>Test</Heading>
185+
186+
<Content>Content</Content>
187+
</>}</FullscreenDialog>
188+
</DialogTrigger>"
189+
`;
190+
191+
exports[`Replaces type="popover" with Popover component 1`] = `
192+
"import { Popover, DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
193+
194+
<DialogTrigger>
195+
<Button>Test</Button>
196+
<Popover hideArrow>
197+
<Heading>Test</Heading>
198+
<Divider />
199+
<Content>Content</Content>
200+
</Popover>
201+
</DialogTrigger>"
202+
`;
203+
93204
exports[`bails when it cannot move the close function 1`] = `
94205
"import { DialogTrigger, Button, Dialog, Heading, Content, Divider } from "@react-spectrum/s2";
95206

‎packages/dev/codemods/src/s1-to-s2/__tests__/dialog.test.ts

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,3 +110,104 @@ import {DialogTrigger, Button, Dialog, Heading, Content, Divider} from '@adobe/r
110110
}
111111
</DialogTrigger>
112112
`);
113+
114+
test('Moves isDismissable', `
115+
import {DialogTrigger, Button, Dialog, Heading, Content, Divider} from '@adobe/react-spectrum';
116+
117+
<DialogTrigger isDismissable>
118+
<Button>Test</Button>
119+
<Dialog>
120+
<Heading>Test</Heading>
121+
<Divider />
122+
<Content>Content</Content>
123+
</Dialog>
124+
</DialogTrigger>
125+
`);
126+
127+
test('Replaces type="popover" with Popover component', `
128+
import {DialogTrigger, Button, Dialog, Heading, Content, Divider} from '@adobe/react-spectrum';
129+
130+
<DialogTrigger type="popover" hideArrow>
131+
<Button>Test</Button>
132+
<Dialog>
133+
<Heading>Test</Heading>
134+
<Divider />
135+
<Content>Content</Content>
136+
</Dialog>
137+
</DialogTrigger>
138+
`);
139+
140+
test('Replaces type="fullscreen" with FullscreenDialog component', `
141+
import {DialogTrigger, Button, Dialog, Heading, Content, Divider} from '@adobe/react-spectrum';
142+
143+
<DialogTrigger type="fullscreen" isKeyboardDismissDisabled>
144+
<Button>Test</Button>
145+
<Dialog>
146+
<Heading>Test</Heading>
147+
<Divider />
148+
<Content>Content</Content>
149+
</Dialog>
150+
</DialogTrigger>
151+
`);
152+
153+
test('Replaces type="fullscreenTakeover" with FullscreenDialog component', `
154+
import {DialogTrigger, Button, Dialog, Heading, Content, Divider} from '@adobe/react-spectrum';
155+
156+
<DialogTrigger type="fullscreenTakeover">
157+
<Button>Test</Button>
158+
<Dialog>
159+
<Heading>Test</Heading>
160+
<Divider />
161+
<Content>Content</Content>
162+
</Dialog>
163+
</DialogTrigger>
164+
`);
165+
166+
test('Replaces type="fullscreenTakeover" with FullscreenDialog component and close function', `
167+
import {DialogTrigger, Button, Dialog, Heading, Content, Divider} from '@adobe/react-spectrum';
168+
169+
<DialogTrigger type="fullscreenTakeover">
170+
<Button>Test</Button>
171+
{(close) =>
172+
<Dialog>
173+
<Heading>Test</Heading>
174+
<Divider />
175+
<Content>Content</Content>
176+
</Dialog>
177+
}
178+
</DialogTrigger>
179+
`);
180+
181+
test('Moves isDismissable from DialogContainer', `
182+
import {DialogContainer, Button, Dialog, Heading, Content, Divider} from '@adobe/react-spectrum';
183+
184+
<DialogContainer isDismissable>
185+
{showDialog1 && <Dialog>
186+
<Heading>Test</Heading>
187+
<Divider />
188+
<Content>Content</Content>
189+
</Dialog>}
190+
{showDialog2 && <Dialog>
191+
<Heading>Test</Heading>
192+
<Divider />
193+
<Content>Content</Content>
194+
</Dialog>}
195+
</DialogContainer>
196+
`);
197+
198+
test('Replaces type="fullscreen" with FullscreenDialog component in DialogContainer', `
199+
import {DialogContainer, Button, Dialog, Heading, Content, Divider} from '@adobe/react-spectrum';
200+
201+
<DialogContainer type="fullscreen" isKeyboardDismissDisabled>
202+
{showDialog1 && <Dialog>
203+
<Heading>Test</Heading>
204+
<Divider />
205+
<Content>Content</Content>
206+
</Dialog>}
207+
{showDialog2 && <Dialog>
208+
<Heading>Test</Heading>
209+
<Divider />
210+
<Content>Content</Content>
211+
</Dialog>}
212+
</DialogContainer>
213+
`);

‎packages/dev/codemods/src/s1-to-s2/src/codemods/changes.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ type FunctionInfo =
7575
| {
7676
name: 'updateLegacyLink',
7777
args: {}
78+
}
79+
| {
80+
name: 'updateDialogChild',
81+
args: {}
7882
};
7983

8084
type Change = {
@@ -428,6 +432,30 @@ export const changes: ChangesJSON = {
428432
name: 'moveRenderPropsToChild',
429433
args: {newChildComponent: 'Dialog'}
430434
}
435+
},
436+
{
437+
description: 'Rename isDismissable to isDismissible',
438+
reason: 'Fixed spelling',
439+
function: {name: 'updatePropName', args: {oldProp: 'isDismissable', newProp: 'isDismissible'}}
440+
},
441+
{
442+
description: 'Update Dialog child to Popover or FullscreenDialog depending on type prop',
443+
reason: 'Updated API',
444+
function: {name: 'updateDialogChild', args: {}}
445+
}
446+
]
447+
},
448+
DialogContainer: {
449+
changes: [
450+
{
451+
description: 'Rename isDismissable to isDismissible',
452+
reason: 'Fixed spelling',
453+
function: {name: 'updatePropName', args: {oldProp: 'isDismissable', newProp: 'isDismissible'}}
454+
},
455+
{
456+
description: 'Update Dialog child to Popover or FullscreenDialog depending on type prop',
457+
reason: 'Updated API',
458+
function: {name: 'updateDialogChild', args: {}}
431459
}
432460
]
433461
},

0 commit comments

Comments
 (0)