@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/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 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[`MultiSelect Should render with renderCustomSelectedValue 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[`MultiSelect Should render with renderCustomSelectedValue 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[`MultiSelect rendering the defult props 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="wrapper grow basisAuto shrinkOn"
101
+ class="flexible basis_auto shrink wrapper"
102
102
  data-id="boxComponent"
103
103
  data-selector-id="box"
104
104
  data-test-id="boxComponent"
@@ -108,11 +108,11 @@ exports[`MultiSelect rendering the defult props 1`] = `
108
108
  "
109
109
  />
110
110
  <div
111
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
111
+ class="flex row varClass customContainer effect container custmInputWrapper"
112
112
  data-selector-id="textBoxIcon"
113
113
  >
114
114
  <div
115
- class="grow basis shrinkOff"
115
+ class="flexible basis_zero noShrink"
116
116
  data-id="boxComponent"
117
117
  data-selector-id="box"
118
118
  data-test-id="boxComponent"
@@ -133,25 +133,25 @@ exports[`MultiSelect rendering the defult props 1`] = `
133
133
  />
134
134
  </div>
135
135
  <div
136
- class="iconContainer shrinkOff"
136
+ class="noShrink iconContainer"
137
137
  data-id="boxComponent"
138
138
  data-selector-id="box"
139
139
  data-test-id="boxComponent"
140
140
  >
141
141
  <div
142
- class="flex cover rowdir"
142
+ class="flex fullSize row"
143
143
  data-id="containerComponent"
144
144
  data-selector-id="container"
145
145
  data-test-id="containerComponent"
146
146
  >
147
147
  <div
148
- class="icon shrinkOff"
148
+ class="noShrink icon"
149
149
  data-id="boxComponent"
150
150
  data-selector-id="box"
151
151
  data-test-id="boxComponent"
152
152
  >
153
153
  <div
154
- class="rightPlaceholder inflex rowdir vCenter"
154
+ class="inlineFlex row alignItems_center rightPlaceholder"
155
155
  data-id="containerComponent"
156
156
  data-selector-id="container"
157
157
  data-test-id="containerComponent"
@@ -175,13 +175,13 @@ exports[`MultiSelect rendering with limit feature 1`] = `
175
175
  data-test-id="multiSelect"
176
176
  >
177
177
  <div
178
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
178
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
179
179
  data-id="containerComponent"
180
180
  data-selector-id="container"
181
181
  data-test-id="containerComponent"
182
182
  >
183
183
  <div
184
- class="tag medium shrinkOff"
184
+ class="noShrink tag medium"
185
185
  data-id="multiSelect_selectedOptions"
186
186
  data-selector-id="box"
187
187
  data-test-id="multiSelect_selectedOptions"
@@ -205,22 +205,21 @@ exports[`MultiSelect rendering with limit feature 1`] = `
205
205
  <button
206
206
  aria-label="Delete"
207
207
  class="buttonReset close
208
- lgRadiusClose
209
- closedanger"
208
+ lgRadiusClose closedanger "
210
209
  data-id="tag_RemoveTag"
211
210
  data-test-id="tag_RemoveTag"
212
211
  type="button"
213
212
  value="text"
214
213
  >
215
214
  <div
216
- class="flex cover coldir both"
215
+ class="flex fullSize column alignItems_center justifyContent_center"
217
216
  data-id="containerComponent"
218
217
  data-selector-id="container"
219
218
  data-test-id="containerComponent"
220
219
  >
221
220
  <i
222
221
  aria-hidden="true"
223
- class="zd_font_icons basic icon-close2 fbold "
222
+ class="zd_font_icons basic icon-close2 fbold "
224
223
  data-id="fontIcon"
225
224
  data-selector-id="fontIcon"
226
225
  data-test-id="fontIcon"
@@ -231,7 +230,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
231
230
  </div>
232
231
  </div>
233
232
  <div
234
- class="tag medium shrinkOff"
233
+ class="noShrink tag medium"
235
234
  data-id="multiSelect_selectedOptions"
236
235
  data-selector-id="box"
237
236
  data-test-id="multiSelect_selectedOptions"
@@ -255,22 +254,21 @@ exports[`MultiSelect rendering with limit feature 1`] = `
255
254
  <button
256
255
  aria-label="Delete"
257
256
  class="buttonReset close
258
- lgRadiusClose
259
- closedanger"
257
+ lgRadiusClose closedanger "
260
258
  data-id="tag_RemoveTag"
261
259
  data-test-id="tag_RemoveTag"
262
260
  type="button"
263
261
  value="text"
264
262
  >
265
263
  <div
266
- class="flex cover coldir both"
264
+ class="flex fullSize column alignItems_center justifyContent_center"
267
265
  data-id="containerComponent"
268
266
  data-selector-id="container"
269
267
  data-test-id="containerComponent"
270
268
  >
271
269
  <i
272
270
  aria-hidden="true"
273
- class="zd_font_icons basic icon-close2 fbold "
271
+ class="zd_font_icons basic icon-close2 fbold "
274
272
  data-id="fontIcon"
275
273
  data-selector-id="fontIcon"
276
274
  data-test-id="fontIcon"
@@ -281,7 +279,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
281
279
  </div>
282
280
  </div>
283
281
  <div
284
- class="tag medium shrinkOff"
282
+ class="noShrink tag medium"
285
283
  data-id="multiSelect_selectedOptions"
286
284
  data-selector-id="box"
287
285
  data-test-id="multiSelect_selectedOptions"
@@ -305,22 +303,21 @@ exports[`MultiSelect rendering with limit feature 1`] = `
305
303
  <button
306
304
  aria-label="Delete"
307
305
  class="buttonReset close
308
- lgRadiusClose
309
- closedanger"
306
+ lgRadiusClose closedanger "
310
307
  data-id="tag_RemoveTag"
311
308
  data-test-id="tag_RemoveTag"
312
309
  type="button"
313
310
  value="text"
314
311
  >
315
312
  <div
316
- class="flex cover coldir both"
313
+ class="flex fullSize column alignItems_center justifyContent_center"
317
314
  data-id="containerComponent"
318
315
  data-selector-id="container"
319
316
  data-test-id="containerComponent"
320
317
  >
321
318
  <i
322
319
  aria-hidden="true"
323
- class="zd_font_icons basic icon-close2 fbold "
320
+ class="zd_font_icons basic icon-close2 fbold "
324
321
  data-id="fontIcon"
325
322
  data-selector-id="fontIcon"
326
323
  data-test-id="fontIcon"
@@ -331,7 +328,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
331
328
  </div>
332
329
  </div>
333
330
  <div
334
- class="wrapper grow basisAuto shrinkOn"
331
+ class="flexible basis_auto shrink wrapper"
335
332
  data-id="boxComponent"
336
333
  data-selector-id="box"
337
334
  data-test-id="boxComponent"
@@ -341,11 +338,11 @@ exports[`MultiSelect rendering with limit feature 1`] = `
341
338
  "
342
339
  />
343
340
  <div
344
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
341
+ class="flex row varClass customContainer effect container custmInputWrapper"
345
342
  data-selector-id="textBoxIcon"
346
343
  >
347
344
  <div
348
- class="grow basis shrinkOff"
345
+ class="flexible basis_zero noShrink"
349
346
  data-id="boxComponent"
350
347
  data-selector-id="box"
351
348
  data-test-id="boxComponent"
@@ -367,31 +364,31 @@ exports[`MultiSelect rendering with limit feature 1`] = `
367
364
  />
368
365
  </div>
369
366
  <div
370
- class="iconContainer shrinkOff"
367
+ class="noShrink iconContainer"
371
368
  data-id="boxComponent"
372
369
  data-selector-id="box"
373
370
  data-test-id="boxComponent"
374
371
  >
375
372
  <div
376
- class="flex cover rowdir"
373
+ class="flex fullSize row"
377
374
  data-id="containerComponent"
378
375
  data-selector-id="container"
379
376
  data-test-id="containerComponent"
380
377
  >
381
378
  <div
382
- class="icon shrinkOff"
379
+ class="noShrink icon"
383
380
  data-id="boxComponent"
384
381
  data-selector-id="box"
385
382
  data-test-id="boxComponent"
386
383
  >
387
384
  <div
388
- class="rightPlaceholder inflex rowdir vCenter"
385
+ class="inlineFlex row alignItems_center rightPlaceholder"
389
386
  data-id="containerComponent"
390
387
  data-selector-id="container"
391
388
  data-test-id="containerComponent"
392
389
  >
393
390
  <button
394
- class="delete defaultDelete shrinkOff"
391
+ class="noShrink delete defaultDelete"
395
392
  data-id="multiSelect_clearIcon"
396
393
  data-selector-id="box"
397
394
  data-test-id="multiSelect_clearIcon"
@@ -399,7 +396,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
399
396
  >
400
397
  <i
401
398
  aria-hidden="true"
402
- class="zd_font_icons basic icon-delete rtl "
399
+ class="zd_font_icons rtl basic icon-delete "
403
400
  data-id="fontIcon"
404
401
  data-selector-id="fontIcon"
405
402
  data-test-id="fontIcon"
package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`MultiSelectHeader rendering the basic value 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
- class="list medium default withBorder selectAll flex rowdir vCenter"
6
+ class="flex row alignItems_center list medium default withBorder selectAll"
7
7
  data-a11y-inset-focus="true"
8
8
  data-id="MultiSelectHeader_selectAll"
9
9
  data-selector-id="listItemWithIcon"
@@ -12,7 +12,7 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="contentWrapper shrinkOff"
15
+ class="noShrink contentWrapper"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
@@ -24,14 +24,14 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
24
24
  data-test-id="MultiSelectHeader_selectAll_Icon"
25
25
  >
26
26
  <div
27
- class="iconWrapper shrinkOff selfStart"
27
+ class="noShrink alignSelf_start iconWrapper"
28
28
  data-id="boxComponent"
29
29
  data-selector-id="box"
30
30
  data-test-id="boxComponent"
31
31
  >
32
32
  <i
33
33
  aria-hidden="true"
34
- class="zd_font_icons basic icon-androidd "
34
+ class="zd_font_icons basic icon-androidd "
35
35
  data-id="fontIcon"
36
36
  data-selector-id="fontIcon"
37
37
  data-test-id="fontIcon"
@@ -40,19 +40,19 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
40
40
  </div>
41
41
  </div>
42
42
  <div
43
- class="leftBox selfAlign_center grow basis shrinkOff"
43
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
44
44
  data-id="boxComponent"
45
45
  data-selector-id="box"
46
46
  data-test-id="boxComponent"
47
47
  >
48
48
  <div
49
- class="titleBox shrinkOff"
49
+ class="noShrink titleBox"
50
50
  data-id="boxComponent"
51
51
  data-selector-id="box"
52
52
  data-test-id="boxComponent"
53
53
  >
54
54
  <div
55
- class="value basisAuto shrinkOn"
55
+ class="basis_auto shrink value"
56
56
  data-id="MultiSelectHeader_selectAll_Text"
57
57
  data-selector-id="box"
58
58
  data-test-id="MultiSelectHeader_selectAll_Text"
package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
9
9
  data-test-id="multiSelectWithAvatar"
10
10
  >
11
11
  <div
12
- class="container medium borderColor_default undefined hasBorder flex cover rowdir wrap vCenter"
12
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder undefined"
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[`MultiSelectWithAvatar rendering the defult props 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"
@@ -49,25 +49,25 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
49
49
  />
50
50
  </div>
51
51
  <div
52
- class="iconContainer shrinkOff"
52
+ class="noShrink iconContainer"
53
53
  data-id="boxComponent"
54
54
  data-selector-id="box"
55
55
  data-test-id="boxComponent"
56
56
  >
57
57
  <div
58
- class="flex cover rowdir"
58
+ class="flex fullSize row"
59
59
  data-id="containerComponent"
60
60
  data-selector-id="container"
61
61
  data-test-id="containerComponent"
62
62
  >
63
63
  <div
64
- class="icon shrinkOff"
64
+ class="noShrink icon"
65
65
  data-id="boxComponent"
66
66
  data-selector-id="box"
67
67
  data-test-id="boxComponent"
68
68
  >
69
69
  <div
70
- class="rightPlaceholder inflex rowdir vCenter"
70
+ class="inlineFlex row alignItems_center rightPlaceholder"
71
71
  data-id="containerComponent"
72
72
  data-selector-id="container"
73
73
  data-test-id="containerComponent"
package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="tag medium shrinkOff"
6
+ class="noShrink tag medium"
7
7
  data-id="selectedOptions"
8
8
  data-selector-id="box"
9
9
  data-test-id="selectedOptions"
@@ -18,7 +18,7 @@ exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
18
18
  exports[`SelectedOptions rendering the basic select options 1`] = `
19
19
  <DocumentFragment>
20
20
  <div
21
- class="tag medium shrinkOff"
21
+ class="noShrink tag medium"
22
22
  data-id="selectedOptions"
23
23
  data-selector-id="box"
24
24
  data-test-id="selectedOptions"
@@ -42,7 +42,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
42
42
  </div>
43
43
  </div>
44
44
  <div
45
- class="tag medium shrinkOff"
45
+ class="noShrink tag medium"
46
46
  data-id="selectedOptions"
47
47
  data-selector-id="box"
48
48
  data-test-id="selectedOptions"
@@ -66,7 +66,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
66
66
  </div>
67
67
  </div>
68
68
  <div
69
- class="tag medium shrinkOff"
69
+ class="noShrink tag medium"
70
70
  data-id="selectedOptions"
71
71
  data-selector-id="box"
72
72
  data-test-id="selectedOptions"