@zohodesk/components 1.6.20 → 1.6.22-exp-1

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 (200) hide show
  1. package/README.md +10 -0
  2. package/es/AppContainer/AppContainer.module.css +9 -3
  3. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +22 -22
  4. package/es/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +42 -42
  5. package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +73 -97
  6. package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  7. package/es/Button/css/cssJSLogic.js +6 -6
  8. package/es/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +8 -8
  9. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  10. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  11. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  12. package/es/CheckBox/CheckBox.js +2 -2
  13. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +153 -250
  14. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +67 -76
  15. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +45 -45
  16. package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +9 -9
  17. package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +5 -5
  18. package/es/DateTime/CalendarView.js +2 -2
  19. package/es/DateTime/DateWidget.js +2 -2
  20. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  21. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +102 -102
  22. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  23. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +9 -9
  24. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +9 -9
  25. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  26. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +34 -34
  27. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +6 -6
  28. package/es/DropDown/DropDownItem.js +1 -1
  29. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  30. package/es/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap +1 -1
  31. package/es/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +1 -1
  32. package/es/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap +2 -2
  33. package/es/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap +1 -1
  34. package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap +7 -7
  35. package/es/Label/Label.js +1 -1
  36. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -48
  37. package/es/Layout/Box.js +1 -115
  38. package/es/Layout/Container.js +1 -132
  39. package/es/Layout/props/defaultProps.js +1 -16
  40. package/es/Layout/props/propTypes.js +1 -46
  41. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  42. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  43. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  44. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +69 -76
  45. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  46. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -69
  47. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +4 -4
  48. package/es/MultiSelect/MultiSelect.js +1 -1
  49. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +9 -10
  50. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +59 -62
  51. package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +1 -1
  52. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +50 -59
  53. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  54. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11 -12
  55. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +7 -7
  56. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  57. package/es/Radio/Radio.js +1 -1
  58. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +117 -197
  59. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  60. package/es/Ribbon/Ribbon.js +3 -16
  61. package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +21 -24
  62. package/es/Select/SelectWithAvatar.js +1 -1
  63. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +9 -9
  64. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +1015 -1015
  65. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +4 -4
  66. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +12 -12
  67. package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +12 -12
  68. package/es/Switch/Switch.js +1 -1
  69. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +98 -110
  70. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  71. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  72. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  73. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  74. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  75. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  76. package/es/Tag/Tag.js +1 -2
  77. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +242 -334
  78. package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +44 -44
  79. package/es/TextBoxIcon/TextBoxIcon.js +1 -1
  80. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +206 -206
  81. package/es/Textarea/Textarea.js +1 -1
  82. package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +46 -46
  83. package/es/Tooltip/Tooltip.js +1 -1
  84. package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +3 -3
  85. package/es/Typography/css/cssJSLogic.js +2 -2
  86. package/es/common/basic.module.css +9 -8
  87. package/es/css.js +0 -1
  88. package/es/deprecated/Switch/Switch.js +1 -1
  89. package/es/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap +1 -1
  90. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  91. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  92. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +8 -8
  93. package/es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +1 -1
  94. package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +1 -1
  95. package/lib/AppContainer/AppContainer.module.css +9 -3
  96. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +22 -22
  97. package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +42 -42
  98. package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +73 -97
  99. package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  100. package/lib/Button/css/cssJSLogic.js +3 -3
  101. package/lib/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +8 -8
  102. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  103. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  104. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  105. package/lib/CheckBox/CheckBox.js +2 -2
  106. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +153 -250
  107. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +67 -76
  108. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +45 -45
  109. package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +9 -9
  110. package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +5 -5
  111. package/lib/DateTime/CalendarView.js +2 -2
  112. package/lib/DateTime/DateWidget.js +2 -2
  113. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  114. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +102 -102
  115. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  116. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +9 -9
  117. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +9 -9
  118. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  119. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +34 -34
  120. package/lib/DropBox/DropBoxElement/css/cssJSLogic.js +2 -2
  121. package/lib/DropDown/DropDownItem.js +1 -1
  122. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  123. package/lib/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap +1 -1
  124. package/lib/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +1 -1
  125. package/lib/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap +2 -2
  126. package/lib/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap +1 -1
  127. package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap +7 -7
  128. package/lib/Label/Label.js +1 -1
  129. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -48
  130. package/lib/Layout/Box.js +7 -120
  131. package/lib/Layout/Container.js +7 -137
  132. package/lib/Layout/props/defaultProps.js +14 -19
  133. package/lib/Layout/props/propTypes.js +13 -52
  134. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  135. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  136. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  137. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +69 -76
  138. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  139. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -69
  140. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +4 -4
  141. package/lib/MultiSelect/MultiSelect.js +1 -1
  142. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +9 -10
  143. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +59 -62
  144. package/lib/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +1 -1
  145. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +50 -59
  146. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  147. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11 -12
  148. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +7 -7
  149. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  150. package/lib/Radio/Radio.js +1 -1
  151. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +117 -197
  152. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  153. package/lib/Ribbon/Ribbon.js +2 -15
  154. package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +21 -24
  155. package/lib/Select/SelectWithAvatar.js +1 -1
  156. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +9 -9
  157. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +1015 -1015
  158. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +4 -4
  159. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +12 -12
  160. package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +12 -12
  161. package/lib/Switch/Switch.js +1 -1
  162. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +98 -110
  163. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  164. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  165. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  166. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  167. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  168. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  169. package/lib/Tag/Tag.js +1 -1
  170. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +242 -334
  171. package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +44 -44
  172. package/lib/TextBoxIcon/TextBoxIcon.js +1 -1
  173. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +206 -206
  174. package/lib/Textarea/Textarea.js +1 -1
  175. package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +46 -46
  176. package/lib/Tooltip/Tooltip.js +1 -1
  177. package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +3 -3
  178. package/lib/Typography/css/cssJSLogic.js +1 -1
  179. package/lib/common/basic.module.css +9 -8
  180. package/lib/css.js +0 -2
  181. package/lib/deprecated/Switch/Switch.js +1 -1
  182. package/lib/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap +1 -1
  183. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  184. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  185. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +8 -8
  186. package/lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +1 -1
  187. package/lib/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +1 -1
  188. package/package.json +13 -14
  189. package/es/Layout/Layout.module.css +0 -336
  190. package/es/Layout/__tests__/Box.spec.js +0 -11
  191. package/es/Layout/__tests__/Container.spec.js +0 -11
  192. package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  193. package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  194. package/es/Layout/utils.js +0 -29
  195. package/lib/Layout/Layout.module.css +0 -336
  196. package/lib/Layout/__tests__/Box.spec.js +0 -18
  197. package/lib/Layout/__tests__/Container.spec.js +0 -18
  198. package/lib/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  199. package/lib/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  200. package/lib/Layout/utils.js +0 -59
package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap CHANGED
@@ -3,33 +3,32 @@
3
3
  exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="wrapper effect"
6
+ class="wrapper effect"
7
7
  data-id="multiSelect"
8
8
  data-selector-id="multiSelect"
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"
22
22
  >
23
23
  <span
24
- class=" custmSpan custmSpanMedium
25
- "
24
+ class="custmSpan custmSpanMedium"
26
25
  />
27
26
  <div
28
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
27
+ class="flex row varClass customContainer effect container custmInputWrapper"
29
28
  data-selector-id="textBoxIcon"
30
29
  >
31
30
  <div
32
- class="grow basis shrinkOff"
31
+ class="flexible basis_zero noShrink"
33
32
  data-id="boxComponent"
34
33
  data-selector-id="box"
35
34
  data-test-id="boxComponent"
@@ -39,7 +38,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
39
38
  aria-haspopup="true"
40
39
  aria-required="true"
41
40
  autocomplete="off"
42
- class=" container medium default effect borderColor_default "
41
+ class="container medium default effect borderColor_default"
43
42
  data-id="multiSelect_textBox"
44
43
  data-selector-id="textBoxIcon"
45
44
  data-test-id="multiSelect_textBox"
@@ -50,25 +49,25 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
50
49
  />
51
50
  </div>
52
51
  <div
53
- class="iconContainer shrinkOff"
52
+ class="noShrink iconContainer"
54
53
  data-id="boxComponent"
55
54
  data-selector-id="box"
56
55
  data-test-id="boxComponent"
57
56
  >
58
57
  <div
59
- class="flex cover rowdir"
58
+ class="flex fullSize row"
60
59
  data-id="containerComponent"
61
60
  data-selector-id="container"
62
61
  data-test-id="containerComponent"
63
62
  >
64
63
  <div
65
- class="icon shrinkOff"
64
+ class="noShrink icon"
66
65
  data-id="boxComponent"
67
66
  data-selector-id="box"
68
67
  data-test-id="boxComponent"
69
68
  >
70
69
  <div
71
- class="rightPlaceholder inflex rowdir vCenter"
70
+ class="inlineFlex row alignItems_center rightPlaceholder"
72
71
  data-id="containerComponent"
73
72
  data-selector-id="container"
74
73
  data-test-id="containerComponent"
@@ -86,33 +85,32 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
86
85
  exports[`MultiSelect rendering the defult props 1`] = `
87
86
  <DocumentFragment>
88
87
  <div
89
- class="wrapper effect"
88
+ class="wrapper effect"
90
89
  data-id="multiSelect"
91
90
  data-selector-id="multiSelect"
92
91
  data-test-id="multiSelect"
93
92
  >
94
93
  <div
95
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
94
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
96
95
  data-id="containerComponent"
97
96
  data-selector-id="container"
98
97
  data-test-id="containerComponent"
99
98
  >
100
99
  <div
101
- class="wrapper grow basisAuto shrinkOn"
100
+ class="flexible basis_auto shrink wrapper"
102
101
  data-id="boxComponent"
103
102
  data-selector-id="box"
104
103
  data-test-id="boxComponent"
105
104
  >
106
105
  <span
107
- class=" custmSpan custmSpanMedium
108
- "
106
+ class="custmSpan custmSpanMedium"
109
107
  />
110
108
  <div
111
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
109
+ class="flex row varClass customContainer effect container custmInputWrapper"
112
110
  data-selector-id="textBoxIcon"
113
111
  >
114
112
  <div
115
- class="grow basis shrinkOff"
113
+ class="flexible basis_zero noShrink"
116
114
  data-id="boxComponent"
117
115
  data-selector-id="box"
118
116
  data-test-id="boxComponent"
@@ -122,7 +120,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
122
120
  aria-haspopup="true"
123
121
  aria-required="true"
124
122
  autocomplete="off"
125
- class=" container medium default effect borderColor_default "
123
+ class="container medium default effect borderColor_default"
126
124
  data-id="multiSelect_textBox"
127
125
  data-selector-id="textBoxIcon"
128
126
  data-test-id="multiSelect_textBox"
@@ -133,25 +131,25 @@ exports[`MultiSelect rendering the defult props 1`] = `
133
131
  />
134
132
  </div>
135
133
  <div
136
- class="iconContainer shrinkOff"
134
+ class="noShrink iconContainer"
137
135
  data-id="boxComponent"
138
136
  data-selector-id="box"
139
137
  data-test-id="boxComponent"
140
138
  >
141
139
  <div
142
- class="flex cover rowdir"
140
+ class="flex fullSize row"
143
141
  data-id="containerComponent"
144
142
  data-selector-id="container"
145
143
  data-test-id="containerComponent"
146
144
  >
147
145
  <div
148
- class="icon shrinkOff"
146
+ class="noShrink icon"
149
147
  data-id="boxComponent"
150
148
  data-selector-id="box"
151
149
  data-test-id="boxComponent"
152
150
  >
153
151
  <div
154
- class="rightPlaceholder inflex rowdir vCenter"
152
+ class="inlineFlex row alignItems_center rightPlaceholder"
155
153
  data-id="containerComponent"
156
154
  data-selector-id="container"
157
155
  data-test-id="containerComponent"
@@ -169,26 +167,26 @@ exports[`MultiSelect rendering the defult props 1`] = `
169
167
  exports[`MultiSelect rendering with limit feature 1`] = `
170
168
  <DocumentFragment>
171
169
  <div
172
- class="wrapper effect"
170
+ class="wrapper effect"
173
171
  data-id="multiSelect"
174
172
  data-selector-id="multiSelect"
175
173
  data-test-id="multiSelect"
176
174
  >
177
175
  <div
178
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
176
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
179
177
  data-id="containerComponent"
180
178
  data-selector-id="container"
181
179
  data-test-id="containerComponent"
182
180
  >
183
181
  <div
184
- class="tag medium shrinkOff"
182
+ class="noShrink tag medium"
185
183
  data-id="multiSelect_selectedOptions"
186
184
  data-selector-id="box"
187
185
  data-test-id="multiSelect_selectedOptions"
188
186
  >
189
187
  <div
190
188
  aria-labelledby="7"
191
- class="container effect medium lgRadius danger pointer "
189
+ class="container effect medium lgRadius danger pointer"
192
190
  data-id="tag_Tag"
193
191
  data-selector-id="tag"
194
192
  data-test-id="tag_Tag"
@@ -204,23 +202,21 @@ exports[`MultiSelect rendering with limit feature 1`] = `
204
202
  </div>
205
203
  <button
206
204
  aria-label="Delete"
207
- class="buttonReset close
208
- lgRadiusClose
209
- closedanger"
205
+ class="buttonReset close lgRadiusClose closedanger"
210
206
  data-id="tag_RemoveTag"
211
207
  data-test-id="tag_RemoveTag"
212
208
  type="button"
213
209
  value="text"
214
210
  >
215
211
  <div
216
- class="flex cover coldir both"
212
+ class="flex fullSize column alignItems_center justifyContent_center"
217
213
  data-id="containerComponent"
218
214
  data-selector-id="container"
219
215
  data-test-id="containerComponent"
220
216
  >
221
217
  <i
222
218
  aria-hidden="true"
223
- class="zd_font_icons basic icon-close2 fbold "
219
+ class="zd_font_icons basic icon-close2 fbold"
224
220
  data-id="fontIcon"
225
221
  data-selector-id="fontIcon"
226
222
  data-test-id="fontIcon"
@@ -231,14 +227,14 @@ exports[`MultiSelect rendering with limit feature 1`] = `
231
227
  </div>
232
228
  </div>
233
229
  <div
234
- class="tag medium shrinkOff"
230
+ class="noShrink tag medium"
235
231
  data-id="multiSelect_selectedOptions"
236
232
  data-selector-id="box"
237
233
  data-test-id="multiSelect_selectedOptions"
238
234
  >
239
235
  <div
240
236
  aria-labelledby="8"
241
- class="container effect medium lgRadius danger pointer "
237
+ class="container effect medium lgRadius danger pointer"
242
238
  data-id="tag_Tag"
243
239
  data-selector-id="tag"
244
240
  data-test-id="tag_Tag"
@@ -254,23 +250,21 @@ exports[`MultiSelect rendering with limit feature 1`] = `
254
250
  </div>
255
251
  <button
256
252
  aria-label="Delete"
257
- class="buttonReset close
258
- lgRadiusClose
259
- closedanger"
253
+ class="buttonReset close lgRadiusClose closedanger"
260
254
  data-id="tag_RemoveTag"
261
255
  data-test-id="tag_RemoveTag"
262
256
  type="button"
263
257
  value="text"
264
258
  >
265
259
  <div
266
- class="flex cover coldir both"
260
+ class="flex fullSize column alignItems_center justifyContent_center"
267
261
  data-id="containerComponent"
268
262
  data-selector-id="container"
269
263
  data-test-id="containerComponent"
270
264
  >
271
265
  <i
272
266
  aria-hidden="true"
273
- class="zd_font_icons basic icon-close2 fbold "
267
+ class="zd_font_icons basic icon-close2 fbold"
274
268
  data-id="fontIcon"
275
269
  data-selector-id="fontIcon"
276
270
  data-test-id="fontIcon"
@@ -281,14 +275,14 @@ exports[`MultiSelect rendering with limit feature 1`] = `
281
275
  </div>
282
276
  </div>
283
277
  <div
284
- class="tag medium shrinkOff"
278
+ class="noShrink tag medium"
285
279
  data-id="multiSelect_selectedOptions"
286
280
  data-selector-id="box"
287
281
  data-test-id="multiSelect_selectedOptions"
288
282
  >
289
283
  <div
290
284
  aria-labelledby="9"
291
- class="container effect medium lgRadius danger pointer "
285
+ class="container effect medium lgRadius danger pointer"
292
286
  data-id="tag_Tag"
293
287
  data-selector-id="tag"
294
288
  data-test-id="tag_Tag"
@@ -304,23 +298,21 @@ exports[`MultiSelect rendering with limit feature 1`] = `
304
298
  </div>
305
299
  <button
306
300
  aria-label="Delete"
307
- class="buttonReset close
308
- lgRadiusClose
309
- closedanger"
301
+ class="buttonReset close lgRadiusClose closedanger"
310
302
  data-id="tag_RemoveTag"
311
303
  data-test-id="tag_RemoveTag"
312
304
  type="button"
313
305
  value="text"
314
306
  >
315
307
  <div
316
- class="flex cover coldir both"
308
+ class="flex fullSize column alignItems_center justifyContent_center"
317
309
  data-id="containerComponent"
318
310
  data-selector-id="container"
319
311
  data-test-id="containerComponent"
320
312
  >
321
313
  <i
322
314
  aria-hidden="true"
323
- class="zd_font_icons basic icon-close2 fbold "
315
+ class="zd_font_icons basic icon-close2 fbold"
324
316
  data-id="fontIcon"
325
317
  data-selector-id="fontIcon"
326
318
  data-test-id="fontIcon"
@@ -331,21 +323,20 @@ exports[`MultiSelect rendering with limit feature 1`] = `
331
323
  </div>
332
324
  </div>
333
325
  <div
334
- class="wrapper grow basisAuto shrinkOn"
326
+ class="flexible basis_auto shrink wrapper"
335
327
  data-id="boxComponent"
336
328
  data-selector-id="box"
337
329
  data-test-id="boxComponent"
338
330
  >
339
331
  <span
340
- class=" custmSpan custmSpanMedium clearIconSpace
341
- "
332
+ class="custmSpan custmSpanMedium clearIconSpace"
342
333
  />
343
334
  <div
344
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
335
+ class="flex row varClass customContainer effect container custmInputWrapper"
345
336
  data-selector-id="textBoxIcon"
346
337
  >
347
338
  <div
348
- class="grow basis shrinkOff"
339
+ class="flexible basis_zero noShrink"
349
340
  data-id="boxComponent"
350
341
  data-selector-id="box"
351
342
  data-test-id="boxComponent"
@@ -355,7 +346,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
355
346
  aria-haspopup="true"
356
347
  aria-required="true"
357
348
  autocomplete="off"
358
- class=" container medium default effect borderColor_default "
349
+ class="container medium default effect borderColor_default"
359
350
  data-id="multiSelect_textBox"
360
351
  data-selector-id="textBoxIcon"
361
352
  data-test-id="multiSelect_textBox"
@@ -367,31 +358,31 @@ exports[`MultiSelect rendering with limit feature 1`] = `
367
358
  />
368
359
  </div>
369
360
  <div
370
- class="iconContainer shrinkOff"
361
+ class="noShrink iconContainer"
371
362
  data-id="boxComponent"
372
363
  data-selector-id="box"
373
364
  data-test-id="boxComponent"
374
365
  >
375
366
  <div
376
- class="flex cover rowdir"
367
+ class="flex fullSize row"
377
368
  data-id="containerComponent"
378
369
  data-selector-id="container"
379
370
  data-test-id="containerComponent"
380
371
  >
381
372
  <div
382
- class="icon shrinkOff"
373
+ class="noShrink icon"
383
374
  data-id="boxComponent"
384
375
  data-selector-id="box"
385
376
  data-test-id="boxComponent"
386
377
  >
387
378
  <div
388
- class="rightPlaceholder inflex rowdir vCenter"
379
+ class="inlineFlex row alignItems_center rightPlaceholder"
389
380
  data-id="containerComponent"
390
381
  data-selector-id="container"
391
382
  data-test-id="containerComponent"
392
383
  >
393
384
  <button
394
- class="delete defaultDelete shrinkOff"
385
+ class="noShrink delete defaultDelete"
395
386
  data-id="multiSelect_clearIcon"
396
387
  data-selector-id="box"
397
388
  data-test-id="multiSelect_clearIcon"
@@ -399,7 +390,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
399
390
  >
400
391
  <i
401
392
  aria-hidden="true"
402
- class="zd_font_icons basic icon-delete rtl "
393
+ class="zd_font_icons rtl basic icon-delete"
403
394
  data-id="fontIcon"
404
395
  data-selector-id="fontIcon"
405
396
  data-test-id="fontIcon"
package/lib/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/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap CHANGED
@@ -3,33 +3,32 @@
3
3
  exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class=" wrapper effect"
6
+ class="wrapper effect"
7
7
  data-id="multiSelectWithAvatar"
8
8
  data-selector-id="multiSelectWithAvatar"
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"
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"
22
22
  >
23
23
  <span
24
- class=" custmSpan custmSpanMedium
25
- "
24
+ class="custmSpan custmSpanMedium"
26
25
  />
27
26
  <div
28
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
27
+ class="flex row varClass customContainer effect container custmInputWrapper"
29
28
  data-selector-id="textBoxIcon"
30
29
  >
31
30
  <div
32
- class="grow basis shrinkOff"
31
+ class="flexible basis_zero noShrink"
33
32
  data-id="boxComponent"
34
33
  data-selector-id="box"
35
34
  data-test-id="boxComponent"
@@ -38,7 +37,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
38
37
  aria-expanded="false"
39
38
  aria-haspopup="true"
40
39
  aria-required="true"
41
- class=" container medium default effect borderColor_default "
40
+ class="container medium default effect borderColor_default"
42
41
  data-id="multiSelectWithAvatar_textBox"
43
42
  data-selector-id="textBoxIcon"
44
43
  data-test-id="multiSelectWithAvatar_textBox"
@@ -49,25 +48,25 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
49
48
  />
50
49
  </div>
51
50
  <div
52
- class="iconContainer shrinkOff"
51
+ class="noShrink iconContainer"
53
52
  data-id="boxComponent"
54
53
  data-selector-id="box"
55
54
  data-test-id="boxComponent"
56
55
  >
57
56
  <div
58
- class="flex cover rowdir"
57
+ class="flex fullSize row"
59
58
  data-id="containerComponent"
60
59
  data-selector-id="container"
61
60
  data-test-id="containerComponent"
62
61
  >
63
62
  <div
64
- class="icon shrinkOff"
63
+ class="noShrink icon"
65
64
  data-id="boxComponent"
66
65
  data-selector-id="box"
67
66
  data-test-id="boxComponent"
68
67
  >
69
68
  <div
70
- class="rightPlaceholder inflex rowdir vCenter"
69
+ class="inlineFlex row alignItems_center rightPlaceholder"
71
70
  data-id="containerComponent"
72
71
  data-selector-id="container"
73
72
  data-test-id="containerComponent"
package/lib/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,14 +18,14 @@ 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"
25
25
  >
26
26
  <div
27
27
  aria-labelledby="1"
28
- class="container effect medium lgRadius danger "
28
+ class="container effect medium lgRadius danger"
29
29
  data-id="tag_Tag"
30
30
  data-selector-id="tag"
31
31
  data-test-id="tag_Tag"
@@ -42,14 +42,14 @@ 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"
49
49
  >
50
50
  <div
51
51
  aria-labelledby="2"
52
- class="container effect medium lgRadius danger "
52
+ class="container effect medium lgRadius danger"
53
53
  data-id="tag_Tag"
54
54
  data-selector-id="tag"
55
55
  data-test-id="tag_Tag"
@@ -66,14 +66,14 @@ 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"
73
73
  >
74
74
  <div
75
75
  aria-labelledby="3"
76
- class="container effect medium lgRadius danger "
76
+ class="container effect medium lgRadius danger"
77
77
  data-id="tag_Tag"
78
78
  data-selector-id="tag"
79
79
  data-test-id="tag_Tag"