@carbon/upgrade 11.41.0 → 11.42.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/cli.js +330 -142
- package/package.json +2 -2
- package/transforms/__testfixtures__/ibm-products-update-tearsheet-alias.input.tsx +22 -0
- package/transforms/__testfixtures__/ibm-products-update-tearsheet-alias.output.tsx +27 -0
- package/transforms/__testfixtures__/ibm-products-update-tearsheet-edge-cases.input.tsx +112 -0
- package/transforms/__testfixtures__/ibm-products-update-tearsheet-edge-cases.output.tsx +193 -0
- package/transforms/__testfixtures__/ibm-products-update-tearsheet-idempotent.input.tsx +18 -0
- package/transforms/__testfixtures__/ibm-products-update-tearsheet-idempotent.output.tsx +18 -0
- package/transforms/__testfixtures__/ibm-products-update-tearsheet.input.tsx +202 -0
- package/transforms/__testfixtures__/ibm-products-update-tearsheet.output.tsx +289 -0
- package/transforms/__tests__/ibm-products-update-tearsheet-test.js +30 -0
- package/transforms/ibm-products-update-tearsheet.js +442 -0
- package/transforms/nonStableMapping.js +1 -1
|
@@ -0,0 +1,289 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { preview__Tearsheet as Tearsheet } from '@carbon/ibm-products';
|
|
3
|
+
import { Button, Form, FormGroup, TextInput } from '@carbon/react';
|
|
4
|
+
|
|
5
|
+
// Test 1: Simple Tearsheet with title and actions
|
|
6
|
+
function SimpleTearsheet() {
|
|
7
|
+
return (
|
|
8
|
+
<Tearsheet open={true} onClose={() => {}}>
|
|
9
|
+
<Tearsheet.Header>
|
|
10
|
+
<Tearsheet.HeaderContent title="Simple Tearsheet" label="Customer data"></Tearsheet.HeaderContent>
|
|
11
|
+
</Tearsheet.Header>
|
|
12
|
+
<Tearsheet.Body>
|
|
13
|
+
<Tearsheet.MainContent>
|
|
14
|
+
|
|
15
|
+
<Form>
|
|
16
|
+
<TextInput id="name" labelText="Name" />
|
|
17
|
+
</Form>
|
|
18
|
+
|
|
19
|
+
</Tearsheet.MainContent>
|
|
20
|
+
</Tearsheet.Body>
|
|
21
|
+
<Tearsheet.Footer
|
|
22
|
+
actions={[
|
|
23
|
+
{ label: 'Cancel', onClick: () => {} },
|
|
24
|
+
{ label: 'Submit', onClick: () => {} },
|
|
25
|
+
]} />
|
|
26
|
+
</Tearsheet>
|
|
27
|
+
);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Test 2: Tearsheet with influencer
|
|
31
|
+
function TearsheetWithInfluencer() {
|
|
32
|
+
return (
|
|
33
|
+
<Tearsheet open={true} onClose={() => {}} influencerWidth="narrow">
|
|
34
|
+
<Tearsheet.Header>
|
|
35
|
+
<Tearsheet.HeaderContent title="With Influencer" label="Data" description="This is a description"></Tearsheet.HeaderContent>
|
|
36
|
+
</Tearsheet.Header>
|
|
37
|
+
<Tearsheet.Influencer>
|
|
38
|
+
<div>Influencer content</div>
|
|
39
|
+
</Tearsheet.Influencer>
|
|
40
|
+
<Tearsheet.Body>
|
|
41
|
+
<Tearsheet.MainContent>
|
|
42
|
+
|
|
43
|
+
<div>Main content</div>
|
|
44
|
+
|
|
45
|
+
</Tearsheet.MainContent>
|
|
46
|
+
</Tearsheet.Body>
|
|
47
|
+
</Tearsheet>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Test 3: Tearsheet with navigation
|
|
52
|
+
function TearsheetWithNavigation() {
|
|
53
|
+
return (
|
|
54
|
+
<Tearsheet open={true} onClose={() => {}}>
|
|
55
|
+
<Tearsheet.Header>
|
|
56
|
+
<Tearsheet.HeaderContent title="With Navigation"></Tearsheet.HeaderContent>
|
|
57
|
+
</Tearsheet.Header>
|
|
58
|
+
<Tearsheet.NavigationBar>
|
|
59
|
+
<div>Navigation tabs</div>
|
|
60
|
+
</Tearsheet.NavigationBar>
|
|
61
|
+
<Tearsheet.Body>
|
|
62
|
+
<Tearsheet.MainContent>
|
|
63
|
+
|
|
64
|
+
<div>Content</div>
|
|
65
|
+
|
|
66
|
+
</Tearsheet.MainContent>
|
|
67
|
+
</Tearsheet.Body>
|
|
68
|
+
<Tearsheet.Footer actions={[{ label: 'Close', onClick: () => {} }]} />
|
|
69
|
+
</Tearsheet>
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// Test 4: Tearsheet with headerActions
|
|
74
|
+
function TearsheetWithHeaderActions() {
|
|
75
|
+
return (
|
|
76
|
+
<Tearsheet open={true} onClose={() => {}}>
|
|
77
|
+
<Tearsheet.Header>
|
|
78
|
+
<Tearsheet.HeaderContent
|
|
79
|
+
title="With Header Actions"
|
|
80
|
+
label="Label"
|
|
81
|
+
headerActions={<Button>Action</Button>}></Tearsheet.HeaderContent>
|
|
82
|
+
</Tearsheet.Header>
|
|
83
|
+
<Tearsheet.Body>
|
|
84
|
+
<Tearsheet.MainContent>
|
|
85
|
+
|
|
86
|
+
<div>Content</div>
|
|
87
|
+
|
|
88
|
+
</Tearsheet.MainContent>
|
|
89
|
+
</Tearsheet.Body>
|
|
90
|
+
</Tearsheet>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
// Test 5: Tearsheet with deprecated slug prop
|
|
95
|
+
function TearsheetWithSlug() {
|
|
96
|
+
return (
|
|
97
|
+
<Tearsheet open={true} onClose={() => {}} decorator={<div>Slug content</div>}>
|
|
98
|
+
<Tearsheet.Header>
|
|
99
|
+
<Tearsheet.HeaderContent title="With Slug"></Tearsheet.HeaderContent>
|
|
100
|
+
</Tearsheet.Header>
|
|
101
|
+
<Tearsheet.Body>
|
|
102
|
+
<Tearsheet.MainContent>
|
|
103
|
+
|
|
104
|
+
<div>Content</div>
|
|
105
|
+
|
|
106
|
+
</Tearsheet.MainContent>
|
|
107
|
+
</Tearsheet.Body>
|
|
108
|
+
</Tearsheet>
|
|
109
|
+
);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
// Test 6: Tearsheet with all features
|
|
113
|
+
function CompleteTearsheet() {
|
|
114
|
+
return (
|
|
115
|
+
<Tearsheet
|
|
116
|
+
open={true}
|
|
117
|
+
onClose={() => {}}
|
|
118
|
+
decorator={<div>Decorator</div>}
|
|
119
|
+
influencerWidth="wide"
|
|
120
|
+
preventCloseOnClickOutside={true}
|
|
121
|
+
variant="wide">
|
|
122
|
+
<Tearsheet.Header>
|
|
123
|
+
<Tearsheet.HeaderContent
|
|
124
|
+
title="Complete Tearsheet"
|
|
125
|
+
label="All features"
|
|
126
|
+
description="This has everything"
|
|
127
|
+
headerActions={<Button>Header Action</Button>}></Tearsheet.HeaderContent>
|
|
128
|
+
</Tearsheet.Header>
|
|
129
|
+
<Tearsheet.Influencer>
|
|
130
|
+
<div>Influencer</div>
|
|
131
|
+
</Tearsheet.Influencer>
|
|
132
|
+
<Tearsheet.NavigationBar>
|
|
133
|
+
<div>Navigation</div>
|
|
134
|
+
</Tearsheet.NavigationBar>
|
|
135
|
+
<Tearsheet.Body>
|
|
136
|
+
<Tearsheet.MainContent>
|
|
137
|
+
|
|
138
|
+
<Form>
|
|
139
|
+
<TextInput id="field1" labelText="Field 1" />
|
|
140
|
+
<TextInput id="field2" labelText="Field 2" />
|
|
141
|
+
</Form>
|
|
142
|
+
|
|
143
|
+
</Tearsheet.MainContent>
|
|
144
|
+
</Tearsheet.Body>
|
|
145
|
+
<Tearsheet.Footer
|
|
146
|
+
actions={[
|
|
147
|
+
{ label: 'Cancel', onClick: () => {} },
|
|
148
|
+
{ label: 'Submit', onClick: () => {} },
|
|
149
|
+
]} />
|
|
150
|
+
</Tearsheet>
|
|
151
|
+
);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// Test 7: Minimal Tearsheet (no header props)
|
|
155
|
+
function MinimalTearsheet() {
|
|
156
|
+
return (
|
|
157
|
+
<Tearsheet open={true} onClose={() => {}}>
|
|
158
|
+
<Tearsheet.Body>
|
|
159
|
+
<Tearsheet.MainContent>
|
|
160
|
+
|
|
161
|
+
<div>Just content</div>
|
|
162
|
+
|
|
163
|
+
</Tearsheet.MainContent>
|
|
164
|
+
</Tearsheet.Body>
|
|
165
|
+
</Tearsheet>
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// Test 8: Tearsheet with deprecated influencerPosition (should be removed)
|
|
170
|
+
function TearsheetWithInfluencerPosition() {
|
|
171
|
+
return (
|
|
172
|
+
<Tearsheet open={true} onClose={() => {}}>
|
|
173
|
+
<Tearsheet.Header>
|
|
174
|
+
<Tearsheet.HeaderContent title="Test"></Tearsheet.HeaderContent>
|
|
175
|
+
</Tearsheet.Header>
|
|
176
|
+
<Tearsheet.Influencer>
|
|
177
|
+
<div>Influencer</div>
|
|
178
|
+
</Tearsheet.Influencer>
|
|
179
|
+
<Tearsheet.Body>
|
|
180
|
+
<Tearsheet.MainContent>
|
|
181
|
+
|
|
182
|
+
<div>Content</div>
|
|
183
|
+
|
|
184
|
+
</Tearsheet.MainContent>
|
|
185
|
+
</Tearsheet.Body>
|
|
186
|
+
</Tearsheet>
|
|
187
|
+
);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
// Test 9: Stacked Tearsheets (multiple tearsheets)
|
|
191
|
+
function StackedTearsheets() {
|
|
192
|
+
const [open1, setOpen1] = React.useState(false);
|
|
193
|
+
const [open2, setOpen2] = React.useState(false);
|
|
194
|
+
|
|
195
|
+
return (<>
|
|
196
|
+
<Tearsheet open={open1} onClose={() => setOpen1(false)}>
|
|
197
|
+
<Tearsheet.Header>
|
|
198
|
+
<Tearsheet.HeaderContent title="Tearsheet 1" label="First"></Tearsheet.HeaderContent>
|
|
199
|
+
</Tearsheet.Header>
|
|
200
|
+
<Tearsheet.Body>
|
|
201
|
+
<Tearsheet.MainContent>
|
|
202
|
+
|
|
203
|
+
<div>Content 1</div>
|
|
204
|
+
|
|
205
|
+
</Tearsheet.MainContent>
|
|
206
|
+
</Tearsheet.Body>
|
|
207
|
+
<Tearsheet.Footer actions={[{ label: 'Close', onClick: () => setOpen1(false) }]} />
|
|
208
|
+
</Tearsheet>
|
|
209
|
+
<Tearsheet open={open2} onClose={() => setOpen2(false)}>
|
|
210
|
+
<Tearsheet.Header>
|
|
211
|
+
<Tearsheet.HeaderContent title="Tearsheet 2" label="Second"></Tearsheet.HeaderContent>
|
|
212
|
+
</Tearsheet.Header>
|
|
213
|
+
<Tearsheet.Body>
|
|
214
|
+
<Tearsheet.MainContent>
|
|
215
|
+
|
|
216
|
+
<div>Content 2</div>
|
|
217
|
+
|
|
218
|
+
</Tearsheet.MainContent>
|
|
219
|
+
</Tearsheet.Body>
|
|
220
|
+
<Tearsheet.Footer actions={[{ label: 'Close', onClick: () => setOpen2(false) }]} />
|
|
221
|
+
</Tearsheet>
|
|
222
|
+
</>);
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
// Test 10: Tearsheet with spread props
|
|
226
|
+
function TearsheetWithSpreadProps() {
|
|
227
|
+
const commonProps = {
|
|
228
|
+
open: true,
|
|
229
|
+
onClose: () => {},
|
|
230
|
+
variant: 'wide',
|
|
231
|
+
};
|
|
232
|
+
|
|
233
|
+
return (
|
|
234
|
+
<Tearsheet {...commonProps}>
|
|
235
|
+
<Tearsheet.Header>
|
|
236
|
+
<Tearsheet.HeaderContent title="With Spread" label="Spread props"></Tearsheet.HeaderContent>
|
|
237
|
+
</Tearsheet.Header>
|
|
238
|
+
<Tearsheet.Body>
|
|
239
|
+
<Tearsheet.MainContent>
|
|
240
|
+
|
|
241
|
+
<div>Content</div>
|
|
242
|
+
|
|
243
|
+
</Tearsheet.MainContent>
|
|
244
|
+
</Tearsheet.Body>
|
|
245
|
+
</Tearsheet>
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
// Test 11: Tearsheet with complex children
|
|
250
|
+
function TearsheetWithComplexChildren() {
|
|
251
|
+
return (
|
|
252
|
+
<Tearsheet open={true} onClose={() => {}}>
|
|
253
|
+
<Tearsheet.Header>
|
|
254
|
+
<Tearsheet.HeaderContent title="Complex Children"></Tearsheet.HeaderContent>
|
|
255
|
+
</Tearsheet.Header>
|
|
256
|
+
<Tearsheet.Body>
|
|
257
|
+
<Tearsheet.MainContent>
|
|
258
|
+
|
|
259
|
+
<Form>
|
|
260
|
+
<FormGroup legendText="Section 1">
|
|
261
|
+
<TextInput id="field1" labelText="Field 1" />
|
|
262
|
+
<TextInput id="field2" labelText="Field 2" />
|
|
263
|
+
</FormGroup>
|
|
264
|
+
<FormGroup legendText="Section 2">
|
|
265
|
+
<TextInput id="field3" labelText="Field 3" />
|
|
266
|
+
</FormGroup>
|
|
267
|
+
</Form>
|
|
268
|
+
|
|
269
|
+
</Tearsheet.MainContent>
|
|
270
|
+
</Tearsheet.Body>
|
|
271
|
+
<Tearsheet.Footer actions={[{ label: 'Submit', onClick: () => {} }]} />
|
|
272
|
+
</Tearsheet>
|
|
273
|
+
);
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
// Test 12: Tearsheet with only decorator (no other header props)
|
|
277
|
+
function TearsheetWithOnlyDecorator() {
|
|
278
|
+
return (
|
|
279
|
+
<Tearsheet open={true} onClose={() => {}} decorator={<div>Decorator</div>}>
|
|
280
|
+
<Tearsheet.Body>
|
|
281
|
+
<Tearsheet.MainContent>
|
|
282
|
+
|
|
283
|
+
<div>Content</div>
|
|
284
|
+
|
|
285
|
+
</Tearsheet.MainContent>
|
|
286
|
+
</Tearsheet.Body>
|
|
287
|
+
</Tearsheet>
|
|
288
|
+
);
|
|
289
|
+
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2026
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
const { defineTest } = require('jscodeshift/dist/testUtils');
|
|
11
|
+
|
|
12
|
+
defineTest(__dirname, 'ibm-products-update-tearsheet');
|
|
13
|
+
defineTest(
|
|
14
|
+
__dirname,
|
|
15
|
+
'ibm-products-update-tearsheet',
|
|
16
|
+
null,
|
|
17
|
+
'ibm-products-update-tearsheet-alias'
|
|
18
|
+
);
|
|
19
|
+
defineTest(
|
|
20
|
+
__dirname,
|
|
21
|
+
'ibm-products-update-tearsheet',
|
|
22
|
+
null,
|
|
23
|
+
'ibm-products-update-tearsheet-idempotent'
|
|
24
|
+
);
|
|
25
|
+
defineTest(
|
|
26
|
+
__dirname,
|
|
27
|
+
'ibm-products-update-tearsheet',
|
|
28
|
+
null,
|
|
29
|
+
'ibm-products-update-tearsheet-edge-cases'
|
|
30
|
+
);
|