@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/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode & it's custom class 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
- class="list medium default withBorder flex rowdir vCenter"
6
+ class="flex row alignItems_center list medium default withBorder"
7
7
  data-a11y-inset-focus="true"
8
8
  data-id="listItemWithRadioComp"
9
9
  data-selector-id="listItemWithRadio"
@@ -12,7 +12,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
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"
@@ -23,7 +23,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
23
23
  data-test-id="listItemWithRadioComp_radio"
24
24
  >
25
25
  <div
26
- class="lhsBoxInner shrinkOff selfStart"
26
+ class="noShrink alignSelf_start lhsBoxInner"
27
27
  data-id="boxComponent"
28
28
  data-selector-id="box"
29
29
  data-test-id="boxComponent"
@@ -32,7 +32,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
32
32
  aria-checked="false"
33
33
  aria-hidden="true"
34
34
  aria-readonly="false"
35
- class="container pointer hoverEfffect inflex rowdir both"
35
+ class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
36
36
  data-id="RadioComp"
37
37
  data-selector-id="container"
38
38
  data-test-id="RadioComp"
@@ -40,8 +40,8 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
40
40
  tabindex="-1"
41
41
  >
42
42
  <div
43
- class="radio
44
- hoverprimary medium filled centerPathprimary shrinkOff"
43
+ class="noShrink radio
44
+ hoverprimary medium filled centerPathprimary"
45
45
  data-id="boxComponent"
46
46
  data-selector-id="box"
47
47
  data-test-id="boxComponent"
@@ -70,19 +70,19 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
70
70
  </div>
71
71
  </div>
72
72
  <div
73
- class="leftBox selfAlign_center grow basis shrinkOff"
73
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
74
74
  data-id="boxComponent"
75
75
  data-selector-id="box"
76
76
  data-test-id="boxComponent"
77
77
  >
78
78
  <div
79
- class="titleBox shrinkOff"
79
+ class="noShrink titleBox"
80
80
  data-id="boxComponent"
81
81
  data-selector-id="box"
82
82
  data-test-id="boxComponent"
83
83
  >
84
84
  <div
85
- class="value basisAuto shrinkOn"
85
+ class="basis_auto shrink value"
86
86
  data-id="boxComponent"
87
87
  data-selector-id="box"
88
88
  data-test-id="boxComponent"
@@ -90,7 +90,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
90
90
  List
91
91
  </div>
92
92
  <div
93
- class="customValueRightPlaceholderClass shrinkOff"
93
+ class="noShrink customValueRightPlaceholderClass"
94
94
  data-id="boxComponent"
95
95
  data-selector-id="box"
96
96
  data-test-id="boxComponent"
@@ -109,7 +109,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
109
109
  exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode 1`] = `
110
110
  <DocumentFragment>
111
111
  <li
112
- class="list medium default withBorder flex rowdir vCenter"
112
+ class="flex row alignItems_center list medium default withBorder"
113
113
  data-a11y-inset-focus="true"
114
114
  data-id="listItemWithRadioComp"
115
115
  data-selector-id="listItemWithRadio"
@@ -118,7 +118,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
118
118
  tabindex="0"
119
119
  >
120
120
  <div
121
- class="contentWrapper shrinkOff"
121
+ class="noShrink contentWrapper"
122
122
  data-id="boxComponent"
123
123
  data-selector-id="box"
124
124
  data-test-id="boxComponent"
@@ -129,7 +129,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
129
129
  data-test-id="listItemWithRadioComp_radio"
130
130
  >
131
131
  <div
132
- class="lhsBoxInner shrinkOff selfStart"
132
+ class="noShrink alignSelf_start lhsBoxInner"
133
133
  data-id="boxComponent"
134
134
  data-selector-id="box"
135
135
  data-test-id="boxComponent"
@@ -138,7 +138,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
138
138
  aria-checked="false"
139
139
  aria-hidden="true"
140
140
  aria-readonly="false"
141
- class="container pointer hoverEfffect inflex rowdir both"
141
+ class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
142
142
  data-id="RadioComp"
143
143
  data-selector-id="container"
144
144
  data-test-id="RadioComp"
@@ -146,8 +146,8 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
146
146
  tabindex="-1"
147
147
  >
148
148
  <div
149
- class="radio
150
- hoverprimary medium filled centerPathprimary shrinkOff"
149
+ class="noShrink radio
150
+ hoverprimary medium filled centerPathprimary"
151
151
  data-id="boxComponent"
152
152
  data-selector-id="box"
153
153
  data-test-id="boxComponent"
@@ -176,19 +176,19 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
176
176
  </div>
177
177
  </div>
178
178
  <div
179
- class="leftBox selfAlign_center grow basis shrinkOff"
179
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
180
180
  data-id="boxComponent"
181
181
  data-selector-id="box"
182
182
  data-test-id="boxComponent"
183
183
  >
184
184
  <div
185
- class="titleBox shrinkOff"
185
+ class="noShrink titleBox"
186
186
  data-id="boxComponent"
187
187
  data-selector-id="box"
188
188
  data-test-id="boxComponent"
189
189
  >
190
190
  <div
191
- class="value basisAuto shrinkOn"
191
+ class="basis_auto shrink value"
192
192
  data-id="boxComponent"
193
193
  data-selector-id="box"
194
194
  data-test-id="boxComponent"
@@ -196,7 +196,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
196
196
  List
197
197
  </div>
198
198
  <div
199
- class="shrinkOff"
199
+ class="noShrink"
200
200
  data-id="boxComponent"
201
201
  data-selector-id="box"
202
202
  data-test-id="boxComponent"
@@ -215,7 +215,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
215
215
  exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align center 1`] = `
216
216
  <DocumentFragment>
217
217
  <li
218
- class="list medium default withBorder flex rowdir vCenter"
218
+ class="flex row alignItems_center list medium default withBorder"
219
219
  data-a11y-inset-focus="true"
220
220
  data-id="listItemWithRadioComp"
221
221
  data-selector-id="listItemWithRadio"
@@ -224,7 +224,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
224
224
  tabindex="0"
225
225
  >
226
226
  <div
227
- class="contentWrapper shrinkOff"
227
+ class="noShrink contentWrapper"
228
228
  data-id="boxComponent"
229
229
  data-selector-id="box"
230
230
  data-test-id="boxComponent"
@@ -235,7 +235,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
235
235
  data-test-id="listItemWithRadioComp_radio"
236
236
  >
237
237
  <div
238
- class="shrinkOff selfCenter"
238
+ class="noShrink alignSelf_center"
239
239
  data-id="boxComponent"
240
240
  data-selector-id="box"
241
241
  data-test-id="boxComponent"
@@ -244,7 +244,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
244
244
  aria-checked="false"
245
245
  aria-hidden="true"
246
246
  aria-readonly="false"
247
- class="container pointer hoverEfffect inflex rowdir both"
247
+ class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
248
248
  data-id="RadioComp"
249
249
  data-selector-id="container"
250
250
  data-test-id="RadioComp"
@@ -252,8 +252,8 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
252
252
  tabindex="-1"
253
253
  >
254
254
  <div
255
- class="radio
256
- hoverprimary medium filled centerPathprimary shrinkOff"
255
+ class="noShrink radio
256
+ hoverprimary medium filled centerPathprimary"
257
257
  data-id="boxComponent"
258
258
  data-selector-id="box"
259
259
  data-test-id="boxComponent"
@@ -282,19 +282,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
282
282
  </div>
283
283
  </div>
284
284
  <div
285
- class="leftBox selfAlign_center grow basis shrinkOff"
285
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
286
286
  data-id="boxComponent"
287
287
  data-selector-id="box"
288
288
  data-test-id="boxComponent"
289
289
  >
290
290
  <div
291
- class="titleBox shrinkOff"
291
+ class="noShrink titleBox"
292
292
  data-id="boxComponent"
293
293
  data-selector-id="box"
294
294
  data-test-id="boxComponent"
295
295
  >
296
296
  <div
297
- class="value basisAuto shrinkOn"
297
+ class="basis_auto shrink value"
298
298
  data-id="boxComponent"
299
299
  data-selector-id="box"
300
300
  data-test-id="boxComponent"
@@ -303,7 +303,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
303
303
  </div>
304
304
  </div>
305
305
  <div
306
- class="secondaryField secondaryValue shrinkOff"
306
+ class="noShrink secondaryField secondaryValue"
307
307
  data-id="boxComponent"
308
308
  data-selector-id="box"
309
309
  data-test-id="boxComponent"
@@ -320,7 +320,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
320
320
  exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align end 1`] = `
321
321
  <DocumentFragment>
322
322
  <li
323
- class="list medium default withBorder flex rowdir vCenter"
323
+ class="flex row alignItems_center list medium default withBorder"
324
324
  data-a11y-inset-focus="true"
325
325
  data-id="listItemWithRadioComp"
326
326
  data-selector-id="listItemWithRadio"
@@ -329,7 +329,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
329
329
  tabindex="0"
330
330
  >
331
331
  <div
332
- class="contentWrapper shrinkOff"
332
+ class="noShrink contentWrapper"
333
333
  data-id="boxComponent"
334
334
  data-selector-id="box"
335
335
  data-test-id="boxComponent"
@@ -340,7 +340,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
340
340
  data-test-id="listItemWithRadioComp_radio"
341
341
  >
342
342
  <div
343
- class="lhsBoxInner shrinkOff selfEnd"
343
+ class="noShrink alignSelf_end lhsBoxInner"
344
344
  data-id="boxComponent"
345
345
  data-selector-id="box"
346
346
  data-test-id="boxComponent"
@@ -349,7 +349,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
349
349
  aria-checked="false"
350
350
  aria-hidden="true"
351
351
  aria-readonly="false"
352
- class="container pointer hoverEfffect inflex rowdir both"
352
+ class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
353
353
  data-id="RadioComp"
354
354
  data-selector-id="container"
355
355
  data-test-id="RadioComp"
@@ -357,8 +357,8 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
357
357
  tabindex="-1"
358
358
  >
359
359
  <div
360
- class="radio
361
- hoverprimary medium filled centerPathprimary shrinkOff"
360
+ class="noShrink radio
361
+ hoverprimary medium filled centerPathprimary"
362
362
  data-id="boxComponent"
363
363
  data-selector-id="box"
364
364
  data-test-id="boxComponent"
@@ -387,19 +387,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
387
387
  </div>
388
388
  </div>
389
389
  <div
390
- class="leftBox selfAlign_center grow basis shrinkOff"
390
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
391
391
  data-id="boxComponent"
392
392
  data-selector-id="box"
393
393
  data-test-id="boxComponent"
394
394
  >
395
395
  <div
396
- class="titleBox shrinkOff"
396
+ class="noShrink titleBox"
397
397
  data-id="boxComponent"
398
398
  data-selector-id="box"
399
399
  data-test-id="boxComponent"
400
400
  >
401
401
  <div
402
- class="value basisAuto shrinkOn"
402
+ class="basis_auto shrink value"
403
403
  data-id="boxComponent"
404
404
  data-selector-id="box"
405
405
  data-test-id="boxComponent"
@@ -408,7 +408,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
408
408
  </div>
409
409
  </div>
410
410
  <div
411
- class="secondaryField secondaryValue shrinkOff"
411
+ class="noShrink secondaryField secondaryValue"
412
412
  data-id="boxComponent"
413
413
  data-selector-id="box"
414
414
  data-test-id="boxComponent"
@@ -425,7 +425,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS a
425
425
  exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
426
426
  <DocumentFragment>
427
427
  <li
428
- class="list medium default withBorder flex rowdir vCenter"
428
+ class="flex row alignItems_center list medium default withBorder"
429
429
  data-a11y-inset-focus="true"
430
430
  data-id="listItemWithRadioComp"
431
431
  data-selector-id="listItemWithRadio"
@@ -434,7 +434,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
434
434
  tabindex="0"
435
435
  >
436
436
  <div
437
- class="contentWrapper shrinkOff"
437
+ class="noShrink contentWrapper"
438
438
  data-id="boxComponent"
439
439
  data-selector-id="box"
440
440
  data-test-id="boxComponent"
@@ -445,7 +445,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
445
445
  data-test-id="listItemWithRadioComp_radio"
446
446
  >
447
447
  <div
448
- class="lhsBoxInner shrinkOff selfStart"
448
+ class="noShrink alignSelf_start lhsBoxInner"
449
449
  data-id="boxComponent"
450
450
  data-selector-id="box"
451
451
  data-test-id="boxComponent"
@@ -454,7 +454,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
454
454
  aria-checked="false"
455
455
  aria-hidden="true"
456
456
  aria-readonly="false"
457
- class="container pointer hoverEfffect inflex rowdir both"
457
+ class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
458
458
  data-id="RadioComp"
459
459
  data-selector-id="container"
460
460
  data-test-id="RadioComp"
@@ -462,8 +462,8 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
462
462
  tabindex="-1"
463
463
  >
464
464
  <div
465
- class="radio
466
- hoverprimary medium filled centerPathprimary shrinkOff"
465
+ class="noShrink radio
466
+ hoverprimary medium filled centerPathprimary"
467
467
  data-id="boxComponent"
468
468
  data-selector-id="box"
469
469
  data-test-id="boxComponent"
@@ -492,19 +492,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
492
492
  </div>
493
493
  </div>
494
494
  <div
495
- class="leftBox selfAlign_center grow basis shrinkOff"
495
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
496
496
  data-id="boxComponent"
497
497
  data-selector-id="box"
498
498
  data-test-id="boxComponent"
499
499
  >
500
500
  <div
501
- class="titleBox shrinkOff"
501
+ class="noShrink titleBox"
502
502
  data-id="boxComponent"
503
503
  data-selector-id="box"
504
504
  data-test-id="boxComponent"
505
505
  >
506
506
  <div
507
- class="value basisAuto shrinkOn"
507
+ class="basis_auto shrink value"
508
508
  data-id="boxComponent"
509
509
  data-selector-id="box"
510
510
  data-test-id="boxComponent"
@@ -513,7 +513,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
513
513
  </div>
514
514
  </div>
515
515
  <div
516
- class="secondaryField secondaryValue shrinkOff"
516
+ class="noShrink secondaryField secondaryValue"
517
517
  data-id="boxComponent"
518
518
  data-selector-id="box"
519
519
  data-test-id="boxComponent"
@@ -530,7 +530,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
530
530
  exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
531
531
  <DocumentFragment>
532
532
  <li
533
- class="list medium default withBorder flex rowdir vCenter"
533
+ class="flex row alignItems_center list medium default withBorder"
534
534
  data-a11y-inset-focus="true"
535
535
  data-id="listItemWithRadioComp"
536
536
  data-selector-id="listItemWithRadio"
@@ -539,7 +539,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
539
539
  tabindex="0"
540
540
  >
541
541
  <div
542
- class="contentWrapper shrinkOff"
542
+ class="noShrink contentWrapper"
543
543
  data-id="boxComponent"
544
544
  data-selector-id="box"
545
545
  data-test-id="boxComponent"
@@ -550,7 +550,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
550
550
  data-test-id="listItemWithRadioComp_radio"
551
551
  >
552
552
  <div
553
- class="lhsBoxInner shrinkOff selfStart"
553
+ class="noShrink alignSelf_start lhsBoxInner"
554
554
  data-id="boxComponent"
555
555
  data-selector-id="box"
556
556
  data-test-id="boxComponent"
@@ -559,7 +559,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
559
559
  aria-checked="false"
560
560
  aria-hidden="true"
561
561
  aria-readonly="false"
562
- class="container pointer hoverEfffect inflex rowdir both"
562
+ class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
563
563
  data-id="RadioComp"
564
564
  data-selector-id="container"
565
565
  data-test-id="RadioComp"
@@ -567,8 +567,8 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
567
567
  tabindex="-1"
568
568
  >
569
569
  <div
570
- class="radio
571
- hoverprimary medium filled centerPathprimary shrinkOff"
570
+ class="noShrink radio
571
+ hoverprimary medium filled centerPathprimary"
572
572
  data-id="boxComponent"
573
573
  data-selector-id="box"
574
574
  data-test-id="boxComponent"
@@ -597,19 +597,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
597
597
  </div>
598
598
  </div>
599
599
  <div
600
- class="leftBox selfAlign_center grow basis shrinkOff"
600
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
601
601
  data-id="boxComponent"
602
602
  data-selector-id="box"
603
603
  data-test-id="boxComponent"
604
604
  >
605
605
  <div
606
- class="titleBox shrinkOff"
606
+ class="noShrink titleBox"
607
607
  data-id="boxComponent"
608
608
  data-selector-id="box"
609
609
  data-test-id="boxComponent"
610
610
  >
611
611
  <div
612
- class="value basisAuto shrinkOn"
612
+ class="basis_auto shrink value"
613
613
  data-id="boxComponent"
614
614
  data-selector-id="box"
615
615
  data-test-id="boxComponent"
@@ -618,7 +618,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
618
618
  </div>
619
619
  </div>
620
620
  <div
621
- class="secondaryField secondaryValue shrinkOff"
621
+ class="noShrink secondaryField secondaryValue"
622
622
  data-id="boxComponent"
623
623
  data-selector-id="box"
624
624
  data-test-id="boxComponent"
@@ -635,7 +635,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
635
635
  exports[`ListItemWithRadio rendering the defult props 1`] = `
636
636
  <DocumentFragment>
637
637
  <li
638
- class="list medium default withBorder flex rowdir vCenter"
638
+ class="flex row alignItems_center list medium default withBorder"
639
639
  data-a11y-inset-focus="true"
640
640
  data-id="listItemWithRadioComp"
641
641
  data-selector-id="listItemWithRadio"
@@ -644,7 +644,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
644
644
  tabindex="0"
645
645
  >
646
646
  <div
647
- class="contentWrapper shrinkOff"
647
+ class="noShrink contentWrapper"
648
648
  data-id="boxComponent"
649
649
  data-selector-id="box"
650
650
  data-test-id="boxComponent"
@@ -655,7 +655,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
655
655
  data-test-id="listItemWithRadioComp_radio"
656
656
  >
657
657
  <div
658
- class="lhsBoxInner shrinkOff selfStart"
658
+ class="noShrink alignSelf_start lhsBoxInner"
659
659
  data-id="boxComponent"
660
660
  data-selector-id="box"
661
661
  data-test-id="boxComponent"
@@ -664,7 +664,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
664
664
  aria-checked="false"
665
665
  aria-hidden="true"
666
666
  aria-readonly="false"
667
- class="container pointer hoverEfffect inflex rowdir both"
667
+ class="inlineFlex row alignItems_center justifyContent_center container pointer hoverEfffect"
668
668
  data-id="RadioComp"
669
669
  data-selector-id="container"
670
670
  data-test-id="RadioComp"
@@ -672,8 +672,8 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
672
672
  tabindex="-1"
673
673
  >
674
674
  <div
675
- class="radio
676
- hoverprimary medium filled centerPathprimary shrinkOff"
675
+ class="noShrink radio
676
+ hoverprimary medium filled centerPathprimary"
677
677
  data-id="boxComponent"
678
678
  data-selector-id="box"
679
679
  data-test-id="boxComponent"
@@ -702,19 +702,19 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
702
702
  </div>
703
703
  </div>
704
704
  <div
705
- class="leftBox selfAlign_center grow basis shrinkOff"
705
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
706
706
  data-id="boxComponent"
707
707
  data-selector-id="box"
708
708
  data-test-id="boxComponent"
709
709
  >
710
710
  <div
711
- class="titleBox shrinkOff"
711
+ class="noShrink titleBox"
712
712
  data-id="boxComponent"
713
713
  data-selector-id="box"
714
714
  data-test-id="boxComponent"
715
715
  >
716
716
  <div
717
- class="value basisAuto shrinkOn"
717
+ class="basis_auto shrink value"
718
718
  data-id="boxComponent"
719
719
  data-selector-id="box"
720
720
  data-test-id="boxComponent"
package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap CHANGED
@@ -6,25 +6,25 @@ exports[`MobileHeader rendering the defult props 1`] = `
6
6
  class="container"
7
7
  >
8
8
  <div
9
- class="header flex rowdir alignBetween vCenter"
9
+ class="flex row alignContent_spaceBetween alignItems_center header"
10
10
  data-id="containerComponent"
11
11
  data-selector-id="container"
12
12
  data-test-id="containerComponent"
13
13
  >
14
14
  <div
15
- class="cardHeading grow basis shrinkOff"
15
+ class="flexible basis_zero noShrink cardHeading"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
19
19
  />
20
20
  <div
21
- class="shrinkOn"
21
+ class="shrink"
22
22
  data-id="boxComponent"
23
23
  data-selector-id="box"
24
24
  data-test-id="boxComponent"
25
25
  >
26
26
  <button
27
- class="buttonText bold plainprimary medium"
27
+ class="bold plainprimary medium buttonText"
28
28
  data-id="buttonComp"
29
29
  data-selector-id="button"
30
30
  data-test-id="buttonComp"
package/lib/MultiSelect/MultiSelect.js CHANGED
@@ -1050,7 +1050,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
1050
1050
  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
1051
1051
  align: "vertical",
1052
1052
  alignBox: "row",
1053
- className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(textBoxClass, " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : ''),
1053
+ className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(needBorder ? !disableAction ? _MultiSelectModule["default"]["borderColor_".concat(borderColor)] : _MultiSelectModule["default"].borderColor_transparent : '', " ").concat(isActive && needBorder || isResponsive || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(textBoxClass, " "),
1054
1054
  eleRef: this.selectedOptionContainerRef,
1055
1055
  wrap: "wrap"
1056
1056
  }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
9
9
  data-test-id="multiSelect"
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="boxComponent"
20
20
  data-selector-id="box"
21
21
  data-test-id="boxComponent"
@@ -25,11 +25,11 @@ exports[`AdvancedGroupMultiSelect 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[`AdvancedGroupMultiSelect 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"