@zohodesk/components 1.6.2 → 1.6.4

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 (62) hide show
  1. package/README.md +31 -13
  2. package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css +4 -2
  3. package/es/ListItem/ListItem.js +6 -4
  4. package/es/ListItem/ListItem.module.css +40 -22
  5. package/es/ListItem/ListItemWithAvatar.js +7 -5
  6. package/es/ListItem/ListItemWithCheckBox.js +9 -5
  7. package/es/ListItem/ListItemWithIcon.js +10 -7
  8. package/es/ListItem/ListItemWithRadio.js +9 -6
  9. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +4 -4
  10. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +131 -82
  11. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +432 -390
  12. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +141 -92
  13. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +432 -390
  14. package/es/ListItem/props/defaultProps.js +2 -1
  15. package/es/ListItem/props/propTypes.js +4 -2
  16. package/es/MultiSelect/AdvancedGroupMultiSelect.js +12 -3
  17. package/es/MultiSelect/MultiSelect.js +2 -2
  18. package/es/MultiSelect/Suggestions.js +7 -2
  19. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +10 -10
  20. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -28
  21. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +20 -20
  22. package/es/MultiSelect/props/defaultProps.js +2 -0
  23. package/es/MultiSelect/props/propTypes.js +11 -3
  24. package/es/Popup/Popup.js +11 -4
  25. package/es/Select/GroupSelect.js +1 -1
  26. package/es/Select/SelectWithAvatar.js +3 -3
  27. package/es/Select/SelectWithIcon.js +10 -3
  28. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +66 -66
  29. package/es/Select/props/defaultProps.js +4 -2
  30. package/es/Select/props/propTypes.js +11 -3
  31. package/es/common/common.module.css +1 -1
  32. package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.module.css +4 -2
  33. package/lib/ListItem/ListItem.js +7 -4
  34. package/lib/ListItem/ListItem.module.css +40 -22
  35. package/lib/ListItem/ListItemWithAvatar.js +7 -5
  36. package/lib/ListItem/ListItemWithCheckBox.js +9 -5
  37. package/lib/ListItem/ListItemWithIcon.js +10 -7
  38. package/lib/ListItem/ListItemWithRadio.js +9 -6
  39. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +4 -4
  40. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +131 -82
  41. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +432 -390
  42. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +141 -92
  43. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +432 -390
  44. package/lib/ListItem/props/defaultProps.js +2 -1
  45. package/lib/ListItem/props/propTypes.js +4 -2
  46. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +23 -16
  47. package/lib/MultiSelect/MultiSelect.js +2 -2
  48. package/lib/MultiSelect/Suggestions.js +6 -2
  49. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +10 -10
  50. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +34 -28
  51. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +20 -20
  52. package/lib/MultiSelect/props/defaultProps.js +2 -0
  53. package/lib/MultiSelect/props/propTypes.js +13 -5
  54. package/lib/Popup/Popup.js +11 -4
  55. package/lib/Select/GroupSelect.js +2 -1
  56. package/lib/Select/SelectWithAvatar.js +4 -3
  57. package/lib/Select/SelectWithIcon.js +10 -3
  58. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +66 -66
  59. package/lib/Select/props/defaultProps.js +5 -3
  60. package/lib/Select/props/propTypes.js +11 -3
  61. package/lib/common/common.module.css +1 -1
  62. package/package.json +7 -7
package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap CHANGED
@@ -12,87 +12,93 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
16
- data-id="List_checkBox"
15
+ class="contentWrapper shrinkOff"
16
+ data-id="boxComponent"
17
17
  data-selector-id="box"
18
- data-test-id="List_checkBox"
18
+ data-test-id="boxComponent"
19
19
  >
20
20
  <div
21
- class="lhsBox_medium shrinkOff selfStart"
22
- data-id="boxComponent"
23
- data-selector-id="box"
24
- data-test-id="boxComponent"
21
+ class="iconBox lhsJustifyContent_center"
22
+ data-id="List_checkBox"
23
+ data-test-id="List_checkBox"
25
24
  >
26
25
  <div
27
- aria-checked="false"
28
- aria-hidden="true"
29
- class="container pointer primary
30
- inflex rowdir vCenter"
31
- data-id="checkBox"
32
- data-selector-id="container"
33
- data-test-id="checkBox"
34
- role="checkbox"
35
- tabindex="-1"
26
+ class="lhsBoxInner shrinkOff selfStart"
27
+ data-id="boxComponent"
28
+ data-selector-id="box"
29
+ data-test-id="boxComponent"
36
30
  >
37
31
  <div
38
- class="boxContainer medium filled shrinkOff"
39
- data-id="boxComponent"
40
- data-selector-id="box"
41
- data-test-id="boxComponent"
32
+ aria-checked="false"
33
+ aria-hidden="true"
34
+ class="container pointer primary
35
+ inflex rowdir vCenter"
36
+ data-id="checkBox"
37
+ data-selector-id="container"
38
+ data-test-id="checkBox"
39
+ role="checkbox"
40
+ tabindex="-1"
42
41
  >
43
- <input
44
- type="hidden"
45
- />
46
- <label
47
- class="checkbox pointer medium "
42
+ <div
43
+ class="boxContainer medium filled shrinkOff"
44
+ data-id="boxComponent"
45
+ data-selector-id="box"
46
+ data-test-id="boxComponent"
48
47
  >
49
- <svg
50
- viewBox="0 0 40 40"
51
- xmlns="http://www.w3.org/2000/svg"
48
+ <input
49
+ type="hidden"
50
+ />
51
+ <label
52
+ class="checkbox pointer medium "
52
53
  >
53
- <rect
54
- class="cbBox"
55
- height="38"
56
- rx="4"
57
- width="38"
58
- x="1"
54
+ <svg
55
+ viewBox="0 0 40 40"
59
56
  xmlns="http://www.w3.org/2000/svg"
60
- y="1"
61
- />
62
- </svg>
63
- </label>
57
+ >
58
+ <rect
59
+ class="cbBox"
60
+ height="38"
61
+ rx="4"
62
+ width="38"
63
+ x="1"
64
+ xmlns="http://www.w3.org/2000/svg"
65
+ y="1"
66
+ />
67
+ </svg>
68
+ </label>
69
+ </div>
64
70
  </div>
65
71
  </div>
66
72
  </div>
67
- </div>
68
- <div
69
- class="leftBox grow basis shrinkOff"
70
- data-id="boxComponent"
71
- data-selector-id="box"
72
- data-test-id="boxComponent"
73
- >
74
73
  <div
75
- class="titleBox shrinkOff"
74
+ class="leftBox selfAlign_center grow basis shrinkOff"
76
75
  data-id="boxComponent"
77
76
  data-selector-id="box"
78
77
  data-test-id="boxComponent"
79
78
  >
80
79
  <div
81
- class="value basisAuto shrinkOn"
80
+ class="titleBox shrinkOff"
82
81
  data-id="boxComponent"
83
82
  data-selector-id="box"
84
83
  data-test-id="boxComponent"
85
84
  >
86
- List
87
- </div>
88
- <div
89
- class="customValueRightPlaceholderClass shrinkOff"
90
- data-id="boxComponent"
91
- data-selector-id="box"
92
- data-test-id="boxComponent"
93
- >
94
- <div>
95
- Custom Placeholder
85
+ <div
86
+ class="value basisAuto shrinkOn"
87
+ data-id="boxComponent"
88
+ data-selector-id="box"
89
+ data-test-id="boxComponent"
90
+ >
91
+ List
92
+ </div>
93
+ <div
94
+ class="customValueRightPlaceholderClass shrinkOff"
95
+ data-id="boxComponent"
96
+ data-selector-id="box"
97
+ data-test-id="boxComponent"
98
+ >
99
+ <div>
100
+ Custom Placeholder
101
+ </div>
96
102
  </div>
97
103
  </div>
98
104
  </div>
@@ -113,87 +119,93 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
113
119
  tabindex="0"
114
120
  >
115
121
  <div
116
- class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
117
- data-id="List_checkBox"
122
+ class="contentWrapper shrinkOff"
123
+ data-id="boxComponent"
118
124
  data-selector-id="box"
119
- data-test-id="List_checkBox"
125
+ data-test-id="boxComponent"
120
126
  >
121
127
  <div
122
- class="lhsBox_medium shrinkOff selfStart"
123
- data-id="boxComponent"
124
- data-selector-id="box"
125
- data-test-id="boxComponent"
128
+ class="iconBox lhsJustifyContent_center"
129
+ data-id="List_checkBox"
130
+ data-test-id="List_checkBox"
126
131
  >
127
132
  <div
128
- aria-checked="false"
129
- aria-hidden="true"
130
- class="container pointer primary
131
- inflex rowdir vCenter"
132
- data-id="checkBox"
133
- data-selector-id="container"
134
- data-test-id="checkBox"
135
- role="checkbox"
136
- tabindex="-1"
133
+ class="lhsBoxInner shrinkOff selfStart"
134
+ data-id="boxComponent"
135
+ data-selector-id="box"
136
+ data-test-id="boxComponent"
137
137
  >
138
138
  <div
139
- class="boxContainer medium filled shrinkOff"
140
- data-id="boxComponent"
141
- data-selector-id="box"
142
- data-test-id="boxComponent"
139
+ aria-checked="false"
140
+ aria-hidden="true"
141
+ class="container pointer primary
142
+ inflex rowdir vCenter"
143
+ data-id="checkBox"
144
+ data-selector-id="container"
145
+ data-test-id="checkBox"
146
+ role="checkbox"
147
+ tabindex="-1"
143
148
  >
144
- <input
145
- type="hidden"
146
- />
147
- <label
148
- class="checkbox pointer medium "
149
+ <div
150
+ class="boxContainer medium filled shrinkOff"
151
+ data-id="boxComponent"
152
+ data-selector-id="box"
153
+ data-test-id="boxComponent"
149
154
  >
150
- <svg
151
- viewBox="0 0 40 40"
152
- xmlns="http://www.w3.org/2000/svg"
155
+ <input
156
+ type="hidden"
157
+ />
158
+ <label
159
+ class="checkbox pointer medium "
153
160
  >
154
- <rect
155
- class="cbBox"
156
- height="38"
157
- rx="4"
158
- width="38"
159
- x="1"
161
+ <svg
162
+ viewBox="0 0 40 40"
160
163
  xmlns="http://www.w3.org/2000/svg"
161
- y="1"
162
- />
163
- </svg>
164
- </label>
164
+ >
165
+ <rect
166
+ class="cbBox"
167
+ height="38"
168
+ rx="4"
169
+ width="38"
170
+ x="1"
171
+ xmlns="http://www.w3.org/2000/svg"
172
+ y="1"
173
+ />
174
+ </svg>
175
+ </label>
176
+ </div>
165
177
  </div>
166
178
  </div>
167
179
  </div>
168
- </div>
169
- <div
170
- class="leftBox grow basis shrinkOff"
171
- data-id="boxComponent"
172
- data-selector-id="box"
173
- data-test-id="boxComponent"
174
- >
175
180
  <div
176
- class="titleBox shrinkOff"
181
+ class="leftBox selfAlign_center grow basis shrinkOff"
177
182
  data-id="boxComponent"
178
183
  data-selector-id="box"
179
184
  data-test-id="boxComponent"
180
185
  >
181
186
  <div
182
- class="value basisAuto shrinkOn"
187
+ class="titleBox shrinkOff"
183
188
  data-id="boxComponent"
184
189
  data-selector-id="box"
185
190
  data-test-id="boxComponent"
186
191
  >
187
- List
188
- </div>
189
- <div
190
- class="shrinkOff"
191
- data-id="boxComponent"
192
- data-selector-id="box"
193
- data-test-id="boxComponent"
194
- >
195
- <div>
196
- Custom Placeholder
192
+ <div
193
+ class="value basisAuto shrinkOn"
194
+ data-id="boxComponent"
195
+ data-selector-id="box"
196
+ data-test-id="boxComponent"
197
+ >
198
+ List
199
+ </div>
200
+ <div
201
+ class="shrinkOff"
202
+ data-id="boxComponent"
203
+ data-selector-id="box"
204
+ data-test-id="boxComponent"
205
+ >
206
+ <div>
207
+ Custom Placeholder
208
+ </div>
197
209
  </div>
198
210
  </div>
199
211
  </div>
@@ -214,88 +226,94 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
214
226
  tabindex="0"
215
227
  >
216
228
  <div
217
- class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
218
- data-id="List_checkBox"
229
+ class="contentWrapper shrinkOff"
230
+ data-id="boxComponent"
219
231
  data-selector-id="box"
220
- data-test-id="List_checkBox"
232
+ data-test-id="boxComponent"
221
233
  >
222
234
  <div
223
- class="shrinkOff selfCenter"
224
- data-id="boxComponent"
225
- data-selector-id="box"
226
- data-test-id="boxComponent"
235
+ class="iconBox lhsJustifyContent_center"
236
+ data-id="List_checkBox"
237
+ data-test-id="List_checkBox"
227
238
  >
228
239
  <div
229
- aria-checked="false"
230
- aria-hidden="true"
231
- class="container pointer primary
232
- inflex rowdir vCenter"
233
- data-id="checkBox"
234
- data-selector-id="container"
235
- data-test-id="checkBox"
236
- role="checkbox"
237
- tabindex="-1"
240
+ class="shrinkOff selfCenter"
241
+ data-id="boxComponent"
242
+ data-selector-id="box"
243
+ data-test-id="boxComponent"
238
244
  >
239
245
  <div
240
- class="boxContainer medium filled shrinkOff"
241
- data-id="boxComponent"
242
- data-selector-id="box"
243
- data-test-id="boxComponent"
246
+ aria-checked="false"
247
+ aria-hidden="true"
248
+ class="container pointer primary
249
+ inflex rowdir vCenter"
250
+ data-id="checkBox"
251
+ data-selector-id="container"
252
+ data-test-id="checkBox"
253
+ role="checkbox"
254
+ tabindex="-1"
244
255
  >
245
- <input
246
- type="hidden"
247
- />
248
- <label
249
- class="checkbox pointer medium "
256
+ <div
257
+ class="boxContainer medium filled shrinkOff"
258
+ data-id="boxComponent"
259
+ data-selector-id="box"
260
+ data-test-id="boxComponent"
250
261
  >
251
- <svg
252
- viewBox="0 0 40 40"
253
- xmlns="http://www.w3.org/2000/svg"
262
+ <input
263
+ type="hidden"
264
+ />
265
+ <label
266
+ class="checkbox pointer medium "
254
267
  >
255
- <rect
256
- class="cbBox"
257
- height="38"
258
- rx="4"
259
- width="38"
260
- x="1"
268
+ <svg
269
+ viewBox="0 0 40 40"
261
270
  xmlns="http://www.w3.org/2000/svg"
262
- y="1"
263
- />
264
- </svg>
265
- </label>
271
+ >
272
+ <rect
273
+ class="cbBox"
274
+ height="38"
275
+ rx="4"
276
+ width="38"
277
+ x="1"
278
+ xmlns="http://www.w3.org/2000/svg"
279
+ y="1"
280
+ />
281
+ </svg>
282
+ </label>
283
+ </div>
266
284
  </div>
267
285
  </div>
268
286
  </div>
269
- </div>
270
- <div
271
- class="leftBox grow basis shrinkOff"
272
- data-id="boxComponent"
273
- data-selector-id="box"
274
- data-test-id="boxComponent"
275
- >
276
287
  <div
277
- class="titleBox shrinkOff"
288
+ class="leftBox selfAlign_center grow basis shrinkOff"
278
289
  data-id="boxComponent"
279
290
  data-selector-id="box"
280
291
  data-test-id="boxComponent"
281
292
  >
282
293
  <div
283
- class="value basisAuto shrinkOn"
294
+ class="titleBox shrinkOff"
284
295
  data-id="boxComponent"
285
296
  data-selector-id="box"
286
297
  data-test-id="boxComponent"
287
298
  >
288
- List
299
+ <div
300
+ class="value basisAuto shrinkOn"
301
+ data-id="boxComponent"
302
+ data-selector-id="box"
303
+ data-test-id="boxComponent"
304
+ >
305
+ List
306
+ </div>
307
+ </div>
308
+ <div
309
+ class="secondaryField secondaryValue shrinkOff"
310
+ data-id="boxComponent"
311
+ data-selector-id="box"
312
+ data-test-id="boxComponent"
313
+ data-title="secondaryValue"
314
+ >
315
+ secondaryValue
289
316
  </div>
290
- </div>
291
- <div
292
- class="secondaryField secondaryValue shrinkOff"
293
- data-id="boxComponent"
294
- data-selector-id="box"
295
- data-test-id="boxComponent"
296
- data-title="secondaryValue"
297
- >
298
- secondaryValue
299
317
  </div>
300
318
  </div>
301
319
  </li>
@@ -314,88 +332,94 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
314
332
  tabindex="0"
315
333
  >
316
334
  <div
317
- class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
318
- data-id="List_checkBox"
335
+ class="contentWrapper shrinkOff"
336
+ data-id="boxComponent"
319
337
  data-selector-id="box"
320
- data-test-id="List_checkBox"
338
+ data-test-id="boxComponent"
321
339
  >
322
340
  <div
323
- class="lhsBox_medium shrinkOff selfEnd"
324
- data-id="boxComponent"
325
- data-selector-id="box"
326
- data-test-id="boxComponent"
341
+ class="iconBox lhsJustifyContent_center"
342
+ data-id="List_checkBox"
343
+ data-test-id="List_checkBox"
327
344
  >
328
345
  <div
329
- aria-checked="false"
330
- aria-hidden="true"
331
- class="container pointer primary
332
- inflex rowdir vCenter"
333
- data-id="checkBox"
334
- data-selector-id="container"
335
- data-test-id="checkBox"
336
- role="checkbox"
337
- tabindex="-1"
346
+ class="lhsBoxInner shrinkOff selfEnd"
347
+ data-id="boxComponent"
348
+ data-selector-id="box"
349
+ data-test-id="boxComponent"
338
350
  >
339
351
  <div
340
- class="boxContainer medium filled shrinkOff"
341
- data-id="boxComponent"
342
- data-selector-id="box"
343
- data-test-id="boxComponent"
352
+ aria-checked="false"
353
+ aria-hidden="true"
354
+ class="container pointer primary
355
+ inflex rowdir vCenter"
356
+ data-id="checkBox"
357
+ data-selector-id="container"
358
+ data-test-id="checkBox"
359
+ role="checkbox"
360
+ tabindex="-1"
344
361
  >
345
- <input
346
- type="hidden"
347
- />
348
- <label
349
- class="checkbox pointer medium "
362
+ <div
363
+ class="boxContainer medium filled shrinkOff"
364
+ data-id="boxComponent"
365
+ data-selector-id="box"
366
+ data-test-id="boxComponent"
350
367
  >
351
- <svg
352
- viewBox="0 0 40 40"
353
- xmlns="http://www.w3.org/2000/svg"
368
+ <input
369
+ type="hidden"
370
+ />
371
+ <label
372
+ class="checkbox pointer medium "
354
373
  >
355
- <rect
356
- class="cbBox"
357
- height="38"
358
- rx="4"
359
- width="38"
360
- x="1"
374
+ <svg
375
+ viewBox="0 0 40 40"
361
376
  xmlns="http://www.w3.org/2000/svg"
362
- y="1"
363
- />
364
- </svg>
365
- </label>
377
+ >
378
+ <rect
379
+ class="cbBox"
380
+ height="38"
381
+ rx="4"
382
+ width="38"
383
+ x="1"
384
+ xmlns="http://www.w3.org/2000/svg"
385
+ y="1"
386
+ />
387
+ </svg>
388
+ </label>
389
+ </div>
366
390
  </div>
367
391
  </div>
368
392
  </div>
369
- </div>
370
- <div
371
- class="leftBox grow basis shrinkOff"
372
- data-id="boxComponent"
373
- data-selector-id="box"
374
- data-test-id="boxComponent"
375
- >
376
393
  <div
377
- class="titleBox shrinkOff"
394
+ class="leftBox selfAlign_center grow basis shrinkOff"
378
395
  data-id="boxComponent"
379
396
  data-selector-id="box"
380
397
  data-test-id="boxComponent"
381
398
  >
382
399
  <div
383
- class="value basisAuto shrinkOn"
400
+ class="titleBox shrinkOff"
384
401
  data-id="boxComponent"
385
402
  data-selector-id="box"
386
403
  data-test-id="boxComponent"
387
404
  >
388
- List
405
+ <div
406
+ class="value basisAuto shrinkOn"
407
+ data-id="boxComponent"
408
+ data-selector-id="box"
409
+ data-test-id="boxComponent"
410
+ >
411
+ List
412
+ </div>
413
+ </div>
414
+ <div
415
+ class="secondaryField secondaryValue shrinkOff"
416
+ data-id="boxComponent"
417
+ data-selector-id="box"
418
+ data-test-id="boxComponent"
419
+ data-title="secondaryValue"
420
+ >
421
+ secondaryValue
389
422
  </div>
390
- </div>
391
- <div
392
- class="secondaryField secondaryValue shrinkOff"
393
- data-id="boxComponent"
394
- data-selector-id="box"
395
- data-test-id="boxComponent"
396
- data-title="secondaryValue"
397
- >
398
- secondaryValue
399
423
  </div>
400
424
  </div>
401
425
  </li>
@@ -414,89 +438,95 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
414
438
  tabindex="0"
415
439
  >
416
440
  <div
417
- class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
418
- data-id="List_checkBox"
441
+ class="contentWrapper shrinkOff"
442
+ data-id="boxComponent"
419
443
  data-selector-id="box"
420
- data-test-id="List_checkBox"
444
+ data-test-id="boxComponent"
421
445
  >
422
446
  <div
423
- class="lhsBox_medium shrinkOff selfStart"
424
- data-id="boxComponent"
425
- data-selector-id="box"
426
- data-test-id="boxComponent"
447
+ class="iconBox lhsJustifyContent_center"
448
+ data-id="List_checkBox"
449
+ data-test-id="List_checkBox"
427
450
  >
428
451
  <div
429
- aria-checked="false"
430
- aria-hidden="true"
431
- class="container pointer primary
432
- inflex rowdir vCenter"
433
- data-id="checkBox"
434
- data-selector-id="container"
435
- data-test-id="checkBox"
436
- role="checkbox"
437
- tabindex="-1"
452
+ class="lhsBoxInner shrinkOff selfStart"
453
+ data-id="boxComponent"
454
+ data-selector-id="box"
455
+ data-test-id="boxComponent"
438
456
  >
439
457
  <div
440
- class="boxContainer medium filled shrinkOff"
441
- data-id="boxComponent"
442
- data-selector-id="box"
443
- data-test-id="boxComponent"
458
+ aria-checked="false"
459
+ aria-hidden="true"
460
+ class="container pointer primary
461
+ inflex rowdir vCenter"
462
+ data-id="checkBox"
463
+ data-selector-id="container"
464
+ data-test-id="checkBox"
465
+ role="checkbox"
466
+ tabindex="-1"
444
467
  >
445
- <input
446
- type="hidden"
447
- />
448
- <label
449
- class="checkbox pointer medium "
468
+ <div
469
+ class="boxContainer medium filled shrinkOff"
470
+ data-id="boxComponent"
471
+ data-selector-id="box"
472
+ data-test-id="boxComponent"
450
473
  >
451
- <svg
452
- viewBox="0 0 40 40"
453
- xmlns="http://www.w3.org/2000/svg"
474
+ <input
475
+ type="hidden"
476
+ />
477
+ <label
478
+ class="checkbox pointer medium "
454
479
  >
455
- <rect
456
- class="cbBox"
457
- height="38"
458
- rx="4"
459
- width="38"
460
- x="1"
480
+ <svg
481
+ viewBox="0 0 40 40"
461
482
  xmlns="http://www.w3.org/2000/svg"
462
- y="1"
463
- />
464
- </svg>
465
- </label>
483
+ >
484
+ <rect
485
+ class="cbBox"
486
+ height="38"
487
+ rx="4"
488
+ width="38"
489
+ x="1"
490
+ xmlns="http://www.w3.org/2000/svg"
491
+ y="1"
492
+ />
493
+ </svg>
494
+ </label>
495
+ </div>
466
496
  </div>
467
497
  </div>
468
498
  </div>
469
- </div>
470
- <div
471
- class="leftBox grow basis shrinkOff"
472
- data-id="boxComponent"
473
- data-selector-id="box"
474
- data-test-id="boxComponent"
475
- >
476
499
  <div
477
- class="titleBox shrinkOff"
500
+ class="leftBox selfAlign_center grow basis shrinkOff"
478
501
  data-id="boxComponent"
479
502
  data-selector-id="box"
480
503
  data-test-id="boxComponent"
481
504
  >
482
505
  <div
483
- class="value basisAuto shrinkOn"
506
+ class="titleBox shrinkOff"
507
+ data-id="boxComponent"
508
+ data-selector-id="box"
509
+ data-test-id="boxComponent"
510
+ >
511
+ <div
512
+ class="value basisAuto shrinkOn"
513
+ data-id="boxComponent"
514
+ data-selector-id="box"
515
+ data-test-id="boxComponent"
516
+ >
517
+ List
518
+ </div>
519
+ </div>
520
+ <div
521
+ class="secondaryField secondaryValue shrinkOff"
484
522
  data-id="boxComponent"
485
523
  data-selector-id="box"
486
524
  data-test-id="boxComponent"
525
+ data-title="secondaryValue"
487
526
  >
488
- List
527
+ secondaryValue
489
528
  </div>
490
529
  </div>
491
- <div
492
- class="secondaryField secondaryValue shrinkOff"
493
- data-id="boxComponent"
494
- data-selector-id="box"
495
- data-test-id="boxComponent"
496
- data-title="secondaryValue"
497
- >
498
- secondaryValue
499
- </div>
500
530
  </div>
501
531
  </li>
502
532
  </DocumentFragment>
@@ -514,88 +544,94 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
514
544
  tabindex="0"
515
545
  >
516
546
  <div
517
- class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
518
- data-id="List_checkBox"
547
+ class="contentWrapper shrinkOff"
548
+ data-id="boxComponent"
519
549
  data-selector-id="box"
520
- data-test-id="List_checkBox"
550
+ data-test-id="boxComponent"
521
551
  >
522
552
  <div
523
- class="lhsBox_medium shrinkOff selfStart"
524
- data-id="boxComponent"
525
- data-selector-id="box"
526
- data-test-id="boxComponent"
553
+ class="iconBox lhsJustifyContent_center"
554
+ data-id="List_checkBox"
555
+ data-test-id="List_checkBox"
527
556
  >
528
557
  <div
529
- aria-checked="false"
530
- aria-hidden="true"
531
- class="container pointer primary
532
- inflex rowdir vCenter"
533
- data-id="checkBox"
534
- data-selector-id="container"
535
- data-test-id="checkBox"
536
- role="checkbox"
537
- tabindex="-1"
558
+ class="lhsBoxInner shrinkOff selfStart"
559
+ data-id="boxComponent"
560
+ data-selector-id="box"
561
+ data-test-id="boxComponent"
538
562
  >
539
563
  <div
540
- class="boxContainer medium filled shrinkOff"
541
- data-id="boxComponent"
542
- data-selector-id="box"
543
- data-test-id="boxComponent"
564
+ aria-checked="false"
565
+ aria-hidden="true"
566
+ class="container pointer primary
567
+ inflex rowdir vCenter"
568
+ data-id="checkBox"
569
+ data-selector-id="container"
570
+ data-test-id="checkBox"
571
+ role="checkbox"
572
+ tabindex="-1"
544
573
  >
545
- <input
546
- type="hidden"
547
- />
548
- <label
549
- class="checkbox pointer medium "
574
+ <div
575
+ class="boxContainer medium filled shrinkOff"
576
+ data-id="boxComponent"
577
+ data-selector-id="box"
578
+ data-test-id="boxComponent"
550
579
  >
551
- <svg
552
- viewBox="0 0 40 40"
553
- xmlns="http://www.w3.org/2000/svg"
580
+ <input
581
+ type="hidden"
582
+ />
583
+ <label
584
+ class="checkbox pointer medium "
554
585
  >
555
- <rect
556
- class="cbBox"
557
- height="38"
558
- rx="4"
559
- width="38"
560
- x="1"
586
+ <svg
587
+ viewBox="0 0 40 40"
561
588
  xmlns="http://www.w3.org/2000/svg"
562
- y="1"
563
- />
564
- </svg>
565
- </label>
589
+ >
590
+ <rect
591
+ class="cbBox"
592
+ height="38"
593
+ rx="4"
594
+ width="38"
595
+ x="1"
596
+ xmlns="http://www.w3.org/2000/svg"
597
+ y="1"
598
+ />
599
+ </svg>
600
+ </label>
601
+ </div>
566
602
  </div>
567
603
  </div>
568
604
  </div>
569
- </div>
570
- <div
571
- class="leftBox grow basis shrinkOff"
572
- data-id="boxComponent"
573
- data-selector-id="box"
574
- data-test-id="boxComponent"
575
- >
576
605
  <div
577
- class="titleBox shrinkOff"
606
+ class="leftBox selfAlign_center grow basis shrinkOff"
578
607
  data-id="boxComponent"
579
608
  data-selector-id="box"
580
609
  data-test-id="boxComponent"
581
610
  >
582
611
  <div
583
- class="value basisAuto shrinkOn"
612
+ class="titleBox shrinkOff"
584
613
  data-id="boxComponent"
585
614
  data-selector-id="box"
586
615
  data-test-id="boxComponent"
587
616
  >
588
- List
617
+ <div
618
+ class="value basisAuto shrinkOn"
619
+ data-id="boxComponent"
620
+ data-selector-id="box"
621
+ data-test-id="boxComponent"
622
+ >
623
+ List
624
+ </div>
625
+ </div>
626
+ <div
627
+ class="secondaryField secondaryValue shrinkOff"
628
+ data-id="boxComponent"
629
+ data-selector-id="box"
630
+ data-test-id="boxComponent"
631
+ data-title="secondaryValue"
632
+ >
633
+ secondaryValue
589
634
  </div>
590
- </div>
591
- <div
592
- class="secondaryField secondaryValue shrinkOff"
593
- data-id="boxComponent"
594
- data-selector-id="box"
595
- data-test-id="boxComponent"
596
- data-title="secondaryValue"
597
- >
598
- secondaryValue
599
635
  </div>
600
636
  </div>
601
637
  </li>
@@ -614,78 +650,84 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
614
650
  tabindex="0"
615
651
  >
616
652
  <div
617
- class="iconBox lhsBox lhsJustifyContent_center shrinkOff"
618
- data-id="List_checkBox"
653
+ class="contentWrapper shrinkOff"
654
+ data-id="boxComponent"
619
655
  data-selector-id="box"
620
- data-test-id="List_checkBox"
656
+ data-test-id="boxComponent"
621
657
  >
622
658
  <div
623
- class="lhsBox_medium shrinkOff selfStart"
624
- data-id="boxComponent"
625
- data-selector-id="box"
626
- data-test-id="boxComponent"
659
+ class="iconBox lhsJustifyContent_center"
660
+ data-id="List_checkBox"
661
+ data-test-id="List_checkBox"
627
662
  >
628
663
  <div
629
- aria-checked="false"
630
- aria-hidden="true"
631
- class="container pointer primary
632
- inflex rowdir vCenter"
633
- data-id="checkBox"
634
- data-selector-id="container"
635
- data-test-id="checkBox"
636
- role="checkbox"
637
- tabindex="-1"
664
+ class="lhsBoxInner shrinkOff selfStart"
665
+ data-id="boxComponent"
666
+ data-selector-id="box"
667
+ data-test-id="boxComponent"
638
668
  >
639
669
  <div
640
- class="boxContainer medium filled shrinkOff"
641
- data-id="boxComponent"
642
- data-selector-id="box"
643
- data-test-id="boxComponent"
670
+ aria-checked="false"
671
+ aria-hidden="true"
672
+ class="container pointer primary
673
+ inflex rowdir vCenter"
674
+ data-id="checkBox"
675
+ data-selector-id="container"
676
+ data-test-id="checkBox"
677
+ role="checkbox"
678
+ tabindex="-1"
644
679
  >
645
- <input
646
- type="hidden"
647
- />
648
- <label
649
- class="checkbox pointer medium "
680
+ <div
681
+ class="boxContainer medium filled shrinkOff"
682
+ data-id="boxComponent"
683
+ data-selector-id="box"
684
+ data-test-id="boxComponent"
650
685
  >
651
- <svg
652
- viewBox="0 0 40 40"
653
- xmlns="http://www.w3.org/2000/svg"
686
+ <input
687
+ type="hidden"
688
+ />
689
+ <label
690
+ class="checkbox pointer medium "
654
691
  >
655
- <rect
656
- class="cbBox"
657
- height="38"
658
- rx="4"
659
- width="38"
660
- x="1"
692
+ <svg
693
+ viewBox="0 0 40 40"
661
694
  xmlns="http://www.w3.org/2000/svg"
662
- y="1"
663
- />
664
- </svg>
665
- </label>
695
+ >
696
+ <rect
697
+ class="cbBox"
698
+ height="38"
699
+ rx="4"
700
+ width="38"
701
+ x="1"
702
+ xmlns="http://www.w3.org/2000/svg"
703
+ y="1"
704
+ />
705
+ </svg>
706
+ </label>
707
+ </div>
666
708
  </div>
667
709
  </div>
668
710
  </div>
669
- </div>
670
- <div
671
- class="leftBox grow basis shrinkOff"
672
- data-id="boxComponent"
673
- data-selector-id="box"
674
- data-test-id="boxComponent"
675
- >
676
711
  <div
677
- class="titleBox shrinkOff"
712
+ class="leftBox selfAlign_center grow basis shrinkOff"
678
713
  data-id="boxComponent"
679
714
  data-selector-id="box"
680
715
  data-test-id="boxComponent"
681
716
  >
682
717
  <div
683
- class="value basisAuto shrinkOn"
718
+ class="titleBox shrinkOff"
684
719
  data-id="boxComponent"
685
720
  data-selector-id="box"
686
721
  data-test-id="boxComponent"
687
722
  >
688
- List
723
+ <div
724
+ class="value basisAuto shrinkOn"
725
+ data-id="boxComponent"
726
+ data-selector-id="box"
727
+ data-test-id="boxComponent"
728
+ >
729
+ List
730
+ </div>
689
731
  </div>
690
732
  </div>
691
733
  </div>