@carbon/upgrade 11.24.0 → 11.25.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 +82 -1
- package/package.json +2 -2
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.input.js +275 -0
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.input.tsx +275 -0
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.output.js +275 -0
- package/transforms/__testfixtures__/enable-v12-structured-list-visible-icons.output.tsx +275 -0
- package/transforms/__tests__/enable-v12-structured-list-visible-icons-test.js +12 -0
- package/transforms/enable-v12-structured-list-visible-icons.js +166 -0
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
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
|
+
import React from 'react';
|
|
9
|
+
import {
|
|
10
|
+
StructuredListWrapper,
|
|
11
|
+
StructuredListHead,
|
|
12
|
+
StructuredListBody,
|
|
13
|
+
StructuredListRow,
|
|
14
|
+
StructuredListCell,
|
|
15
|
+
StructuredListInput,
|
|
16
|
+
} from '@carbon/react';
|
|
17
|
+
|
|
18
|
+
// Case 1: Direct usage with selection
|
|
19
|
+
export const BasicSelection = () => (
|
|
20
|
+
<StructuredListWrapper selection>
|
|
21
|
+
<StructuredListHead>
|
|
22
|
+
<StructuredListRow head selection>
|
|
23
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
24
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
25
|
+
</StructuredListRow>
|
|
26
|
+
</StructuredListHead>
|
|
27
|
+
<StructuredListBody>
|
|
28
|
+
<StructuredListRow selection>
|
|
29
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
30
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
31
|
+
<StructuredListInput
|
|
32
|
+
id="row-1"
|
|
33
|
+
value="row-1"
|
|
34
|
+
title="row-1"
|
|
35
|
+
name="row-1"
|
|
36
|
+
aria-label="row-1"
|
|
37
|
+
/>
|
|
38
|
+
</StructuredListRow>
|
|
39
|
+
</StructuredListBody>
|
|
40
|
+
</StructuredListWrapper>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
// Case 2: Row generator function
|
|
44
|
+
const generateRows = (count) => {
|
|
45
|
+
return Array.from({ length: count }, (_, i) => (
|
|
46
|
+
<StructuredListRow key={`row-${i}`} selection>
|
|
47
|
+
<StructuredListCell>Row {i}</StructuredListCell>
|
|
48
|
+
<StructuredListCell>Content {i}</StructuredListCell>
|
|
49
|
+
<StructuredListInput
|
|
50
|
+
id={`row-${i}`}
|
|
51
|
+
value={`row-${i}`}
|
|
52
|
+
title={`row-${i}`}
|
|
53
|
+
name="row-0"
|
|
54
|
+
aria-label={`row-${i}`}
|
|
55
|
+
/>
|
|
56
|
+
</StructuredListRow>
|
|
57
|
+
));
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export const WithRowGenerator = () => (
|
|
61
|
+
<StructuredListWrapper selection>
|
|
62
|
+
<StructuredListHead>
|
|
63
|
+
<StructuredListRow head selection>
|
|
64
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
65
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
66
|
+
</StructuredListRow>
|
|
67
|
+
</StructuredListHead>
|
|
68
|
+
<StructuredListBody>{generateRows(3)}</StructuredListBody>
|
|
69
|
+
</StructuredListWrapper>
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
// Case 3: Nested inside other components
|
|
73
|
+
export const NestedStructuredList = () => (
|
|
74
|
+
<div className="wrapper">
|
|
75
|
+
<div className="inner">
|
|
76
|
+
<StructuredListWrapper selection>
|
|
77
|
+
<StructuredListHead>
|
|
78
|
+
<StructuredListRow head selection>
|
|
79
|
+
<StructuredListCell head>Nested Column</StructuredListCell>
|
|
80
|
+
</StructuredListRow>
|
|
81
|
+
</StructuredListHead>
|
|
82
|
+
<StructuredListBody>
|
|
83
|
+
<StructuredListRow selection>
|
|
84
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
85
|
+
<StructuredListInput
|
|
86
|
+
id="nested-1"
|
|
87
|
+
value="nested-1"
|
|
88
|
+
title="nested-1"
|
|
89
|
+
name="nested-1"
|
|
90
|
+
aria-label="nested-1"
|
|
91
|
+
/>
|
|
92
|
+
</StructuredListRow>
|
|
93
|
+
</StructuredListBody>
|
|
94
|
+
</StructuredListWrapper>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
// Case 4: Without selection (should not be modified)
|
|
100
|
+
export const WithoutSelection = () => (
|
|
101
|
+
<StructuredListWrapper>
|
|
102
|
+
<StructuredListHead>
|
|
103
|
+
<StructuredListRow head>
|
|
104
|
+
<StructuredListCell head>No Selection</StructuredListCell>
|
|
105
|
+
</StructuredListRow>
|
|
106
|
+
</StructuredListHead>
|
|
107
|
+
<StructuredListBody>
|
|
108
|
+
<StructuredListRow>
|
|
109
|
+
<StructuredListCell>Should Not Change</StructuredListCell>
|
|
110
|
+
</StructuredListRow>
|
|
111
|
+
</StructuredListBody>
|
|
112
|
+
</StructuredListWrapper>
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
// Case 5: Mixed with and without selection
|
|
116
|
+
export const MixedSelectionUsage = () => (
|
|
117
|
+
<div>
|
|
118
|
+
<StructuredListWrapper selection>
|
|
119
|
+
<StructuredListHead>
|
|
120
|
+
<StructuredListRow head selection>
|
|
121
|
+
<StructuredListCell head>With Selection</StructuredListCell>
|
|
122
|
+
</StructuredListRow>
|
|
123
|
+
</StructuredListHead>
|
|
124
|
+
<StructuredListBody>
|
|
125
|
+
<StructuredListRow selection>
|
|
126
|
+
<StructuredListCell>Should Get Selection</StructuredListCell>
|
|
127
|
+
<StructuredListInput
|
|
128
|
+
id="mixed-1"
|
|
129
|
+
value="mixed-1"
|
|
130
|
+
title="mixed-1"
|
|
131
|
+
name="mixed-1"
|
|
132
|
+
aria-label="mixed-1"
|
|
133
|
+
/>
|
|
134
|
+
</StructuredListRow>
|
|
135
|
+
</StructuredListBody>
|
|
136
|
+
</StructuredListWrapper>
|
|
137
|
+
<StructuredListWrapper>
|
|
138
|
+
<StructuredListHead>
|
|
139
|
+
<StructuredListRow head>
|
|
140
|
+
<StructuredListCell head>Without Selection</StructuredListCell>
|
|
141
|
+
</StructuredListRow>
|
|
142
|
+
</StructuredListHead>
|
|
143
|
+
<StructuredListBody>
|
|
144
|
+
<StructuredListRow>
|
|
145
|
+
<StructuredListCell>Should Not Get Selection</StructuredListCell>
|
|
146
|
+
</StructuredListRow>
|
|
147
|
+
</StructuredListBody>
|
|
148
|
+
</StructuredListWrapper>
|
|
149
|
+
</div>
|
|
150
|
+
);
|
|
151
|
+
// Case 7: Conditional Rendering with Selection
|
|
152
|
+
export const ConditionalRendering = ({ showSelection = true }) => (
|
|
153
|
+
<StructuredListWrapper selection={showSelection}>
|
|
154
|
+
<StructuredListHead>
|
|
155
|
+
<StructuredListRow head selection>
|
|
156
|
+
<StructuredListCell head>Conditional</StructuredListCell>
|
|
157
|
+
</StructuredListRow>
|
|
158
|
+
</StructuredListHead>
|
|
159
|
+
<StructuredListBody>
|
|
160
|
+
<StructuredListRow selection>
|
|
161
|
+
<StructuredListCell>Conditional Row</StructuredListCell>
|
|
162
|
+
<StructuredListInput
|
|
163
|
+
id="conditional-1"
|
|
164
|
+
value="conditional-1"
|
|
165
|
+
title="conditional-1"
|
|
166
|
+
name="conditional"
|
|
167
|
+
aria-label="conditional-1"
|
|
168
|
+
/>
|
|
169
|
+
</StructuredListRow>
|
|
170
|
+
</StructuredListBody>
|
|
171
|
+
</StructuredListWrapper>
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
// Case 8: Multiple Nested StructuredLists
|
|
175
|
+
export const NestedLists = () => (
|
|
176
|
+
<StructuredListWrapper selection>
|
|
177
|
+
<StructuredListHead>
|
|
178
|
+
<StructuredListRow head selection>
|
|
179
|
+
<StructuredListCell head>Parent List</StructuredListCell>
|
|
180
|
+
</StructuredListRow>
|
|
181
|
+
</StructuredListHead>
|
|
182
|
+
<StructuredListBody>
|
|
183
|
+
<StructuredListRow selection>
|
|
184
|
+
<StructuredListCell>
|
|
185
|
+
<StructuredListWrapper selection>
|
|
186
|
+
<StructuredListHead>
|
|
187
|
+
<StructuredListRow head selection>
|
|
188
|
+
<StructuredListCell head>Nested List</StructuredListCell>
|
|
189
|
+
</StructuredListRow>
|
|
190
|
+
</StructuredListHead>
|
|
191
|
+
<StructuredListBody>
|
|
192
|
+
<StructuredListRow selection>
|
|
193
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
194
|
+
<StructuredListInput
|
|
195
|
+
id="nested-2"
|
|
196
|
+
value="nested-2"
|
|
197
|
+
title="nested-2"
|
|
198
|
+
name="nested-2"
|
|
199
|
+
aria-label="nested-2"
|
|
200
|
+
/>
|
|
201
|
+
</StructuredListRow>
|
|
202
|
+
</StructuredListBody>
|
|
203
|
+
</StructuredListWrapper>
|
|
204
|
+
</StructuredListCell>
|
|
205
|
+
<StructuredListInput
|
|
206
|
+
id="parent-1"
|
|
207
|
+
value="parent-1"
|
|
208
|
+
title="parent-1"
|
|
209
|
+
name="parent"
|
|
210
|
+
aria-label="parent-1"
|
|
211
|
+
/>
|
|
212
|
+
</StructuredListRow>
|
|
213
|
+
</StructuredListBody>
|
|
214
|
+
</StructuredListWrapper>
|
|
215
|
+
);
|
|
216
|
+
|
|
217
|
+
// Case 10: With Conditional StructuredListInput
|
|
218
|
+
export const ConditionalInput = ({ isSelectable = true }) => (
|
|
219
|
+
<StructuredListWrapper selection>
|
|
220
|
+
<StructuredListHead>
|
|
221
|
+
<StructuredListRow head selection>
|
|
222
|
+
<StructuredListCell head>Conditional Input</StructuredListCell>
|
|
223
|
+
</StructuredListRow>
|
|
224
|
+
</StructuredListHead>
|
|
225
|
+
<StructuredListBody>
|
|
226
|
+
<StructuredListRow selection>
|
|
227
|
+
<StructuredListCell>Row Content</StructuredListCell>
|
|
228
|
+
{isSelectable && (
|
|
229
|
+
<StructuredListInput
|
|
230
|
+
id="conditional-input-1"
|
|
231
|
+
value="conditional-input-1"
|
|
232
|
+
title="conditional-input-1"
|
|
233
|
+
name="conditional-input"
|
|
234
|
+
aria-label="conditional-input-1"
|
|
235
|
+
/>
|
|
236
|
+
)}
|
|
237
|
+
</StructuredListRow>
|
|
238
|
+
</StructuredListBody>
|
|
239
|
+
</StructuredListWrapper>
|
|
240
|
+
);
|
|
241
|
+
|
|
242
|
+
// Case 11: With Multiple Body Sections
|
|
243
|
+
export const MultipleBodySections = () => (
|
|
244
|
+
<StructuredListWrapper selection>
|
|
245
|
+
<StructuredListHead>
|
|
246
|
+
<StructuredListRow head selection>
|
|
247
|
+
<StructuredListCell head>Multiple Bodies</StructuredListCell>
|
|
248
|
+
</StructuredListRow>
|
|
249
|
+
</StructuredListHead>
|
|
250
|
+
<StructuredListBody>
|
|
251
|
+
<StructuredListRow selection>
|
|
252
|
+
<StructuredListCell>Section 1</StructuredListCell>
|
|
253
|
+
<StructuredListInput
|
|
254
|
+
id="section-1"
|
|
255
|
+
value="section-1"
|
|
256
|
+
title="section-1"
|
|
257
|
+
name="multi-section"
|
|
258
|
+
aria-label="section-1"
|
|
259
|
+
/>
|
|
260
|
+
</StructuredListRow>
|
|
261
|
+
</StructuredListBody>
|
|
262
|
+
<StructuredListBody>
|
|
263
|
+
<StructuredListRow selection>
|
|
264
|
+
<StructuredListCell>Section 2</StructuredListCell>
|
|
265
|
+
<StructuredListInput
|
|
266
|
+
id="section-2"
|
|
267
|
+
value="section-2"
|
|
268
|
+
title="section-2"
|
|
269
|
+
name="multi-section"
|
|
270
|
+
aria-label="section-2"
|
|
271
|
+
/>
|
|
272
|
+
</StructuredListRow>
|
|
273
|
+
</StructuredListBody>
|
|
274
|
+
</StructuredListWrapper>
|
|
275
|
+
);
|
|
@@ -0,0 +1,275 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
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
|
+
import React from 'react';
|
|
9
|
+
import {
|
|
10
|
+
StructuredListWrapper,
|
|
11
|
+
StructuredListHead,
|
|
12
|
+
StructuredListBody,
|
|
13
|
+
StructuredListRow,
|
|
14
|
+
StructuredListCell,
|
|
15
|
+
StructuredListInput,
|
|
16
|
+
} from '@carbon/react';
|
|
17
|
+
|
|
18
|
+
// Case 1: Direct usage with selection
|
|
19
|
+
export const BasicSelection = () => (
|
|
20
|
+
<StructuredListWrapper selection>
|
|
21
|
+
<StructuredListHead>
|
|
22
|
+
<StructuredListRow head selection>
|
|
23
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
24
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
25
|
+
</StructuredListRow>
|
|
26
|
+
</StructuredListHead>
|
|
27
|
+
<StructuredListBody>
|
|
28
|
+
<StructuredListRow selection>
|
|
29
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
30
|
+
<StructuredListCell>Row 1</StructuredListCell>
|
|
31
|
+
<StructuredListInput
|
|
32
|
+
id="row-1"
|
|
33
|
+
value="row-1"
|
|
34
|
+
title="row-1"
|
|
35
|
+
name="row-1"
|
|
36
|
+
aria-label="row-1"
|
|
37
|
+
/>
|
|
38
|
+
</StructuredListRow>
|
|
39
|
+
</StructuredListBody>
|
|
40
|
+
</StructuredListWrapper>
|
|
41
|
+
);
|
|
42
|
+
|
|
43
|
+
// Case 2: Row generator function
|
|
44
|
+
const generateRows = (count) => {
|
|
45
|
+
return Array.from({ length: count }, (_, i) => (
|
|
46
|
+
<StructuredListRow key={`row-${i}`} selection>
|
|
47
|
+
<StructuredListCell>Row {i}</StructuredListCell>
|
|
48
|
+
<StructuredListCell>Content {i}</StructuredListCell>
|
|
49
|
+
<StructuredListInput
|
|
50
|
+
id={`row-${i}`}
|
|
51
|
+
value={`row-${i}`}
|
|
52
|
+
title={`row-${i}`}
|
|
53
|
+
name="row-0"
|
|
54
|
+
aria-label={`row-${i}`}
|
|
55
|
+
/>
|
|
56
|
+
</StructuredListRow>
|
|
57
|
+
));
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
export const WithRowGenerator = () => (
|
|
61
|
+
<StructuredListWrapper selection>
|
|
62
|
+
<StructuredListHead>
|
|
63
|
+
<StructuredListRow head selection>
|
|
64
|
+
<StructuredListCell head>Column A</StructuredListCell>
|
|
65
|
+
<StructuredListCell head>Column B</StructuredListCell>
|
|
66
|
+
</StructuredListRow>
|
|
67
|
+
</StructuredListHead>
|
|
68
|
+
<StructuredListBody>{generateRows(3)}</StructuredListBody>
|
|
69
|
+
</StructuredListWrapper>
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
// Case 3: Nested inside other components
|
|
73
|
+
export const NestedStructuredList = () => (
|
|
74
|
+
<div className="wrapper">
|
|
75
|
+
<div className="inner">
|
|
76
|
+
<StructuredListWrapper selection>
|
|
77
|
+
<StructuredListHead>
|
|
78
|
+
<StructuredListRow head selection>
|
|
79
|
+
<StructuredListCell head>Nested Column</StructuredListCell>
|
|
80
|
+
</StructuredListRow>
|
|
81
|
+
</StructuredListHead>
|
|
82
|
+
<StructuredListBody>
|
|
83
|
+
<StructuredListRow selection>
|
|
84
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
85
|
+
<StructuredListInput
|
|
86
|
+
id="nested-1"
|
|
87
|
+
value="nested-1"
|
|
88
|
+
title="nested-1"
|
|
89
|
+
name="nested-1"
|
|
90
|
+
aria-label="nested-1"
|
|
91
|
+
/>
|
|
92
|
+
</StructuredListRow>
|
|
93
|
+
</StructuredListBody>
|
|
94
|
+
</StructuredListWrapper>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
);
|
|
98
|
+
|
|
99
|
+
// Case 4: Without selection (should not be modified)
|
|
100
|
+
export const WithoutSelection = () => (
|
|
101
|
+
<StructuredListWrapper>
|
|
102
|
+
<StructuredListHead>
|
|
103
|
+
<StructuredListRow head>
|
|
104
|
+
<StructuredListCell head>No Selection</StructuredListCell>
|
|
105
|
+
</StructuredListRow>
|
|
106
|
+
</StructuredListHead>
|
|
107
|
+
<StructuredListBody>
|
|
108
|
+
<StructuredListRow>
|
|
109
|
+
<StructuredListCell>Should Not Change</StructuredListCell>
|
|
110
|
+
</StructuredListRow>
|
|
111
|
+
</StructuredListBody>
|
|
112
|
+
</StructuredListWrapper>
|
|
113
|
+
);
|
|
114
|
+
|
|
115
|
+
// Case 5: Mixed with and without selection
|
|
116
|
+
export const MixedSelectionUsage = () => (
|
|
117
|
+
<div>
|
|
118
|
+
<StructuredListWrapper selection>
|
|
119
|
+
<StructuredListHead>
|
|
120
|
+
<StructuredListRow head selection>
|
|
121
|
+
<StructuredListCell head>With Selection</StructuredListCell>
|
|
122
|
+
</StructuredListRow>
|
|
123
|
+
</StructuredListHead>
|
|
124
|
+
<StructuredListBody>
|
|
125
|
+
<StructuredListRow selection>
|
|
126
|
+
<StructuredListCell>Should Get Selection</StructuredListCell>
|
|
127
|
+
<StructuredListInput
|
|
128
|
+
id="mixed-1"
|
|
129
|
+
value="mixed-1"
|
|
130
|
+
title="mixed-1"
|
|
131
|
+
name="mixed-1"
|
|
132
|
+
aria-label="mixed-1"
|
|
133
|
+
/>
|
|
134
|
+
</StructuredListRow>
|
|
135
|
+
</StructuredListBody>
|
|
136
|
+
</StructuredListWrapper>
|
|
137
|
+
<StructuredListWrapper>
|
|
138
|
+
<StructuredListHead>
|
|
139
|
+
<StructuredListRow head>
|
|
140
|
+
<StructuredListCell head>Without Selection</StructuredListCell>
|
|
141
|
+
</StructuredListRow>
|
|
142
|
+
</StructuredListHead>
|
|
143
|
+
<StructuredListBody>
|
|
144
|
+
<StructuredListRow>
|
|
145
|
+
<StructuredListCell>Should Not Get Selection</StructuredListCell>
|
|
146
|
+
</StructuredListRow>
|
|
147
|
+
</StructuredListBody>
|
|
148
|
+
</StructuredListWrapper>
|
|
149
|
+
</div>
|
|
150
|
+
);
|
|
151
|
+
// Case 7: Conditional Rendering with Selection
|
|
152
|
+
export const ConditionalRendering = ({ showSelection = true }) => (
|
|
153
|
+
<StructuredListWrapper selection={showSelection}>
|
|
154
|
+
<StructuredListHead>
|
|
155
|
+
<StructuredListRow head selection>
|
|
156
|
+
<StructuredListCell head>Conditional</StructuredListCell>
|
|
157
|
+
</StructuredListRow>
|
|
158
|
+
</StructuredListHead>
|
|
159
|
+
<StructuredListBody>
|
|
160
|
+
<StructuredListRow selection>
|
|
161
|
+
<StructuredListCell>Conditional Row</StructuredListCell>
|
|
162
|
+
<StructuredListInput
|
|
163
|
+
id="conditional-1"
|
|
164
|
+
value="conditional-1"
|
|
165
|
+
title="conditional-1"
|
|
166
|
+
name="conditional"
|
|
167
|
+
aria-label="conditional-1"
|
|
168
|
+
/>
|
|
169
|
+
</StructuredListRow>
|
|
170
|
+
</StructuredListBody>
|
|
171
|
+
</StructuredListWrapper>
|
|
172
|
+
);
|
|
173
|
+
|
|
174
|
+
// Case 8: Multiple Nested StructuredLists
|
|
175
|
+
export const NestedLists = () => (
|
|
176
|
+
<StructuredListWrapper selection>
|
|
177
|
+
<StructuredListHead>
|
|
178
|
+
<StructuredListRow head selection>
|
|
179
|
+
<StructuredListCell head>Parent List</StructuredListCell>
|
|
180
|
+
</StructuredListRow>
|
|
181
|
+
</StructuredListHead>
|
|
182
|
+
<StructuredListBody>
|
|
183
|
+
<StructuredListRow selection>
|
|
184
|
+
<StructuredListCell>
|
|
185
|
+
<StructuredListWrapper selection>
|
|
186
|
+
<StructuredListHead>
|
|
187
|
+
<StructuredListRow head selection>
|
|
188
|
+
<StructuredListCell head>Nested List</StructuredListCell>
|
|
189
|
+
</StructuredListRow>
|
|
190
|
+
</StructuredListHead>
|
|
191
|
+
<StructuredListBody>
|
|
192
|
+
<StructuredListRow selection>
|
|
193
|
+
<StructuredListCell>Nested Content</StructuredListCell>
|
|
194
|
+
<StructuredListInput
|
|
195
|
+
id="nested-2"
|
|
196
|
+
value="nested-2"
|
|
197
|
+
title="nested-2"
|
|
198
|
+
name="nested-2"
|
|
199
|
+
aria-label="nested-2"
|
|
200
|
+
/>
|
|
201
|
+
</StructuredListRow>
|
|
202
|
+
</StructuredListBody>
|
|
203
|
+
</StructuredListWrapper>
|
|
204
|
+
</StructuredListCell>
|
|
205
|
+
<StructuredListInput
|
|
206
|
+
id="parent-1"
|
|
207
|
+
value="parent-1"
|
|
208
|
+
title="parent-1"
|
|
209
|
+
name="parent"
|
|
210
|
+
aria-label="parent-1"
|
|
211
|
+
/>
|
|
212
|
+
</StructuredListRow>
|
|
213
|
+
</StructuredListBody>
|
|
214
|
+
</StructuredListWrapper>
|
|
215
|
+
);
|
|
216
|
+
|
|
217
|
+
// Case 10: With Conditional StructuredListInput
|
|
218
|
+
export const ConditionalInput = ({ isSelectable = true }) => (
|
|
219
|
+
<StructuredListWrapper selection>
|
|
220
|
+
<StructuredListHead>
|
|
221
|
+
<StructuredListRow head selection>
|
|
222
|
+
<StructuredListCell head>Conditional Input</StructuredListCell>
|
|
223
|
+
</StructuredListRow>
|
|
224
|
+
</StructuredListHead>
|
|
225
|
+
<StructuredListBody>
|
|
226
|
+
<StructuredListRow selection>
|
|
227
|
+
<StructuredListCell>Row Content</StructuredListCell>
|
|
228
|
+
{isSelectable && (
|
|
229
|
+
<StructuredListInput
|
|
230
|
+
id="conditional-input-1"
|
|
231
|
+
value="conditional-input-1"
|
|
232
|
+
title="conditional-input-1"
|
|
233
|
+
name="conditional-input"
|
|
234
|
+
aria-label="conditional-input-1"
|
|
235
|
+
/>
|
|
236
|
+
)}
|
|
237
|
+
</StructuredListRow>
|
|
238
|
+
</StructuredListBody>
|
|
239
|
+
</StructuredListWrapper>
|
|
240
|
+
);
|
|
241
|
+
|
|
242
|
+
// Case 11: With Multiple Body Sections
|
|
243
|
+
export const MultipleBodySections = () => (
|
|
244
|
+
<StructuredListWrapper selection>
|
|
245
|
+
<StructuredListHead>
|
|
246
|
+
<StructuredListRow head selection>
|
|
247
|
+
<StructuredListCell head>Multiple Bodies</StructuredListCell>
|
|
248
|
+
</StructuredListRow>
|
|
249
|
+
</StructuredListHead>
|
|
250
|
+
<StructuredListBody>
|
|
251
|
+
<StructuredListRow selection>
|
|
252
|
+
<StructuredListCell>Section 1</StructuredListCell>
|
|
253
|
+
<StructuredListInput
|
|
254
|
+
id="section-1"
|
|
255
|
+
value="section-1"
|
|
256
|
+
title="section-1"
|
|
257
|
+
name="multi-section"
|
|
258
|
+
aria-label="section-1"
|
|
259
|
+
/>
|
|
260
|
+
</StructuredListRow>
|
|
261
|
+
</StructuredListBody>
|
|
262
|
+
<StructuredListBody>
|
|
263
|
+
<StructuredListRow selection>
|
|
264
|
+
<StructuredListCell>Section 2</StructuredListCell>
|
|
265
|
+
<StructuredListInput
|
|
266
|
+
id="section-2"
|
|
267
|
+
value="section-2"
|
|
268
|
+
title="section-2"
|
|
269
|
+
name="multi-section"
|
|
270
|
+
aria-label="section-2"
|
|
271
|
+
/>
|
|
272
|
+
</StructuredListRow>
|
|
273
|
+
</StructuredListBody>
|
|
274
|
+
</StructuredListWrapper>
|
|
275
|
+
);
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright IBM Corp. 2025
|
|
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, 'enable-v12-structured-list-visible-icons');
|