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