@zohodesk/components 1.6.20 → 1.6.22

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 (164) hide show
  1. package/README.md +10 -0
  2. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  3. package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  4. package/es/Button/css/cssJSLogic.js +6 -6
  5. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  6. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  7. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  8. package/es/CheckBox/CheckBox.js +2 -2
  9. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +130 -153
  10. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +50 -52
  11. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  12. package/es/DateTime/CalendarView.js +2 -2
  13. package/es/DateTime/DateWidget.js +2 -2
  14. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  15. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  16. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  17. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  18. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +8 -8
  19. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  20. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  21. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +6 -6
  22. package/es/DropDown/DropDownItem.js +1 -1
  23. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  24. package/es/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +1 -1
  25. package/es/Label/Label.js +1 -1
  26. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  27. package/es/Layout/Box.js +1 -115
  28. package/es/Layout/Container.js +1 -132
  29. package/es/Layout/props/defaultProps.js +1 -16
  30. package/es/Layout/props/propTypes.js +1 -46
  31. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  32. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  33. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  34. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -69
  35. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  36. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +69 -69
  37. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +4 -4
  38. package/es/MultiSelect/MultiSelect.js +1 -1
  39. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  40. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  41. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +38 -41
  42. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  43. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  44. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  45. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  46. package/es/Radio/Radio.js +1 -1
  47. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +152 -152
  48. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  49. package/es/Ribbon/Ribbon.js +3 -16
  50. package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +24 -24
  51. package/es/Select/SelectWithAvatar.js +1 -1
  52. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  53. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +845 -823
  54. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  55. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  56. package/es/Switch/Switch.js +1 -1
  57. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +56 -56
  58. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  59. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  60. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  61. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  62. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  63. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  64. package/es/Tag/Tag.js +1 -2
  65. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +140 -186
  66. package/es/TextBoxIcon/TextBoxIcon.js +1 -1
  67. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  68. package/es/Textarea/Textarea.js +1 -1
  69. package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +46 -46
  70. package/es/Tooltip/Tooltip.js +1 -1
  71. package/es/Typography/css/cssJSLogic.js +2 -2
  72. package/es/css.js +0 -1
  73. package/es/deprecated/Switch/Switch.js +1 -1
  74. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  75. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  76. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  77. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  78. package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  79. package/lib/Button/css/cssJSLogic.js +3 -3
  80. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  81. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  82. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  83. package/lib/CheckBox/CheckBox.js +2 -2
  84. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +130 -153
  85. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +50 -52
  86. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  87. package/lib/DateTime/CalendarView.js +2 -2
  88. package/lib/DateTime/DateWidget.js +2 -2
  89. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  90. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  91. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  92. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  93. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +8 -8
  94. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  95. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  96. package/lib/DropBox/DropBoxElement/css/cssJSLogic.js +2 -2
  97. package/lib/DropDown/DropDownItem.js +1 -1
  98. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  99. package/lib/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +1 -1
  100. package/lib/Label/Label.js +1 -1
  101. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  102. package/lib/Layout/Box.js +7 -120
  103. package/lib/Layout/Container.js +7 -137
  104. package/lib/Layout/props/defaultProps.js +14 -19
  105. package/lib/Layout/props/propTypes.js +13 -52
  106. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  107. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  108. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  109. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -69
  110. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  111. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +69 -69
  112. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +4 -4
  113. package/lib/MultiSelect/MultiSelect.js +1 -1
  114. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  115. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  116. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +38 -41
  117. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  118. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  119. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  120. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  121. package/lib/Radio/Radio.js +1 -1
  122. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +152 -152
  123. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  124. package/lib/Ribbon/Ribbon.js +2 -15
  125. package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +24 -24
  126. package/lib/Select/SelectWithAvatar.js +1 -1
  127. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  128. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +845 -823
  129. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  130. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  131. package/lib/Switch/Switch.js +1 -1
  132. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +56 -56
  133. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  134. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  135. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  136. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  137. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  138. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  139. package/lib/Tag/Tag.js +1 -1
  140. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +140 -186
  141. package/lib/TextBoxIcon/TextBoxIcon.js +1 -1
  142. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  143. package/lib/Textarea/Textarea.js +1 -1
  144. package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +46 -46
  145. package/lib/Tooltip/Tooltip.js +1 -1
  146. package/lib/Typography/css/cssJSLogic.js +1 -1
  147. package/lib/css.js +0 -2
  148. package/lib/deprecated/Switch/Switch.js +1 -1
  149. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  150. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  151. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  152. package/package.json +7 -7
  153. package/es/Layout/Layout.module.css +0 -336
  154. package/es/Layout/__tests__/Box.spec.js +0 -11
  155. package/es/Layout/__tests__/Container.spec.js +0 -11
  156. package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  157. package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  158. package/es/Layout/utils.js +0 -29
  159. package/lib/Layout/Layout.module.css +0 -336
  160. package/lib/Layout/__tests__/Box.spec.js +0 -18
  161. package/lib/Layout/__tests__/Container.spec.js +0 -18
  162. package/lib/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  163. package/lib/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  164. 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"
@@ -123,22 +123,21 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
123
123
  <button
124
124
  aria-label="Delete"
125
125
  class="buttonReset close
126
- lgRadiusClose
127
- closedanger"
126
+ lgRadiusClose closedanger "
128
127
  data-id="tag_RemoveTag"
129
128
  data-test-id="tag_RemoveTag"
130
129
  type="button"
131
130
  value="text"
132
131
  >
133
132
  <div
134
- class="flex cover coldir both"
133
+ class="flex fullSize column alignItems_center justifyContent_center"
135
134
  data-id="containerComponent"
136
135
  data-selector-id="container"
137
136
  data-test-id="containerComponent"
138
137
  >
139
138
  <i
140
139
  aria-hidden="true"
141
- class="zd_font_icons basic icon-close2 fbold "
140
+ class="zd_font_icons basic icon-close2 fbold "
142
141
  data-id="fontIcon"
143
142
  data-selector-id="fontIcon"
144
143
  data-test-id="fontIcon"
@@ -149,7 +148,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
149
148
  </div>
150
149
  </div>
151
150
  <div
152
- class="tag medium shrinkOff"
151
+ class="noShrink tag medium"
153
152
  data-id="multiSelect_selectedOptions"
154
153
  data-selector-id="box"
155
154
  data-test-id="multiSelect_selectedOptions"
@@ -174,22 +173,21 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
174
173
  <button
175
174
  aria-label="Delete"
176
175
  class="buttonReset close
177
- lgRadiusClose
178
- closedanger"
176
+ lgRadiusClose closedanger "
179
177
  data-id="tag_RemoveTag"
180
178
  data-test-id="tag_RemoveTag"
181
179
  type="button"
182
180
  value="text"
183
181
  >
184
182
  <div
185
- class="flex cover coldir both"
183
+ class="flex fullSize column alignItems_center justifyContent_center"
186
184
  data-id="containerComponent"
187
185
  data-selector-id="container"
188
186
  data-test-id="containerComponent"
189
187
  >
190
188
  <i
191
189
  aria-hidden="true"
192
- class="zd_font_icons basic icon-close2 fbold "
190
+ class="zd_font_icons basic icon-close2 fbold "
193
191
  data-id="fontIcon"
194
192
  data-selector-id="fontIcon"
195
193
  data-test-id="fontIcon"
@@ -200,7 +198,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
200
198
  </div>
201
199
  </div>
202
200
  <div
203
- class="wrapper grow basisAuto shrinkOn"
201
+ class="flexible basis_auto shrink wrapper"
204
202
  data-id="boxComponent"
205
203
  data-selector-id="box"
206
204
  data-test-id="boxComponent"
@@ -210,11 +208,11 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
210
208
  "
211
209
  />
212
210
  <div
213
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
211
+ class="flex row varClass customContainer effect container custmInputWrapper"
214
212
  data-selector-id="textBoxIcon"
215
213
  >
216
214
  <div
217
- class="grow basis shrinkOff"
215
+ class="flexible basis_zero noShrink"
218
216
  data-id="boxComponent"
219
217
  data-selector-id="box"
220
218
  data-test-id="boxComponent"
@@ -236,31 +234,31 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
236
234
  />
237
235
  </div>
238
236
  <div
239
- class="iconContainer shrinkOff"
237
+ class="noShrink iconContainer"
240
238
  data-id="boxComponent"
241
239
  data-selector-id="box"
242
240
  data-test-id="boxComponent"
243
241
  >
244
242
  <div
245
- class="flex cover rowdir"
243
+ class="flex fullSize row"
246
244
  data-id="containerComponent"
247
245
  data-selector-id="container"
248
246
  data-test-id="containerComponent"
249
247
  >
250
248
  <div
251
- class="icon shrinkOff"
249
+ class="noShrink icon"
252
250
  data-id="boxComponent"
253
251
  data-selector-id="box"
254
252
  data-test-id="boxComponent"
255
253
  >
256
254
  <div
257
- class="rightPlaceholder inflex rowdir vCenter"
255
+ class="inlineFlex row alignItems_center rightPlaceholder"
258
256
  data-id="containerComponent"
259
257
  data-selector-id="container"
260
258
  data-test-id="containerComponent"
261
259
  >
262
260
  <button
263
- class="delete defaultDelete shrinkOff"
261
+ class="noShrink delete defaultDelete"
264
262
  data-id="multiSelect_clearIcon"
265
263
  data-selector-id="box"
266
264
  data-test-id="multiSelect_clearIcon"
@@ -268,7 +266,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
268
266
  >
269
267
  <i
270
268
  aria-hidden="true"
271
- class="zd_font_icons basic icon-delete rtl "
269
+ class="zd_font_icons rtl basic icon-delete "
272
270
  data-id="fontIcon"
273
271
  data-selector-id="fontIcon"
274
272
  data-test-id="fontIcon"
@@ -295,13 +293,13 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
295
293
  data-test-id="multiSelect"
296
294
  >
297
295
  <div
298
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
296
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
299
297
  data-id="containerComponent"
300
298
  data-selector-id="container"
301
299
  data-test-id="containerComponent"
302
300
  >
303
301
  <div
304
- class="wrapper grow basisAuto shrinkOn"
302
+ class="flexible basis_auto shrink wrapper"
305
303
  data-id="boxComponent"
306
304
  data-selector-id="box"
307
305
  data-test-id="boxComponent"
@@ -311,11 +309,11 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
311
309
  "
312
310
  />
313
311
  <div
314
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
312
+ class="flex row varClass customContainer effect container custmInputWrapper"
315
313
  data-selector-id="textBoxIcon"
316
314
  >
317
315
  <div
318
- class="grow basis shrinkOff"
316
+ class="flexible basis_zero noShrink"
319
317
  data-id="boxComponent"
320
318
  data-selector-id="box"
321
319
  data-test-id="boxComponent"
@@ -336,25 +334,25 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
336
334
  />
337
335
  </div>
338
336
  <div
339
- class="iconContainer shrinkOff"
337
+ class="noShrink iconContainer"
340
338
  data-id="boxComponent"
341
339
  data-selector-id="box"
342
340
  data-test-id="boxComponent"
343
341
  >
344
342
  <div
345
- class="flex cover rowdir"
343
+ class="flex fullSize row"
346
344
  data-id="containerComponent"
347
345
  data-selector-id="container"
348
346
  data-test-id="containerComponent"
349
347
  >
350
348
  <div
351
- class="icon shrinkOff"
349
+ class="noShrink icon"
352
350
  data-id="boxComponent"
353
351
  data-selector-id="box"
354
352
  data-test-id="boxComponent"
355
353
  >
356
354
  <div
357
- class="rightPlaceholder inflex rowdir vCenter"
355
+ class="inlineFlex row alignItems_center rightPlaceholder"
358
356
  data-id="containerComponent"
359
357
  data-selector-id="container"
360
358
  data-test-id="containerComponent"
@@ -378,13 +376,13 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
378
376
  data-test-id="multiSelect"
379
377
  >
380
378
  <div
381
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
379
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
382
380
  data-id="containerComponent"
383
381
  data-selector-id="container"
384
382
  data-test-id="containerComponent"
385
383
  >
386
384
  <div
387
- class="wrapper grow basisAuto shrinkOn"
385
+ class="flexible basis_auto shrink wrapper"
388
386
  data-id="boxComponent"
389
387
  data-selector-id="box"
390
388
  data-test-id="boxComponent"
@@ -394,11 +392,11 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
394
392
  "
395
393
  />
396
394
  <div
397
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
395
+ class="flex row varClass customContainer effect container custmInputWrapper"
398
396
  data-selector-id="textBoxIcon"
399
397
  >
400
398
  <div
401
- class="grow basis shrinkOff"
399
+ class="flexible basis_zero noShrink"
402
400
  data-id="boxComponent"
403
401
  data-selector-id="box"
404
402
  data-test-id="boxComponent"
@@ -419,25 +417,25 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
419
417
  />
420
418
  </div>
421
419
  <div
422
- class="iconContainer shrinkOff"
420
+ class="noShrink iconContainer"
423
421
  data-id="boxComponent"
424
422
  data-selector-id="box"
425
423
  data-test-id="boxComponent"
426
424
  >
427
425
  <div
428
- class="flex cover rowdir"
426
+ class="flex fullSize row"
429
427
  data-id="containerComponent"
430
428
  data-selector-id="container"
431
429
  data-test-id="containerComponent"
432
430
  >
433
431
  <div
434
- class="icon shrinkOff"
432
+ class="noShrink icon"
435
433
  data-id="boxComponent"
436
434
  data-selector-id="box"
437
435
  data-test-id="boxComponent"
438
436
  >
439
437
  <div
440
- class="rightPlaceholder inflex rowdir vCenter"
438
+ class="inlineFlex row alignItems_center rightPlaceholder"
441
439
  data-id="containerComponent"
442
440
  data-selector-id="container"
443
441
  data-test-id="containerComponent"
@@ -461,13 +459,13 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
461
459
  data-test-id="multiSelect"
462
460
  >
463
461
  <div
464
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
462
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
465
463
  data-id="containerComponent"
466
464
  data-selector-id="container"
467
465
  data-test-id="containerComponent"
468
466
  >
469
467
  <div
470
- class="wrapper grow basisAuto shrinkOn"
468
+ class="flexible basis_auto shrink wrapper"
471
469
  data-id="boxComponent"
472
470
  data-selector-id="box"
473
471
  data-test-id="boxComponent"
@@ -477,11 +475,11 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
477
475
  "
478
476
  />
479
477
  <div
480
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
478
+ class="flex row varClass customContainer effect container custmInputWrapper"
481
479
  data-selector-id="textBoxIcon"
482
480
  >
483
481
  <div
484
- class="grow basis shrinkOff"
482
+ class="flexible basis_zero noShrink"
485
483
  data-id="boxComponent"
486
484
  data-selector-id="box"
487
485
  data-test-id="boxComponent"
@@ -502,25 +500,25 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
502
500
  />
503
501
  </div>
504
502
  <div
505
- class="iconContainer shrinkOff"
503
+ class="noShrink iconContainer"
506
504
  data-id="boxComponent"
507
505
  data-selector-id="box"
508
506
  data-test-id="boxComponent"
509
507
  >
510
508
  <div
511
- class="flex cover rowdir"
509
+ class="flex fullSize row"
512
510
  data-id="containerComponent"
513
511
  data-selector-id="container"
514
512
  data-test-id="containerComponent"
515
513
  >
516
514
  <div
517
- class="icon shrinkOff"
515
+ class="noShrink icon"
518
516
  data-id="boxComponent"
519
517
  data-selector-id="box"
520
518
  data-test-id="boxComponent"
521
519
  >
522
520
  <div
523
- class="rightPlaceholder inflex rowdir vCenter"
521
+ class="inlineFlex row alignItems_center rightPlaceholder"
524
522
  data-id="containerComponent"
525
523
  data-selector-id="container"
526
524
  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,14 +57,14 @@ 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"
64
64
  >
65
65
  <i
66
66
  aria-hidden="true"
67
- class="zd_font_icons basic icon-down "
67
+ class="zd_font_icons basic icon-down "
68
68
  data-id="fontIcon"
69
69
  data-selector-id="fontIcon"
70
70
  data-test-id="fontIcon"
@@ -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,14 +131,14 @@ 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"
138
138
  >
139
139
  <i
140
140
  aria-hidden="true"
141
- class="zd_font_icons basic icon-down "
141
+ class="zd_font_icons basic icon-down "
142
142
  data-id="fontIcon"
143
143
  data-selector-id="fontIcon"
144
144
  data-test-id="fontIcon"
@@ -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,14 +194,14 @@ 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"
201
201
  >
202
202
  <i
203
203
  aria-hidden="true"
204
- class="zd_font_icons basic icon-down "
204
+ class="zd_font_icons basic icon-down "
205
205
  data-id="fontIcon"
206
206
  data-selector-id="fontIcon"
207
207
  data-test-id="fontIcon"
@@ -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,14 +259,14 @@ 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"
266
266
  >
267
267
  <i
268
268
  aria-hidden="true"
269
- class="zd_font_icons basic icon-down "
269
+ class="zd_font_icons basic icon-down "
270
270
  data-id="fontIcon"
271
271
  data-selector-id="fontIcon"
272
272
  data-test-id="fontIcon"
@@ -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,14 +337,14 @@ 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"
344
344
  >
345
345
  <i
346
346
  aria-hidden="true"
347
- class="zd_font_icons basic icon-down "
347
+ class="zd_font_icons basic icon-down "
348
348
  data-id="fontIcon"
349
349
  data-selector-id="fontIcon"
350
350
  data-test-id="fontIcon"
@@ -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,14 +400,14 @@ 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"
407
407
  >
408
408
  <i
409
409
  aria-hidden="true"
410
- class="zd_font_icons basic icon-down "
410
+ class="zd_font_icons basic icon-down "
411
411
  data-id="fontIcon"
412
412
  data-selector-id="fontIcon"
413
413
  data-test-id="fontIcon"
package/lib/DateTime/CalendarView.js CHANGED
@@ -184,7 +184,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
184
184
  output = /*#__PURE__*/_react["default"].createElement(Span, {
185
185
  i: i // isActive={isSelectedDay}
186
186
  ,
187
- tdclass: "".concat(tdclass, " ").concat(_DateTimeModule["default"].invalidDate),
187
+ tdclass: "".concat(_DateTimeModule["default"].invalidDate, " ").concat(tdclass),
188
188
  handleSelect: _this2.handleSelect,
189
189
  incremday: nextDate,
190
190
  userSeeMonth: nextMonth,
@@ -274,7 +274,7 @@ var Span = /*#__PURE__*/function (_React$PureComponent2) {
274
274
  isToday = _this$props3.isToday;
275
275
  return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
276
276
  dataId: dataId,
277
- className: "".concat(tdclass, " ").concat(isActive ? _DateTimeModule["default"].active : '', " ").concat(isToday ? _DateTimeModule["default"].today : ''),
277
+ className: "".concat(isActive ? _DateTimeModule["default"].active : '', " ").concat(isToday ? _DateTimeModule["default"].today : '', " ").concat(tdclass, " "),
278
278
  key: i,
279
279
  onClick: this.handleSelectChild,
280
280
  "aria-label": incremday