@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/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap CHANGED
@@ -1,221 +1,9 @@
1
1
  // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
2
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
- `;
214
-
215
3
  exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode & it's custom class 1`] = `
216
4
  <DocumentFragment>
217
5
  <li
218
- class="flex row alignItems_center list medium default withBorder"
6
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
219
7
  data-a11y-inset-focus="true"
220
8
  data-id="List_ListItemWithCheckBox"
221
9
  data-selector-id="listItemWithCheckBox"
@@ -224,7 +12,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
224
12
  tabindex="0"
225
13
  >
226
14
  <div
227
- class="noShrink contentWrapper"
15
+ class="d-flex-shrink-0 contentWrapper"
228
16
  data-id="boxComponent"
229
17
  data-selector-id="box"
230
18
  data-test-id="boxComponent"
@@ -235,7 +23,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
235
23
  data-test-id="List_checkBox"
236
24
  >
237
25
  <div
238
- class="noShrink alignSelf_start lhsBoxInner"
26
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
239
27
  data-id="boxComponent"
240
28
  data-selector-id="box"
241
29
  data-test-id="boxComponent"
@@ -243,7 +31,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
243
31
  <div
244
32
  aria-checked="false"
245
33
  aria-hidden="true"
246
- class="inlineFlex row alignItems_center container pointer primary"
34
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
247
35
  data-id="checkBox"
248
36
  data-selector-id="container"
249
37
  data-test-id="checkBox"
@@ -251,7 +39,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
251
39
  tabindex="-1"
252
40
  >
253
41
  <div
254
- class="noShrink boxContainer medium filled"
42
+ class="d-flex-shrink-0 boxContainer medium filled"
255
43
  data-id="boxComponent"
256
44
  data-selector-id="box"
257
45
  data-test-id="boxComponent"
@@ -282,19 +70,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
282
70
  </div>
283
71
  </div>
284
72
  <div
285
- class="flexible basis_zero noShrink leftBox selfAlign_center"
73
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
286
74
  data-id="boxComponent"
287
75
  data-selector-id="box"
288
76
  data-test-id="boxComponent"
289
77
  >
290
78
  <div
291
- class="noShrink titleBox"
79
+ class="d-flex-shrink-0 titleBox"
292
80
  data-id="boxComponent"
293
81
  data-selector-id="box"
294
82
  data-test-id="boxComponent"
295
83
  >
296
84
  <div
297
- class="basis_auto shrink value"
85
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
298
86
  data-id="boxComponent"
299
87
  data-selector-id="box"
300
88
  data-test-id="boxComponent"
@@ -302,7 +90,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
302
90
  List
303
91
  </div>
304
92
  <div
305
- class="noShrink customValueRightPlaceholderClass"
93
+ class="d-flex-shrink-0 customValueRightPlaceholderClass"
306
94
  data-id="boxComponent"
307
95
  data-selector-id="box"
308
96
  data-test-id="boxComponent"
@@ -321,7 +109,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
321
109
  exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode 1`] = `
322
110
  <DocumentFragment>
323
111
  <li
324
- class="flex row alignItems_center list medium default withBorder"
112
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
325
113
  data-a11y-inset-focus="true"
326
114
  data-id="List_ListItemWithCheckBox"
327
115
  data-selector-id="listItemWithCheckBox"
@@ -330,7 +118,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
330
118
  tabindex="0"
331
119
  >
332
120
  <div
333
- class="noShrink contentWrapper"
121
+ class="d-flex-shrink-0 contentWrapper"
334
122
  data-id="boxComponent"
335
123
  data-selector-id="box"
336
124
  data-test-id="boxComponent"
@@ -341,7 +129,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
341
129
  data-test-id="List_checkBox"
342
130
  >
343
131
  <div
344
- class="noShrink alignSelf_start lhsBoxInner"
132
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
345
133
  data-id="boxComponent"
346
134
  data-selector-id="box"
347
135
  data-test-id="boxComponent"
@@ -349,7 +137,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
349
137
  <div
350
138
  aria-checked="false"
351
139
  aria-hidden="true"
352
- class="inlineFlex row alignItems_center container pointer primary"
140
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
353
141
  data-id="checkBox"
354
142
  data-selector-id="container"
355
143
  data-test-id="checkBox"
@@ -357,7 +145,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
357
145
  tabindex="-1"
358
146
  >
359
147
  <div
360
- class="noShrink boxContainer medium filled"
148
+ class="d-flex-shrink-0 boxContainer medium filled"
361
149
  data-id="boxComponent"
362
150
  data-selector-id="box"
363
151
  data-test-id="boxComponent"
@@ -388,19 +176,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
388
176
  </div>
389
177
  </div>
390
178
  <div
391
- class="flexible basis_zero noShrink leftBox selfAlign_center"
179
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
392
180
  data-id="boxComponent"
393
181
  data-selector-id="box"
394
182
  data-test-id="boxComponent"
395
183
  >
396
184
  <div
397
- class="noShrink titleBox"
185
+ class="d-flex-shrink-0 titleBox"
398
186
  data-id="boxComponent"
399
187
  data-selector-id="box"
400
188
  data-test-id="boxComponent"
401
189
  >
402
190
  <div
403
- class="basis_auto shrink value"
191
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
404
192
  data-id="boxComponent"
405
193
  data-selector-id="box"
406
194
  data-test-id="boxComponent"
@@ -408,7 +196,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
408
196
  List
409
197
  </div>
410
198
  <div
411
- class="noShrink"
199
+ class="d-flex-shrink-0"
412
200
  data-id="boxComponent"
413
201
  data-selector-id="box"
414
202
  data-test-id="boxComponent"
@@ -427,7 +215,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
427
215
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 1`] = `
428
216
  <DocumentFragment>
429
217
  <li
430
- class="flex row alignItems_center list medium default withBorder"
218
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
431
219
  data-a11y-inset-focus="true"
432
220
  data-id="List_ListItemWithCheckBox"
433
221
  data-selector-id="listItemWithCheckBox"
@@ -436,7 +224,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
436
224
  tabindex="0"
437
225
  >
438
226
  <div
439
- class="noShrink contentWrapper"
227
+ class="d-flex-shrink-0 contentWrapper"
440
228
  data-id="boxComponent"
441
229
  data-selector-id="box"
442
230
  data-test-id="boxComponent"
@@ -447,7 +235,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
447
235
  data-test-id="List_checkBox"
448
236
  >
449
237
  <div
450
- class="noShrink alignSelf_center"
238
+ class="d-flex-shrink-0 d-self-center"
451
239
  data-id="boxComponent"
452
240
  data-selector-id="box"
453
241
  data-test-id="boxComponent"
@@ -455,7 +243,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
455
243
  <div
456
244
  aria-checked="false"
457
245
  aria-hidden="true"
458
- class="inlineFlex row alignItems_center container pointer primary"
246
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
459
247
  data-id="checkBox"
460
248
  data-selector-id="container"
461
249
  data-test-id="checkBox"
@@ -463,7 +251,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
463
251
  tabindex="-1"
464
252
  >
465
253
  <div
466
- class="noShrink boxContainer medium filled"
254
+ class="d-flex-shrink-0 boxContainer medium filled"
467
255
  data-id="boxComponent"
468
256
  data-selector-id="box"
469
257
  data-test-id="boxComponent"
@@ -494,19 +282,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
494
282
  </div>
495
283
  </div>
496
284
  <div
497
- class="flexible basis_zero noShrink leftBox selfAlign_center"
285
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
498
286
  data-id="boxComponent"
499
287
  data-selector-id="box"
500
288
  data-test-id="boxComponent"
501
289
  >
502
290
  <div
503
- class="noShrink titleBox"
291
+ class="d-flex-shrink-0 titleBox"
504
292
  data-id="boxComponent"
505
293
  data-selector-id="box"
506
294
  data-test-id="boxComponent"
507
295
  >
508
296
  <div
509
- class="basis_auto shrink value"
297
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
510
298
  data-id="boxComponent"
511
299
  data-selector-id="box"
512
300
  data-test-id="boxComponent"
@@ -515,7 +303,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
515
303
  </div>
516
304
  </div>
517
305
  <div
518
- class="noShrink secondaryField secondaryValue"
306
+ class="d-flex-shrink-0 secondaryField secondaryValue"
519
307
  data-id="boxComponent"
520
308
  data-selector-id="box"
521
309
  data-test-id="boxComponent"
@@ -532,7 +320,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
532
320
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align end 1`] = `
533
321
  <DocumentFragment>
534
322
  <li
535
- class="flex row alignItems_center list medium default withBorder"
323
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
536
324
  data-a11y-inset-focus="true"
537
325
  data-id="List_ListItemWithCheckBox"
538
326
  data-selector-id="listItemWithCheckBox"
@@ -541,7 +329,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
541
329
  tabindex="0"
542
330
  >
543
331
  <div
544
- class="noShrink contentWrapper"
332
+ class="d-flex-shrink-0 contentWrapper"
545
333
  data-id="boxComponent"
546
334
  data-selector-id="box"
547
335
  data-test-id="boxComponent"
@@ -552,7 +340,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
552
340
  data-test-id="List_checkBox"
553
341
  >
554
342
  <div
555
- class="noShrink alignSelf_end lhsBoxInner"
343
+ class="d-flex-shrink-0 d-self-end lhsBoxInner"
556
344
  data-id="boxComponent"
557
345
  data-selector-id="box"
558
346
  data-test-id="boxComponent"
@@ -560,7 +348,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
560
348
  <div
561
349
  aria-checked="false"
562
350
  aria-hidden="true"
563
- class="inlineFlex row alignItems_center container pointer primary"
351
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
564
352
  data-id="checkBox"
565
353
  data-selector-id="container"
566
354
  data-test-id="checkBox"
@@ -568,7 +356,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
568
356
  tabindex="-1"
569
357
  >
570
358
  <div
571
- class="noShrink boxContainer medium filled"
359
+ class="d-flex-shrink-0 boxContainer medium filled"
572
360
  data-id="boxComponent"
573
361
  data-selector-id="box"
574
362
  data-test-id="boxComponent"
@@ -599,19 +387,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
599
387
  </div>
600
388
  </div>
601
389
  <div
602
- class="flexible basis_zero noShrink leftBox selfAlign_center"
390
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
603
391
  data-id="boxComponent"
604
392
  data-selector-id="box"
605
393
  data-test-id="boxComponent"
606
394
  >
607
395
  <div
608
- class="noShrink titleBox"
396
+ class="d-flex-shrink-0 titleBox"
609
397
  data-id="boxComponent"
610
398
  data-selector-id="box"
611
399
  data-test-id="boxComponent"
612
400
  >
613
401
  <div
614
- class="basis_auto shrink value"
402
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
615
403
  data-id="boxComponent"
616
404
  data-selector-id="box"
617
405
  data-test-id="boxComponent"
@@ -620,7 +408,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
620
408
  </div>
621
409
  </div>
622
410
  <div
623
- class="noShrink secondaryField secondaryValue"
411
+ class="d-flex-shrink-0 secondaryField secondaryValue"
624
412
  data-id="boxComponent"
625
413
  data-selector-id="box"
626
414
  data-test-id="boxComponent"
@@ -637,7 +425,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
637
425
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
638
426
  <DocumentFragment>
639
427
  <li
640
- class="flex row alignItems_center list medium default withBorder"
428
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
641
429
  data-a11y-inset-focus="true"
642
430
  data-id="List_ListItemWithCheckBox"
643
431
  data-selector-id="listItemWithCheckBox"
@@ -646,7 +434,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
646
434
  tabindex="0"
647
435
  >
648
436
  <div
649
- class="noShrink contentWrapper"
437
+ class="d-flex-shrink-0 contentWrapper"
650
438
  data-id="boxComponent"
651
439
  data-selector-id="box"
652
440
  data-test-id="boxComponent"
@@ -657,7 +445,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
657
445
  data-test-id="List_checkBox"
658
446
  >
659
447
  <div
660
- class="noShrink alignSelf_start lhsBoxInner"
448
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
661
449
  data-id="boxComponent"
662
450
  data-selector-id="box"
663
451
  data-test-id="boxComponent"
@@ -665,7 +453,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
665
453
  <div
666
454
  aria-checked="false"
667
455
  aria-hidden="true"
668
- class="inlineFlex row alignItems_center container pointer primary"
456
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
669
457
  data-id="checkBox"
670
458
  data-selector-id="container"
671
459
  data-test-id="checkBox"
@@ -673,7 +461,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
673
461
  tabindex="-1"
674
462
  >
675
463
  <div
676
- class="noShrink boxContainer medium filled"
464
+ class="d-flex-shrink-0 boxContainer medium filled"
677
465
  data-id="boxComponent"
678
466
  data-selector-id="box"
679
467
  data-test-id="boxComponent"
@@ -704,19 +492,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
704
492
  </div>
705
493
  </div>
706
494
  <div
707
- class="flexible basis_zero noShrink leftBox selfAlign_center"
495
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
708
496
  data-id="boxComponent"
709
497
  data-selector-id="box"
710
498
  data-test-id="boxComponent"
711
499
  >
712
500
  <div
713
- class="noShrink titleBox"
501
+ class="d-flex-shrink-0 titleBox"
714
502
  data-id="boxComponent"
715
503
  data-selector-id="box"
716
504
  data-test-id="boxComponent"
717
505
  >
718
506
  <div
719
- class="basis_auto shrink value"
507
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
720
508
  data-id="boxComponent"
721
509
  data-selector-id="box"
722
510
  data-test-id="boxComponent"
@@ -725,7 +513,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
725
513
  </div>
726
514
  </div>
727
515
  <div
728
- class="noShrink secondaryField secondaryValue"
516
+ class="d-flex-shrink-0 secondaryField secondaryValue"
729
517
  data-id="boxComponent"
730
518
  data-selector-id="box"
731
519
  data-test-id="boxComponent"
@@ -742,7 +530,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
742
530
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
743
531
  <DocumentFragment>
744
532
  <li
745
- class="flex row alignItems_center list medium default withBorder"
533
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
746
534
  data-a11y-inset-focus="true"
747
535
  data-id="List_ListItemWithCheckBox"
748
536
  data-selector-id="listItemWithCheckBox"
@@ -751,7 +539,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
751
539
  tabindex="0"
752
540
  >
753
541
  <div
754
- class="noShrink contentWrapper"
542
+ class="d-flex-shrink-0 contentWrapper"
755
543
  data-id="boxComponent"
756
544
  data-selector-id="box"
757
545
  data-test-id="boxComponent"
@@ -762,7 +550,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
762
550
  data-test-id="List_checkBox"
763
551
  >
764
552
  <div
765
- class="noShrink alignSelf_start lhsBoxInner"
553
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
766
554
  data-id="boxComponent"
767
555
  data-selector-id="box"
768
556
  data-test-id="boxComponent"
@@ -770,7 +558,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
770
558
  <div
771
559
  aria-checked="false"
772
560
  aria-hidden="true"
773
- class="inlineFlex row alignItems_center container pointer primary"
561
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
774
562
  data-id="checkBox"
775
563
  data-selector-id="container"
776
564
  data-test-id="checkBox"
@@ -778,7 +566,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
778
566
  tabindex="-1"
779
567
  >
780
568
  <div
781
- class="noShrink boxContainer medium filled"
569
+ class="d-flex-shrink-0 boxContainer medium filled"
782
570
  data-id="boxComponent"
783
571
  data-selector-id="box"
784
572
  data-test-id="boxComponent"
@@ -809,19 +597,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
809
597
  </div>
810
598
  </div>
811
599
  <div
812
- class="flexible basis_zero noShrink leftBox selfAlign_center"
600
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
813
601
  data-id="boxComponent"
814
602
  data-selector-id="box"
815
603
  data-test-id="boxComponent"
816
604
  >
817
605
  <div
818
- class="noShrink titleBox"
606
+ class="d-flex-shrink-0 titleBox"
819
607
  data-id="boxComponent"
820
608
  data-selector-id="box"
821
609
  data-test-id="boxComponent"
822
610
  >
823
611
  <div
824
- class="basis_auto shrink value"
612
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
825
613
  data-id="boxComponent"
826
614
  data-selector-id="box"
827
615
  data-test-id="boxComponent"
@@ -830,7 +618,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
830
618
  </div>
831
619
  </div>
832
620
  <div
833
- class="noShrink secondaryField secondaryValue"
621
+ class="d-flex-shrink-0 secondaryField secondaryValue"
834
622
  data-id="boxComponent"
835
623
  data-selector-id="box"
836
624
  data-test-id="boxComponent"
@@ -847,7 +635,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
847
635
  exports[`ListItemWithCheckBox rendering the defult props 1`] = `
848
636
  <DocumentFragment>
849
637
  <li
850
- class="flex row alignItems_center list medium default withBorder"
638
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
851
639
  data-a11y-inset-focus="true"
852
640
  data-id="List_ListItemWithCheckBox"
853
641
  data-selector-id="listItemWithCheckBox"
@@ -856,7 +644,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
856
644
  tabindex="0"
857
645
  >
858
646
  <div
859
- class="noShrink contentWrapper"
647
+ class="d-flex-shrink-0 contentWrapper"
860
648
  data-id="boxComponent"
861
649
  data-selector-id="box"
862
650
  data-test-id="boxComponent"
@@ -867,7 +655,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
867
655
  data-test-id="List_checkBox"
868
656
  >
869
657
  <div
870
- class="noShrink alignSelf_start lhsBoxInner"
658
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
871
659
  data-id="boxComponent"
872
660
  data-selector-id="box"
873
661
  data-test-id="boxComponent"
@@ -875,7 +663,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
875
663
  <div
876
664
  aria-checked="false"
877
665
  aria-hidden="true"
878
- class="inlineFlex row alignItems_center container pointer primary"
666
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
879
667
  data-id="checkBox"
880
668
  data-selector-id="container"
881
669
  data-test-id="checkBox"
@@ -883,7 +671,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
883
671
  tabindex="-1"
884
672
  >
885
673
  <div
886
- class="noShrink boxContainer medium filled"
674
+ class="d-flex-shrink-0 boxContainer medium filled"
887
675
  data-id="boxComponent"
888
676
  data-selector-id="box"
889
677
  data-test-id="boxComponent"
@@ -914,19 +702,19 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
914
702
  </div>
915
703
  </div>
916
704
  <div
917
- class="flexible basis_zero noShrink leftBox selfAlign_center"
705
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
918
706
  data-id="boxComponent"
919
707
  data-selector-id="box"
920
708
  data-test-id="boxComponent"
921
709
  >
922
710
  <div
923
- class="noShrink titleBox"
711
+ class="d-flex-shrink-0 titleBox"
924
712
  data-id="boxComponent"
925
713
  data-selector-id="box"
926
714
  data-test-id="boxComponent"
927
715
  >
928
716
  <div
929
- class="basis_auto shrink value"
717
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
930
718
  data-id="boxComponent"
931
719
  data-selector-id="box"
932
720
  data-test-id="boxComponent"