@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.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 (270) hide show
  1. package/CHANGELOG.md +2038 -0
  2. package/README.md +2 -2048
  3. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +0 -2
  4. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +5 -20
  5. package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css +12 -13
  6. package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css +12 -13
  7. package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css +12 -13
  8. package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css +12 -13
  9. package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css +12 -13
  10. package/assets/Appearance/light/mode/Component_LightMode.module.css +0 -2
  11. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +5 -20
  12. package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css +12 -13
  13. package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css +12 -13
  14. package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css +12 -13
  15. package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css +12 -13
  16. package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css +12 -13
  17. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +0 -2
  18. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +5 -20
  19. package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css +12 -13
  20. package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css +12 -13
  21. package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css +12 -13
  22. package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css +12 -13
  23. package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css +12 -13
  24. package/es/Accordion/Accordion.js +1 -6
  25. package/es/Accordion/AccordionItem.js +1 -6
  26. package/es/Animation/Animation.js +1 -8
  27. package/es/AppContainer/AppContainer.js +1 -6
  28. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  29. package/es/Avatar/Avatar.js +1 -6
  30. package/es/AvatarTeam/AvatarTeam.js +1 -7
  31. package/es/Button/Button.js +1 -6
  32. package/es/Buttongroup/Buttongroup.js +1 -14
  33. package/es/Card/Card.js +1 -9
  34. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  35. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  36. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  37. package/es/CheckBox/CheckBox.js +1 -6
  38. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  39. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +45 -45
  40. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +24 -24
  41. package/es/DateTime/DateWidget.js +0 -10
  42. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  43. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +87 -87
  44. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  45. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +5 -5
  46. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +6 -6
  47. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  48. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +25 -25
  49. package/es/DropDown/DropDownHeading.js +1 -6
  50. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  51. package/es/Heading/Heading.js +1 -6
  52. package/es/Label/Label.js +1 -6
  53. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  54. package/es/ListItem/ListContainer.js +1 -6
  55. package/es/ListItem/ListItem.js +2 -8
  56. package/es/ListItem/ListItemWithAvatar.js +4 -15
  57. package/es/ListItem/ListItemWithCheckBox.js +4 -15
  58. package/es/ListItem/ListItemWithIcon.js +3 -14
  59. package/es/ListItem/ListItemWithRadio.js +4 -15
  60. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +0 -19
  61. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +0 -19
  62. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +0 -17
  63. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +0 -19
  64. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  65. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  66. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -149
  67. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -274
  68. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -149
  69. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -272
  70. package/es/ListItem/props/defaultProps.js +0 -1
  71. package/es/ListItem/props/propTypes.js +3 -12
  72. package/es/Modal/Modal.js +1 -8
  73. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  74. package/es/MultiSelect/AdvancedMultiSelect.js +1 -9
  75. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  76. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  77. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  78. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  79. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  80. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  81. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  82. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  83. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  84. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  85. package/es/RippleEffect/RippleEffect.js +1 -6
  86. package/es/Select/GroupSelect.js +1 -8
  87. package/es/Select/Select.js +1 -10
  88. package/es/Select/SelectWithAvatar.js +1 -9
  89. package/es/Select/SelectWithIcon.js +1 -7
  90. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  91. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +756 -756
  92. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  93. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  94. package/es/Switch/Switch.js +1 -6
  95. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  96. package/es/Tab/Tab.js +14 -62
  97. package/es/Tab/Tab.module.css +4 -72
  98. package/es/Tab/TabWrapper.js +2 -6
  99. package/es/Tab/Tabs.js +14 -60
  100. package/es/Tab/Tabs.module.css +15 -84
  101. package/es/Tab/__tests__/Tab.spec.js +0 -87
  102. package/es/Tab/__tests__/Tabs.spec.js +0 -11
  103. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -289
  104. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  105. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  106. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  107. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  108. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -36
  109. package/es/Tab/props/defaultProps.js +3 -10
  110. package/es/Tab/props/propTypes.js +4 -26
  111. package/es/Tab/utils/tabConfigs.js +0 -11
  112. package/es/Tag/Tag.js +1 -6
  113. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  114. package/es/TextBox/TextBox.js +1 -8
  115. package/es/TextBoxIcon/TextBoxIcon.js +1 -8
  116. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  117. package/es/Textarea/Textarea.js +1 -8
  118. package/es/Tooltip/Tooltip.js +1 -8
  119. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  120. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  121. package/es/semantic/Button/Button.js +1 -6
  122. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  123. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  124. package/es/v1/Button/Button.js +160 -108
  125. package/es/v1/Button/README.md +3 -2
  126. package/es/v1/Button/__tests__/Button.spec.js +14 -6
  127. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +298 -218
  128. package/es/v1/Button/constants/index.js +26 -20
  129. package/es/v1/Button/constants/presets.js +158 -0
  130. package/es/v1/Button/css/Button_v1.module.css +37 -16
  131. package/es/v1/Button/css/cssJSLogic.js +47 -28
  132. package/es/v1/Button/props/defaultProps.js +5 -6
  133. package/es/v1/Button/props/propTypes.js +26 -8
  134. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  135. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  136. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
  137. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
  138. package/es/v1/helpers/colorHelpers/colorHelper.js +114 -138
  139. package/es/v1/helpers/colorHelpers/constants/index.js +45 -4
  140. package/es/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
  141. package/es/v1/shared/{Loader/Loader.js → Spinner/Spinner.js} +5 -5
  142. package/es/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js} +4 -4
  143. package/{lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → es/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap} +2 -2
  144. package/lib/Accordion/Accordion.js +1 -6
  145. package/lib/Accordion/AccordionItem.js +1 -6
  146. package/lib/Animation/Animation.js +1 -8
  147. package/lib/AppContainer/AppContainer.js +1 -6
  148. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  149. package/lib/Avatar/Avatar.js +1 -6
  150. package/lib/AvatarTeam/AvatarTeam.js +1 -7
  151. package/lib/Button/Button.js +1 -7
  152. package/lib/Buttongroup/Buttongroup.js +1 -14
  153. package/lib/Card/Card.js +1 -8
  154. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  155. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  156. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  157. package/lib/CheckBox/CheckBox.js +1 -6
  158. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  159. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +45 -45
  160. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +24 -24
  161. package/lib/DateTime/DateWidget.js +0 -10
  162. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  163. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +87 -87
  164. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  165. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +5 -5
  166. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +6 -6
  167. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  168. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +25 -25
  169. package/lib/DropDown/DropDownHeading.js +1 -6
  170. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  171. package/lib/Heading/Heading.js +1 -6
  172. package/lib/Label/Label.js +1 -6
  173. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  174. package/lib/ListItem/ListContainer.js +1 -7
  175. package/lib/ListItem/ListItem.js +2 -9
  176. package/lib/ListItem/ListItemWithAvatar.js +4 -17
  177. package/lib/ListItem/ListItemWithCheckBox.js +4 -17
  178. package/lib/ListItem/ListItemWithIcon.js +3 -14
  179. package/lib/ListItem/ListItemWithRadio.js +4 -17
  180. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +0 -23
  181. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +0 -23
  182. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +0 -21
  183. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +0 -23
  184. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  185. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  186. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -149
  187. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -274
  188. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -149
  189. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -272
  190. package/lib/ListItem/props/defaultProps.js +0 -1
  191. package/lib/ListItem/props/propTypes.js +4 -12
  192. package/lib/Modal/Modal.js +1 -8
  193. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  194. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -9
  195. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  196. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  197. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  198. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +31 -31
  199. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +6 -6
  200. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  201. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  202. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  203. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  204. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  205. package/lib/RippleEffect/RippleEffect.js +1 -6
  206. package/lib/Select/GroupSelect.js +1 -9
  207. package/lib/Select/Select.js +1 -11
  208. package/lib/Select/SelectWithAvatar.js +1 -9
  209. package/lib/Select/SelectWithIcon.js +1 -7
  210. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +6 -6
  211. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +756 -756
  212. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  213. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +9 -9
  214. package/lib/Switch/Switch.js +1 -6
  215. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  216. package/lib/Tab/Tab.js +12 -65
  217. package/lib/Tab/Tab.module.css +4 -72
  218. package/lib/Tab/TabWrapper.js +2 -6
  219. package/lib/Tab/Tabs.js +11 -57
  220. package/lib/Tab/Tabs.module.css +15 -84
  221. package/lib/Tab/__tests__/Tab.spec.js +0 -88
  222. package/lib/Tab/__tests__/Tabs.spec.js +0 -12
  223. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -289
  224. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  225. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  226. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +36 -36
  227. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  228. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -36
  229. package/lib/Tab/props/defaultProps.js +3 -10
  230. package/lib/Tab/props/propTypes.js +4 -28
  231. package/lib/Tab/utils/tabConfigs.js +2 -15
  232. package/lib/Tag/Tag.js +1 -6
  233. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +46 -46
  234. package/lib/TextBox/TextBox.js +1 -8
  235. package/lib/TextBoxIcon/TextBoxIcon.js +1 -8
  236. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +164 -164
  237. package/lib/Textarea/Textarea.js +1 -8
  238. package/lib/Tooltip/Tooltip.js +1 -8
  239. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  240. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  241. package/lib/semantic/Button/Button.js +1 -6
  242. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +10 -10
  243. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  244. package/lib/v1/Button/Button.js +179 -120
  245. package/lib/v1/Button/README.md +3 -2
  246. package/lib/v1/Button/__tests__/Button.spec.js +66 -52
  247. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +298 -218
  248. package/lib/v1/Button/constants/index.js +31 -28
  249. package/lib/v1/Button/constants/presets.js +176 -0
  250. package/lib/v1/Button/css/Button_v1.module.css +37 -16
  251. package/lib/v1/Button/css/cssJSLogic.js +32 -19
  252. package/lib/v1/Button/props/defaultProps.js +4 -5
  253. package/lib/v1/Button/props/propTypes.js +41 -7
  254. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  255. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  256. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +40 -40
  257. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +25 -25
  258. package/lib/v1/helpers/colorHelpers/colorHelper.js +125 -153
  259. package/lib/v1/helpers/colorHelpers/constants/index.js +45 -4
  260. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +35 -35
  261. package/lib/v1/shared/{Loader/Loader.js → Spinner/Spinner.js} +8 -8
  262. package/lib/v1/shared/{Loader/__tests__/Loader.spec.js → Spinner/__tests__/Spinner.spec.js} +4 -4
  263. package/{es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap → lib/v1/shared/Spinner/__tests__/__snapshots__/Spinner.spec.js.snap} +2 -2
  264. package/package.json +13 -13
  265. /package/es/v1/shared/{Loader/Loader_v1.module.css → Spinner/Spinner_v1.module.css} +0 -0
  266. /package/es/v1/shared/{Loader → Spinner}/props/defaultProps.js +0 -0
  267. /package/es/v1/shared/{Loader → Spinner}/props/propTypes.js +0 -0
  268. /package/lib/v1/shared/{Loader/Loader_v1.module.css → Spinner/Spinner_v1.module.css} +0 -0
  269. /package/lib/v1/shared/{Loader → Spinner}/props/defaultProps.js +0 -0
  270. /package/lib/v1/shared/{Loader → Spinner}/props/propTypes.js +0 -0
package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
9
9
  data-test-id="multiSelect"
10
10
  >
11
11
  <div
12
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
12
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-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="flexible basis_auto shrink wrapper"
18
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
19
19
  data-id="boxComponent"
20
20
  data-selector-id="box"
21
21
  data-test-id="boxComponent"
@@ -24,11 +24,11 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
24
24
  class="custmSpan custmSpanMedium"
25
25
  />
26
26
  <div
27
- class="flex row varClass customContainer effect container custmInputWrapper"
27
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
28
28
  data-selector-id="textBoxIcon"
29
29
  >
30
30
  <div
31
- class="flexible basis_zero noShrink"
31
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
32
32
  data-id="boxComponent"
33
33
  data-selector-id="box"
34
34
  data-test-id="boxComponent"
@@ -49,25 +49,25 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
49
49
  />
50
50
  </div>
51
51
  <div
52
- class="noShrink iconContainer"
52
+ class="d-flex-shrink-0 iconContainer"
53
53
  data-id="boxComponent"
54
54
  data-selector-id="box"
55
55
  data-test-id="boxComponent"
56
56
  >
57
57
  <div
58
- class="flex fullSize row"
58
+ class="d-flex d-h-full d-w-full d-flex-row"
59
59
  data-id="containerComponent"
60
60
  data-selector-id="container"
61
61
  data-test-id="containerComponent"
62
62
  >
63
63
  <div
64
- class="noShrink icon"
64
+ class="d-flex-shrink-0 icon"
65
65
  data-id="boxComponent"
66
66
  data-selector-id="box"
67
67
  data-test-id="boxComponent"
68
68
  >
69
69
  <div
70
- class="inlineFlex row alignItems_center rightPlaceholder"
70
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
71
71
  data-id="containerComponent"
72
72
  data-selector-id="container"
73
73
  data-test-id="containerComponent"
@@ -91,13 +91,13 @@ exports[`MultiSelect rendering the defult props 1`] = `
91
91
  data-test-id="multiSelect"
92
92
  >
93
93
  <div
94
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
94
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
95
95
  data-id="containerComponent"
96
96
  data-selector-id="container"
97
97
  data-test-id="containerComponent"
98
98
  >
99
99
  <div
100
- class="flexible basis_auto shrink wrapper"
100
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
101
101
  data-id="boxComponent"
102
102
  data-selector-id="box"
103
103
  data-test-id="boxComponent"
@@ -106,11 +106,11 @@ exports[`MultiSelect rendering the defult props 1`] = `
106
106
  class="custmSpan custmSpanMedium"
107
107
  />
108
108
  <div
109
- class="flex row varClass customContainer effect container custmInputWrapper"
109
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
110
110
  data-selector-id="textBoxIcon"
111
111
  >
112
112
  <div
113
- class="flexible basis_zero noShrink"
113
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
114
114
  data-id="boxComponent"
115
115
  data-selector-id="box"
116
116
  data-test-id="boxComponent"
@@ -131,25 +131,25 @@ exports[`MultiSelect rendering the defult props 1`] = `
131
131
  />
132
132
  </div>
133
133
  <div
134
- class="noShrink iconContainer"
134
+ class="d-flex-shrink-0 iconContainer"
135
135
  data-id="boxComponent"
136
136
  data-selector-id="box"
137
137
  data-test-id="boxComponent"
138
138
  >
139
139
  <div
140
- class="flex fullSize row"
140
+ class="d-flex d-h-full d-w-full d-flex-row"
141
141
  data-id="containerComponent"
142
142
  data-selector-id="container"
143
143
  data-test-id="containerComponent"
144
144
  >
145
145
  <div
146
- class="noShrink icon"
146
+ class="d-flex-shrink-0 icon"
147
147
  data-id="boxComponent"
148
148
  data-selector-id="box"
149
149
  data-test-id="boxComponent"
150
150
  >
151
151
  <div
152
- class="inlineFlex row alignItems_center rightPlaceholder"
152
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
153
153
  data-id="containerComponent"
154
154
  data-selector-id="container"
155
155
  data-test-id="containerComponent"
@@ -173,13 +173,13 @@ exports[`MultiSelect rendering with limit feature 1`] = `
173
173
  data-test-id="multiSelect"
174
174
  >
175
175
  <div
176
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
176
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
177
177
  data-id="containerComponent"
178
178
  data-selector-id="container"
179
179
  data-test-id="containerComponent"
180
180
  >
181
181
  <div
182
- class="noShrink tag medium"
182
+ class="d-flex-shrink-0 tag medium"
183
183
  data-id="multiSelect_selectedOptions"
184
184
  data-selector-id="box"
185
185
  data-test-id="multiSelect_selectedOptions"
@@ -209,7 +209,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
209
209
  value="text"
210
210
  >
211
211
  <div
212
- class="flex fullSize column alignItems_center justifyContent_center"
212
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
213
213
  data-id="containerComponent"
214
214
  data-selector-id="container"
215
215
  data-test-id="containerComponent"
@@ -227,7 +227,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
227
227
  </div>
228
228
  </div>
229
229
  <div
230
- class="noShrink tag medium"
230
+ class="d-flex-shrink-0 tag medium"
231
231
  data-id="multiSelect_selectedOptions"
232
232
  data-selector-id="box"
233
233
  data-test-id="multiSelect_selectedOptions"
@@ -257,7 +257,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
257
257
  value="text"
258
258
  >
259
259
  <div
260
- class="flex fullSize column alignItems_center justifyContent_center"
260
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
261
261
  data-id="containerComponent"
262
262
  data-selector-id="container"
263
263
  data-test-id="containerComponent"
@@ -275,7 +275,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
275
275
  </div>
276
276
  </div>
277
277
  <div
278
- class="noShrink tag medium"
278
+ class="d-flex-shrink-0 tag medium"
279
279
  data-id="multiSelect_selectedOptions"
280
280
  data-selector-id="box"
281
281
  data-test-id="multiSelect_selectedOptions"
@@ -305,7 +305,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
305
305
  value="text"
306
306
  >
307
307
  <div
308
- class="flex fullSize column alignItems_center justifyContent_center"
308
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
309
309
  data-id="containerComponent"
310
310
  data-selector-id="container"
311
311
  data-test-id="containerComponent"
@@ -323,7 +323,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
323
323
  </div>
324
324
  </div>
325
325
  <div
326
- class="flexible basis_auto shrink wrapper"
326
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
327
327
  data-id="boxComponent"
328
328
  data-selector-id="box"
329
329
  data-test-id="boxComponent"
@@ -332,11 +332,11 @@ exports[`MultiSelect rendering with limit feature 1`] = `
332
332
  class="custmSpan custmSpanMedium clearIconSpace"
333
333
  />
334
334
  <div
335
- class="flex row varClass customContainer effect container custmInputWrapper"
335
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
336
336
  data-selector-id="textBoxIcon"
337
337
  >
338
338
  <div
339
- class="flexible basis_zero noShrink"
339
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
340
340
  data-id="boxComponent"
341
341
  data-selector-id="box"
342
342
  data-test-id="boxComponent"
@@ -358,31 +358,31 @@ exports[`MultiSelect rendering with limit feature 1`] = `
358
358
  />
359
359
  </div>
360
360
  <div
361
- class="noShrink iconContainer"
361
+ class="d-flex-shrink-0 iconContainer"
362
362
  data-id="boxComponent"
363
363
  data-selector-id="box"
364
364
  data-test-id="boxComponent"
365
365
  >
366
366
  <div
367
- class="flex fullSize row"
367
+ class="d-flex d-h-full d-w-full d-flex-row"
368
368
  data-id="containerComponent"
369
369
  data-selector-id="container"
370
370
  data-test-id="containerComponent"
371
371
  >
372
372
  <div
373
- class="noShrink icon"
373
+ class="d-flex-shrink-0 icon"
374
374
  data-id="boxComponent"
375
375
  data-selector-id="box"
376
376
  data-test-id="boxComponent"
377
377
  >
378
378
  <div
379
- class="inlineFlex row alignItems_center rightPlaceholder"
379
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
380
380
  data-id="containerComponent"
381
381
  data-selector-id="container"
382
382
  data-test-id="containerComponent"
383
383
  >
384
384
  <button
385
- class="noShrink delete defaultDelete"
385
+ class="d-flex-shrink-0 delete defaultDelete"
386
386
  data-id="multiSelect_clearIcon"
387
387
  data-selector-id="box"
388
388
  data-test-id="multiSelect_clearIcon"
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="flex row alignItems_center list medium default withBorder selectAll"
6
+ class="d-flex d-flex-row d-items-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="noShrink contentWrapper"
15
+ class="d-flex-shrink-0 contentWrapper"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
@@ -24,7 +24,7 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
24
24
  data-test-id="MultiSelectHeader_selectAll_Icon"
25
25
  >
26
26
  <div
27
- class="noShrink alignSelf_start iconWrapper"
27
+ class="d-flex-shrink-0 d-self-start iconWrapper"
28
28
  data-id="boxComponent"
29
29
  data-selector-id="box"
30
30
  data-test-id="boxComponent"
@@ -40,19 +40,19 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
40
40
  </div>
41
41
  </div>
42
42
  <div
43
- class="flexible basis_zero noShrink leftBox selfAlign_center"
43
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 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="noShrink titleBox"
49
+ class="d-flex-shrink-0 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="basis_auto shrink value"
55
+ class="d-basis-auto d-min-w-0 d-flex-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
@@ -9,13 +9,13 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
9
9
  data-test-id="multiSelectWithAvatar"
10
10
  >
11
11
  <div
12
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
12
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-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="flexible basis_auto shrink wrapper"
18
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
19
19
  data-id="boxComponent"
20
20
  data-selector-id="box"
21
21
  data-test-id="boxComponent"
@@ -24,11 +24,11 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
24
24
  class="custmSpan custmSpanMedium"
25
25
  />
26
26
  <div
27
- class="flex row varClass customContainer effect container custmInputWrapper"
27
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
28
28
  data-selector-id="textBoxIcon"
29
29
  >
30
30
  <div
31
- class="flexible basis_zero noShrink"
31
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
32
32
  data-id="boxComponent"
33
33
  data-selector-id="box"
34
34
  data-test-id="boxComponent"
@@ -48,25 +48,25 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
48
48
  />
49
49
  </div>
50
50
  <div
51
- class="noShrink iconContainer"
51
+ class="d-flex-shrink-0 iconContainer"
52
52
  data-id="boxComponent"
53
53
  data-selector-id="box"
54
54
  data-test-id="boxComponent"
55
55
  >
56
56
  <div
57
- class="flex fullSize row"
57
+ class="d-flex d-h-full d-w-full d-flex-row"
58
58
  data-id="containerComponent"
59
59
  data-selector-id="container"
60
60
  data-test-id="containerComponent"
61
61
  >
62
62
  <div
63
- class="noShrink icon"
63
+ class="d-flex-shrink-0 icon"
64
64
  data-id="boxComponent"
65
65
  data-selector-id="box"
66
66
  data-test-id="boxComponent"
67
67
  >
68
68
  <div
69
- class="inlineFlex row alignItems_center rightPlaceholder"
69
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
70
70
  data-id="containerComponent"
71
71
  data-selector-id="container"
72
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="noShrink tag medium"
6
+ class="d-flex-shrink-0 tag medium"
7
7
  data-id="selectedOptions"
8
8
  data-selector-id="box"
9
9
  data-test-id="selectedOptions"
@@ -18,7 +18,7 @@ exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
18
18
  exports[`SelectedOptions rendering the basic select options 1`] = `
19
19
  <DocumentFragment>
20
20
  <div
21
- class="noShrink tag medium"
21
+ class="d-flex-shrink-0 tag medium"
22
22
  data-id="selectedOptions"
23
23
  data-selector-id="box"
24
24
  data-test-id="selectedOptions"
@@ -42,7 +42,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
42
42
  </div>
43
43
  </div>
44
44
  <div
45
- class="noShrink tag medium"
45
+ class="d-flex-shrink-0 tag medium"
46
46
  data-id="selectedOptions"
47
47
  data-selector-id="box"
48
48
  data-test-id="selectedOptions"
@@ -66,7 +66,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
66
66
  </div>
67
67
  </div>
68
68
  <div
69
- class="noShrink tag medium"
69
+ class="d-flex-shrink-0 tag medium"
70
70
  data-id="selectedOptions"
71
71
  data-selector-id="box"
72
72
  data-test-id="selectedOptions"