@zohodesk/components 1.6.19 → 1.6.21

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 (140) hide show
  1. package/README.md +15 -1
  2. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  3. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  4. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  5. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  6. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +98 -121
  7. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +45 -45
  8. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +24 -24
  9. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  10. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +87 -87
  11. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  12. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +5 -5
  13. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +6 -6
  14. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  15. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +25 -25
  16. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  17. package/es/Layout/Box.js +1 -115
  18. package/es/Layout/Container.js +1 -132
  19. package/es/Layout/props/defaultProps.js +1 -16
  20. package/es/Layout/props/propTypes.js +1 -46
  21. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  22. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  23. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  24. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -69
  25. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  26. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +69 -69
  27. package/es/MultiSelect/AdvancedMultiSelect.js +4 -2
  28. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  29. package/es/MultiSelect/MultiSelect.js +11 -7
  30. package/es/MultiSelect/MultiSelectWithAvatar.js +4 -2
  31. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  32. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  33. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  34. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  35. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  36. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  37. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  38. package/es/MultiSelect/props/defaultProps.js +3 -0
  39. package/es/MultiSelect/props/propTypes.js +1 -0
  40. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +130 -130
  41. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  42. package/es/Select/GroupSelect.js +4 -2
  43. package/es/Select/Select.js +9 -5
  44. package/es/Select/SelectWithAvatar.js +4 -2
  45. package/es/Select/SelectWithIcon.js +4 -2
  46. package/es/Select/__tests__/SelectWithIcon.spec.js +3 -1
  47. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  48. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +771 -749
  49. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  50. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  51. package/es/Select/props/defaultProps.js +4 -0
  52. package/es/Select/props/propTypes.js +3 -0
  53. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  54. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  55. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  56. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  57. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  58. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  59. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  60. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  61. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  62. package/es/css.js +0 -1
  63. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  64. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  65. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  66. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  67. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  68. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  69. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +98 -121
  70. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +45 -45
  71. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +24 -24
  72. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  73. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +87 -87
  74. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  75. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +5 -5
  76. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +6 -6
  77. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  78. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +25 -25
  79. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  80. package/lib/Layout/Box.js +7 -120
  81. package/lib/Layout/Container.js +7 -137
  82. package/lib/Layout/props/defaultProps.js +14 -19
  83. package/lib/Layout/props/propTypes.js +13 -52
  84. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  85. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  86. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  87. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -69
  88. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  89. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +69 -69
  90. package/lib/MultiSelect/AdvancedMultiSelect.js +4 -2
  91. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  92. package/lib/MultiSelect/MultiSelect.js +50 -45
  93. package/lib/MultiSelect/MultiSelectWithAvatar.js +4 -2
  94. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  95. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  96. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  97. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  98. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  99. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  100. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  101. package/lib/MultiSelect/props/defaultProps.js +3 -0
  102. package/lib/MultiSelect/props/propTypes.js +1 -0
  103. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +130 -130
  104. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  105. package/lib/Select/GroupSelect.js +4 -2
  106. package/lib/Select/Select.js +9 -5
  107. package/lib/Select/SelectWithAvatar.js +4 -2
  108. package/lib/Select/SelectWithIcon.js +4 -2
  109. package/lib/Select/__tests__/SelectWithIcon.spec.js +3 -1
  110. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  111. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +771 -749
  112. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  113. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  114. package/lib/Select/props/defaultProps.js +5 -2
  115. package/lib/Select/props/propTypes.js +3 -0
  116. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  117. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  118. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  119. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  120. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  121. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  122. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  123. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  124. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  125. package/lib/css.js +0 -2
  126. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  127. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  128. package/package.json +5 -5
  129. package/es/Layout/Layout.module.css +0 -336
  130. package/es/Layout/__tests__/Box.spec.js +0 -11
  131. package/es/Layout/__tests__/Container.spec.js +0 -11
  132. package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  133. package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  134. package/es/Layout/utils.js +0 -29
  135. package/lib/Layout/Layout.module.css +0 -336
  136. package/lib/Layout/__tests__/Box.spec.js +0 -18
  137. package/lib/Layout/__tests__/Container.spec.js +0 -18
  138. package/lib/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  139. package/lib/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  140. package/lib/Layout/utils.js +0 -59
package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
9
9
  data-test-id="multiSelect"
10
10
  >
11
11
  <div
12
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
12
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
13
13
  data-id="containerComponent"
14
14
  data-selector-id="container"
15
15
  data-test-id="containerComponent"
16
16
  >
17
17
  <div
18
- class="wrapper grow basisAuto shrinkOn"
18
+ class="flexible basis_auto shrink wrapper"
19
19
  data-id="boxComponent"
20
20
  data-selector-id="box"
21
21
  data-test-id="boxComponent"
@@ -25,11 +25,11 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
25
25
  "
26
26
  />
27
27
  <div
28
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
28
+ class="flex row varClass customContainer effect container custmInputWrapper"
29
29
  data-selector-id="textBoxIcon"
30
30
  >
31
31
  <div
32
- class="grow basis shrinkOff"
32
+ class="flexible basis_zero noShrink"
33
33
  data-id="boxComponent"
34
34
  data-selector-id="box"
35
35
  data-test-id="boxComponent"
@@ -50,25 +50,25 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
50
50
  />
51
51
  </div>
52
52
  <div
53
- class="iconContainer shrinkOff"
53
+ class="noShrink iconContainer"
54
54
  data-id="boxComponent"
55
55
  data-selector-id="box"
56
56
  data-test-id="boxComponent"
57
57
  >
58
58
  <div
59
- class="flex cover rowdir"
59
+ class="flex fullSize row"
60
60
  data-id="containerComponent"
61
61
  data-selector-id="container"
62
62
  data-test-id="containerComponent"
63
63
  >
64
64
  <div
65
- class="icon shrinkOff"
65
+ class="noShrink icon"
66
66
  data-id="boxComponent"
67
67
  data-selector-id="box"
68
68
  data-test-id="boxComponent"
69
69
  >
70
70
  <div
71
- class="rightPlaceholder inflex rowdir vCenter"
71
+ class="inlineFlex row alignItems_center rightPlaceholder"
72
72
  data-id="containerComponent"
73
73
  data-selector-id="container"
74
74
  data-test-id="containerComponent"
@@ -92,13 +92,13 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
92
92
  data-test-id="multiSelect"
93
93
  >
94
94
  <div
95
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
95
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
96
96
  data-id="containerComponent"
97
97
  data-selector-id="container"
98
98
  data-test-id="containerComponent"
99
99
  >
100
100
  <div
101
- class="tag medium shrinkOff"
101
+ class="noShrink tag medium"
102
102
  data-id="multiSelect_selectedOptions"
103
103
  data-selector-id="box"
104
104
  data-test-id="multiSelect_selectedOptions"
@@ -131,7 +131,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
131
131
  value="text"
132
132
  >
133
133
  <div
134
- class="flex cover coldir both"
134
+ class="flex fullSize column alignItems_center justifyContent_center"
135
135
  data-id="containerComponent"
136
136
  data-selector-id="container"
137
137
  data-test-id="containerComponent"
@@ -149,7 +149,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
149
149
  </div>
150
150
  </div>
151
151
  <div
152
- class="tag medium shrinkOff"
152
+ class="noShrink tag medium"
153
153
  data-id="multiSelect_selectedOptions"
154
154
  data-selector-id="box"
155
155
  data-test-id="multiSelect_selectedOptions"
@@ -182,7 +182,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
182
182
  value="text"
183
183
  >
184
184
  <div
185
- class="flex cover coldir both"
185
+ class="flex fullSize column alignItems_center justifyContent_center"
186
186
  data-id="containerComponent"
187
187
  data-selector-id="container"
188
188
  data-test-id="containerComponent"
@@ -200,7 +200,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
200
200
  </div>
201
201
  </div>
202
202
  <div
203
- class="wrapper grow basisAuto shrinkOn"
203
+ class="flexible basis_auto shrink wrapper"
204
204
  data-id="boxComponent"
205
205
  data-selector-id="box"
206
206
  data-test-id="boxComponent"
@@ -210,11 +210,11 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
210
210
  "
211
211
  />
212
212
  <div
213
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
213
+ class="flex row varClass customContainer effect container custmInputWrapper"
214
214
  data-selector-id="textBoxIcon"
215
215
  >
216
216
  <div
217
- class="grow basis shrinkOff"
217
+ class="flexible basis_zero noShrink"
218
218
  data-id="boxComponent"
219
219
  data-selector-id="box"
220
220
  data-test-id="boxComponent"
@@ -236,31 +236,31 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
236
236
  />
237
237
  </div>
238
238
  <div
239
- class="iconContainer shrinkOff"
239
+ class="noShrink iconContainer"
240
240
  data-id="boxComponent"
241
241
  data-selector-id="box"
242
242
  data-test-id="boxComponent"
243
243
  >
244
244
  <div
245
- class="flex cover rowdir"
245
+ class="flex fullSize row"
246
246
  data-id="containerComponent"
247
247
  data-selector-id="container"
248
248
  data-test-id="containerComponent"
249
249
  >
250
250
  <div
251
- class="icon shrinkOff"
251
+ class="noShrink icon"
252
252
  data-id="boxComponent"
253
253
  data-selector-id="box"
254
254
  data-test-id="boxComponent"
255
255
  >
256
256
  <div
257
- class="rightPlaceholder inflex rowdir vCenter"
257
+ class="inlineFlex row alignItems_center rightPlaceholder"
258
258
  data-id="containerComponent"
259
259
  data-selector-id="container"
260
260
  data-test-id="containerComponent"
261
261
  >
262
262
  <button
263
- class="delete defaultDelete shrinkOff"
263
+ class="noShrink delete defaultDelete"
264
264
  data-id="multiSelect_clearIcon"
265
265
  data-selector-id="box"
266
266
  data-test-id="multiSelect_clearIcon"
@@ -295,13 +295,13 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
295
295
  data-test-id="multiSelect"
296
296
  >
297
297
  <div
298
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
298
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
299
299
  data-id="containerComponent"
300
300
  data-selector-id="container"
301
301
  data-test-id="containerComponent"
302
302
  >
303
303
  <div
304
- class="wrapper grow basisAuto shrinkOn"
304
+ class="flexible basis_auto shrink wrapper"
305
305
  data-id="boxComponent"
306
306
  data-selector-id="box"
307
307
  data-test-id="boxComponent"
@@ -311,11 +311,11 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
311
311
  "
312
312
  />
313
313
  <div
314
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
314
+ class="flex row varClass customContainer effect container custmInputWrapper"
315
315
  data-selector-id="textBoxIcon"
316
316
  >
317
317
  <div
318
- class="grow basis shrinkOff"
318
+ class="flexible basis_zero noShrink"
319
319
  data-id="boxComponent"
320
320
  data-selector-id="box"
321
321
  data-test-id="boxComponent"
@@ -336,25 +336,25 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
336
336
  />
337
337
  </div>
338
338
  <div
339
- class="iconContainer shrinkOff"
339
+ class="noShrink iconContainer"
340
340
  data-id="boxComponent"
341
341
  data-selector-id="box"
342
342
  data-test-id="boxComponent"
343
343
  >
344
344
  <div
345
- class="flex cover rowdir"
345
+ class="flex fullSize row"
346
346
  data-id="containerComponent"
347
347
  data-selector-id="container"
348
348
  data-test-id="containerComponent"
349
349
  >
350
350
  <div
351
- class="icon shrinkOff"
351
+ class="noShrink icon"
352
352
  data-id="boxComponent"
353
353
  data-selector-id="box"
354
354
  data-test-id="boxComponent"
355
355
  >
356
356
  <div
357
- class="rightPlaceholder inflex rowdir vCenter"
357
+ class="inlineFlex row alignItems_center rightPlaceholder"
358
358
  data-id="containerComponent"
359
359
  data-selector-id="container"
360
360
  data-test-id="containerComponent"
@@ -378,13 +378,13 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
378
378
  data-test-id="multiSelect"
379
379
  >
380
380
  <div
381
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
381
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
382
382
  data-id="containerComponent"
383
383
  data-selector-id="container"
384
384
  data-test-id="containerComponent"
385
385
  >
386
386
  <div
387
- class="wrapper grow basisAuto shrinkOn"
387
+ class="flexible basis_auto shrink wrapper"
388
388
  data-id="boxComponent"
389
389
  data-selector-id="box"
390
390
  data-test-id="boxComponent"
@@ -394,11 +394,11 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
394
394
  "
395
395
  />
396
396
  <div
397
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
397
+ class="flex row varClass customContainer effect container custmInputWrapper"
398
398
  data-selector-id="textBoxIcon"
399
399
  >
400
400
  <div
401
- class="grow basis shrinkOff"
401
+ class="flexible basis_zero noShrink"
402
402
  data-id="boxComponent"
403
403
  data-selector-id="box"
404
404
  data-test-id="boxComponent"
@@ -419,25 +419,25 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
419
419
  />
420
420
  </div>
421
421
  <div
422
- class="iconContainer shrinkOff"
422
+ class="noShrink iconContainer"
423
423
  data-id="boxComponent"
424
424
  data-selector-id="box"
425
425
  data-test-id="boxComponent"
426
426
  >
427
427
  <div
428
- class="flex cover rowdir"
428
+ class="flex fullSize row"
429
429
  data-id="containerComponent"
430
430
  data-selector-id="container"
431
431
  data-test-id="containerComponent"
432
432
  >
433
433
  <div
434
- class="icon shrinkOff"
434
+ class="noShrink icon"
435
435
  data-id="boxComponent"
436
436
  data-selector-id="box"
437
437
  data-test-id="boxComponent"
438
438
  >
439
439
  <div
440
- class="rightPlaceholder inflex rowdir vCenter"
440
+ class="inlineFlex row alignItems_center rightPlaceholder"
441
441
  data-id="containerComponent"
442
442
  data-selector-id="container"
443
443
  data-test-id="containerComponent"
@@ -461,13 +461,13 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
461
461
  data-test-id="multiSelect"
462
462
  >
463
463
  <div
464
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
464
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
465
465
  data-id="containerComponent"
466
466
  data-selector-id="container"
467
467
  data-test-id="containerComponent"
468
468
  >
469
469
  <div
470
- class="wrapper grow basisAuto shrinkOn"
470
+ class="flexible basis_auto shrink wrapper"
471
471
  data-id="boxComponent"
472
472
  data-selector-id="box"
473
473
  data-test-id="boxComponent"
@@ -477,11 +477,11 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
477
477
  "
478
478
  />
479
479
  <div
480
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
480
+ class="flex row varClass customContainer effect container custmInputWrapper"
481
481
  data-selector-id="textBoxIcon"
482
482
  >
483
483
  <div
484
- class="grow basis shrinkOff"
484
+ class="flexible basis_zero noShrink"
485
485
  data-id="boxComponent"
486
486
  data-selector-id="box"
487
487
  data-test-id="boxComponent"
@@ -502,25 +502,25 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
502
502
  />
503
503
  </div>
504
504
  <div
505
- class="iconContainer shrinkOff"
505
+ class="noShrink iconContainer"
506
506
  data-id="boxComponent"
507
507
  data-selector-id="box"
508
508
  data-test-id="boxComponent"
509
509
  >
510
510
  <div
511
- class="flex cover rowdir"
511
+ class="flex fullSize row"
512
512
  data-id="containerComponent"
513
513
  data-selector-id="container"
514
514
  data-test-id="containerComponent"
515
515
  >
516
516
  <div
517
- class="icon shrinkOff"
517
+ class="noShrink icon"
518
518
  data-id="boxComponent"
519
519
  data-selector-id="box"
520
520
  data-test-id="boxComponent"
521
521
  >
522
522
  <div
523
- class="rightPlaceholder inflex rowdir vCenter"
523
+ class="inlineFlex row alignItems_center rightPlaceholder"
524
524
  data-id="containerComponent"
525
525
  data-selector-id="container"
526
526
  data-test-id="containerComponent"
package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap CHANGED
@@ -18,20 +18,20 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
18
18
  aria-haspopup="listbox"
19
19
  aria-owns="3"
20
20
  aria-readonly="false"
21
- class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder flex rowdir scrolly"
21
+ class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
22
22
  data-selector-id="container"
23
23
  data-title=""
24
24
  role="button"
25
25
  tabindex="0"
26
26
  >
27
27
  <div
28
- class="flex cover rowdir"
28
+ class="flex fullSize row"
29
29
  data-id="containerComponent"
30
30
  data-selector-id="container"
31
31
  data-test-id="containerComponent"
32
32
  >
33
33
  <div
34
- class="grow basis shrinkOff"
34
+ class="flexible basis_zero noShrink"
35
35
  data-id="boxComponent"
36
36
  data-selector-id="box"
37
37
  data-test-id="boxComponent"
@@ -57,7 +57,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
57
57
  </div>
58
58
  <div
59
59
  aria-hidden="true"
60
- class="arrowIcon inflex coldir both"
60
+ class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
61
61
  data-id="undefined_downIcon"
62
62
  data-selector-id="container"
63
63
  data-test-id="undefined_downIcon"
@@ -96,20 +96,20 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
96
96
  aria-haspopup="listbox"
97
97
  aria-owns="6"
98
98
  aria-readonly="false"
99
- class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder flex rowdir scrolly"
99
+ class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
100
100
  data-selector-id="container"
101
101
  data-title=""
102
102
  role="button"
103
103
  tabindex="0"
104
104
  >
105
105
  <div
106
- class="flex cover rowdir"
106
+ class="flex fullSize row"
107
107
  data-id="containerComponent"
108
108
  data-selector-id="container"
109
109
  data-test-id="containerComponent"
110
110
  >
111
111
  <div
112
- class="grow basis shrinkOff"
112
+ class="flexible basis_zero noShrink"
113
113
  data-id="boxComponent"
114
114
  data-selector-id="box"
115
115
  data-test-id="boxComponent"
@@ -131,7 +131,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
131
131
  </div>
132
132
  <div
133
133
  aria-hidden="true"
134
- class="arrowIcon inflex coldir both"
134
+ class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
135
135
  data-id="undefined_downIcon"
136
136
  data-selector-id="container"
137
137
  data-test-id="undefined_downIcon"
@@ -170,20 +170,20 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
170
170
  aria-haspopup="listbox"
171
171
  aria-owns="1"
172
172
  aria-readonly="false"
173
- class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder flex rowdir scrolly"
173
+ class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
174
174
  data-selector-id="container"
175
175
  data-title=""
176
176
  role="button"
177
177
  tabindex="0"
178
178
  >
179
179
  <div
180
- class="flex cover rowdir"
180
+ class="flex fullSize row"
181
181
  data-id="containerComponent"
182
182
  data-selector-id="container"
183
183
  data-test-id="containerComponent"
184
184
  >
185
185
  <div
186
- class="grow basis shrinkOff"
186
+ class="flexible basis_zero noShrink"
187
187
  data-id="boxComponent"
188
188
  data-selector-id="box"
189
189
  data-test-id="boxComponent"
@@ -194,7 +194,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
194
194
  </div>
195
195
  <div
196
196
  aria-hidden="true"
197
- class="arrowIcon inflex coldir both"
197
+ class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
198
198
  data-id="undefined_downIcon"
199
199
  data-selector-id="container"
200
200
  data-test-id="undefined_downIcon"
@@ -233,20 +233,20 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
233
233
  aria-haspopup="listbox"
234
234
  aria-owns="9"
235
235
  aria-readonly="false"
236
- class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder flex rowdir scrolly"
236
+ class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
237
237
  data-selector-id="container"
238
238
  data-title=""
239
239
  role="button"
240
240
  tabindex="0"
241
241
  >
242
242
  <div
243
- class="flex cover rowdir"
243
+ class="flex fullSize row"
244
244
  data-id="containerComponent"
245
245
  data-selector-id="container"
246
246
  data-test-id="containerComponent"
247
247
  >
248
248
  <div
249
- class="grow basis shrinkOff"
249
+ class="flexible basis_zero noShrink"
250
250
  data-id="boxComponent"
251
251
  data-selector-id="box"
252
252
  data-test-id="boxComponent"
@@ -259,7 +259,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
259
259
  </div>
260
260
  <div
261
261
  aria-hidden="true"
262
- class="arrowIcon inflex coldir both"
262
+ class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
263
263
  data-id="undefined_downIcon"
264
264
  data-selector-id="container"
265
265
  data-test-id="undefined_downIcon"
@@ -298,20 +298,20 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
298
298
  aria-haspopup="listbox"
299
299
  aria-owns="11"
300
300
  aria-readonly="false"
301
- class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder flex rowdir scrolly"
301
+ class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
302
302
  data-selector-id="container"
303
303
  data-title=""
304
304
  role="button"
305
305
  tabindex="0"
306
306
  >
307
307
  <div
308
- class="flex cover rowdir"
308
+ class="flex fullSize row"
309
309
  data-id="containerComponent"
310
310
  data-selector-id="container"
311
311
  data-test-id="containerComponent"
312
312
  >
313
313
  <div
314
- class="grow basis shrinkOff"
314
+ class="flexible basis_zero noShrink"
315
315
  data-id="boxComponent"
316
316
  data-selector-id="box"
317
317
  data-test-id="boxComponent"
@@ -337,7 +337,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
337
337
  </div>
338
338
  <div
339
339
  aria-hidden="true"
340
- class="arrowIcon inflex coldir both"
340
+ class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
341
341
  data-id="undefined_downIcon"
342
342
  data-selector-id="container"
343
343
  data-test-id="undefined_downIcon"
@@ -376,20 +376,20 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
376
376
  aria-haspopup="listbox"
377
377
  aria-owns="14"
378
378
  aria-readonly="false"
379
- class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder flex rowdir scrolly"
379
+ class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
380
380
  data-selector-id="container"
381
381
  data-title=""
382
382
  role="button"
383
383
  tabindex="0"
384
384
  >
385
385
  <div
386
- class="flex cover rowdir"
386
+ class="flex fullSize row"
387
387
  data-id="containerComponent"
388
388
  data-selector-id="container"
389
389
  data-test-id="containerComponent"
390
390
  >
391
391
  <div
392
- class="grow basis shrinkOff"
392
+ class="flexible basis_zero noShrink"
393
393
  data-id="boxComponent"
394
394
  data-selector-id="box"
395
395
  data-test-id="boxComponent"
@@ -400,7 +400,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
400
400
  </div>
401
401
  <div
402
402
  aria-hidden="true"
403
- class="arrowIcon inflex coldir both"
403
+ class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
404
404
  data-id="undefined_downIcon"
405
405
  data-selector-id="container"
406
406
  data-test-id="undefined_downIcon"