@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/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
9
9
  data-test-id="multiSelectComp"
10
10
  >
11
11
  <div
12
- class="container medium hasBorder borderColor_default flex cover rowdir wrap vCenter"
12
+ class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
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="multiSelectComp_textBox"
20
20
  data-selector-id="box"
21
21
  data-test-id="multiSelectComp_textBox"
@@ -25,11 +25,11 @@ exports[`AdvancedMultiSelect 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"
@@ -52,13 +52,13 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
52
52
  />
53
53
  </div>
54
54
  <div
55
- class="iconContainer shrinkOff"
55
+ class="noShrink iconContainer"
56
56
  data-id="boxComponent"
57
57
  data-selector-id="box"
58
58
  data-test-id="boxComponent"
59
59
  >
60
60
  <div
61
- class="flex cover rowdir"
61
+ class="flex fullSize row"
62
62
  data-id="containerComponent"
63
63
  data-selector-id="container"
64
64
  data-test-id="containerComponent"
@@ -80,13 +80,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
80
80
  data-test-id="multiSelectComp"
81
81
  >
82
82
  <div
83
- class="container medium hasBorder borderColor_default flex cover rowdir wrap vCenter"
83
+ class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
84
84
  data-id="containerComponent"
85
85
  data-selector-id="container"
86
86
  data-test-id="containerComponent"
87
87
  >
88
88
  <div
89
- class="wrapper grow basisAuto shrinkOn"
89
+ class="flexible basis_auto shrink wrapper"
90
90
  data-id="multiSelectComp_textBox"
91
91
  data-selector-id="box"
92
92
  data-test-id="multiSelectComp_textBox"
@@ -96,11 +96,11 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
96
96
  "
97
97
  />
98
98
  <div
99
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
99
+ class="flex row varClass customContainer effect container custmInputWrapper"
100
100
  data-selector-id="textBoxIcon"
101
101
  >
102
102
  <div
103
- class="grow basis shrinkOff"
103
+ class="flexible basis_zero noShrink"
104
104
  data-id="boxComponent"
105
105
  data-selector-id="box"
106
106
  data-test-id="boxComponent"
@@ -123,13 +123,13 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
123
123
  />
124
124
  </div>
125
125
  <div
126
- class="iconContainer shrinkOff"
126
+ class="noShrink iconContainer"
127
127
  data-id="boxComponent"
128
128
  data-selector-id="box"
129
129
  data-test-id="boxComponent"
130
130
  >
131
131
  <div
132
- class="flex cover rowdir"
132
+ class="flex fullSize row"
133
133
  data-id="containerComponent"
134
134
  data-selector-id="container"
135
135
  data-test-id="containerComponent"
@@ -161,38 +161,38 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
161
161
  tabindex="-1"
162
162
  >
163
163
  <div
164
- class="flex rowdir"
164
+ class="flex row"
165
165
  data-id="containerComponent"
166
166
  data-selector-id="container"
167
167
  data-test-id="containerComponent"
168
168
  >
169
169
  <div
170
- class="grow basis shrinkOff"
170
+ class="flexible basis_zero noShrink"
171
171
  data-id="boxComponent"
172
172
  data-selector-id="box"
173
173
  data-test-id="boxComponent"
174
174
  >
175
175
  <div
176
- class="box flex cover coldir"
176
+ class="flex fullSize column box"
177
177
  data-id="containerComponent"
178
178
  data-selector-id="container"
179
179
  data-test-id="containerComponent"
180
180
  >
181
181
  <div
182
- class="small grow basis shrinkOn scrolly"
182
+ class="flexible basis_zero shrink scroll_vertical small"
183
183
  data-id="CardContent"
184
184
  data-selector-id="cardContent"
185
185
  data-test-id="CardContent"
186
186
  >
187
187
  <div
188
- class="flex coldir"
188
+ class="flex column"
189
189
  data-id="containerComponent"
190
190
  data-selector-id="container"
191
191
  data-test-id="containerComponent"
192
192
  tabindex="0"
193
193
  >
194
194
  <div
195
- class="shrinkOff"
195
+ class="noShrink"
196
196
  data-id="multiSelectComp_Options"
197
197
  data-selector-id="box"
198
198
  data-test-id="multiSelectComp_Options"
@@ -200,7 +200,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
200
200
  <li
201
201
  aria-label="Apple"
202
202
  aria-selected="false"
203
- class="list medium default defaultHover mediumwithTick withBorder flex rowdir vCenter"
203
+ class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
204
204
  data-a11y-inset-focus="true"
205
205
  data-a11y-list-active="true"
206
206
  data-id="Apple"
@@ -211,19 +211,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
211
211
  tabindex="0"
212
212
  >
213
213
  <div
214
- class="leftBox grow basis shrinkOff"
214
+ class="flexible basis_zero noShrink leftBox"
215
215
  data-id="boxComponent"
216
216
  data-selector-id="box"
217
217
  data-test-id="boxComponent"
218
218
  >
219
219
  <div
220
- class="titleBox shrinkOff"
220
+ class="noShrink titleBox"
221
221
  data-id="boxComponent"
222
222
  data-selector-id="box"
223
223
  data-test-id="boxComponent"
224
224
  >
225
225
  <div
226
- class="selfAlign_center value basisAuto shrinkOn"
226
+ class="basis_auto shrink selfAlign_center value"
227
227
  data-id="boxComponent"
228
228
  data-selector-id="box"
229
229
  data-test-id="boxComponent"
@@ -236,7 +236,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
236
236
  <li
237
237
  aria-label="Orange"
238
238
  aria-selected="false"
239
- class="list medium default mediumwithTick withBorder flex rowdir vCenter"
239
+ class="flex row alignItems_center list medium default mediumwithTick withBorder"
240
240
  data-a11y-inset-focus="true"
241
241
  data-a11y-list-active="false"
242
242
  data-id="Orange"
@@ -247,19 +247,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
247
247
  tabindex="0"
248
248
  >
249
249
  <div
250
- class="leftBox grow basis shrinkOff"
250
+ class="flexible basis_zero noShrink leftBox"
251
251
  data-id="boxComponent"
252
252
  data-selector-id="box"
253
253
  data-test-id="boxComponent"
254
254
  >
255
255
  <div
256
- class="titleBox shrinkOff"
256
+ class="noShrink titleBox"
257
257
  data-id="boxComponent"
258
258
  data-selector-id="box"
259
259
  data-test-id="boxComponent"
260
260
  >
261
261
  <div
262
- class="selfAlign_center value basisAuto shrinkOn"
262
+ class="basis_auto shrink selfAlign_center value"
263
263
  data-id="boxComponent"
264
264
  data-selector-id="box"
265
265
  data-test-id="boxComponent"
@@ -272,7 +272,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
272
272
  <li
273
273
  aria-label="string test"
274
274
  aria-selected="false"
275
- class="list medium default mediumwithTick withBorder flex rowdir vCenter"
275
+ class="flex row alignItems_center list medium default mediumwithTick withBorder"
276
276
  data-a11y-inset-focus="true"
277
277
  data-a11y-list-active="false"
278
278
  data-id="string test"
@@ -283,19 +283,19 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
283
283
  tabindex="0"
284
284
  >
285
285
  <div
286
- class="leftBox grow basis shrinkOff"
286
+ class="flexible basis_zero noShrink leftBox"
287
287
  data-id="boxComponent"
288
288
  data-selector-id="box"
289
289
  data-test-id="boxComponent"
290
290
  >
291
291
  <div
292
- class="titleBox shrinkOff"
292
+ class="noShrink titleBox"
293
293
  data-id="boxComponent"
294
294
  data-selector-id="box"
295
295
  data-test-id="boxComponent"
296
296
  >
297
297
  <div
298
- class="selfAlign_center value basisAuto shrinkOn"
298
+ class="basis_auto shrink selfAlign_center value"
299
299
  data-id="boxComponent"
300
300
  data-selector-id="box"
301
301
  data-test-id="boxComponent"
@@ -326,13 +326,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
326
326
  data-test-id="multiSelectComp"
327
327
  >
328
328
  <div
329
- class="container medium hasBorder borderColor_default flex cover rowdir wrap vCenter"
329
+ class="flex fullSize row wrap alignItems_center container medium hasBorder borderColor_default"
330
330
  data-id="containerComponent"
331
331
  data-selector-id="container"
332
332
  data-test-id="containerComponent"
333
333
  >
334
334
  <div
335
- class="wrapper grow basisAuto shrinkOn"
335
+ class="flexible basis_auto shrink wrapper"
336
336
  data-id="multiSelectComp_textBox"
337
337
  data-selector-id="box"
338
338
  data-test-id="multiSelectComp_textBox"
@@ -342,11 +342,11 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
342
342
  "
343
343
  />
344
344
  <div
345
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
345
+ class="flex row varClass customContainer effect container custmInputWrapper"
346
346
  data-selector-id="textBoxIcon"
347
347
  >
348
348
  <div
349
- class="grow basis shrinkOff"
349
+ class="flexible basis_zero noShrink"
350
350
  data-id="boxComponent"
351
351
  data-selector-id="box"
352
352
  data-test-id="boxComponent"
@@ -369,13 +369,13 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
369
369
  />
370
370
  </div>
371
371
  <div
372
- class="iconContainer shrinkOff"
372
+ class="noShrink iconContainer"
373
373
  data-id="boxComponent"
374
374
  data-selector-id="box"
375
375
  data-test-id="boxComponent"
376
376
  >
377
377
  <div
378
- class="flex cover rowdir"
378
+ class="flex fullSize row"
379
379
  data-id="containerComponent"
380
380
  data-selector-id="container"
381
381
  data-test-id="containerComponent"
@@ -407,38 +407,38 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
407
407
  tabindex="-1"
408
408
  >
409
409
  <div
410
- class="flex rowdir"
410
+ class="flex row"
411
411
  data-id="containerComponent"
412
412
  data-selector-id="container"
413
413
  data-test-id="containerComponent"
414
414
  >
415
415
  <div
416
- class="grow basis shrinkOff"
416
+ class="flexible basis_zero noShrink"
417
417
  data-id="boxComponent"
418
418
  data-selector-id="box"
419
419
  data-test-id="boxComponent"
420
420
  >
421
421
  <div
422
- class="box flex cover coldir"
422
+ class="flex fullSize column box"
423
423
  data-id="containerComponent"
424
424
  data-selector-id="container"
425
425
  data-test-id="containerComponent"
426
426
  >
427
427
  <div
428
- class="small grow basis shrinkOn scrolly"
428
+ class="flexible basis_zero shrink scroll_vertical small"
429
429
  data-id="CardContent"
430
430
  data-selector-id="cardContent"
431
431
  data-test-id="CardContent"
432
432
  >
433
433
  <div
434
- class="flex coldir"
434
+ class="flex column"
435
435
  data-id="containerComponent"
436
436
  data-selector-id="container"
437
437
  data-test-id="containerComponent"
438
438
  tabindex="0"
439
439
  >
440
440
  <div
441
- class="shrinkOff"
441
+ class="noShrink"
442
442
  data-id="multiSelectComp_Options"
443
443
  data-selector-id="box"
444
444
  data-test-id="multiSelectComp_Options"
@@ -446,7 +446,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
446
446
  <li
447
447
  aria-label="Apple"
448
448
  aria-selected="false"
449
- class="list medium default defaultHover mediumwithTick withBorder flex rowdir vCenter"
449
+ class="flex row alignItems_center list medium default defaultHover mediumwithTick withBorder"
450
450
  data-a11y-inset-focus="true"
451
451
  data-a11y-list-active="true"
452
452
  data-id="Apple"
@@ -457,19 +457,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
457
457
  tabindex="0"
458
458
  >
459
459
  <div
460
- class="leftBox grow basis shrinkOff"
460
+ class="flexible basis_zero noShrink leftBox"
461
461
  data-id="boxComponent"
462
462
  data-selector-id="box"
463
463
  data-test-id="boxComponent"
464
464
  >
465
465
  <div
466
- class="titleBox shrinkOff"
466
+ class="noShrink titleBox"
467
467
  data-id="boxComponent"
468
468
  data-selector-id="box"
469
469
  data-test-id="boxComponent"
470
470
  >
471
471
  <div
472
- class="selfAlign_center value basisAuto shrinkOn"
472
+ class="basis_auto shrink selfAlign_center value"
473
473
  data-id="boxComponent"
474
474
  data-selector-id="box"
475
475
  data-test-id="boxComponent"
@@ -482,7 +482,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
482
482
  <li
483
483
  aria-label="Orange"
484
484
  aria-selected="false"
485
- class="list medium default mediumwithTick withBorder flex rowdir vCenter"
485
+ class="flex row alignItems_center list medium default mediumwithTick withBorder"
486
486
  data-a11y-inset-focus="true"
487
487
  data-a11y-list-active="false"
488
488
  data-id="Orange"
@@ -493,19 +493,19 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
493
493
  tabindex="0"
494
494
  >
495
495
  <div
496
- class="leftBox grow basis shrinkOff"
496
+ class="flexible basis_zero noShrink leftBox"
497
497
  data-id="boxComponent"
498
498
  data-selector-id="box"
499
499
  data-test-id="boxComponent"
500
500
  >
501
501
  <div
502
- class="titleBox shrinkOff"
502
+ class="noShrink titleBox"
503
503
  data-id="boxComponent"
504
504
  data-selector-id="box"
505
505
  data-test-id="boxComponent"
506
506
  >
507
507
  <div
508
- class="selfAlign_center value basisAuto shrinkOn"
508
+ class="basis_auto shrink selfAlign_center value"
509
509
  data-id="boxComponent"
510
510
  data-selector-id="box"
511
511
  data-test-id="boxComponent"
package/lib/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"
@@ -213,7 +213,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
213
213
  value="text"
214
214
  >
215
215
  <div
216
- class="flex cover coldir both"
216
+ class="flex fullSize column alignItems_center justifyContent_center"
217
217
  data-id="containerComponent"
218
218
  data-selector-id="container"
219
219
  data-test-id="containerComponent"
@@ -231,7 +231,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
231
231
  </div>
232
232
  </div>
233
233
  <div
234
- class="tag medium shrinkOff"
234
+ class="noShrink tag medium"
235
235
  data-id="multiSelect_selectedOptions"
236
236
  data-selector-id="box"
237
237
  data-test-id="multiSelect_selectedOptions"
@@ -263,7 +263,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
263
263
  value="text"
264
264
  >
265
265
  <div
266
- class="flex cover coldir both"
266
+ class="flex fullSize column alignItems_center justifyContent_center"
267
267
  data-id="containerComponent"
268
268
  data-selector-id="container"
269
269
  data-test-id="containerComponent"
@@ -281,7 +281,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
281
281
  </div>
282
282
  </div>
283
283
  <div
284
- class="tag medium shrinkOff"
284
+ class="noShrink tag medium"
285
285
  data-id="multiSelect_selectedOptions"
286
286
  data-selector-id="box"
287
287
  data-test-id="multiSelect_selectedOptions"
@@ -313,7 +313,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
313
313
  value="text"
314
314
  >
315
315
  <div
316
- class="flex cover coldir both"
316
+ class="flex fullSize column alignItems_center justifyContent_center"
317
317
  data-id="containerComponent"
318
318
  data-selector-id="container"
319
319
  data-test-id="containerComponent"
@@ -331,7 +331,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
331
331
  </div>
332
332
  </div>
333
333
  <div
334
- class="wrapper grow basisAuto shrinkOn"
334
+ class="flexible basis_auto shrink wrapper"
335
335
  data-id="boxComponent"
336
336
  data-selector-id="box"
337
337
  data-test-id="boxComponent"
@@ -341,11 +341,11 @@ exports[`MultiSelect rendering with limit feature 1`] = `
341
341
  "
342
342
  />
343
343
  <div
344
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
344
+ class="flex row varClass customContainer effect container custmInputWrapper"
345
345
  data-selector-id="textBoxIcon"
346
346
  >
347
347
  <div
348
- class="grow basis shrinkOff"
348
+ class="flexible basis_zero noShrink"
349
349
  data-id="boxComponent"
350
350
  data-selector-id="box"
351
351
  data-test-id="boxComponent"
@@ -367,31 +367,31 @@ exports[`MultiSelect rendering with limit feature 1`] = `
367
367
  />
368
368
  </div>
369
369
  <div
370
- class="iconContainer shrinkOff"
370
+ class="noShrink iconContainer"
371
371
  data-id="boxComponent"
372
372
  data-selector-id="box"
373
373
  data-test-id="boxComponent"
374
374
  >
375
375
  <div
376
- class="flex cover rowdir"
376
+ class="flex fullSize row"
377
377
  data-id="containerComponent"
378
378
  data-selector-id="container"
379
379
  data-test-id="containerComponent"
380
380
  >
381
381
  <div
382
- class="icon shrinkOff"
382
+ class="noShrink icon"
383
383
  data-id="boxComponent"
384
384
  data-selector-id="box"
385
385
  data-test-id="boxComponent"
386
386
  >
387
387
  <div
388
- class="rightPlaceholder inflex rowdir vCenter"
388
+ class="inlineFlex row alignItems_center rightPlaceholder"
389
389
  data-id="containerComponent"
390
390
  data-selector-id="container"
391
391
  data-test-id="containerComponent"
392
392
  >
393
393
  <button
394
- class="delete defaultDelete shrinkOff"
394
+ class="noShrink delete defaultDelete"
395
395
  data-id="multiSelect_clearIcon"
396
396
  data-selector-id="box"
397
397
  data-test-id="multiSelect_clearIcon"