@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/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap CHANGED
@@ -3,33 +3,32 @@
3
3
  exports[`ColorMultiSelect Should render the default selected value 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[`ColorMultiSelect Should render the default selected value 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[`ColorMultiSelect Should render the default selected value 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,26 +85,26 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
86
85
  exports[`ColorMultiSelect Should render the selected value 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="tag medium shrinkOff"
100
+ class="noShrink tag medium"
102
101
  data-id="multiSelect_selectedOptions"
103
102
  data-selector-id="box"
104
103
  data-test-id="multiSelect_selectedOptions"
105
104
  >
106
105
  <div
107
106
  aria-labelledby="7"
108
- class="container effect medium lgRadius danger pointer "
107
+ class="container effect medium lgRadius danger pointer"
109
108
  data-id="tag_Tag"
110
109
  data-selector-id="tag"
111
110
  data-test-id="tag_Tag"
@@ -122,23 +121,21 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
122
121
  </div>
123
122
  <button
124
123
  aria-label="Delete"
125
- class="buttonReset close
126
- lgRadiusClose
127
- closedanger"
124
+ class="buttonReset close lgRadiusClose closedanger"
128
125
  data-id="tag_RemoveTag"
129
126
  data-test-id="tag_RemoveTag"
130
127
  type="button"
131
128
  value="text"
132
129
  >
133
130
  <div
134
- class="flex cover coldir both"
131
+ class="flex fullSize column alignItems_center justifyContent_center"
135
132
  data-id="containerComponent"
136
133
  data-selector-id="container"
137
134
  data-test-id="containerComponent"
138
135
  >
139
136
  <i
140
137
  aria-hidden="true"
141
- class="zd_font_icons basic icon-close2 fbold "
138
+ class="zd_font_icons basic icon-close2 fbold"
142
139
  data-id="fontIcon"
143
140
  data-selector-id="fontIcon"
144
141
  data-test-id="fontIcon"
@@ -149,14 +146,14 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
149
146
  </div>
150
147
  </div>
151
148
  <div
152
- class="tag medium shrinkOff"
149
+ class="noShrink tag medium"
153
150
  data-id="multiSelect_selectedOptions"
154
151
  data-selector-id="box"
155
152
  data-test-id="multiSelect_selectedOptions"
156
153
  >
157
154
  <div
158
155
  aria-labelledby="8"
159
- class="container effect medium lgRadius danger pointer "
156
+ class="container effect medium lgRadius danger pointer"
160
157
  data-id="tag_Tag"
161
158
  data-selector-id="tag"
162
159
  data-test-id="tag_Tag"
@@ -173,23 +170,21 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
173
170
  </div>
174
171
  <button
175
172
  aria-label="Delete"
176
- class="buttonReset close
177
- lgRadiusClose
178
- closedanger"
173
+ class="buttonReset close lgRadiusClose closedanger"
179
174
  data-id="tag_RemoveTag"
180
175
  data-test-id="tag_RemoveTag"
181
176
  type="button"
182
177
  value="text"
183
178
  >
184
179
  <div
185
- class="flex cover coldir both"
180
+ class="flex fullSize column alignItems_center justifyContent_center"
186
181
  data-id="containerComponent"
187
182
  data-selector-id="container"
188
183
  data-test-id="containerComponent"
189
184
  >
190
185
  <i
191
186
  aria-hidden="true"
192
- class="zd_font_icons basic icon-close2 fbold "
187
+ class="zd_font_icons basic icon-close2 fbold"
193
188
  data-id="fontIcon"
194
189
  data-selector-id="fontIcon"
195
190
  data-test-id="fontIcon"
@@ -200,21 +195,20 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
200
195
  </div>
201
196
  </div>
202
197
  <div
203
- class="wrapper grow basisAuto shrinkOn"
198
+ class="flexible basis_auto shrink wrapper"
204
199
  data-id="boxComponent"
205
200
  data-selector-id="box"
206
201
  data-test-id="boxComponent"
207
202
  >
208
203
  <span
209
- class=" custmSpan custmSpanMedium clearIconSpace
210
- "
204
+ class="custmSpan custmSpanMedium clearIconSpace"
211
205
  />
212
206
  <div
213
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
207
+ class="flex row varClass customContainer effect container custmInputWrapper"
214
208
  data-selector-id="textBoxIcon"
215
209
  >
216
210
  <div
217
- class="grow basis shrinkOff"
211
+ class="flexible basis_zero noShrink"
218
212
  data-id="boxComponent"
219
213
  data-selector-id="box"
220
214
  data-test-id="boxComponent"
@@ -224,7 +218,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
224
218
  aria-haspopup="true"
225
219
  aria-required="true"
226
220
  autocomplete="off"
227
- class=" container medium default effect borderColor_default "
221
+ class="container medium default effect borderColor_default"
228
222
  data-id="multiSelect_textBox"
229
223
  data-selector-id="textBoxIcon"
230
224
  data-test-id="multiSelect_textBox"
@@ -236,31 +230,31 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
236
230
  />
237
231
  </div>
238
232
  <div
239
- class="iconContainer shrinkOff"
233
+ class="noShrink iconContainer"
240
234
  data-id="boxComponent"
241
235
  data-selector-id="box"
242
236
  data-test-id="boxComponent"
243
237
  >
244
238
  <div
245
- class="flex cover rowdir"
239
+ class="flex fullSize row"
246
240
  data-id="containerComponent"
247
241
  data-selector-id="container"
248
242
  data-test-id="containerComponent"
249
243
  >
250
244
  <div
251
- class="icon shrinkOff"
245
+ class="noShrink icon"
252
246
  data-id="boxComponent"
253
247
  data-selector-id="box"
254
248
  data-test-id="boxComponent"
255
249
  >
256
250
  <div
257
- class="rightPlaceholder inflex rowdir vCenter"
251
+ class="inlineFlex row alignItems_center rightPlaceholder"
258
252
  data-id="containerComponent"
259
253
  data-selector-id="container"
260
254
  data-test-id="containerComponent"
261
255
  >
262
256
  <button
263
- class="delete defaultDelete shrinkOff"
257
+ class="noShrink delete defaultDelete"
264
258
  data-id="multiSelect_clearIcon"
265
259
  data-selector-id="box"
266
260
  data-test-id="multiSelect_clearIcon"
@@ -268,7 +262,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
268
262
  >
269
263
  <i
270
264
  aria-hidden="true"
271
- class="zd_font_icons basic icon-delete rtl "
265
+ class="zd_font_icons rtl basic icon-delete"
272
266
  data-id="fontIcon"
273
267
  data-selector-id="fontIcon"
274
268
  data-test-id="fontIcon"
@@ -289,33 +283,32 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
289
283
  exports[`ColorMultiSelect rendering the defult props 1`] = `
290
284
  <DocumentFragment>
291
285
  <div
292
- class="wrapper effect"
286
+ class="wrapper effect"
293
287
  data-id="multiSelect"
294
288
  data-selector-id="multiSelect"
295
289
  data-test-id="multiSelect"
296
290
  >
297
291
  <div
298
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
292
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
299
293
  data-id="containerComponent"
300
294
  data-selector-id="container"
301
295
  data-test-id="containerComponent"
302
296
  >
303
297
  <div
304
- class="wrapper grow basisAuto shrinkOn"
298
+ class="flexible basis_auto shrink wrapper"
305
299
  data-id="boxComponent"
306
300
  data-selector-id="box"
307
301
  data-test-id="boxComponent"
308
302
  >
309
303
  <span
310
- class=" custmSpan custmSpanMedium
311
- "
304
+ class="custmSpan custmSpanMedium"
312
305
  />
313
306
  <div
314
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
307
+ class="flex row varClass customContainer effect container custmInputWrapper"
315
308
  data-selector-id="textBoxIcon"
316
309
  >
317
310
  <div
318
- class="grow basis shrinkOff"
311
+ class="flexible basis_zero noShrink"
319
312
  data-id="boxComponent"
320
313
  data-selector-id="box"
321
314
  data-test-id="boxComponent"
@@ -325,7 +318,7 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
325
318
  aria-haspopup="true"
326
319
  aria-required="true"
327
320
  autocomplete="off"
328
- class=" container medium default effect borderColor_default "
321
+ class="container medium default effect borderColor_default"
329
322
  data-id="multiSelect_textBox"
330
323
  data-selector-id="textBoxIcon"
331
324
  data-test-id="multiSelect_textBox"
@@ -336,25 +329,25 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
336
329
  />
337
330
  </div>
338
331
  <div
339
- class="iconContainer shrinkOff"
332
+ class="noShrink iconContainer"
340
333
  data-id="boxComponent"
341
334
  data-selector-id="box"
342
335
  data-test-id="boxComponent"
343
336
  >
344
337
  <div
345
- class="flex cover rowdir"
338
+ class="flex fullSize row"
346
339
  data-id="containerComponent"
347
340
  data-selector-id="container"
348
341
  data-test-id="containerComponent"
349
342
  >
350
343
  <div
351
- class="icon shrinkOff"
344
+ class="noShrink icon"
352
345
  data-id="boxComponent"
353
346
  data-selector-id="box"
354
347
  data-test-id="boxComponent"
355
348
  >
356
349
  <div
357
- class="rightPlaceholder inflex rowdir vCenter"
350
+ class="inlineFlex row alignItems_center rightPlaceholder"
358
351
  data-id="containerComponent"
359
352
  data-selector-id="container"
360
353
  data-test-id="containerComponent"
@@ -372,33 +365,32 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
372
365
  exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
373
366
  <DocumentFragment>
374
367
  <div
375
- class="wrapper effect"
368
+ class="wrapper effect"
376
369
  data-id="multiSelect"
377
370
  data-selector-id="multiSelect"
378
371
  data-test-id="multiSelect"
379
372
  >
380
373
  <div
381
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
374
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
382
375
  data-id="containerComponent"
383
376
  data-selector-id="container"
384
377
  data-test-id="containerComponent"
385
378
  >
386
379
  <div
387
- class="wrapper grow basisAuto shrinkOn"
380
+ class="flexible basis_auto shrink wrapper"
388
381
  data-id="boxComponent"
389
382
  data-selector-id="box"
390
383
  data-test-id="boxComponent"
391
384
  >
392
385
  <span
393
- class=" custmSpan custmSpanMedium
394
- "
386
+ class="custmSpan custmSpanMedium"
395
387
  />
396
388
  <div
397
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
389
+ class="flex row varClass customContainer effect container custmInputWrapper"
398
390
  data-selector-id="textBoxIcon"
399
391
  >
400
392
  <div
401
- class="grow basis shrinkOff"
393
+ class="flexible basis_zero noShrink"
402
394
  data-id="boxComponent"
403
395
  data-selector-id="box"
404
396
  data-test-id="boxComponent"
@@ -408,7 +400,7 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
408
400
  aria-haspopup="true"
409
401
  aria-required="true"
410
402
  autocomplete="off"
411
- class=" container medium default effect borderColor_default "
403
+ class="container medium default effect borderColor_default"
412
404
  data-id="multiSelect_textBox"
413
405
  data-selector-id="textBoxIcon"
414
406
  data-test-id="multiSelect_textBox"
@@ -419,25 +411,25 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
419
411
  />
420
412
  </div>
421
413
  <div
422
- class="iconContainer shrinkOff"
414
+ class="noShrink iconContainer"
423
415
  data-id="boxComponent"
424
416
  data-selector-id="box"
425
417
  data-test-id="boxComponent"
426
418
  >
427
419
  <div
428
- class="flex cover rowdir"
420
+ class="flex fullSize row"
429
421
  data-id="containerComponent"
430
422
  data-selector-id="container"
431
423
  data-test-id="containerComponent"
432
424
  >
433
425
  <div
434
- class="icon shrinkOff"
426
+ class="noShrink icon"
435
427
  data-id="boxComponent"
436
428
  data-selector-id="box"
437
429
  data-test-id="boxComponent"
438
430
  >
439
431
  <div
440
- class="rightPlaceholder inflex rowdir vCenter"
432
+ class="inlineFlex row alignItems_center rightPlaceholder"
441
433
  data-id="containerComponent"
442
434
  data-selector-id="container"
443
435
  data-test-id="containerComponent"
@@ -455,33 +447,32 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
455
447
  exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
456
448
  <DocumentFragment>
457
449
  <div
458
- class="wrapper effect"
450
+ class="wrapper effect"
459
451
  data-id="multiSelect"
460
452
  data-selector-id="multiSelect"
461
453
  data-test-id="multiSelect"
462
454
  >
463
455
  <div
464
- class="container medium borderColor_default hasBorder flex cover rowdir wrap vCenter"
456
+ class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
465
457
  data-id="containerComponent"
466
458
  data-selector-id="container"
467
459
  data-test-id="containerComponent"
468
460
  >
469
461
  <div
470
- class="wrapper grow basisAuto shrinkOn"
462
+ class="flexible basis_auto shrink wrapper"
471
463
  data-id="boxComponent"
472
464
  data-selector-id="box"
473
465
  data-test-id="boxComponent"
474
466
  >
475
467
  <span
476
- class=" custmSpan custmSpanMedium
477
- "
468
+ class="custmSpan custmSpanMedium"
478
469
  />
479
470
  <div
480
- class="varClass customContainer effect container custmInputWrapper flex rowdir"
471
+ class="flex row varClass customContainer effect container custmInputWrapper"
481
472
  data-selector-id="textBoxIcon"
482
473
  >
483
474
  <div
484
- class="grow basis shrinkOff"
475
+ class="flexible basis_zero noShrink"
485
476
  data-id="boxComponent"
486
477
  data-selector-id="box"
487
478
  data-test-id="boxComponent"
@@ -491,7 +482,7 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
491
482
  aria-haspopup="true"
492
483
  aria-required="true"
493
484
  autocomplete="off"
494
- class=" container medium default effect borderColor_default "
485
+ class="container medium default effect borderColor_default"
495
486
  data-id="multiSelect_textBox"
496
487
  data-selector-id="textBoxIcon"
497
488
  data-test-id="multiSelect_textBox"
@@ -502,25 +493,25 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
502
493
  />
503
494
  </div>
504
495
  <div
505
- class="iconContainer shrinkOff"
496
+ class="noShrink iconContainer"
506
497
  data-id="boxComponent"
507
498
  data-selector-id="box"
508
499
  data-test-id="boxComponent"
509
500
  >
510
501
  <div
511
- class="flex cover rowdir"
502
+ class="flex fullSize row"
512
503
  data-id="containerComponent"
513
504
  data-selector-id="container"
514
505
  data-test-id="containerComponent"
515
506
  >
516
507
  <div
517
- class="icon shrinkOff"
508
+ class="noShrink icon"
518
509
  data-id="boxComponent"
519
510
  data-selector-id="box"
520
511
  data-test-id="boxComponent"
521
512
  >
522
513
  <div
523
- class="rightPlaceholder inflex rowdir vCenter"
514
+ class="inlineFlex row alignItems_center rightPlaceholder"
524
515
  data-id="containerComponent"
525
516
  data-selector-id="container"
526
517
  data-test-id="containerComponent"