@zohodesk/components 1.0.0-temp-256 → 1.0.0-temp-256.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 (385) hide show
  1. package/README.md +51 -1
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +323 -330
  3. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +79 -79
  4. package/assets/Appearance/dark/themes/blue/blue_ComponentTheme_DarkTheme.module.css +29 -33
  5. package/assets/Appearance/dark/themes/blue/blue_componentsCTA_DarkModifyCategory.module.css +14 -13
  6. package/assets/Appearance/dark/themes/green/green_ComponentTheme_DarkTheme.module.css +29 -33
  7. package/assets/Appearance/dark/themes/green/green_componentsCTA_DarkModifyCategory.module.css +14 -13
  8. package/assets/Appearance/dark/themes/orange/orange_ComponentTheme_DarkTheme.module.css +29 -33
  9. package/assets/Appearance/dark/themes/orange/orange_componentsCTA_DarkModifyCategory.module.css +14 -13
  10. package/assets/Appearance/dark/themes/red/red_ComponentTheme_DarkTheme.module.css +29 -33
  11. package/assets/Appearance/dark/themes/red/red_componentsCTA_DarkModifyCategory.module.css +14 -13
  12. package/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css +29 -33
  13. package/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css +14 -13
  14. package/assets/Appearance/light/mode/Component_LightMode.module.css +323 -330
  15. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +79 -79
  16. package/assets/Appearance/light/themes/blue/blue_ComponentTheme_LightTheme.module.css +29 -33
  17. package/assets/Appearance/light/themes/blue/blue_componentsCTA_LightModifyCategory.module.css +14 -13
  18. package/assets/Appearance/light/themes/green/green_ComponentTheme_LightTheme.module.css +29 -33
  19. package/assets/Appearance/light/themes/green/green_componentsCTA_LightModifyCategory.module.css +14 -13
  20. package/assets/Appearance/light/themes/orange/orange_ComponentTheme_LightTheme.module.css +29 -33
  21. package/assets/Appearance/light/themes/orange/orange_componentsCTA_LightModifyCategory.module.css +14 -13
  22. package/assets/Appearance/light/themes/red/red_ComponentTheme_LightTheme.module.css +29 -33
  23. package/assets/Appearance/light/themes/red/red_componentsCTA_LightModifyCategory.module.css +14 -13
  24. package/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css +29 -33
  25. package/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css +14 -13
  26. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +323 -330
  27. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +79 -79
  28. package/assets/Appearance/pureDark/themes/blue/blue_ComponentTheme_PureDarkTheme.module.css +29 -33
  29. package/assets/Appearance/pureDark/themes/blue/blue_componentsCTA_PureDarkModifyCategory.module.css +14 -13
  30. package/assets/Appearance/pureDark/themes/green/green_ComponentTheme_PureDarkTheme.module.css +29 -33
  31. package/assets/Appearance/pureDark/themes/green/green_componentsCTA_PureDarkModifyCategory.module.css +14 -13
  32. package/assets/Appearance/pureDark/themes/orange/orange_ComponentTheme_PureDarkTheme.module.css +29 -33
  33. package/assets/Appearance/pureDark/themes/orange/orange_componentsCTA_PureDarkModifyCategory.module.css +14 -13
  34. package/assets/Appearance/pureDark/themes/red/red_ComponentTheme_PureDarkTheme.module.css +29 -33
  35. package/assets/Appearance/pureDark/themes/red/red_componentsCTA_PureDarkModifyCategory.module.css +14 -13
  36. package/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css +29 -33
  37. package/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css +14 -13
  38. package/es/Accordion/Accordion.js +2 -1
  39. package/es/Accordion/AccordionItem.js +3 -2
  40. package/es/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +1 -1
  41. package/es/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +1 -1
  42. package/es/Animation/__tests__/__snapshots__/Animation.spec.js.snap +1 -1
  43. package/es/AppContainer/AppContainer.js +2 -1
  44. package/es/AppContainer/AppContainer.module.css +9 -3
  45. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +23 -23
  46. package/es/Avatar/Avatar.js +5 -4
  47. package/es/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +43 -43
  48. package/es/AvatarTeam/AvatarTeam.js +4 -3
  49. package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +74 -98
  50. package/es/Button/Button.js +5 -4
  51. package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +4 -4
  52. package/es/Button/css/cssJSLogic.js +6 -6
  53. package/es/Buttongroup/Buttongroup.js +4 -3
  54. package/es/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +9 -9
  55. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +18 -18
  56. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +13 -13
  57. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +5 -5
  58. package/es/CheckBox/CheckBox.js +9 -8
  59. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +154 -251
  60. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +72 -81
  61. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +62 -62
  62. package/es/ColorSelect/_shared/ColorIndicator/ColorIndicator.js +2 -1
  63. package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +10 -10
  64. package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +14 -14
  65. package/es/DateTime/CalendarView.js +4 -3
  66. package/es/DateTime/DateTime.js +5 -4
  67. package/es/DateTime/DateTimePopupFooter.js +2 -1
  68. package/es/DateTime/DateWidget.js +4 -3
  69. package/es/DateTime/Time.js +2 -1
  70. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +50 -50
  71. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +103 -103
  72. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +2 -2
  73. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +10 -10
  74. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +10 -10
  75. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +2 -2
  76. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +35 -35
  77. package/es/DropBox/DropBox.js +13 -5
  78. package/es/DropBox/DropBoxElement/DropBoxElement.js +21 -8
  79. package/es/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap +1 -1
  80. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +6 -6
  81. package/es/DropBox/DropBoxElement/props/propTypes.js +2 -1
  82. package/es/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap +1 -1
  83. package/es/DropDown/DropDown.js +2 -1
  84. package/es/DropDown/DropDownHeading.js +2 -1
  85. package/es/DropDown/DropDownItem.js +6 -5
  86. package/es/DropDown/DropDownSearch.js +2 -1
  87. package/es/DropDown/DropDownSeparator.js +2 -1
  88. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +3 -3
  89. package/es/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap +2 -2
  90. package/es/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +2 -2
  91. package/es/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap +3 -3
  92. package/es/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap +2 -2
  93. package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap +8 -8
  94. package/es/Label/Label.js +3 -2
  95. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +25 -49
  96. package/es/Layout/Box.js +1 -115
  97. package/es/Layout/Container.js +1 -132
  98. package/es/Layout/props/defaultProps.js +1 -16
  99. package/es/Layout/props/propTypes.js +1 -46
  100. package/es/ListItem/ListItem.js +2 -1
  101. package/es/ListItem/ListItemWithAvatar.js +11 -4
  102. package/es/ListItem/ListItemWithCheckBox.js +11 -4
  103. package/es/ListItem/ListItemWithIcon.js +11 -4
  104. package/es/ListItem/ListItemWithRadio.js +11 -4
  105. package/es/ListItem/__tests__/ListItemWithAvatar.spec.js +19 -0
  106. package/es/ListItem/__tests__/ListItemWithCheckBox.spec.js +19 -0
  107. package/es/ListItem/__tests__/ListItemWithIcon.spec.js +17 -0
  108. package/es/ListItem/__tests__/ListItemWithRadio.spec.js +19 -0
  109. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +3 -3
  110. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +17 -17
  111. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +150 -42
  112. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +282 -77
  113. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +150 -42
  114. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +273 -70
  115. package/es/ListItem/props/defaultProps.js +1 -0
  116. package/es/ListItem/props/propTypes.js +12 -3
  117. package/es/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap +1 -1
  118. package/es/Modal/__tests__/__snapshots__/Modal.spec.js.snap +1 -1
  119. package/es/MultiSelect/AdvancedGroupMultiSelect.js +8 -7
  120. package/es/MultiSelect/AdvancedMultiSelect.js +8 -5
  121. package/es/MultiSelect/EmptyState.js +5 -4
  122. package/es/MultiSelect/MobileHeader/MobileHeader.js +2 -1
  123. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +5 -5
  124. package/es/MultiSelect/MultiSelect.js +18 -13
  125. package/es/MultiSelect/MultiSelectWithAvatar.js +7 -4
  126. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +10 -11
  127. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +60 -63
  128. package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +2 -2
  129. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +57 -66
  130. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +8 -8
  131. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +12 -13
  132. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +8 -8
  133. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +48 -48
  134. package/es/MultiSelect/props/defaultProps.js +3 -0
  135. package/es/MultiSelect/props/propTypes.js +1 -0
  136. package/es/PopOver/PopOver.js +3 -2
  137. package/es/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1 -1
  138. package/es/Radio/Radio.js +5 -4
  139. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +118 -198
  140. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +2 -2
  141. package/es/Ribbon/Ribbon.js +8 -20
  142. package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +22 -25
  143. package/es/RippleEffect/RippleEffect.js +1 -1
  144. package/es/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap +17 -17
  145. package/es/Select/GroupSelect.js +9 -6
  146. package/es/Select/Select.js +13 -8
  147. package/es/Select/SelectWithAvatar.js +9 -6
  148. package/es/Select/SelectWithIcon.js +8 -5
  149. package/es/Select/__tests__/SelectWithIcon.spec.js +3 -1
  150. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +10 -10
  151. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +1056 -1046
  152. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +5 -5
  153. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +13 -13
  154. package/es/Select/props/defaultProps.js +4 -0
  155. package/es/Select/props/propTypes.js +3 -0
  156. package/es/Stencils/Stencils.js +2 -1
  157. package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +13 -13
  158. package/es/Switch/Switch.js +4 -3
  159. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +99 -111
  160. package/es/Tab/Tab.js +35 -43
  161. package/es/Tab/Tab.module.css +58 -15
  162. package/es/Tab/TabWrapper.js +6 -2
  163. package/es/Tab/Tabs.js +35 -19
  164. package/es/Tab/Tabs.module.css +41 -17
  165. package/es/Tab/__tests__/Tab.spec.js +0 -25
  166. package/es/Tab/__tests__/Tabs.spec.js +11 -0
  167. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +53 -82
  168. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +2 -2
  169. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +2 -2
  170. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +41 -41
  171. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2 -2
  172. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +37 -5
  173. package/es/Tab/props/defaultProps.js +8 -2
  174. package/es/Tab/props/propTypes.js +16 -3
  175. package/es/Tab/utils/tabConfigs.js +6 -0
  176. package/es/Tag/Tag.js +6 -6
  177. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +243 -335
  178. package/es/TextBox/TextBox.js +2 -1
  179. package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +45 -45
  180. package/es/TextBoxIcon/TextBoxIcon.js +1 -1
  181. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +207 -207
  182. package/es/Textarea/Textarea.js +2 -1
  183. package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +47 -47
  184. package/es/Tooltip/Tooltip.js +5 -4
  185. package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +8 -8
  186. package/es/Typography/css/cssJSLogic.js +2 -2
  187. package/es/VelocityAnimation/VelocityAnimation/__tests__/__snapshots__/VelocityAnimation.spec.js.snap +1 -1
  188. package/es/VelocityAnimation/VelocityAnimationGroup/__tests__/__snapshots__/VelocityAnimationGroup.spec.js.snap +1 -1
  189. package/es/common/basic.module.css +9 -8
  190. package/es/css.js +0 -1
  191. package/es/deprecated/Switch/Switch.js +4 -3
  192. package/es/semantic/Button/Button.js +2 -1
  193. package/es/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap +2 -2
  194. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +21 -21
  195. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +20 -20
  196. package/es/v1/Button/Button.js +3 -1
  197. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +9 -9
  198. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +1 -1
  199. package/es/v1/Switch/Switch.js +4 -3
  200. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +1 -1
  201. package/es/v1/shared/Loader/Loader.js +4 -3
  202. package/es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +2 -2
  203. package/es/v1/shared/SuccessTick/SuccessTick.js +2 -1
  204. package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +2 -2
  205. package/lib/Accordion/Accordion.js +3 -1
  206. package/lib/Accordion/AccordionItem.js +4 -2
  207. package/lib/Accordion/__tests__/__snapshots__/Accordion.spec.js.snap +1 -1
  208. package/lib/Accordion/__tests__/__snapshots__/AccordionItem.spec.js.snap +1 -1
  209. package/lib/Animation/__tests__/__snapshots__/Animation.spec.js.snap +1 -1
  210. package/lib/AppContainer/AppContainer.js +3 -1
  211. package/lib/AppContainer/AppContainer.module.css +9 -3
  212. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +23 -23
  213. package/lib/Avatar/Avatar.js +6 -4
  214. package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +43 -43
  215. package/lib/AvatarTeam/AvatarTeam.js +4 -2
  216. package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +74 -98
  217. package/lib/Button/Button.js +6 -4
  218. package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +4 -4
  219. package/lib/Button/css/cssJSLogic.js +3 -3
  220. package/lib/Buttongroup/Buttongroup.js +5 -3
  221. package/lib/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +9 -9
  222. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +18 -18
  223. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +13 -13
  224. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +5 -5
  225. package/lib/CheckBox/CheckBox.js +10 -8
  226. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +154 -251
  227. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +72 -81
  228. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +62 -62
  229. package/lib/ColorSelect/_shared/ColorIndicator/ColorIndicator.js +3 -1
  230. package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +10 -10
  231. package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +14 -14
  232. package/lib/DateTime/CalendarView.js +5 -3
  233. package/lib/DateTime/DateTime.js +6 -4
  234. package/lib/DateTime/DateTimePopupFooter.js +3 -1
  235. package/lib/DateTime/DateWidget.js +5 -3
  236. package/lib/DateTime/Time.js +3 -1
  237. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +50 -50
  238. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +103 -103
  239. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +2 -2
  240. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +10 -10
  241. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +10 -10
  242. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +2 -2
  243. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +35 -35
  244. package/lib/DropBox/DropBox.js +14 -5
  245. package/lib/DropBox/DropBoxElement/DropBoxElement.js +28 -8
  246. package/lib/DropBox/DropBoxElement/__tests__/__snapshots__/DropBoxElement.spec.js.snap +1 -1
  247. package/lib/DropBox/DropBoxElement/css/cssJSLogic.js +2 -2
  248. package/lib/DropBox/DropBoxElement/props/propTypes.js +2 -1
  249. package/lib/DropBox/__tests__/__snapshots__/DropBox.spec.js.snap +1 -1
  250. package/lib/DropDown/DropDown.js +3 -1
  251. package/lib/DropDown/DropDownHeading.js +3 -1
  252. package/lib/DropDown/DropDownItem.js +7 -5
  253. package/lib/DropDown/DropDownSearch.js +3 -1
  254. package/lib/DropDown/DropDownSeparator.js +3 -1
  255. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +3 -3
  256. package/lib/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap +2 -2
  257. package/lib/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +2 -2
  258. package/lib/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap +3 -3
  259. package/lib/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap +2 -2
  260. package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap +8 -8
  261. package/lib/Label/Label.js +3 -1
  262. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +25 -49
  263. package/lib/Layout/Box.js +7 -120
  264. package/lib/Layout/Container.js +7 -137
  265. package/lib/Layout/props/defaultProps.js +14 -19
  266. package/lib/Layout/props/propTypes.js +13 -52
  267. package/lib/ListItem/ListItem.js +3 -1
  268. package/lib/ListItem/ListItemWithAvatar.js +14 -4
  269. package/lib/ListItem/ListItemWithCheckBox.js +14 -4
  270. package/lib/ListItem/ListItemWithIcon.js +12 -4
  271. package/lib/ListItem/ListItemWithRadio.js +14 -4
  272. package/lib/ListItem/__tests__/ListItemWithAvatar.spec.js +23 -0
  273. package/lib/ListItem/__tests__/ListItemWithCheckBox.spec.js +23 -0
  274. package/lib/ListItem/__tests__/ListItemWithIcon.spec.js +21 -0
  275. package/lib/ListItem/__tests__/ListItemWithRadio.spec.js +23 -0
  276. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +3 -3
  277. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +17 -17
  278. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +150 -42
  279. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +282 -77
  280. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +150 -42
  281. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +273 -70
  282. package/lib/ListItem/props/defaultProps.js +1 -0
  283. package/lib/ListItem/props/propTypes.js +12 -4
  284. package/lib/Modal/Portal/__tests__/__snapshots__/Portal.spec.js.snap +1 -1
  285. package/lib/Modal/__tests__/__snapshots__/Modal.spec.js.snap +1 -1
  286. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +8 -6
  287. package/lib/MultiSelect/AdvancedMultiSelect.js +8 -4
  288. package/lib/MultiSelect/EmptyState.js +6 -4
  289. package/lib/MultiSelect/MobileHeader/MobileHeader.js +3 -1
  290. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +5 -5
  291. package/lib/MultiSelect/MultiSelect.js +57 -50
  292. package/lib/MultiSelect/MultiSelectWithAvatar.js +8 -4
  293. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +10 -11
  294. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +60 -63
  295. package/lib/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +2 -2
  296. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +57 -66
  297. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +8 -8
  298. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +12 -13
  299. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +8 -8
  300. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +48 -48
  301. package/lib/MultiSelect/props/defaultProps.js +3 -0
  302. package/lib/MultiSelect/props/propTypes.js +1 -0
  303. package/lib/PopOver/PopOver.js +4 -2
  304. package/lib/PopOver/__tests__/__snapshots__/PopOver.spec.js.snap +1 -1
  305. package/lib/Radio/Radio.js +6 -4
  306. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +118 -198
  307. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +2 -2
  308. package/lib/Ribbon/Ribbon.js +8 -19
  309. package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +22 -25
  310. package/lib/RippleEffect/RippleEffect.js +1 -1
  311. package/lib/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap +17 -17
  312. package/lib/Select/GroupSelect.js +10 -6
  313. package/lib/Select/Select.js +14 -8
  314. package/lib/Select/SelectWithAvatar.js +10 -6
  315. package/lib/Select/SelectWithIcon.js +9 -5
  316. package/lib/Select/__tests__/SelectWithIcon.spec.js +3 -1
  317. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +10 -10
  318. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +1056 -1046
  319. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +5 -5
  320. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +13 -13
  321. package/lib/Select/props/defaultProps.js +5 -2
  322. package/lib/Select/props/propTypes.js +3 -0
  323. package/lib/Stencils/Stencils.js +3 -1
  324. package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +13 -13
  325. package/lib/Switch/Switch.js +5 -3
  326. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +99 -111
  327. package/lib/Tab/Tab.js +40 -45
  328. package/lib/Tab/Tab.module.css +58 -15
  329. package/lib/Tab/TabWrapper.js +6 -2
  330. package/lib/Tab/Tabs.js +33 -16
  331. package/lib/Tab/Tabs.module.css +41 -17
  332. package/lib/Tab/__tests__/Tab.spec.js +8 -35
  333. package/lib/Tab/__tests__/Tabs.spec.js +12 -0
  334. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +53 -82
  335. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +2 -2
  336. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +2 -2
  337. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +41 -41
  338. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +2 -2
  339. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +37 -5
  340. package/lib/Tab/props/defaultProps.js +8 -2
  341. package/lib/Tab/props/propTypes.js +16 -3
  342. package/lib/Tab/utils/tabConfigs.js +9 -2
  343. package/lib/Tag/Tag.js +7 -5
  344. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +243 -335
  345. package/lib/TextBox/TextBox.js +3 -1
  346. package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +45 -45
  347. package/lib/TextBoxIcon/TextBoxIcon.js +1 -1
  348. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +207 -207
  349. package/lib/Textarea/Textarea.js +3 -1
  350. package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +47 -47
  351. package/lib/Tooltip/Tooltip.js +6 -4
  352. package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +8 -8
  353. package/lib/Typography/css/cssJSLogic.js +1 -1
  354. package/lib/VelocityAnimation/VelocityAnimation/__tests__/__snapshots__/VelocityAnimation.spec.js.snap +1 -1
  355. package/lib/VelocityAnimation/VelocityAnimationGroup/__tests__/__snapshots__/VelocityAnimationGroup.spec.js.snap +1 -1
  356. package/lib/common/basic.module.css +9 -8
  357. package/lib/css.js +0 -2
  358. package/lib/deprecated/Switch/Switch.js +5 -3
  359. package/lib/semantic/Button/Button.js +3 -1
  360. package/lib/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap +2 -2
  361. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +21 -21
  362. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +20 -20
  363. package/lib/v1/Button/Button.js +3 -1
  364. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +9 -9
  365. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +1 -1
  366. package/lib/v1/Switch/Switch.js +5 -3
  367. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +1 -1
  368. package/lib/v1/shared/Loader/Loader.js +5 -3
  369. package/lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +2 -2
  370. package/lib/v1/shared/SuccessTick/SuccessTick.js +3 -1
  371. package/lib/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +2 -2
  372. package/package.json +26 -24
  373. package/ut.config.js +106 -0
  374. package/es/Layout/Layout.module.css +0 -336
  375. package/es/Layout/__tests__/Box.spec.js +0 -11
  376. package/es/Layout/__tests__/Container.spec.js +0 -11
  377. package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  378. package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  379. package/es/Layout/utils.js +0 -29
  380. package/lib/Layout/Layout.module.css +0 -336
  381. package/lib/Layout/__tests__/Box.spec.js +0 -18
  382. package/lib/Layout/__tests__/Container.spec.js +0 -18
  383. package/lib/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  384. package/lib/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  385. package/lib/Layout/utils.js +0 -59
package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap CHANGED
@@ -1,9 +1,221 @@
1
- // Jest Snapshot v1, https://goo.gl/fbAQLP
1
+ // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
+
3
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderLeftValuePlaceholderNode & it's custom class 1`] = `
4
+ <DocumentFragment>
5
+ <li
6
+ class="flex row alignItems_center list medium default withBorder"
7
+ data-a11y-inset-focus="true"
8
+ data-id="List_ListItemWithCheckBox"
9
+ data-selector-id="listItemWithCheckBox"
10
+ data-test-id="List_ListItemWithCheckBox"
11
+ role="option"
12
+ tabindex="0"
13
+ >
14
+ <div
15
+ class="noShrink contentWrapper"
16
+ data-id="boxComponent"
17
+ data-selector-id="box"
18
+ data-test-id="boxComponent"
19
+ >
20
+ <div
21
+ class="iconBox lhsJustifyContent_center"
22
+ data-id="List_checkBox"
23
+ data-test-id="List_checkBox"
24
+ >
25
+ <div
26
+ class="noShrink alignSelf_start lhsBoxInner"
27
+ data-id="boxComponent"
28
+ data-selector-id="box"
29
+ data-test-id="boxComponent"
30
+ >
31
+ <div
32
+ aria-checked="false"
33
+ aria-hidden="true"
34
+ class="inlineFlex row alignItems_center container pointer primary"
35
+ data-id="checkBox"
36
+ data-selector-id="container"
37
+ data-test-id="checkBox"
38
+ role="checkbox"
39
+ tabindex="-1"
40
+ >
41
+ <div
42
+ class="noShrink boxContainer medium filled"
43
+ data-id="boxComponent"
44
+ data-selector-id="box"
45
+ data-test-id="boxComponent"
46
+ >
47
+ <input
48
+ type="hidden"
49
+ />
50
+ <label
51
+ class="checkbox pointer medium"
52
+ >
53
+ <svg
54
+ viewBox="0 0 40 40"
55
+ xmlns="http://www.w3.org/2000/svg"
56
+ >
57
+ <rect
58
+ class="cbBox"
59
+ height="38"
60
+ rx="4"
61
+ width="38"
62
+ x="1"
63
+ xmlns="http://www.w3.org/2000/svg"
64
+ y="1"
65
+ />
66
+ </svg>
67
+ </label>
68
+ </div>
69
+ </div>
70
+ </div>
71
+ </div>
72
+ <div
73
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
74
+ data-id="boxComponent"
75
+ data-selector-id="box"
76
+ data-test-id="boxComponent"
77
+ >
78
+ <div
79
+ class="noShrink titleBox"
80
+ data-id="boxComponent"
81
+ data-selector-id="box"
82
+ data-test-id="boxComponent"
83
+ >
84
+ <div
85
+ class="basis_auto noShrink customLeftValuePlaceholderClass"
86
+ data-id="boxComponent"
87
+ data-selector-id="box"
88
+ data-test-id="boxComponent"
89
+ >
90
+ <div>
91
+ Left Placeholder
92
+ </div>
93
+ </div>
94
+ <div
95
+ class="basis_auto shrink value"
96
+ data-id="boxComponent"
97
+ data-selector-id="box"
98
+ data-test-id="boxComponent"
99
+ >
100
+ List
101
+ </div>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ </li>
106
+ </DocumentFragment>
107
+ `;
108
+
109
+ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderLeftValuePlaceholderNode 1`] = `
110
+ <DocumentFragment>
111
+ <li
112
+ class="flex row alignItems_center list medium default withBorder"
113
+ data-a11y-inset-focus="true"
114
+ data-id="List_ListItemWithCheckBox"
115
+ data-selector-id="listItemWithCheckBox"
116
+ data-test-id="List_ListItemWithCheckBox"
117
+ role="option"
118
+ tabindex="0"
119
+ >
120
+ <div
121
+ class="noShrink contentWrapper"
122
+ data-id="boxComponent"
123
+ data-selector-id="box"
124
+ data-test-id="boxComponent"
125
+ >
126
+ <div
127
+ class="iconBox lhsJustifyContent_center"
128
+ data-id="List_checkBox"
129
+ data-test-id="List_checkBox"
130
+ >
131
+ <div
132
+ class="noShrink alignSelf_start lhsBoxInner"
133
+ data-id="boxComponent"
134
+ data-selector-id="box"
135
+ data-test-id="boxComponent"
136
+ >
137
+ <div
138
+ aria-checked="false"
139
+ aria-hidden="true"
140
+ class="inlineFlex row alignItems_center container pointer primary"
141
+ data-id="checkBox"
142
+ data-selector-id="container"
143
+ data-test-id="checkBox"
144
+ role="checkbox"
145
+ tabindex="-1"
146
+ >
147
+ <div
148
+ class="noShrink boxContainer medium filled"
149
+ data-id="boxComponent"
150
+ data-selector-id="box"
151
+ data-test-id="boxComponent"
152
+ >
153
+ <input
154
+ type="hidden"
155
+ />
156
+ <label
157
+ class="checkbox pointer medium"
158
+ >
159
+ <svg
160
+ viewBox="0 0 40 40"
161
+ xmlns="http://www.w3.org/2000/svg"
162
+ >
163
+ <rect
164
+ class="cbBox"
165
+ height="38"
166
+ rx="4"
167
+ width="38"
168
+ x="1"
169
+ xmlns="http://www.w3.org/2000/svg"
170
+ y="1"
171
+ />
172
+ </svg>
173
+ </label>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ <div
179
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
180
+ data-id="boxComponent"
181
+ data-selector-id="box"
182
+ data-test-id="boxComponent"
183
+ >
184
+ <div
185
+ class="noShrink titleBox"
186
+ data-id="boxComponent"
187
+ data-selector-id="box"
188
+ data-test-id="boxComponent"
189
+ >
190
+ <div
191
+ class="basis_auto noShrink"
192
+ data-id="boxComponent"
193
+ data-selector-id="box"
194
+ data-test-id="boxComponent"
195
+ >
196
+ <div>
197
+ Left Placeholder
198
+ </div>
199
+ </div>
200
+ <div
201
+ class="basis_auto shrink value"
202
+ data-id="boxComponent"
203
+ data-selector-id="box"
204
+ data-test-id="boxComponent"
205
+ >
206
+ List
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </li>
212
+ </DocumentFragment>
213
+ `;
2
214
 
3
215
  exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode & it's custom class 1`] = `
4
216
  <DocumentFragment>
5
217
  <li
6
- class="list medium default withBorder flex rowdir vCenter"
218
+ class="flex row alignItems_center list medium default withBorder"
7
219
  data-a11y-inset-focus="true"
8
220
  data-id="List_ListItemWithCheckBox"
9
221
  data-selector-id="listItemWithCheckBox"
@@ -12,7 +224,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
12
224
  tabindex="0"
13
225
  >
14
226
  <div
15
- class="contentWrapper shrinkOff"
227
+ class="noShrink contentWrapper"
16
228
  data-id="boxComponent"
17
229
  data-selector-id="box"
18
230
  data-test-id="boxComponent"
@@ -23,7 +235,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
23
235
  data-test-id="List_checkBox"
24
236
  >
25
237
  <div
26
- class="lhsBoxInner shrinkOff selfStart"
238
+ class="noShrink alignSelf_start lhsBoxInner"
27
239
  data-id="boxComponent"
28
240
  data-selector-id="box"
29
241
  data-test-id="boxComponent"
@@ -31,8 +243,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
31
243
  <div
32
244
  aria-checked="false"
33
245
  aria-hidden="true"
34
- class="container pointer primary
35
- inflex rowdir vCenter"
246
+ class="inlineFlex row alignItems_center container pointer primary"
36
247
  data-id="checkBox"
37
248
  data-selector-id="container"
38
249
  data-test-id="checkBox"
@@ -40,7 +251,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
40
251
  tabindex="-1"
41
252
  >
42
253
  <div
43
- class="boxContainer medium filled shrinkOff"
254
+ class="noShrink boxContainer medium filled"
44
255
  data-id="boxComponent"
45
256
  data-selector-id="box"
46
257
  data-test-id="boxComponent"
@@ -49,7 +260,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
49
260
  type="hidden"
50
261
  />
51
262
  <label
52
- class="checkbox pointer medium "
263
+ class="checkbox pointer medium"
53
264
  >
54
265
  <svg
55
266
  viewBox="0 0 40 40"
@@ -71,19 +282,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
71
282
  </div>
72
283
  </div>
73
284
  <div
74
- class="leftBox selfAlign_center grow basis shrinkOff"
285
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
75
286
  data-id="boxComponent"
76
287
  data-selector-id="box"
77
288
  data-test-id="boxComponent"
78
289
  >
79
290
  <div
80
- class="titleBox shrinkOff"
291
+ class="noShrink titleBox"
81
292
  data-id="boxComponent"
82
293
  data-selector-id="box"
83
294
  data-test-id="boxComponent"
84
295
  >
85
296
  <div
86
- class="value basisAuto shrinkOn"
297
+ class="basis_auto shrink value"
87
298
  data-id="boxComponent"
88
299
  data-selector-id="box"
89
300
  data-test-id="boxComponent"
@@ -91,7 +302,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
91
302
  List
92
303
  </div>
93
304
  <div
94
- class="customValueRightPlaceholderClass shrinkOff"
305
+ class="noShrink customValueRightPlaceholderClass"
95
306
  data-id="boxComponent"
96
307
  data-selector-id="box"
97
308
  data-test-id="boxComponent"
@@ -110,7 +321,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
110
321
  exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode 1`] = `
111
322
  <DocumentFragment>
112
323
  <li
113
- class="list medium default withBorder flex rowdir vCenter"
324
+ class="flex row alignItems_center list medium default withBorder"
114
325
  data-a11y-inset-focus="true"
115
326
  data-id="List_ListItemWithCheckBox"
116
327
  data-selector-id="listItemWithCheckBox"
@@ -119,7 +330,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
119
330
  tabindex="0"
120
331
  >
121
332
  <div
122
- class="contentWrapper shrinkOff"
333
+ class="noShrink contentWrapper"
123
334
  data-id="boxComponent"
124
335
  data-selector-id="box"
125
336
  data-test-id="boxComponent"
@@ -130,7 +341,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
130
341
  data-test-id="List_checkBox"
131
342
  >
132
343
  <div
133
- class="lhsBoxInner shrinkOff selfStart"
344
+ class="noShrink alignSelf_start lhsBoxInner"
134
345
  data-id="boxComponent"
135
346
  data-selector-id="box"
136
347
  data-test-id="boxComponent"
@@ -138,8 +349,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
138
349
  <div
139
350
  aria-checked="false"
140
351
  aria-hidden="true"
141
- class="container pointer primary
142
- inflex rowdir vCenter"
352
+ class="inlineFlex row alignItems_center container pointer primary"
143
353
  data-id="checkBox"
144
354
  data-selector-id="container"
145
355
  data-test-id="checkBox"
@@ -147,7 +357,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
147
357
  tabindex="-1"
148
358
  >
149
359
  <div
150
- class="boxContainer medium filled shrinkOff"
360
+ class="noShrink boxContainer medium filled"
151
361
  data-id="boxComponent"
152
362
  data-selector-id="box"
153
363
  data-test-id="boxComponent"
@@ -156,7 +366,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
156
366
  type="hidden"
157
367
  />
158
368
  <label
159
- class="checkbox pointer medium "
369
+ class="checkbox pointer medium"
160
370
  >
161
371
  <svg
162
372
  viewBox="0 0 40 40"
@@ -178,19 +388,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
178
388
  </div>
179
389
  </div>
180
390
  <div
181
- class="leftBox selfAlign_center grow basis shrinkOff"
391
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
182
392
  data-id="boxComponent"
183
393
  data-selector-id="box"
184
394
  data-test-id="boxComponent"
185
395
  >
186
396
  <div
187
- class="titleBox shrinkOff"
397
+ class="noShrink titleBox"
188
398
  data-id="boxComponent"
189
399
  data-selector-id="box"
190
400
  data-test-id="boxComponent"
191
401
  >
192
402
  <div
193
- class="value basisAuto shrinkOn"
403
+ class="basis_auto shrink value"
194
404
  data-id="boxComponent"
195
405
  data-selector-id="box"
196
406
  data-test-id="boxComponent"
@@ -198,7 +408,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
198
408
  List
199
409
  </div>
200
410
  <div
201
- class="shrinkOff"
411
+ class="noShrink"
202
412
  data-id="boxComponent"
203
413
  data-selector-id="box"
204
414
  data-test-id="boxComponent"
@@ -217,7 +427,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
217
427
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 1`] = `
218
428
  <DocumentFragment>
219
429
  <li
220
- class="list medium default withBorder flex rowdir vCenter"
430
+ class="flex row alignItems_center list medium default withBorder"
221
431
  data-a11y-inset-focus="true"
222
432
  data-id="List_ListItemWithCheckBox"
223
433
  data-selector-id="listItemWithCheckBox"
@@ -226,7 +436,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
226
436
  tabindex="0"
227
437
  >
228
438
  <div
229
- class="contentWrapper shrinkOff"
439
+ class="noShrink contentWrapper"
230
440
  data-id="boxComponent"
231
441
  data-selector-id="box"
232
442
  data-test-id="boxComponent"
@@ -237,7 +447,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
237
447
  data-test-id="List_checkBox"
238
448
  >
239
449
  <div
240
- class="shrinkOff selfCenter"
450
+ class="noShrink alignSelf_center"
241
451
  data-id="boxComponent"
242
452
  data-selector-id="box"
243
453
  data-test-id="boxComponent"
@@ -245,8 +455,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
245
455
  <div
246
456
  aria-checked="false"
247
457
  aria-hidden="true"
248
- class="container pointer primary
249
- inflex rowdir vCenter"
458
+ class="inlineFlex row alignItems_center container pointer primary"
250
459
  data-id="checkBox"
251
460
  data-selector-id="container"
252
461
  data-test-id="checkBox"
@@ -254,7 +463,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
254
463
  tabindex="-1"
255
464
  >
256
465
  <div
257
- class="boxContainer medium filled shrinkOff"
466
+ class="noShrink boxContainer medium filled"
258
467
  data-id="boxComponent"
259
468
  data-selector-id="box"
260
469
  data-test-id="boxComponent"
@@ -263,7 +472,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
263
472
  type="hidden"
264
473
  />
265
474
  <label
266
- class="checkbox pointer medium "
475
+ class="checkbox pointer medium"
267
476
  >
268
477
  <svg
269
478
  viewBox="0 0 40 40"
@@ -285,19 +494,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
285
494
  </div>
286
495
  </div>
287
496
  <div
288
- class="leftBox selfAlign_center grow basis shrinkOff"
497
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
289
498
  data-id="boxComponent"
290
499
  data-selector-id="box"
291
500
  data-test-id="boxComponent"
292
501
  >
293
502
  <div
294
- class="titleBox shrinkOff"
503
+ class="noShrink titleBox"
295
504
  data-id="boxComponent"
296
505
  data-selector-id="box"
297
506
  data-test-id="boxComponent"
298
507
  >
299
508
  <div
300
- class="value basisAuto shrinkOn"
509
+ class="basis_auto shrink value"
301
510
  data-id="boxComponent"
302
511
  data-selector-id="box"
303
512
  data-test-id="boxComponent"
@@ -306,7 +515,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
306
515
  </div>
307
516
  </div>
308
517
  <div
309
- class="secondaryField secondaryValue shrinkOff"
518
+ class="noShrink secondaryField secondaryValue"
310
519
  data-id="boxComponent"
311
520
  data-selector-id="box"
312
521
  data-test-id="boxComponent"
@@ -323,7 +532,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
323
532
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align end 1`] = `
324
533
  <DocumentFragment>
325
534
  <li
326
- class="list medium default withBorder flex rowdir vCenter"
535
+ class="flex row alignItems_center list medium default withBorder"
327
536
  data-a11y-inset-focus="true"
328
537
  data-id="List_ListItemWithCheckBox"
329
538
  data-selector-id="listItemWithCheckBox"
@@ -332,7 +541,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
332
541
  tabindex="0"
333
542
  >
334
543
  <div
335
- class="contentWrapper shrinkOff"
544
+ class="noShrink contentWrapper"
336
545
  data-id="boxComponent"
337
546
  data-selector-id="box"
338
547
  data-test-id="boxComponent"
@@ -343,7 +552,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
343
552
  data-test-id="List_checkBox"
344
553
  >
345
554
  <div
346
- class="lhsBoxInner shrinkOff selfEnd"
555
+ class="noShrink alignSelf_end lhsBoxInner"
347
556
  data-id="boxComponent"
348
557
  data-selector-id="box"
349
558
  data-test-id="boxComponent"
@@ -351,8 +560,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
351
560
  <div
352
561
  aria-checked="false"
353
562
  aria-hidden="true"
354
- class="container pointer primary
355
- inflex rowdir vCenter"
563
+ class="inlineFlex row alignItems_center container pointer primary"
356
564
  data-id="checkBox"
357
565
  data-selector-id="container"
358
566
  data-test-id="checkBox"
@@ -360,7 +568,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
360
568
  tabindex="-1"
361
569
  >
362
570
  <div
363
- class="boxContainer medium filled shrinkOff"
571
+ class="noShrink boxContainer medium filled"
364
572
  data-id="boxComponent"
365
573
  data-selector-id="box"
366
574
  data-test-id="boxComponent"
@@ -369,7 +577,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
369
577
  type="hidden"
370
578
  />
371
579
  <label
372
- class="checkbox pointer medium "
580
+ class="checkbox pointer medium"
373
581
  >
374
582
  <svg
375
583
  viewBox="0 0 40 40"
@@ -391,19 +599,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
391
599
  </div>
392
600
  </div>
393
601
  <div
394
- class="leftBox selfAlign_center grow basis shrinkOff"
602
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
395
603
  data-id="boxComponent"
396
604
  data-selector-id="box"
397
605
  data-test-id="boxComponent"
398
606
  >
399
607
  <div
400
- class="titleBox shrinkOff"
608
+ class="noShrink titleBox"
401
609
  data-id="boxComponent"
402
610
  data-selector-id="box"
403
611
  data-test-id="boxComponent"
404
612
  >
405
613
  <div
406
- class="value basisAuto shrinkOn"
614
+ class="basis_auto shrink value"
407
615
  data-id="boxComponent"
408
616
  data-selector-id="box"
409
617
  data-test-id="boxComponent"
@@ -412,7 +620,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
412
620
  </div>
413
621
  </div>
414
622
  <div
415
- class="secondaryField secondaryValue shrinkOff"
623
+ class="noShrink secondaryField secondaryValue"
416
624
  data-id="boxComponent"
417
625
  data-selector-id="box"
418
626
  data-test-id="boxComponent"
@@ -429,7 +637,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
429
637
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
430
638
  <DocumentFragment>
431
639
  <li
432
- class="list medium default withBorder flex rowdir vCenter"
640
+ class="flex row alignItems_center list medium default withBorder"
433
641
  data-a11y-inset-focus="true"
434
642
  data-id="List_ListItemWithCheckBox"
435
643
  data-selector-id="listItemWithCheckBox"
@@ -438,7 +646,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
438
646
  tabindex="0"
439
647
  >
440
648
  <div
441
- class="contentWrapper shrinkOff"
649
+ class="noShrink contentWrapper"
442
650
  data-id="boxComponent"
443
651
  data-selector-id="box"
444
652
  data-test-id="boxComponent"
@@ -449,7 +657,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
449
657
  data-test-id="List_checkBox"
450
658
  >
451
659
  <div
452
- class="lhsBoxInner shrinkOff selfStart"
660
+ class="noShrink alignSelf_start lhsBoxInner"
453
661
  data-id="boxComponent"
454
662
  data-selector-id="box"
455
663
  data-test-id="boxComponent"
@@ -457,8 +665,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
457
665
  <div
458
666
  aria-checked="false"
459
667
  aria-hidden="true"
460
- class="container pointer primary
461
- inflex rowdir vCenter"
668
+ class="inlineFlex row alignItems_center container pointer primary"
462
669
  data-id="checkBox"
463
670
  data-selector-id="container"
464
671
  data-test-id="checkBox"
@@ -466,7 +673,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
466
673
  tabindex="-1"
467
674
  >
468
675
  <div
469
- class="boxContainer medium filled shrinkOff"
676
+ class="noShrink boxContainer medium filled"
470
677
  data-id="boxComponent"
471
678
  data-selector-id="box"
472
679
  data-test-id="boxComponent"
@@ -475,7 +682,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
475
682
  type="hidden"
476
683
  />
477
684
  <label
478
- class="checkbox pointer medium "
685
+ class="checkbox pointer medium"
479
686
  >
480
687
  <svg
481
688
  viewBox="0 0 40 40"
@@ -497,19 +704,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
497
704
  </div>
498
705
  </div>
499
706
  <div
500
- class="leftBox selfAlign_center grow basis shrinkOff"
707
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
501
708
  data-id="boxComponent"
502
709
  data-selector-id="box"
503
710
  data-test-id="boxComponent"
504
711
  >
505
712
  <div
506
- class="titleBox shrinkOff"
713
+ class="noShrink titleBox"
507
714
  data-id="boxComponent"
508
715
  data-selector-id="box"
509
716
  data-test-id="boxComponent"
510
717
  >
511
718
  <div
512
- class="value basisAuto shrinkOn"
719
+ class="basis_auto shrink value"
513
720
  data-id="boxComponent"
514
721
  data-selector-id="box"
515
722
  data-test-id="boxComponent"
@@ -518,7 +725,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
518
725
  </div>
519
726
  </div>
520
727
  <div
521
- class="secondaryField secondaryValue shrinkOff"
728
+ class="noShrink secondaryField secondaryValue"
522
729
  data-id="boxComponent"
523
730
  data-selector-id="box"
524
731
  data-test-id="boxComponent"
@@ -535,7 +742,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
535
742
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
536
743
  <DocumentFragment>
537
744
  <li
538
- class="list medium default withBorder flex rowdir vCenter"
745
+ class="flex row alignItems_center list medium default withBorder"
539
746
  data-a11y-inset-focus="true"
540
747
  data-id="List_ListItemWithCheckBox"
541
748
  data-selector-id="listItemWithCheckBox"
@@ -544,7 +751,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
544
751
  tabindex="0"
545
752
  >
546
753
  <div
547
- class="contentWrapper shrinkOff"
754
+ class="noShrink contentWrapper"
548
755
  data-id="boxComponent"
549
756
  data-selector-id="box"
550
757
  data-test-id="boxComponent"
@@ -555,7 +762,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
555
762
  data-test-id="List_checkBox"
556
763
  >
557
764
  <div
558
- class="lhsBoxInner shrinkOff selfStart"
765
+ class="noShrink alignSelf_start lhsBoxInner"
559
766
  data-id="boxComponent"
560
767
  data-selector-id="box"
561
768
  data-test-id="boxComponent"
@@ -563,8 +770,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
563
770
  <div
564
771
  aria-checked="false"
565
772
  aria-hidden="true"
566
- class="container pointer primary
567
- inflex rowdir vCenter"
773
+ class="inlineFlex row alignItems_center container pointer primary"
568
774
  data-id="checkBox"
569
775
  data-selector-id="container"
570
776
  data-test-id="checkBox"
@@ -572,7 +778,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
572
778
  tabindex="-1"
573
779
  >
574
780
  <div
575
- class="boxContainer medium filled shrinkOff"
781
+ class="noShrink boxContainer medium filled"
576
782
  data-id="boxComponent"
577
783
  data-selector-id="box"
578
784
  data-test-id="boxComponent"
@@ -581,7 +787,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
581
787
  type="hidden"
582
788
  />
583
789
  <label
584
- class="checkbox pointer medium "
790
+ class="checkbox pointer medium"
585
791
  >
586
792
  <svg
587
793
  viewBox="0 0 40 40"
@@ -603,19 +809,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
603
809
  </div>
604
810
  </div>
605
811
  <div
606
- class="leftBox selfAlign_center grow basis shrinkOff"
812
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
607
813
  data-id="boxComponent"
608
814
  data-selector-id="box"
609
815
  data-test-id="boxComponent"
610
816
  >
611
817
  <div
612
- class="titleBox shrinkOff"
818
+ class="noShrink titleBox"
613
819
  data-id="boxComponent"
614
820
  data-selector-id="box"
615
821
  data-test-id="boxComponent"
616
822
  >
617
823
  <div
618
- class="value basisAuto shrinkOn"
824
+ class="basis_auto shrink value"
619
825
  data-id="boxComponent"
620
826
  data-selector-id="box"
621
827
  data-test-id="boxComponent"
@@ -624,7 +830,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
624
830
  </div>
625
831
  </div>
626
832
  <div
627
- class="secondaryField secondaryValue shrinkOff"
833
+ class="noShrink secondaryField secondaryValue"
628
834
  data-id="boxComponent"
629
835
  data-selector-id="box"
630
836
  data-test-id="boxComponent"
@@ -641,7 +847,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
641
847
  exports[`ListItemWithCheckBox rendering the defult props 1`] = `
642
848
  <DocumentFragment>
643
849
  <li
644
- class="list medium default withBorder flex rowdir vCenter"
850
+ class="flex row alignItems_center list medium default withBorder"
645
851
  data-a11y-inset-focus="true"
646
852
  data-id="List_ListItemWithCheckBox"
647
853
  data-selector-id="listItemWithCheckBox"
@@ -650,7 +856,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
650
856
  tabindex="0"
651
857
  >
652
858
  <div
653
- class="contentWrapper shrinkOff"
859
+ class="noShrink contentWrapper"
654
860
  data-id="boxComponent"
655
861
  data-selector-id="box"
656
862
  data-test-id="boxComponent"
@@ -661,7 +867,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
661
867
  data-test-id="List_checkBox"
662
868
  >
663
869
  <div
664
- class="lhsBoxInner shrinkOff selfStart"
870
+ class="noShrink alignSelf_start lhsBoxInner"
665
871
  data-id="boxComponent"
666
872
  data-selector-id="box"
667
873
  data-test-id="boxComponent"
@@ -669,8 +875,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
669
875
  <div
670
876
  aria-checked="false"
671
877
  aria-hidden="true"
672
- class="container pointer primary
673
- inflex rowdir vCenter"
878
+ class="inlineFlex row alignItems_center container pointer primary"
674
879
  data-id="checkBox"
675
880
  data-selector-id="container"
676
881
  data-test-id="checkBox"
@@ -678,7 +883,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
678
883
  tabindex="-1"
679
884
  >
680
885
  <div
681
- class="boxContainer medium filled shrinkOff"
886
+ class="noShrink boxContainer medium filled"
682
887
  data-id="boxComponent"
683
888
  data-selector-id="box"
684
889
  data-test-id="boxComponent"
@@ -687,7 +892,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
687
892
  type="hidden"
688
893
  />
689
894
  <label
690
- class="checkbox pointer medium "
895
+ class="checkbox pointer medium"
691
896
  >
692
897
  <svg
693
898
  viewBox="0 0 40 40"
@@ -709,19 +914,19 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
709
914
  </div>
710
915
  </div>
711
916
  <div
712
- class="leftBox selfAlign_center grow basis shrinkOff"
917
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
713
918
  data-id="boxComponent"
714
919
  data-selector-id="box"
715
920
  data-test-id="boxComponent"
716
921
  >
717
922
  <div
718
- class="titleBox shrinkOff"
923
+ class="noShrink titleBox"
719
924
  data-id="boxComponent"
720
925
  data-selector-id="box"
721
926
  data-test-id="boxComponent"
722
927
  >
723
928
  <div
724
- class="value basisAuto shrinkOn"
929
+ class="basis_auto shrink value"
725
930
  data-id="boxComponent"
726
931
  data-selector-id="box"
727
932
  data-test-id="boxComponent"