@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__/ListItemWithIcon.spec.js.snap CHANGED
@@ -12,33 +12,40 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="leftBox grow basis shrinkOff"
15
+ class="contentWrapper shrinkOff"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
19
19
  >
20
20
  <div
21
- class="titleBox shrinkOff"
21
+ class="leftBox selfAlign_center grow basis shrinkOff"
22
22
  data-id="boxComponent"
23
23
  data-selector-id="box"
24
24
  data-test-id="boxComponent"
25
25
  >
26
26
  <div
27
- class="value basisAuto shrinkOn"
28
- data-id="list_Text"
29
- data-selector-id="box"
30
- data-test-id="list_Text"
31
- >
32
- List
33
- </div>
34
- <div
35
- class="customValueRightPlaceholderClass shrinkOff"
27
+ class="titleBox shrinkOff"
36
28
  data-id="boxComponent"
37
29
  data-selector-id="box"
38
30
  data-test-id="boxComponent"
39
31
  >
40
- <div>
41
- Custom Placeholder
32
+ <div
33
+ class="value basisAuto shrinkOn"
34
+ data-id="list_Text"
35
+ data-selector-id="box"
36
+ data-test-id="list_Text"
37
+ >
38
+ List
39
+ </div>
40
+ <div
41
+ class="customValueRightPlaceholderClass shrinkOff"
42
+ data-id="boxComponent"
43
+ data-selector-id="box"
44
+ data-test-id="boxComponent"
45
+ >
46
+ <div>
47
+ Custom Placeholder
48
+ </div>
42
49
  </div>
43
50
  </div>
44
51
  </div>
@@ -59,33 +66,40 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
59
66
  tabindex="0"
60
67
  >
61
68
  <div
62
- class="leftBox grow basis shrinkOff"
69
+ class="contentWrapper shrinkOff"
63
70
  data-id="boxComponent"
64
71
  data-selector-id="box"
65
72
  data-test-id="boxComponent"
66
73
  >
67
74
  <div
68
- class="titleBox shrinkOff"
75
+ class="leftBox selfAlign_center grow basis shrinkOff"
69
76
  data-id="boxComponent"
70
77
  data-selector-id="box"
71
78
  data-test-id="boxComponent"
72
79
  >
73
80
  <div
74
- class="value basisAuto shrinkOn"
75
- data-id="list_Text"
76
- data-selector-id="box"
77
- data-test-id="list_Text"
78
- >
79
- List
80
- </div>
81
- <div
82
- class="shrinkOff"
81
+ class="titleBox shrinkOff"
83
82
  data-id="boxComponent"
84
83
  data-selector-id="box"
85
84
  data-test-id="boxComponent"
86
85
  >
87
- <div>
88
- Custom Placeholder
86
+ <div
87
+ class="value basisAuto shrinkOn"
88
+ data-id="list_Text"
89
+ data-selector-id="box"
90
+ data-test-id="list_Text"
91
+ >
92
+ List
93
+ </div>
94
+ <div
95
+ class="shrinkOff"
96
+ data-id="boxComponent"
97
+ data-selector-id="box"
98
+ data-test-id="boxComponent"
99
+ >
100
+ <div>
101
+ Custom Placeholder
102
+ </div>
89
103
  </div>
90
104
  </div>
91
105
  </div>
@@ -106,34 +120,41 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
106
120
  tabindex="0"
107
121
  >
108
122
  <div
109
- class="leftBox grow basis shrinkOff"
123
+ class="contentWrapper alignLhsBox_center shrinkOff"
110
124
  data-id="boxComponent"
111
125
  data-selector-id="box"
112
126
  data-test-id="boxComponent"
113
127
  >
114
128
  <div
115
- class="titleBox shrinkOff"
129
+ class="leftBox selfAlign_center grow basis shrinkOff"
116
130
  data-id="boxComponent"
117
131
  data-selector-id="box"
118
132
  data-test-id="boxComponent"
119
133
  >
120
134
  <div
121
- class="value basisAuto shrinkOn"
122
- data-id="list_Text"
135
+ class="titleBox shrinkOff"
136
+ data-id="boxComponent"
123
137
  data-selector-id="box"
124
- data-test-id="list_Text"
138
+ data-test-id="boxComponent"
125
139
  >
126
- List
140
+ <div
141
+ class="value basisAuto shrinkOn"
142
+ data-id="list_Text"
143
+ data-selector-id="box"
144
+ data-test-id="list_Text"
145
+ >
146
+ List
147
+ </div>
148
+ </div>
149
+ <div
150
+ class="secondaryField secondaryValue shrinkOff"
151
+ data-id="boxComponent"
152
+ data-selector-id="box"
153
+ data-test-id="boxComponent"
154
+ data-title="secondaryValue"
155
+ >
156
+ secondaryValue
127
157
  </div>
128
- </div>
129
- <div
130
- class="secondaryField secondaryValue shrinkOff"
131
- data-id="boxComponent"
132
- data-selector-id="box"
133
- data-test-id="boxComponent"
134
- data-title="secondaryValue"
135
- >
136
- secondaryValue
137
158
  </div>
138
159
  </div>
139
160
  </li>
@@ -152,34 +173,41 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
152
173
  tabindex="0"
153
174
  >
154
175
  <div
155
- class="leftBox grow basis shrinkOff"
176
+ class="contentWrapper alignLhsBox_end shrinkOff"
156
177
  data-id="boxComponent"
157
178
  data-selector-id="box"
158
179
  data-test-id="boxComponent"
159
180
  >
160
181
  <div
161
- class="titleBox shrinkOff"
182
+ class="leftBox selfAlign_center grow basis shrinkOff"
162
183
  data-id="boxComponent"
163
184
  data-selector-id="box"
164
185
  data-test-id="boxComponent"
165
186
  >
166
187
  <div
167
- class="value basisAuto shrinkOn"
168
- data-id="list_Text"
188
+ class="titleBox shrinkOff"
189
+ data-id="boxComponent"
169
190
  data-selector-id="box"
170
- data-test-id="list_Text"
191
+ data-test-id="boxComponent"
171
192
  >
172
- List
193
+ <div
194
+ class="value basisAuto shrinkOn"
195
+ data-id="list_Text"
196
+ data-selector-id="box"
197
+ data-test-id="list_Text"
198
+ >
199
+ List
200
+ </div>
201
+ </div>
202
+ <div
203
+ class="secondaryField secondaryValue shrinkOff"
204
+ data-id="boxComponent"
205
+ data-selector-id="box"
206
+ data-test-id="boxComponent"
207
+ data-title="secondaryValue"
208
+ >
209
+ secondaryValue
173
210
  </div>
174
- </div>
175
- <div
176
- class="secondaryField secondaryValue shrinkOff"
177
- data-id="boxComponent"
178
- data-selector-id="box"
179
- data-test-id="boxComponent"
180
- data-title="secondaryValue"
181
- >
182
- secondaryValue
183
211
  </div>
184
212
  </div>
185
213
  </li>
@@ -198,34 +226,41 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
198
226
  tabindex="0"
199
227
  >
200
228
  <div
201
- class="leftBox grow basis shrinkOff"
229
+ class="contentWrapper shrinkOff"
202
230
  data-id="boxComponent"
203
231
  data-selector-id="box"
204
232
  data-test-id="boxComponent"
205
233
  >
206
234
  <div
207
- class="titleBox shrinkOff"
235
+ class="leftBox selfAlign_center grow basis shrinkOff"
208
236
  data-id="boxComponent"
209
237
  data-selector-id="box"
210
238
  data-test-id="boxComponent"
211
239
  >
212
240
  <div
213
- class="value basisAuto shrinkOn"
214
- data-id="list_Text"
241
+ class="titleBox shrinkOff"
242
+ data-id="boxComponent"
215
243
  data-selector-id="box"
216
- data-test-id="list_Text"
244
+ data-test-id="boxComponent"
217
245
  >
218
- List
246
+ <div
247
+ class="value basisAuto shrinkOn"
248
+ data-id="list_Text"
249
+ data-selector-id="box"
250
+ data-test-id="list_Text"
251
+ >
252
+ List
253
+ </div>
254
+ </div>
255
+ <div
256
+ class="secondaryField secondaryValue shrinkOff"
257
+ data-id="boxComponent"
258
+ data-selector-id="box"
259
+ data-test-id="boxComponent"
260
+ data-title="secondaryValue"
261
+ >
262
+ secondaryValue
219
263
  </div>
220
- </div>
221
- <div
222
- class="secondaryField secondaryValue shrinkOff"
223
- data-id="boxComponent"
224
- data-selector-id="box"
225
- data-test-id="boxComponent"
226
- data-title="secondaryValue"
227
- >
228
- secondaryValue
229
264
  </div>
230
265
  </div>
231
266
  </li>
@@ -244,34 +279,41 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
244
279
  tabindex="0"
245
280
  >
246
281
  <div
247
- class="leftBox grow basis shrinkOff"
282
+ class="contentWrapper shrinkOff"
248
283
  data-id="boxComponent"
249
284
  data-selector-id="box"
250
285
  data-test-id="boxComponent"
251
286
  >
252
287
  <div
253
- class="titleBox shrinkOff"
288
+ class="leftBox selfAlign_center grow basis shrinkOff"
254
289
  data-id="boxComponent"
255
290
  data-selector-id="box"
256
291
  data-test-id="boxComponent"
257
292
  >
258
293
  <div
259
- class="value basisAuto shrinkOn"
260
- data-id="list_Text"
294
+ class="titleBox shrinkOff"
295
+ data-id="boxComponent"
261
296
  data-selector-id="box"
262
- data-test-id="list_Text"
297
+ data-test-id="boxComponent"
263
298
  >
264
- List
299
+ <div
300
+ class="value basisAuto shrinkOn"
301
+ data-id="list_Text"
302
+ data-selector-id="box"
303
+ data-test-id="list_Text"
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
265
316
  </div>
266
- </div>
267
- <div
268
- class="secondaryField secondaryValue shrinkOff"
269
- data-id="boxComponent"
270
- data-selector-id="box"
271
- data-test-id="boxComponent"
272
- data-title="secondaryValue"
273
- >
274
- secondaryValue
275
317
  </div>
276
318
  </div>
277
319
  </li>
@@ -290,24 +332,31 @@ exports[`ListItemWithIcon rendering the defult props 1`] = `
290
332
  tabindex="0"
291
333
  >
292
334
  <div
293
- class="leftBox grow basis shrinkOff"
335
+ class="contentWrapper shrinkOff"
294
336
  data-id="boxComponent"
295
337
  data-selector-id="box"
296
338
  data-test-id="boxComponent"
297
339
  >
298
340
  <div
299
- class="titleBox shrinkOff"
341
+ class="leftBox selfAlign_center grow basis shrinkOff"
300
342
  data-id="boxComponent"
301
343
  data-selector-id="box"
302
344
  data-test-id="boxComponent"
303
345
  >
304
346
  <div
305
- class="value basisAuto shrinkOn"
306
- data-id="list_Text"
347
+ class="titleBox shrinkOff"
348
+ data-id="boxComponent"
307
349
  data-selector-id="box"
308
- data-test-id="list_Text"
350
+ data-test-id="boxComponent"
309
351
  >
310
- List
352
+ <div
353
+ class="value basisAuto shrinkOn"
354
+ data-id="list_Text"
355
+ data-selector-id="box"
356
+ data-test-id="list_Text"
357
+ >
358
+ List
359
+ </div>
311
360
  </div>
312
361
  </div>
313
362
  </div>