@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__/ListItem.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`ListItem ListItem 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="listItem"
9
9
  data-selector-id="listItem"
@@ -12,19 +12,19 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="flexible basis_zero noShrink leftBox"
15
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
19
19
  >
20
20
  <div
21
- class="noShrink titleBox"
21
+ class="d-flex-shrink-0 titleBox"
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 customValueRightPlaceholderClass"
27
+ class="d-flex-shrink-0 customValueRightPlaceholderClass"
28
28
  data-id="boxComponent"
29
29
  data-selector-id="box"
30
30
  data-test-id="boxComponent"
@@ -42,7 +42,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode & it's custom cl
42
42
  exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
43
43
  <DocumentFragment>
44
44
  <li
45
- class="flex row alignItems_center list medium default withBorder"
45
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
46
46
  data-a11y-inset-focus="true"
47
47
  data-id="listItem"
48
48
  data-selector-id="listItem"
@@ -51,19 +51,19 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
51
51
  tabindex="0"
52
52
  >
53
53
  <div
54
- class="flexible basis_zero noShrink leftBox"
54
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
55
55
  data-id="boxComponent"
56
56
  data-selector-id="box"
57
57
  data-test-id="boxComponent"
58
58
  >
59
59
  <div
60
- class="noShrink titleBox"
60
+ class="d-flex-shrink-0 titleBox"
61
61
  data-id="boxComponent"
62
62
  data-selector-id="box"
63
63
  data-test-id="boxComponent"
64
64
  >
65
65
  <div
66
- class="noShrink"
66
+ class="d-flex-shrink-0"
67
67
  data-id="boxComponent"
68
68
  data-selector-id="box"
69
69
  data-test-id="boxComponent"
@@ -81,7 +81,7 @@ exports[`ListItem ListItem with renderValueRightPlaceholderNode 1`] = `
81
81
  exports[`ListItem Should render with renderBeforeChildren 1`] = `
82
82
  <DocumentFragment>
83
83
  <li
84
- class="flex row alignItems_center list medium default withBorder"
84
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
85
85
  data-a11y-inset-focus="true"
86
86
  data-id="listItem"
87
87
  data-selector-id="listItem"
@@ -90,19 +90,19 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
90
90
  tabindex="0"
91
91
  >
92
92
  <div
93
- class="flexible basis_zero noShrink leftBox"
93
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
94
94
  data-id="boxComponent"
95
95
  data-selector-id="box"
96
96
  data-test-id="boxComponent"
97
97
  >
98
98
  <div
99
- class="noShrink titleBox"
99
+ class="d-flex-shrink-0 titleBox"
100
100
  data-id="boxComponent"
101
101
  data-selector-id="box"
102
102
  data-test-id="boxComponent"
103
103
  >
104
104
  <div
105
- class="basis_auto noShrink beforeChild"
105
+ class="d-basis-auto d-flex-shrink-0 beforeChild"
106
106
  data-id="boxComponent"
107
107
  data-selector-id="box"
108
108
  data-test-id="boxComponent"
@@ -112,7 +112,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
112
112
  </span>
113
113
  </div>
114
114
  <div
115
- class="basis_auto shrink children"
115
+ class="d-basis-auto d-min-w-0 d-flex-shrink children"
116
116
  data-id="boxComponent"
117
117
  data-selector-id="box"
118
118
  data-test-id="boxComponent"
@@ -128,7 +128,7 @@ exports[`ListItem Should render with renderBeforeChildren 1`] = `
128
128
  exports[`ListItem rendering the defult props 1`] = `
129
129
  <DocumentFragment>
130
130
  <li
131
- class="flex row alignItems_center list medium default withBorder"
131
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
132
132
  data-a11y-inset-focus="true"
133
133
  data-id="listItem"
134
134
  data-selector-id="listItem"
@@ -137,13 +137,13 @@ exports[`ListItem rendering the defult props 1`] = `
137
137
  tabindex="0"
138
138
  >
139
139
  <div
140
- class="flexible basis_zero noShrink leftBox"
140
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
141
141
  data-id="boxComponent"
142
142
  data-selector-id="box"
143
143
  data-test-id="boxComponent"
144
144
  >
145
145
  <div
146
- class="noShrink titleBox"
146
+ class="d-flex-shrink-0 titleBox"
147
147
  data-id="boxComponent"
148
148
  data-selector-id="box"
149
149
  data-test-id="boxComponent"
package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`ListItemWithAvatar ListItemWithAvatar 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_ListItemWithAvatar"
9
9
  data-selector-id="listItemWithAvatar"
@@ -12,25 +12,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
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="boxComponent"
35
35
  data-selector-id="box"
36
36
  data-test-id="boxComponent"
@@ -38,7 +38,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
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[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
57
57
  exports[`ListItemWithAvatar ListItemWithAvatar 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_ListItemWithAvatar"
63
63
  data-selector-id="listItemWithAvatar"
@@ -66,25 +66,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
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="boxComponent"
89
89
  data-selector-id="box"
90
90
  data-test-id="boxComponent"
@@ -92,7 +92,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
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[`ListItemWithAvatar ListItemWithAvatar with renderValueRightPlaceholderN
111
111
  exports[`ListItemWithAvatar ListItemWithAvatar 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_ListItemWithAvatar"
117
117
  data-selector-id="listItemWithAvatar"
@@ -120,25 +120,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
120
120
  tabindex="0"
121
121
  >
122
122
  <div
123
- class="noShrink contentWrapper"
123
+ class="d-flex-shrink-0 contentWrapper"
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="boxComponent"
143
143
  data-selector-id="box"
144
144
  data-test-id="boxComponent"
@@ -147,7 +147,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
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[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
164
164
  exports[`ListItemWithAvatar ListItemWithAvatar 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_ListItemWithAvatar"
170
170
  data-selector-id="listItemWithAvatar"
@@ -173,25 +173,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
173
173
  tabindex="0"
174
174
  >
175
175
  <div
176
- class="noShrink contentWrapper"
176
+ class="d-flex-shrink-0 contentWrapper"
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="boxComponent"
196
196
  data-selector-id="box"
197
197
  data-test-id="boxComponent"
@@ -200,7 +200,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
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[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
217
217
  exports[`ListItemWithAvatar ListItemWithAvatar 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_ListItemWithAvatar"
223
223
  data-selector-id="listItemWithAvatar"
@@ -226,25 +226,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar 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="boxComponent"
249
249
  data-selector-id="box"
250
250
  data-test-id="boxComponent"
@@ -253,7 +253,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar 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[`ListItemWithAvatar ListItemWithAvatar with secondaryValue 1`] = `
270
270
  exports[`ListItemWithAvatar ListItemWithAvatar 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_ListItemWithAvatar"
276
276
  data-selector-id="listItemWithAvatar"
@@ -279,25 +279,25 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
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="boxComponent"
302
302
  data-selector-id="box"
303
303
  data-test-id="boxComponent"
@@ -306,7 +306,7 @@ exports[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
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[`ListItemWithAvatar ListItemWithAvatar with secondaryValue text and LHS
323
323
  exports[`ListItemWithAvatar 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_ListItemWithAvatar"
329
329
  data-selector-id="listItemWithAvatar"
@@ -332,25 +332,25 @@ exports[`ListItemWithAvatar 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="boxComponent"
355
355
  data-selector-id="box"
356
356
  data-test-id="boxComponent"