@zohodesk/components 1.6.25 → 1.6.27

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 (218) hide show
  1. package/CHANGELOG.md +2046 -0
  2. package/README.md +16 -2031
  3. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +5 -20
  4. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +5 -20
  5. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +5 -20
  6. package/es/Accordion/Accordion.js +1 -6
  7. package/es/Accordion/AccordionItem.js +1 -6
  8. package/es/Animation/Animation.js +1 -8
  9. package/es/AppContainer/AppContainer.js +1 -6
  10. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  11. package/es/Avatar/Avatar.js +1 -6
  12. package/es/AvatarTeam/AvatarTeam.js +1 -7
  13. package/es/Button/Button.js +1 -6
  14. package/es/Buttongroup/Buttongroup.js +1 -14
  15. package/es/Card/Card.js +1 -9
  16. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  17. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  18. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  19. package/es/CheckBox/CheckBox.js +1 -6
  20. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  21. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  22. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  23. package/es/DateTime/DateWidget.js +1 -11
  24. package/es/DateTime/DateWidget.module.css +3 -0
  25. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  26. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  27. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  28. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  29. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  30. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  31. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  32. package/es/DropDown/DropDownHeading.js +1 -6
  33. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  34. package/es/Heading/Heading.js +1 -6
  35. package/es/Label/Label.js +1 -6
  36. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  37. package/es/ListItem/ListContainer.js +1 -6
  38. package/es/ListItem/ListItem.js +1 -6
  39. package/es/ListItem/ListItemWithAvatar.js +1 -6
  40. package/es/ListItem/ListItemWithCheckBox.js +1 -6
  41. package/es/ListItem/ListItemWithIcon.js +1 -6
  42. package/es/ListItem/ListItemWithRadio.js +1 -6
  43. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  44. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  45. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  46. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  47. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  48. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  49. package/es/Modal/Modal.js +1 -8
  50. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  51. package/es/MultiSelect/AdvancedMultiSelect.js +1 -9
  52. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  53. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  54. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  55. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  56. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  57. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  58. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  59. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  60. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  61. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  62. package/es/RippleEffect/RippleEffect.js +1 -6
  63. package/es/Select/GroupSelect.js +1 -8
  64. package/es/Select/Select.js +1 -10
  65. package/es/Select/SelectWithAvatar.js +1 -9
  66. package/es/Select/SelectWithIcon.js +1 -7
  67. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  68. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  69. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  70. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  71. package/es/Switch/Switch.js +1 -6
  72. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  73. package/es/Tab/Tab.js +1 -6
  74. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  75. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  76. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  77. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  78. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  79. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  80. package/es/Tag/Tag.js +1 -6
  81. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  82. package/es/TextBox/TextBox.js +1 -8
  83. package/es/TextBoxIcon/TextBoxIcon.js +1 -8
  84. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  85. package/es/Textarea/Textarea.js +1 -8
  86. package/es/Tooltip/Tooltip.js +1 -8
  87. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  88. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  89. package/es/semantic/Button/Button.js +1 -6
  90. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  91. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  92. package/es/v1/Button/Button.js +197 -113
  93. package/es/v1/Button/README.md +110 -44
  94. package/es/v1/Button/__tests__/Button.spec.js +139 -48
  95. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  96. package/es/v1/Button/constants/index.js +29 -23
  97. package/es/v1/Button/constants/presets.js +160 -0
  98. package/es/v1/Button/css/Button_v1.module.css +33 -16
  99. package/es/v1/Button/css/cssJSLogic.js +56 -29
  100. package/es/v1/Button/props/defaultProps.js +5 -6
  101. package/es/v1/Button/props/propTypes.js +26 -8
  102. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  103. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  104. package/es/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +357 -0
  105. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  106. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  107. package/es/v1/helpers/colorHelpers/colorHelper.js +120 -139
  108. package/es/v1/helpers/colorHelpers/constants/index.js +45 -4
  109. package/es/v1/helpers/colorHelpers/index.js +0 -1
  110. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  111. package/es/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  112. package/lib/Accordion/Accordion.js +1 -6
  113. package/lib/Accordion/AccordionItem.js +1 -6
  114. package/lib/Animation/Animation.js +1 -8
  115. package/lib/AppContainer/AppContainer.js +1 -6
  116. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  117. package/lib/Avatar/Avatar.js +1 -6
  118. package/lib/AvatarTeam/AvatarTeam.js +1 -7
  119. package/lib/Button/Button.js +1 -7
  120. package/lib/Buttongroup/Buttongroup.js +1 -14
  121. package/lib/Card/Card.js +1 -8
  122. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  123. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  124. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  125. package/lib/CheckBox/CheckBox.js +1 -6
  126. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  127. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  128. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  129. package/lib/DateTime/DateWidget.js +1 -11
  130. package/lib/DateTime/DateWidget.module.css +3 -0
  131. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  132. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  133. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  134. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  135. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  136. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  137. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  138. package/lib/DropDown/DropDownHeading.js +1 -6
  139. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  140. package/lib/Heading/Heading.js +1 -6
  141. package/lib/Label/Label.js +1 -6
  142. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  143. package/lib/ListItem/ListContainer.js +1 -7
  144. package/lib/ListItem/ListItem.js +1 -6
  145. package/lib/ListItem/ListItemWithAvatar.js +1 -6
  146. package/lib/ListItem/ListItemWithCheckBox.js +1 -6
  147. package/lib/ListItem/ListItemWithIcon.js +1 -6
  148. package/lib/ListItem/ListItemWithRadio.js +1 -6
  149. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  150. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  151. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  152. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  153. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  154. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  155. package/lib/Modal/Modal.js +1 -8
  156. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  157. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -9
  158. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  159. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  160. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  161. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  162. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  163. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  164. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  165. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  166. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  167. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  168. package/lib/RippleEffect/RippleEffect.js +1 -6
  169. package/lib/Select/GroupSelect.js +1 -9
  170. package/lib/Select/Select.js +1 -11
  171. package/lib/Select/SelectWithAvatar.js +1 -9
  172. package/lib/Select/SelectWithIcon.js +1 -7
  173. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  174. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  175. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  176. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  177. package/lib/Switch/Switch.js +1 -6
  178. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  179. package/lib/Tab/Tab.js +1 -6
  180. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  181. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  182. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  183. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  184. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  185. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  186. package/lib/Tag/Tag.js +1 -6
  187. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  188. package/lib/TextBox/TextBox.js +1 -8
  189. package/lib/TextBoxIcon/TextBoxIcon.js +1 -8
  190. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  191. package/lib/Textarea/Textarea.js +1 -8
  192. package/lib/Tooltip/Tooltip.js +1 -8
  193. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  194. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  195. package/lib/semantic/Button/Button.js +1 -6
  196. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  197. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  198. package/lib/v1/Button/Button.js +207 -123
  199. package/lib/v1/Button/README.md +110 -44
  200. package/lib/v1/Button/__tests__/Button.spec.js +195 -88
  201. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  202. package/lib/v1/Button/constants/index.js +34 -31
  203. package/lib/v1/Button/constants/presets.js +179 -0
  204. package/lib/v1/Button/css/Button_v1.module.css +33 -16
  205. package/lib/v1/Button/css/cssJSLogic.js +45 -25
  206. package/lib/v1/Button/props/defaultProps.js +4 -5
  207. package/lib/v1/Button/props/propTypes.js +41 -7
  208. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  209. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  210. package/lib/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +363 -0
  211. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  212. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  213. package/lib/v1/helpers/colorHelpers/colorHelper.js +130 -153
  214. package/lib/v1/helpers/colorHelpers/constants/index.js +45 -4
  215. package/lib/v1/helpers/colorHelpers/index.js +2 -24
  216. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  217. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  218. package/package.json +16 -16
package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode & it's custom class 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
- class="flex row alignItems_center list medium default withBorder"
6
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
7
7
  data-a11y-inset-focus="true"
8
8
  data-id="list"
9
9
  data-selector-id="listItemWithIcon"
@@ -12,25 +12,25 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="noShrink contentWrapper"
15
+ class="d-flex-shrink-0 contentWrapper"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
19
19
  >
20
20
  <div
21
- class="flexible basis_zero noShrink leftBox selfAlign_center"
21
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
22
22
  data-id="boxComponent"
23
23
  data-selector-id="box"
24
24
  data-test-id="boxComponent"
25
25
  >
26
26
  <div
27
- class="noShrink titleBox"
27
+ class="d-flex-shrink-0 titleBox"
28
28
  data-id="boxComponent"
29
29
  data-selector-id="box"
30
30
  data-test-id="boxComponent"
31
31
  >
32
32
  <div
33
- class="basis_auto shrink value"
33
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
34
34
  data-id="list_Text"
35
35
  data-selector-id="box"
36
36
  data-test-id="list_Text"
@@ -38,7 +38,7 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
38
38
  List
39
39
  </div>
40
40
  <div
41
- class="noShrink customValueRightPlaceholderClass"
41
+ class="d-flex-shrink-0 customValueRightPlaceholderClass"
42
42
  data-id="boxComponent"
43
43
  data-selector-id="box"
44
44
  data-test-id="boxComponent"
@@ -57,7 +57,7 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
57
57
  exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode 1`] = `
58
58
  <DocumentFragment>
59
59
  <li
60
- class="flex row alignItems_center list medium default withBorder"
60
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
61
61
  data-a11y-inset-focus="true"
62
62
  data-id="list"
63
63
  data-selector-id="listItemWithIcon"
@@ -66,25 +66,25 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
66
66
  tabindex="0"
67
67
  >
68
68
  <div
69
- class="noShrink contentWrapper"
69
+ class="d-flex-shrink-0 contentWrapper"
70
70
  data-id="boxComponent"
71
71
  data-selector-id="box"
72
72
  data-test-id="boxComponent"
73
73
  >
74
74
  <div
75
- class="flexible basis_zero noShrink leftBox selfAlign_center"
75
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
76
76
  data-id="boxComponent"
77
77
  data-selector-id="box"
78
78
  data-test-id="boxComponent"
79
79
  >
80
80
  <div
81
- class="noShrink titleBox"
81
+ class="d-flex-shrink-0 titleBox"
82
82
  data-id="boxComponent"
83
83
  data-selector-id="box"
84
84
  data-test-id="boxComponent"
85
85
  >
86
86
  <div
87
- class="basis_auto shrink value"
87
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
88
88
  data-id="list_Text"
89
89
  data-selector-id="box"
90
90
  data-test-id="list_Text"
@@ -92,7 +92,7 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
92
92
  List
93
93
  </div>
94
94
  <div
95
- class="noShrink"
95
+ class="d-flex-shrink-0"
96
96
  data-id="boxComponent"
97
97
  data-selector-id="box"
98
98
  data-test-id="boxComponent"
@@ -111,7 +111,7 @@ exports[`ListItemWithIcon ListItemWithIcon with renderValueRightPlaceholderNode
111
111
  exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align center 1`] = `
112
112
  <DocumentFragment>
113
113
  <li
114
- class="flex row alignItems_center list medium default withBorder"
114
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
115
115
  data-a11y-inset-focus="true"
116
116
  data-id="list"
117
117
  data-selector-id="listItemWithIcon"
@@ -120,25 +120,25 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
120
120
  tabindex="0"
121
121
  >
122
122
  <div
123
- class="noShrink contentWrapper alignLhsBox_center"
123
+ class="d-flex-shrink-0 contentWrapper alignLhsBox_center"
124
124
  data-id="boxComponent"
125
125
  data-selector-id="box"
126
126
  data-test-id="boxComponent"
127
127
  >
128
128
  <div
129
- class="flexible basis_zero noShrink leftBox selfAlign_center"
129
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
130
130
  data-id="boxComponent"
131
131
  data-selector-id="box"
132
132
  data-test-id="boxComponent"
133
133
  >
134
134
  <div
135
- class="noShrink titleBox"
135
+ class="d-flex-shrink-0 titleBox"
136
136
  data-id="boxComponent"
137
137
  data-selector-id="box"
138
138
  data-test-id="boxComponent"
139
139
  >
140
140
  <div
141
- class="basis_auto shrink value"
141
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
142
142
  data-id="list_Text"
143
143
  data-selector-id="box"
144
144
  data-test-id="list_Text"
@@ -147,7 +147,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
147
147
  </div>
148
148
  </div>
149
149
  <div
150
- class="noShrink secondaryField secondaryValue"
150
+ class="d-flex-shrink-0 secondaryField secondaryValue"
151
151
  data-id="boxComponent"
152
152
  data-selector-id="box"
153
153
  data-test-id="boxComponent"
@@ -164,7 +164,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
164
164
  exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align end 1`] = `
165
165
  <DocumentFragment>
166
166
  <li
167
- class="flex row alignItems_center list medium default withBorder"
167
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
168
168
  data-a11y-inset-focus="true"
169
169
  data-id="list"
170
170
  data-selector-id="listItemWithIcon"
@@ -173,25 +173,25 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
173
173
  tabindex="0"
174
174
  >
175
175
  <div
176
- class="noShrink contentWrapper alignLhsBox_end"
176
+ class="d-flex-shrink-0 contentWrapper alignLhsBox_end"
177
177
  data-id="boxComponent"
178
178
  data-selector-id="box"
179
179
  data-test-id="boxComponent"
180
180
  >
181
181
  <div
182
- class="flexible basis_zero noShrink leftBox selfAlign_center"
182
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
183
183
  data-id="boxComponent"
184
184
  data-selector-id="box"
185
185
  data-test-id="boxComponent"
186
186
  >
187
187
  <div
188
- class="noShrink titleBox"
188
+ class="d-flex-shrink-0 titleBox"
189
189
  data-id="boxComponent"
190
190
  data-selector-id="box"
191
191
  data-test-id="boxComponent"
192
192
  >
193
193
  <div
194
- class="basis_auto shrink value"
194
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
195
195
  data-id="list_Text"
196
196
  data-selector-id="box"
197
197
  data-test-id="list_Text"
@@ -200,7 +200,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
200
200
  </div>
201
201
  </div>
202
202
  <div
203
- class="noShrink secondaryField secondaryValue"
203
+ class="d-flex-shrink-0 secondaryField secondaryValue"
204
204
  data-id="boxComponent"
205
205
  data-selector-id="box"
206
206
  data-test-id="boxComponent"
@@ -217,7 +217,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS ali
217
217
  exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
218
218
  <DocumentFragment>
219
219
  <li
220
- class="flex row alignItems_center list medium default withBorder"
220
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
221
221
  data-a11y-inset-focus="true"
222
222
  data-id="list"
223
223
  data-selector-id="listItemWithIcon"
@@ -226,25 +226,25 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
226
226
  tabindex="0"
227
227
  >
228
228
  <div
229
- class="noShrink contentWrapper"
229
+ class="d-flex-shrink-0 contentWrapper"
230
230
  data-id="boxComponent"
231
231
  data-selector-id="box"
232
232
  data-test-id="boxComponent"
233
233
  >
234
234
  <div
235
- class="flexible basis_zero noShrink leftBox selfAlign_center"
235
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
236
236
  data-id="boxComponent"
237
237
  data-selector-id="box"
238
238
  data-test-id="boxComponent"
239
239
  >
240
240
  <div
241
- class="noShrink titleBox"
241
+ class="d-flex-shrink-0 titleBox"
242
242
  data-id="boxComponent"
243
243
  data-selector-id="box"
244
244
  data-test-id="boxComponent"
245
245
  >
246
246
  <div
247
- class="basis_auto shrink value"
247
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
248
248
  data-id="list_Text"
249
249
  data-selector-id="box"
250
250
  data-test-id="list_Text"
@@ -253,7 +253,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
253
253
  </div>
254
254
  </div>
255
255
  <div
256
- class="noShrink secondaryField secondaryValue"
256
+ class="d-flex-shrink-0 secondaryField secondaryValue"
257
257
  data-id="boxComponent"
258
258
  data-selector-id="box"
259
259
  data-test-id="boxComponent"
@@ -270,7 +270,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue 1`] = `
270
270
  exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS align start 1`] = `
271
271
  <DocumentFragment>
272
272
  <li
273
- class="flex row alignItems_center list medium default withBorder"
273
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
274
274
  data-a11y-inset-focus="true"
275
275
  data-id="list"
276
276
  data-selector-id="listItemWithIcon"
@@ -279,25 +279,25 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
279
279
  tabindex="0"
280
280
  >
281
281
  <div
282
- class="noShrink contentWrapper"
282
+ class="d-flex-shrink-0 contentWrapper"
283
283
  data-id="boxComponent"
284
284
  data-selector-id="box"
285
285
  data-test-id="boxComponent"
286
286
  >
287
287
  <div
288
- class="flexible basis_zero noShrink leftBox selfAlign_center"
288
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
289
289
  data-id="boxComponent"
290
290
  data-selector-id="box"
291
291
  data-test-id="boxComponent"
292
292
  >
293
293
  <div
294
- class="noShrink titleBox"
294
+ class="d-flex-shrink-0 titleBox"
295
295
  data-id="boxComponent"
296
296
  data-selector-id="box"
297
297
  data-test-id="boxComponent"
298
298
  >
299
299
  <div
300
- class="basis_auto shrink value"
300
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
301
301
  data-id="list_Text"
302
302
  data-selector-id="box"
303
303
  data-test-id="list_Text"
@@ -306,7 +306,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
306
306
  </div>
307
307
  </div>
308
308
  <div
309
- class="noShrink secondaryField secondaryValue"
309
+ class="d-flex-shrink-0 secondaryField secondaryValue"
310
310
  data-id="boxComponent"
311
311
  data-selector-id="box"
312
312
  data-test-id="boxComponent"
@@ -323,7 +323,7 @@ exports[`ListItemWithIcon ListItemWithIcon with secondaryValue text and LHS alig
323
323
  exports[`ListItemWithIcon rendering the defult props 1`] = `
324
324
  <DocumentFragment>
325
325
  <li
326
- class="flex row alignItems_center list medium default withBorder"
326
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
327
327
  data-a11y-inset-focus="true"
328
328
  data-id="list"
329
329
  data-selector-id="listItemWithIcon"
@@ -332,25 +332,25 @@ exports[`ListItemWithIcon rendering the defult props 1`] = `
332
332
  tabindex="0"
333
333
  >
334
334
  <div
335
- class="noShrink contentWrapper"
335
+ class="d-flex-shrink-0 contentWrapper"
336
336
  data-id="boxComponent"
337
337
  data-selector-id="box"
338
338
  data-test-id="boxComponent"
339
339
  >
340
340
  <div
341
- class="flexible basis_zero noShrink leftBox selfAlign_center"
341
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
342
342
  data-id="boxComponent"
343
343
  data-selector-id="box"
344
344
  data-test-id="boxComponent"
345
345
  >
346
346
  <div
347
- class="noShrink titleBox"
347
+ class="d-flex-shrink-0 titleBox"
348
348
  data-id="boxComponent"
349
349
  data-selector-id="box"
350
350
  data-test-id="boxComponent"
351
351
  >
352
352
  <div
353
- class="basis_auto shrink value"
353
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
354
354
  data-id="list_Text"
355
355
  data-selector-id="box"
356
356
  data-test-id="list_Text"