@atlaskit/button 20.4.1 → 20.4.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.
- package/CHANGELOG.md +8 -58
- package/dist/cjs/old-button/shared/button-base.js +1 -1
- package/dist/es2019/old-button/shared/button-base.js +1 -1
- package/dist/esm/old-button/shared/button-base.js +1 -1
- package/package.json +1 -3
- package/codemods/15.0.0-lite-mode.tsx +0 -45
- package/codemods/__tests__/15.0.0-lite-mode/optimistic.tsx +0 -638
- package/codemods/__tests__/15.0.0-lite-mode/safe.tsx +0 -223
- package/codemods/__tests__/15.0.0-lite-mode/shared.tsx +0 -255
- package/codemods/helpers/15.0.0-runner.tsx +0 -167
- package/codemods/optimistic-15.0.0-lite-mode.tsx +0 -263
|
@@ -1,638 +0,0 @@
|
|
|
1
|
-
jest.autoMockOff();
|
|
2
|
-
|
|
3
|
-
import transformer from '../../optimistic-15.0.0-lite-mode';
|
|
4
|
-
import { check } from '../_framework';
|
|
5
|
-
|
|
6
|
-
describe('Change `type ButtonAppearances` to `type Appearance`', () => {
|
|
7
|
-
check({
|
|
8
|
-
transformer,
|
|
9
|
-
it: 'should separate types into a different export from the components',
|
|
10
|
-
original: `
|
|
11
|
-
import Button, { ButtonAppearances } from '@atlaskit/button';
|
|
12
|
-
|
|
13
|
-
export type Mine = ButtonAppearances & 'purple';
|
|
14
|
-
|
|
15
|
-
function App() {
|
|
16
|
-
return (
|
|
17
|
-
<Button onClick={() => console.log('hi')}>standard button</Button>
|
|
18
|
-
);
|
|
19
|
-
}
|
|
20
|
-
`,
|
|
21
|
-
expected: `
|
|
22
|
-
import { Appearance } from '@atlaskit/button/types';
|
|
23
|
-
import Button from '@atlaskit/button/standard-button';
|
|
24
|
-
|
|
25
|
-
export type Mine = Appearance & 'purple';
|
|
26
|
-
|
|
27
|
-
function App() {
|
|
28
|
-
return <Button onClick={() => console.log('hi')}>standard button</Button>;
|
|
29
|
-
}
|
|
30
|
-
`,
|
|
31
|
-
});
|
|
32
|
-
});
|
|
33
|
-
|
|
34
|
-
describe('Changing <Button /> usage', () => {
|
|
35
|
-
check({
|
|
36
|
-
transformer,
|
|
37
|
-
it: 'should move to standard button',
|
|
38
|
-
original: `
|
|
39
|
-
import React from 'react';
|
|
40
|
-
import Button from '@atlaskit/button';
|
|
41
|
-
|
|
42
|
-
function App() {
|
|
43
|
-
return (
|
|
44
|
-
<Button onClick={() => console.log('hi')}>standard button</Button>
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
`,
|
|
48
|
-
expected: `
|
|
49
|
-
import React from 'react';
|
|
50
|
-
import Button from '@atlaskit/button/standard-button';
|
|
51
|
-
|
|
52
|
-
function App() {
|
|
53
|
-
return <Button onClick={() => console.log('hi')}>standard button</Button>;
|
|
54
|
-
}
|
|
55
|
-
`,
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
check({
|
|
59
|
-
transformer,
|
|
60
|
-
it: 'should move to standard button (self closing button)',
|
|
61
|
-
original: `
|
|
62
|
-
import React from 'react';
|
|
63
|
-
import Button from '@atlaskit/button';
|
|
64
|
-
|
|
65
|
-
function App() {
|
|
66
|
-
return <Button onClick={() => console.log('hi')} />;
|
|
67
|
-
}
|
|
68
|
-
`,
|
|
69
|
-
expected: `
|
|
70
|
-
import React from 'react';
|
|
71
|
-
import Button from '@atlaskit/button/standard-button';
|
|
72
|
-
|
|
73
|
-
function App() {
|
|
74
|
-
return <Button onClick={() => console.log('hi')} />;
|
|
75
|
-
}
|
|
76
|
-
`,
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
check({
|
|
80
|
-
transformer,
|
|
81
|
-
it: 'should move to standard button (when fallback is needed)',
|
|
82
|
-
original: `
|
|
83
|
-
import React from 'react';
|
|
84
|
-
import Button from './our-button';
|
|
85
|
-
import AkButton from '@atlaskit/button';
|
|
86
|
-
|
|
87
|
-
export function App() {
|
|
88
|
-
return (
|
|
89
|
-
<>
|
|
90
|
-
<Button onClick={() => console.log('hi')} />
|
|
91
|
-
<AkButton onClick={() => console.log('hi')} />
|
|
92
|
-
</>
|
|
93
|
-
);
|
|
94
|
-
}
|
|
95
|
-
`,
|
|
96
|
-
expected: `
|
|
97
|
-
import React from 'react';
|
|
98
|
-
import Button from './our-button';
|
|
99
|
-
import DSButton from '@atlaskit/button/standard-button';
|
|
100
|
-
|
|
101
|
-
export function App() {
|
|
102
|
-
return <>
|
|
103
|
-
<Button onClick={() => console.log('hi')} />
|
|
104
|
-
<DSButton onClick={() => console.log('hi')} />
|
|
105
|
-
</>;
|
|
106
|
-
}
|
|
107
|
-
`,
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
check({
|
|
111
|
-
transformer,
|
|
112
|
-
it: 'should move to loading button',
|
|
113
|
-
original: `
|
|
114
|
-
import React from 'react';
|
|
115
|
-
import Button from '@atlaskit/button';
|
|
116
|
-
import { getIsLoading } from './get-is-loading';
|
|
117
|
-
|
|
118
|
-
function App() {
|
|
119
|
-
return (
|
|
120
|
-
<>
|
|
121
|
-
<Button isLoading>loading button</Button>
|
|
122
|
-
<Button isLoading={getIsLoading()}>loading button</Button>
|
|
123
|
-
</>
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
`,
|
|
127
|
-
expected: `
|
|
128
|
-
import React from 'react';
|
|
129
|
-
import LoadingButton from '@atlaskit/button/loading-button';
|
|
130
|
-
import { getIsLoading } from './get-is-loading';
|
|
131
|
-
|
|
132
|
-
function App() {
|
|
133
|
-
return <>
|
|
134
|
-
<LoadingButton isLoading>loading button</LoadingButton>
|
|
135
|
-
<LoadingButton isLoading={getIsLoading()}>loading button</LoadingButton>
|
|
136
|
-
</>;
|
|
137
|
-
}
|
|
138
|
-
`,
|
|
139
|
-
});
|
|
140
|
-
|
|
141
|
-
check({
|
|
142
|
-
transformer,
|
|
143
|
-
it: 'should move to loading button (when fallback is needed)',
|
|
144
|
-
original: `
|
|
145
|
-
import React from 'react';
|
|
146
|
-
import Button from '@atlaskit/button';
|
|
147
|
-
import LoadingButton from './our-buttons';
|
|
148
|
-
|
|
149
|
-
function App() {
|
|
150
|
-
return (
|
|
151
|
-
<>
|
|
152
|
-
<Button isLoading>loading button</Button>
|
|
153
|
-
</>
|
|
154
|
-
);
|
|
155
|
-
}
|
|
156
|
-
`,
|
|
157
|
-
expected: `
|
|
158
|
-
import React from 'react';
|
|
159
|
-
import DSLoadingButton from '@atlaskit/button/loading-button';
|
|
160
|
-
import LoadingButton from './our-buttons';
|
|
161
|
-
|
|
162
|
-
function App() {
|
|
163
|
-
return <>
|
|
164
|
-
<DSLoadingButton isLoading>loading button</DSLoadingButton>
|
|
165
|
-
</>;
|
|
166
|
-
}
|
|
167
|
-
`,
|
|
168
|
-
});
|
|
169
|
-
|
|
170
|
-
check({
|
|
171
|
-
transformer,
|
|
172
|
-
it: 'should move to custom theme button',
|
|
173
|
-
original: `
|
|
174
|
-
import React from 'react';
|
|
175
|
-
import Button from '@atlaskit/button';
|
|
176
|
-
import { customTheme } from './theme';
|
|
177
|
-
|
|
178
|
-
function App() {
|
|
179
|
-
return (
|
|
180
|
-
<>
|
|
181
|
-
<Button theme={customTheme}>custom theme button</Button>
|
|
182
|
-
<Button isLoading theme={customTheme}>custom theme button</Button>
|
|
183
|
-
</>
|
|
184
|
-
);
|
|
185
|
-
}
|
|
186
|
-
`,
|
|
187
|
-
expected: `
|
|
188
|
-
import React from 'react';
|
|
189
|
-
import CustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
190
|
-
import { customTheme } from './theme';
|
|
191
|
-
|
|
192
|
-
function App() {
|
|
193
|
-
return <>
|
|
194
|
-
<CustomThemeButton theme={customTheme}>custom theme button</CustomThemeButton>
|
|
195
|
-
<CustomThemeButton isLoading theme={customTheme}>custom theme button</CustomThemeButton>
|
|
196
|
-
</>;
|
|
197
|
-
}
|
|
198
|
-
`,
|
|
199
|
-
});
|
|
200
|
-
|
|
201
|
-
check({
|
|
202
|
-
transformer,
|
|
203
|
-
it: 'should move to custom theme button (when fallback is needed)',
|
|
204
|
-
original: `
|
|
205
|
-
import React from 'react';
|
|
206
|
-
import Button from '@atlaskit/button';
|
|
207
|
-
import { customTheme } from './theme';
|
|
208
|
-
import CustomThemeButton from './our-buttons';
|
|
209
|
-
|
|
210
|
-
function App() {
|
|
211
|
-
return (
|
|
212
|
-
<>
|
|
213
|
-
<CustomThemeButton>hey</CustomThemeButton>
|
|
214
|
-
<Button theme={customTheme}>custom theme button</Button>
|
|
215
|
-
<Button isLoading theme={customTheme}>custom theme button</Button>
|
|
216
|
-
</>
|
|
217
|
-
);
|
|
218
|
-
}
|
|
219
|
-
`,
|
|
220
|
-
expected: `
|
|
221
|
-
import React from 'react';
|
|
222
|
-
import DSCustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
223
|
-
import { customTheme } from './theme';
|
|
224
|
-
import CustomThemeButton from './our-buttons';
|
|
225
|
-
|
|
226
|
-
function App() {
|
|
227
|
-
return <>
|
|
228
|
-
<CustomThemeButton>hey</CustomThemeButton>
|
|
229
|
-
<DSCustomThemeButton theme={customTheme}>custom theme button</DSCustomThemeButton>
|
|
230
|
-
<DSCustomThemeButton isLoading theme={customTheme}>custom theme button</DSCustomThemeButton>
|
|
231
|
-
</>;
|
|
232
|
-
}
|
|
233
|
-
`,
|
|
234
|
-
});
|
|
235
|
-
|
|
236
|
-
check({
|
|
237
|
-
transformer,
|
|
238
|
-
it: 'should use CustomThemeButton in a file that uses Theme',
|
|
239
|
-
original: `
|
|
240
|
-
import React from 'react';
|
|
241
|
-
import Button, { Theme } from '@atlaskit/button';
|
|
242
|
-
import { customTheme } from './custom-theme';
|
|
243
|
-
|
|
244
|
-
function App() {
|
|
245
|
-
return <>
|
|
246
|
-
<Theme.Provider value={customTheme}>
|
|
247
|
-
<Button isLoading>click me</Button>
|
|
248
|
-
</Theme.Provider>
|
|
249
|
-
<Button>click me</Button>
|
|
250
|
-
</>
|
|
251
|
-
}
|
|
252
|
-
`,
|
|
253
|
-
expected: `
|
|
254
|
-
/* TODO: (from codemod) Using "import { Theme } from '@atlaskit/button/custom-theme-button" in a file
|
|
255
|
-
will cause all buttons in that file to be safely converted to a <CustomThemeButton/> */
|
|
256
|
-
import React from 'react';
|
|
257
|
-
import CustomThemeButton, { Theme } from '@atlaskit/button/custom-theme-button';
|
|
258
|
-
import { customTheme } from './custom-theme';
|
|
259
|
-
|
|
260
|
-
function App() {
|
|
261
|
-
return <>
|
|
262
|
-
<Theme.Provider value={customTheme}>
|
|
263
|
-
<CustomThemeButton isLoading>click me</CustomThemeButton>
|
|
264
|
-
</Theme.Provider>
|
|
265
|
-
<CustomThemeButton>click me</CustomThemeButton>
|
|
266
|
-
</>;
|
|
267
|
-
}
|
|
268
|
-
`,
|
|
269
|
-
});
|
|
270
|
-
|
|
271
|
-
check({
|
|
272
|
-
transformer,
|
|
273
|
-
it: 'should move to the correct button for prop usages',
|
|
274
|
-
original: `
|
|
275
|
-
import React from 'react';
|
|
276
|
-
import Button from '@atlaskit/button';
|
|
277
|
-
import { getIsLoading, customTheme } from './util';
|
|
278
|
-
|
|
279
|
-
function App() {
|
|
280
|
-
return (
|
|
281
|
-
<>
|
|
282
|
-
<Button isLoading={getIsLoading()}>Loading button</Button>
|
|
283
|
-
<Button theme={customTheme}>custom theme button</Button>
|
|
284
|
-
<Button isLoading={getIsLoading()} theme={customTheme}>custom theme button</Button>
|
|
285
|
-
<Button>standard button</Button>
|
|
286
|
-
</>
|
|
287
|
-
);
|
|
288
|
-
}
|
|
289
|
-
`,
|
|
290
|
-
expected: `
|
|
291
|
-
import React from 'react';
|
|
292
|
-
import Button from '@atlaskit/button/standard-button';
|
|
293
|
-
import LoadingButton from '@atlaskit/button/loading-button';
|
|
294
|
-
import CustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
295
|
-
import { getIsLoading, customTheme } from './util';
|
|
296
|
-
|
|
297
|
-
function App() {
|
|
298
|
-
return <>
|
|
299
|
-
<LoadingButton isLoading={getIsLoading()}>Loading button</LoadingButton>
|
|
300
|
-
<CustomThemeButton theme={customTheme}>custom theme button</CustomThemeButton>
|
|
301
|
-
<CustomThemeButton isLoading={getIsLoading()} theme={customTheme}>custom theme button</CustomThemeButton>
|
|
302
|
-
<Button>standard button</Button>
|
|
303
|
-
</>;
|
|
304
|
-
}
|
|
305
|
-
`,
|
|
306
|
-
});
|
|
307
|
-
|
|
308
|
-
check({
|
|
309
|
-
transformer,
|
|
310
|
-
it: 'should move to the correct button for prop usages (with fallbacks)',
|
|
311
|
-
original: `
|
|
312
|
-
import React from 'react';
|
|
313
|
-
import AkButton from '@atlaskit/button';
|
|
314
|
-
import { getIsLoading, customTheme } from './util';
|
|
315
|
-
import { Button, LoadingButton, CustomThemeButton } from './our-buttons';
|
|
316
|
-
|
|
317
|
-
function App() {
|
|
318
|
-
return (
|
|
319
|
-
<>
|
|
320
|
-
<AkButton isLoading={getIsLoading()}>Loading button</AkButton>
|
|
321
|
-
<AkButton theme={customTheme}>custom theme button</AkButton>
|
|
322
|
-
<AkButton isLoading={getIsLoading()} theme={customTheme}>custom theme button</AkButton>
|
|
323
|
-
<AkButton>standard button</AkButton>
|
|
324
|
-
</>
|
|
325
|
-
);
|
|
326
|
-
}
|
|
327
|
-
`,
|
|
328
|
-
expected: `
|
|
329
|
-
import React from 'react';
|
|
330
|
-
import DSButton from '@atlaskit/button/standard-button';
|
|
331
|
-
import DSLoadingButton from '@atlaskit/button/loading-button';
|
|
332
|
-
import DSCustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
333
|
-
import { getIsLoading, customTheme } from './util';
|
|
334
|
-
import { Button, LoadingButton, CustomThemeButton } from './our-buttons';
|
|
335
|
-
|
|
336
|
-
function App() {
|
|
337
|
-
return <>
|
|
338
|
-
<DSLoadingButton isLoading={getIsLoading()}>Loading button</DSLoadingButton>
|
|
339
|
-
<DSCustomThemeButton theme={customTheme}>custom theme button</DSCustomThemeButton>
|
|
340
|
-
<DSCustomThemeButton isLoading={getIsLoading()} theme={customTheme}>custom theme button</DSCustomThemeButton>
|
|
341
|
-
<DSButton>standard button</DSButton>
|
|
342
|
-
</>;
|
|
343
|
-
}
|
|
344
|
-
`,
|
|
345
|
-
});
|
|
346
|
-
});
|
|
347
|
-
|
|
348
|
-
describe('Non exclusive JSX usage of <Button />', () => {
|
|
349
|
-
check({
|
|
350
|
-
transformer,
|
|
351
|
-
it: 'should use standard button if Button is not used in JSX',
|
|
352
|
-
original: `
|
|
353
|
-
import AkButton from '@atlaskit/button';
|
|
354
|
-
|
|
355
|
-
export default { button: AkButton };
|
|
356
|
-
`,
|
|
357
|
-
expected: `
|
|
358
|
-
/* TODO: (from codemod) This file does not exclusively use Button in JSX.
|
|
359
|
-
The codemod is unable to know which button variant, so it is using
|
|
360
|
-
the standard button: "@atlaskit/button/standard-button".
|
|
361
|
-
|
|
362
|
-
Please validate this decision.
|
|
363
|
-
You might need to change the usage of Button to either LoadingButton or CustomThemeButton */
|
|
364
|
-
import AkButton from '@atlaskit/button/standard-button';
|
|
365
|
-
|
|
366
|
-
export default { button: AkButton };
|
|
367
|
-
`,
|
|
368
|
-
});
|
|
369
|
-
|
|
370
|
-
check({
|
|
371
|
-
transformer,
|
|
372
|
-
it: 'should use standard button if Button is used in JSX and also not in JSX',
|
|
373
|
-
original: `
|
|
374
|
-
import React from 'react';
|
|
375
|
-
import Button from './our-button';
|
|
376
|
-
import AkButton from '@atlaskit/button';
|
|
377
|
-
|
|
378
|
-
// Used in JSX
|
|
379
|
-
function App() {
|
|
380
|
-
return (
|
|
381
|
-
<>
|
|
382
|
-
<Button onClick={() => console.log('hi')} />
|
|
383
|
-
<AkButton onClick={() => console.log('hi')} />
|
|
384
|
-
</>
|
|
385
|
-
);
|
|
386
|
-
}
|
|
387
|
-
|
|
388
|
-
// Not used in JSX
|
|
389
|
-
expect(AkButton).toBe(true);
|
|
390
|
-
`,
|
|
391
|
-
expected: `
|
|
392
|
-
import React from 'react';
|
|
393
|
-
import Button from './our-button';
|
|
394
|
-
/* TODO: (from codemod) This file does not exclusively use Button in JSX.
|
|
395
|
-
The codemod is unable to know which button variant, so it is using
|
|
396
|
-
the standard button: "@atlaskit/button/standard-button".
|
|
397
|
-
|
|
398
|
-
Please validate this decision.
|
|
399
|
-
You might need to change the usage of Button to either LoadingButton or CustomThemeButton */
|
|
400
|
-
import AkButton from '@atlaskit/button/standard-button';
|
|
401
|
-
|
|
402
|
-
// Used in JSX
|
|
403
|
-
function App() {
|
|
404
|
-
return (
|
|
405
|
-
<>
|
|
406
|
-
<Button onClick={() => console.log('hi')} />
|
|
407
|
-
<AkButton onClick={() => console.log('hi')} />
|
|
408
|
-
</>
|
|
409
|
-
);
|
|
410
|
-
}
|
|
411
|
-
|
|
412
|
-
// Not used in JSX
|
|
413
|
-
expect(AkButton).toBe(true);
|
|
414
|
-
`,
|
|
415
|
-
});
|
|
416
|
-
});
|
|
417
|
-
|
|
418
|
-
describe('Spreading props', () => {
|
|
419
|
-
check({
|
|
420
|
-
transformer,
|
|
421
|
-
it: 'should try to choose the right button if there are locally spread values (seperate object)',
|
|
422
|
-
original: `
|
|
423
|
-
import React from 'react';
|
|
424
|
-
import Button from '@atlaskit/button';
|
|
425
|
-
|
|
426
|
-
function App() {
|
|
427
|
-
const props = {
|
|
428
|
-
isLoading: true,
|
|
429
|
-
onClick: () => console.log('hi'),
|
|
430
|
-
};
|
|
431
|
-
return (
|
|
432
|
-
<Button {...props}>click me</Button>
|
|
433
|
-
);
|
|
434
|
-
}
|
|
435
|
-
`,
|
|
436
|
-
expected: `
|
|
437
|
-
import React from 'react';
|
|
438
|
-
import LoadingButton from '@atlaskit/button/loading-button';
|
|
439
|
-
|
|
440
|
-
function App() {
|
|
441
|
-
const props = {
|
|
442
|
-
isLoading: true,
|
|
443
|
-
onClick: () => console.log('hi'),
|
|
444
|
-
};
|
|
445
|
-
return <LoadingButton {...props}>click me</LoadingButton>;
|
|
446
|
-
}
|
|
447
|
-
`,
|
|
448
|
-
});
|
|
449
|
-
|
|
450
|
-
check({
|
|
451
|
-
transformer,
|
|
452
|
-
it: 'should try to choose the right button if there are locally spread values (inline object)',
|
|
453
|
-
original: `
|
|
454
|
-
import React from 'react';
|
|
455
|
-
import Button from '@atlaskit/button';
|
|
456
|
-
|
|
457
|
-
function App() {
|
|
458
|
-
return (
|
|
459
|
-
<Button {...({ isLoading: true })}>click me</Button>
|
|
460
|
-
);
|
|
461
|
-
}
|
|
462
|
-
`,
|
|
463
|
-
expected: `
|
|
464
|
-
import React from 'react';
|
|
465
|
-
import LoadingButton from '@atlaskit/button/loading-button';
|
|
466
|
-
|
|
467
|
-
function App() {
|
|
468
|
-
return <LoadingButton {...({ isLoading: true })}>click me</LoadingButton>;
|
|
469
|
-
}
|
|
470
|
-
`,
|
|
471
|
-
});
|
|
472
|
-
|
|
473
|
-
check({
|
|
474
|
-
transformer,
|
|
475
|
-
it: 'should try to choose the right button if there are multiple local spread values',
|
|
476
|
-
original: `
|
|
477
|
-
import React from 'react';
|
|
478
|
-
import Button from '@atlaskit/button';
|
|
479
|
-
|
|
480
|
-
const first = {
|
|
481
|
-
onClick: () => console.log('hi'),
|
|
482
|
-
};
|
|
483
|
-
const second = {
|
|
484
|
-
isLoading: true,
|
|
485
|
-
};
|
|
486
|
-
|
|
487
|
-
function App() {
|
|
488
|
-
return (
|
|
489
|
-
<Button {...first} {...second}>click me</Button>
|
|
490
|
-
);
|
|
491
|
-
}
|
|
492
|
-
`,
|
|
493
|
-
expected: `
|
|
494
|
-
import React from 'react';
|
|
495
|
-
import LoadingButton from '@atlaskit/button/loading-button';
|
|
496
|
-
|
|
497
|
-
const first = {
|
|
498
|
-
onClick: () => console.log('hi'),
|
|
499
|
-
};
|
|
500
|
-
const second = {
|
|
501
|
-
isLoading: true,
|
|
502
|
-
};
|
|
503
|
-
|
|
504
|
-
function App() {
|
|
505
|
-
return <LoadingButton {...first} {...second}>click me</LoadingButton>;
|
|
506
|
-
}
|
|
507
|
-
`,
|
|
508
|
-
});
|
|
509
|
-
|
|
510
|
-
check({
|
|
511
|
-
transformer,
|
|
512
|
-
it: 'should try to choose the right button if there are locally spread values (custom theme button)',
|
|
513
|
-
original: `
|
|
514
|
-
import React from 'react';
|
|
515
|
-
import Button from '@atlaskit/button';
|
|
516
|
-
import { customTheme } from './our-theme';
|
|
517
|
-
|
|
518
|
-
function App() {
|
|
519
|
-
const props = {
|
|
520
|
-
isLoading: true,
|
|
521
|
-
theme: customTheme,
|
|
522
|
-
onClick: () => console.log('hi'),
|
|
523
|
-
};
|
|
524
|
-
return (
|
|
525
|
-
<Button {...props}>click me</Button>
|
|
526
|
-
);
|
|
527
|
-
}
|
|
528
|
-
`,
|
|
529
|
-
expected: `
|
|
530
|
-
import React from 'react';
|
|
531
|
-
import CustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
532
|
-
import { customTheme } from './our-theme';
|
|
533
|
-
|
|
534
|
-
function App() {
|
|
535
|
-
const props = {
|
|
536
|
-
isLoading: true,
|
|
537
|
-
theme: customTheme,
|
|
538
|
-
onClick: () => console.log('hi'),
|
|
539
|
-
};
|
|
540
|
-
return <CustomThemeButton {...props}>click me</CustomThemeButton>;
|
|
541
|
-
}
|
|
542
|
-
`,
|
|
543
|
-
});
|
|
544
|
-
|
|
545
|
-
check({
|
|
546
|
-
transformer,
|
|
547
|
-
it: 'should try to choose the right button if there is a spread value being mixed with a local values',
|
|
548
|
-
original: `
|
|
549
|
-
import React from 'react';
|
|
550
|
-
import Button from '@atlaskit/button';
|
|
551
|
-
import { customTheme } from './our-theme';
|
|
552
|
-
|
|
553
|
-
function App() {
|
|
554
|
-
const props = {
|
|
555
|
-
theme: customTheme,
|
|
556
|
-
};
|
|
557
|
-
return (
|
|
558
|
-
<Button isLoading {...props}>click me</Button>
|
|
559
|
-
);
|
|
560
|
-
}
|
|
561
|
-
`,
|
|
562
|
-
expected: `
|
|
563
|
-
import React from 'react';
|
|
564
|
-
import CustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
565
|
-
import { customTheme } from './our-theme';
|
|
566
|
-
|
|
567
|
-
function App() {
|
|
568
|
-
const props = {
|
|
569
|
-
theme: customTheme,
|
|
570
|
-
};
|
|
571
|
-
return <CustomThemeButton isLoading {...props}>click me</CustomThemeButton>;
|
|
572
|
-
}
|
|
573
|
-
`,
|
|
574
|
-
});
|
|
575
|
-
|
|
576
|
-
check({
|
|
577
|
-
transformer,
|
|
578
|
-
it: 'should fallback to CustomThemeButton if there is an unknown spread',
|
|
579
|
-
// ...itShouldLogWarning({ times: 2 }),
|
|
580
|
-
original: `
|
|
581
|
-
import React from 'react';
|
|
582
|
-
import Button from '@atlaskit/button';
|
|
583
|
-
import { getProps } from './get-props';
|
|
584
|
-
|
|
585
|
-
function First(props) {
|
|
586
|
-
return <Button {...props}>click me</Button>;
|
|
587
|
-
}
|
|
588
|
-
|
|
589
|
-
function Second() {
|
|
590
|
-
return <Button {...getProps()}>click me</Button>;
|
|
591
|
-
}
|
|
592
|
-
`,
|
|
593
|
-
expected: `
|
|
594
|
-
/* TODO: (from codemod) Detected spreading props (<Button {...props} />) that was too complex for our codemod to understand
|
|
595
|
-
Our codemod will only look at inline objects, or objects defined in the same file (ObjectExpression's)
|
|
596
|
-
We have opted for our safest upgrade component in this file: '<CustomThemeButton />' */
|
|
597
|
-
import React from 'react';
|
|
598
|
-
import CustomThemeButton from '@atlaskit/button/custom-theme-button';
|
|
599
|
-
import { getProps } from './get-props';
|
|
600
|
-
|
|
601
|
-
function First(props) {
|
|
602
|
-
return <CustomThemeButton {...props}>click me</CustomThemeButton>;
|
|
603
|
-
}
|
|
604
|
-
|
|
605
|
-
function Second() {
|
|
606
|
-
return <CustomThemeButton {...getProps()}>click me</CustomThemeButton>;
|
|
607
|
-
}
|
|
608
|
-
`,
|
|
609
|
-
});
|
|
610
|
-
});
|
|
611
|
-
|
|
612
|
-
describe('`type ButtonProps`', () => {
|
|
613
|
-
check({
|
|
614
|
-
transformer,
|
|
615
|
-
it: 'should move to the new standard button props',
|
|
616
|
-
original: `
|
|
617
|
-
import React from 'react';
|
|
618
|
-
import Button, { ButtonProps } from '@atlaskit/button';
|
|
619
|
-
|
|
620
|
-
function App() {
|
|
621
|
-
return <Button>click me</Button>;
|
|
622
|
-
}
|
|
623
|
-
`,
|
|
624
|
-
expected: `
|
|
625
|
-
import React from 'react';
|
|
626
|
-
|
|
627
|
-
/* TODO: (from codemod) Verify ButtonProps is the right prop type
|
|
628
|
-
You might need the LoadingButtonProps, CustomButtonProps types which can be imported from '@atlaskit/button/types' */
|
|
629
|
-
import { ButtonProps } from '@atlaskit/button/types';
|
|
630
|
-
|
|
631
|
-
import Button from '@atlaskit/button/standard-button';
|
|
632
|
-
|
|
633
|
-
function App() {
|
|
634
|
-
return <Button>click me</Button>;
|
|
635
|
-
}
|
|
636
|
-
`,
|
|
637
|
-
});
|
|
638
|
-
});
|