@zohodesk/components 1.6.25 → 1.6.26

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 (216) hide show
  1. package/CHANGELOG.md +2042 -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 +0 -10
  24. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  25. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  26. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  27. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  28. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  29. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  30. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  31. package/es/DropDown/DropDownHeading.js +1 -6
  32. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  33. package/es/Heading/Heading.js +1 -6
  34. package/es/Label/Label.js +1 -6
  35. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  36. package/es/ListItem/ListContainer.js +1 -6
  37. package/es/ListItem/ListItem.js +1 -6
  38. package/es/ListItem/ListItemWithAvatar.js +1 -6
  39. package/es/ListItem/ListItemWithCheckBox.js +1 -6
  40. package/es/ListItem/ListItemWithIcon.js +1 -6
  41. package/es/ListItem/ListItemWithRadio.js +1 -6
  42. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  43. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  44. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  45. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  46. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  47. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  48. package/es/Modal/Modal.js +1 -8
  49. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  50. package/es/MultiSelect/AdvancedMultiSelect.js +1 -9
  51. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  52. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  53. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  54. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  55. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  56. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  57. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  58. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  59. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  60. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  61. package/es/RippleEffect/RippleEffect.js +1 -6
  62. package/es/Select/GroupSelect.js +1 -8
  63. package/es/Select/Select.js +1 -10
  64. package/es/Select/SelectWithAvatar.js +1 -9
  65. package/es/Select/SelectWithIcon.js +1 -7
  66. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  67. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  68. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  69. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  70. package/es/Switch/Switch.js +1 -6
  71. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  72. package/es/Tab/Tab.js +1 -6
  73. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  74. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  75. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  76. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  77. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  78. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  79. package/es/Tag/Tag.js +1 -6
  80. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  81. package/es/TextBox/TextBox.js +1 -8
  82. package/es/TextBoxIcon/TextBoxIcon.js +1 -8
  83. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  84. package/es/Textarea/Textarea.js +1 -8
  85. package/es/Tooltip/Tooltip.js +1 -8
  86. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  87. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  88. package/es/semantic/Button/Button.js +1 -6
  89. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  90. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  91. package/es/v1/Button/Button.js +197 -113
  92. package/es/v1/Button/README.md +110 -44
  93. package/es/v1/Button/__tests__/Button.spec.js +139 -48
  94. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  95. package/es/v1/Button/constants/index.js +29 -23
  96. package/es/v1/Button/constants/presets.js +160 -0
  97. package/es/v1/Button/css/Button_v1.module.css +33 -16
  98. package/es/v1/Button/css/cssJSLogic.js +56 -29
  99. package/es/v1/Button/props/defaultProps.js +5 -6
  100. package/es/v1/Button/props/propTypes.js +26 -8
  101. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  102. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  103. package/es/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +357 -0
  104. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  105. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  106. package/es/v1/helpers/colorHelpers/colorHelper.js +120 -139
  107. package/es/v1/helpers/colorHelpers/constants/index.js +45 -4
  108. package/es/v1/helpers/colorHelpers/index.js +0 -1
  109. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  110. package/es/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  111. package/lib/Accordion/Accordion.js +1 -6
  112. package/lib/Accordion/AccordionItem.js +1 -6
  113. package/lib/Animation/Animation.js +1 -8
  114. package/lib/AppContainer/AppContainer.js +1 -6
  115. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  116. package/lib/Avatar/Avatar.js +1 -6
  117. package/lib/AvatarTeam/AvatarTeam.js +1 -7
  118. package/lib/Button/Button.js +1 -7
  119. package/lib/Buttongroup/Buttongroup.js +1 -14
  120. package/lib/Card/Card.js +1 -8
  121. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  122. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  123. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  124. package/lib/CheckBox/CheckBox.js +1 -6
  125. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  126. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  127. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  128. package/lib/DateTime/DateWidget.js +0 -10
  129. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  130. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  131. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  132. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  133. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  134. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  135. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  136. package/lib/DropDown/DropDownHeading.js +1 -6
  137. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  138. package/lib/Heading/Heading.js +1 -6
  139. package/lib/Label/Label.js +1 -6
  140. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  141. package/lib/ListItem/ListContainer.js +1 -7
  142. package/lib/ListItem/ListItem.js +1 -6
  143. package/lib/ListItem/ListItemWithAvatar.js +1 -6
  144. package/lib/ListItem/ListItemWithCheckBox.js +1 -6
  145. package/lib/ListItem/ListItemWithIcon.js +1 -6
  146. package/lib/ListItem/ListItemWithRadio.js +1 -6
  147. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  148. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  149. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  150. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  151. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  152. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  153. package/lib/Modal/Modal.js +1 -8
  154. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  155. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -9
  156. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  157. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  158. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  159. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  160. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  161. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  162. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  163. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  164. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  165. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  166. package/lib/RippleEffect/RippleEffect.js +1 -6
  167. package/lib/Select/GroupSelect.js +1 -9
  168. package/lib/Select/Select.js +1 -11
  169. package/lib/Select/SelectWithAvatar.js +1 -9
  170. package/lib/Select/SelectWithIcon.js +1 -7
  171. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  172. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  173. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  174. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  175. package/lib/Switch/Switch.js +1 -6
  176. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  177. package/lib/Tab/Tab.js +1 -6
  178. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  179. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  180. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  181. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  182. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  183. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  184. package/lib/Tag/Tag.js +1 -6
  185. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  186. package/lib/TextBox/TextBox.js +1 -8
  187. package/lib/TextBoxIcon/TextBoxIcon.js +1 -8
  188. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  189. package/lib/Textarea/Textarea.js +1 -8
  190. package/lib/Tooltip/Tooltip.js +1 -8
  191. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  192. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  193. package/lib/semantic/Button/Button.js +1 -6
  194. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  195. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  196. package/lib/v1/Button/Button.js +207 -123
  197. package/lib/v1/Button/README.md +110 -44
  198. package/lib/v1/Button/__tests__/Button.spec.js +195 -88
  199. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  200. package/lib/v1/Button/constants/index.js +34 -31
  201. package/lib/v1/Button/constants/presets.js +179 -0
  202. package/lib/v1/Button/css/Button_v1.module.css +33 -16
  203. package/lib/v1/Button/css/cssJSLogic.js +45 -25
  204. package/lib/v1/Button/props/defaultProps.js +4 -5
  205. package/lib/v1/Button/props/propTypes.js +41 -7
  206. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  207. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  208. package/lib/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +363 -0
  209. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  210. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  211. package/lib/v1/helpers/colorHelpers/colorHelper.js +130 -153
  212. package/lib/v1/helpers/colorHelpers/constants/index.js +45 -4
  213. package/lib/v1/helpers/colorHelpers/index.js +2 -24
  214. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  215. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  216. package/package.json +16 -16
package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`ListItemWithCheckBox ListItemWithCheckBox 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_ListItemWithCheckBox"
9
9
  data-selector-id="listItemWithCheckBox"
@@ -12,7 +12,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
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"
@@ -23,7 +23,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
23
23
  data-test-id="List_checkBox"
24
24
  >
25
25
  <div
26
- class="noShrink alignSelf_start lhsBoxInner"
26
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
27
27
  data-id="boxComponent"
28
28
  data-selector-id="box"
29
29
  data-test-id="boxComponent"
@@ -31,7 +31,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
31
31
  <div
32
32
  aria-checked="false"
33
33
  aria-hidden="true"
34
- class="inlineFlex row alignItems_center container pointer primary"
34
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
35
35
  data-id="checkBox"
36
36
  data-selector-id="container"
37
37
  data-test-id="checkBox"
@@ -39,7 +39,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
39
39
  tabindex="-1"
40
40
  >
41
41
  <div
42
- class="noShrink boxContainer medium filled"
42
+ class="d-flex-shrink-0 boxContainer medium filled"
43
43
  data-id="boxComponent"
44
44
  data-selector-id="box"
45
45
  data-test-id="boxComponent"
@@ -70,19 +70,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
70
70
  </div>
71
71
  </div>
72
72
  <div
73
- 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"
74
74
  data-id="boxComponent"
75
75
  data-selector-id="box"
76
76
  data-test-id="boxComponent"
77
77
  >
78
78
  <div
79
- class="noShrink titleBox"
79
+ class="d-flex-shrink-0 titleBox"
80
80
  data-id="boxComponent"
81
81
  data-selector-id="box"
82
82
  data-test-id="boxComponent"
83
83
  >
84
84
  <div
85
- class="basis_auto shrink value"
85
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
86
86
  data-id="boxComponent"
87
87
  data-selector-id="box"
88
88
  data-test-id="boxComponent"
@@ -90,7 +90,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
90
90
  List
91
91
  </div>
92
92
  <div
93
- class="noShrink customValueRightPlaceholderClass"
93
+ class="d-flex-shrink-0 customValueRightPlaceholderClass"
94
94
  data-id="boxComponent"
95
95
  data-selector-id="box"
96
96
  data-test-id="boxComponent"
@@ -109,7 +109,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
109
109
  exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode 1`] = `
110
110
  <DocumentFragment>
111
111
  <li
112
- class="flex row alignItems_center list medium default withBorder"
112
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
113
113
  data-a11y-inset-focus="true"
114
114
  data-id="List_ListItemWithCheckBox"
115
115
  data-selector-id="listItemWithCheckBox"
@@ -118,7 +118,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
118
118
  tabindex="0"
119
119
  >
120
120
  <div
121
- class="noShrink contentWrapper"
121
+ class="d-flex-shrink-0 contentWrapper"
122
122
  data-id="boxComponent"
123
123
  data-selector-id="box"
124
124
  data-test-id="boxComponent"
@@ -129,7 +129,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
129
129
  data-test-id="List_checkBox"
130
130
  >
131
131
  <div
132
- class="noShrink alignSelf_start lhsBoxInner"
132
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
133
133
  data-id="boxComponent"
134
134
  data-selector-id="box"
135
135
  data-test-id="boxComponent"
@@ -137,7 +137,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
137
137
  <div
138
138
  aria-checked="false"
139
139
  aria-hidden="true"
140
- class="inlineFlex row alignItems_center container pointer primary"
140
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
141
141
  data-id="checkBox"
142
142
  data-selector-id="container"
143
143
  data-test-id="checkBox"
@@ -145,7 +145,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
145
145
  tabindex="-1"
146
146
  >
147
147
  <div
148
- class="noShrink boxContainer medium filled"
148
+ class="d-flex-shrink-0 boxContainer medium filled"
149
149
  data-id="boxComponent"
150
150
  data-selector-id="box"
151
151
  data-test-id="boxComponent"
@@ -176,19 +176,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
176
176
  </div>
177
177
  </div>
178
178
  <div
179
- 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"
180
180
  data-id="boxComponent"
181
181
  data-selector-id="box"
182
182
  data-test-id="boxComponent"
183
183
  >
184
184
  <div
185
- class="noShrink titleBox"
185
+ class="d-flex-shrink-0 titleBox"
186
186
  data-id="boxComponent"
187
187
  data-selector-id="box"
188
188
  data-test-id="boxComponent"
189
189
  >
190
190
  <div
191
- class="basis_auto shrink value"
191
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
192
192
  data-id="boxComponent"
193
193
  data-selector-id="box"
194
194
  data-test-id="boxComponent"
@@ -196,7 +196,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
196
196
  List
197
197
  </div>
198
198
  <div
199
- class="noShrink"
199
+ class="d-flex-shrink-0"
200
200
  data-id="boxComponent"
201
201
  data-selector-id="box"
202
202
  data-test-id="boxComponent"
@@ -215,7 +215,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
215
215
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 1`] = `
216
216
  <DocumentFragment>
217
217
  <li
218
- class="flex row alignItems_center list medium default withBorder"
218
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
219
219
  data-a11y-inset-focus="true"
220
220
  data-id="List_ListItemWithCheckBox"
221
221
  data-selector-id="listItemWithCheckBox"
@@ -224,7 +224,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
224
224
  tabindex="0"
225
225
  >
226
226
  <div
227
- class="noShrink contentWrapper"
227
+ class="d-flex-shrink-0 contentWrapper"
228
228
  data-id="boxComponent"
229
229
  data-selector-id="box"
230
230
  data-test-id="boxComponent"
@@ -235,7 +235,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
235
235
  data-test-id="List_checkBox"
236
236
  >
237
237
  <div
238
- class="noShrink alignSelf_center"
238
+ class="d-flex-shrink-0 d-self-center"
239
239
  data-id="boxComponent"
240
240
  data-selector-id="box"
241
241
  data-test-id="boxComponent"
@@ -243,7 +243,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
243
243
  <div
244
244
  aria-checked="false"
245
245
  aria-hidden="true"
246
- class="inlineFlex row alignItems_center container pointer primary"
246
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
247
247
  data-id="checkBox"
248
248
  data-selector-id="container"
249
249
  data-test-id="checkBox"
@@ -251,7 +251,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
251
251
  tabindex="-1"
252
252
  >
253
253
  <div
254
- class="noShrink boxContainer medium filled"
254
+ class="d-flex-shrink-0 boxContainer medium filled"
255
255
  data-id="boxComponent"
256
256
  data-selector-id="box"
257
257
  data-test-id="boxComponent"
@@ -282,19 +282,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
282
282
  </div>
283
283
  </div>
284
284
  <div
285
- 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"
286
286
  data-id="boxComponent"
287
287
  data-selector-id="box"
288
288
  data-test-id="boxComponent"
289
289
  >
290
290
  <div
291
- class="noShrink titleBox"
291
+ class="d-flex-shrink-0 titleBox"
292
292
  data-id="boxComponent"
293
293
  data-selector-id="box"
294
294
  data-test-id="boxComponent"
295
295
  >
296
296
  <div
297
- class="basis_auto shrink value"
297
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
298
298
  data-id="boxComponent"
299
299
  data-selector-id="box"
300
300
  data-test-id="boxComponent"
@@ -303,7 +303,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
303
303
  </div>
304
304
  </div>
305
305
  <div
306
- class="noShrink secondaryField secondaryValue"
306
+ class="d-flex-shrink-0 secondaryField secondaryValue"
307
307
  data-id="boxComponent"
308
308
  data-selector-id="box"
309
309
  data-test-id="boxComponent"
@@ -320,7 +320,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
320
320
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align end 1`] = `
321
321
  <DocumentFragment>
322
322
  <li
323
- class="flex row alignItems_center list medium default withBorder"
323
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
324
324
  data-a11y-inset-focus="true"
325
325
  data-id="List_ListItemWithCheckBox"
326
326
  data-selector-id="listItemWithCheckBox"
@@ -329,7 +329,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
329
329
  tabindex="0"
330
330
  >
331
331
  <div
332
- class="noShrink contentWrapper"
332
+ class="d-flex-shrink-0 contentWrapper"
333
333
  data-id="boxComponent"
334
334
  data-selector-id="box"
335
335
  data-test-id="boxComponent"
@@ -340,7 +340,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
340
340
  data-test-id="List_checkBox"
341
341
  >
342
342
  <div
343
- class="noShrink alignSelf_end lhsBoxInner"
343
+ class="d-flex-shrink-0 d-self-end lhsBoxInner"
344
344
  data-id="boxComponent"
345
345
  data-selector-id="box"
346
346
  data-test-id="boxComponent"
@@ -348,7 +348,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
348
348
  <div
349
349
  aria-checked="false"
350
350
  aria-hidden="true"
351
- class="inlineFlex row alignItems_center container pointer primary"
351
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
352
352
  data-id="checkBox"
353
353
  data-selector-id="container"
354
354
  data-test-id="checkBox"
@@ -356,7 +356,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
356
356
  tabindex="-1"
357
357
  >
358
358
  <div
359
- class="noShrink boxContainer medium filled"
359
+ class="d-flex-shrink-0 boxContainer medium filled"
360
360
  data-id="boxComponent"
361
361
  data-selector-id="box"
362
362
  data-test-id="boxComponent"
@@ -387,19 +387,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
387
387
  </div>
388
388
  </div>
389
389
  <div
390
- 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"
391
391
  data-id="boxComponent"
392
392
  data-selector-id="box"
393
393
  data-test-id="boxComponent"
394
394
  >
395
395
  <div
396
- class="noShrink titleBox"
396
+ class="d-flex-shrink-0 titleBox"
397
397
  data-id="boxComponent"
398
398
  data-selector-id="box"
399
399
  data-test-id="boxComponent"
400
400
  >
401
401
  <div
402
- class="basis_auto shrink value"
402
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
403
403
  data-id="boxComponent"
404
404
  data-selector-id="box"
405
405
  data-test-id="boxComponent"
@@ -408,7 +408,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
408
408
  </div>
409
409
  </div>
410
410
  <div
411
- class="noShrink secondaryField secondaryValue"
411
+ class="d-flex-shrink-0 secondaryField secondaryValue"
412
412
  data-id="boxComponent"
413
413
  data-selector-id="box"
414
414
  data-test-id="boxComponent"
@@ -425,7 +425,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
425
425
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
426
426
  <DocumentFragment>
427
427
  <li
428
- class="flex row alignItems_center list medium default withBorder"
428
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
429
429
  data-a11y-inset-focus="true"
430
430
  data-id="List_ListItemWithCheckBox"
431
431
  data-selector-id="listItemWithCheckBox"
@@ -434,7 +434,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
434
434
  tabindex="0"
435
435
  >
436
436
  <div
437
- class="noShrink contentWrapper"
437
+ class="d-flex-shrink-0 contentWrapper"
438
438
  data-id="boxComponent"
439
439
  data-selector-id="box"
440
440
  data-test-id="boxComponent"
@@ -445,7 +445,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
445
445
  data-test-id="List_checkBox"
446
446
  >
447
447
  <div
448
- class="noShrink alignSelf_start lhsBoxInner"
448
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
449
449
  data-id="boxComponent"
450
450
  data-selector-id="box"
451
451
  data-test-id="boxComponent"
@@ -453,7 +453,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
453
453
  <div
454
454
  aria-checked="false"
455
455
  aria-hidden="true"
456
- class="inlineFlex row alignItems_center container pointer primary"
456
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
457
457
  data-id="checkBox"
458
458
  data-selector-id="container"
459
459
  data-test-id="checkBox"
@@ -461,7 +461,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
461
461
  tabindex="-1"
462
462
  >
463
463
  <div
464
- class="noShrink boxContainer medium filled"
464
+ class="d-flex-shrink-0 boxContainer medium filled"
465
465
  data-id="boxComponent"
466
466
  data-selector-id="box"
467
467
  data-test-id="boxComponent"
@@ -492,19 +492,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
492
492
  </div>
493
493
  </div>
494
494
  <div
495
- 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"
496
496
  data-id="boxComponent"
497
497
  data-selector-id="box"
498
498
  data-test-id="boxComponent"
499
499
  >
500
500
  <div
501
- class="noShrink titleBox"
501
+ class="d-flex-shrink-0 titleBox"
502
502
  data-id="boxComponent"
503
503
  data-selector-id="box"
504
504
  data-test-id="boxComponent"
505
505
  >
506
506
  <div
507
- class="basis_auto shrink value"
507
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
508
508
  data-id="boxComponent"
509
509
  data-selector-id="box"
510
510
  data-test-id="boxComponent"
@@ -513,7 +513,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
513
513
  </div>
514
514
  </div>
515
515
  <div
516
- class="noShrink secondaryField secondaryValue"
516
+ class="d-flex-shrink-0 secondaryField secondaryValue"
517
517
  data-id="boxComponent"
518
518
  data-selector-id="box"
519
519
  data-test-id="boxComponent"
@@ -530,7 +530,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
530
530
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
531
531
  <DocumentFragment>
532
532
  <li
533
- class="flex row alignItems_center list medium default withBorder"
533
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
534
534
  data-a11y-inset-focus="true"
535
535
  data-id="List_ListItemWithCheckBox"
536
536
  data-selector-id="listItemWithCheckBox"
@@ -539,7 +539,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
539
539
  tabindex="0"
540
540
  >
541
541
  <div
542
- class="noShrink contentWrapper"
542
+ class="d-flex-shrink-0 contentWrapper"
543
543
  data-id="boxComponent"
544
544
  data-selector-id="box"
545
545
  data-test-id="boxComponent"
@@ -550,7 +550,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
550
550
  data-test-id="List_checkBox"
551
551
  >
552
552
  <div
553
- class="noShrink alignSelf_start lhsBoxInner"
553
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
554
554
  data-id="boxComponent"
555
555
  data-selector-id="box"
556
556
  data-test-id="boxComponent"
@@ -558,7 +558,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
558
558
  <div
559
559
  aria-checked="false"
560
560
  aria-hidden="true"
561
- class="inlineFlex row alignItems_center container pointer primary"
561
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
562
562
  data-id="checkBox"
563
563
  data-selector-id="container"
564
564
  data-test-id="checkBox"
@@ -566,7 +566,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
566
566
  tabindex="-1"
567
567
  >
568
568
  <div
569
- class="noShrink boxContainer medium filled"
569
+ class="d-flex-shrink-0 boxContainer medium filled"
570
570
  data-id="boxComponent"
571
571
  data-selector-id="box"
572
572
  data-test-id="boxComponent"
@@ -597,19 +597,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
597
597
  </div>
598
598
  </div>
599
599
  <div
600
- 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"
601
601
  data-id="boxComponent"
602
602
  data-selector-id="box"
603
603
  data-test-id="boxComponent"
604
604
  >
605
605
  <div
606
- class="noShrink titleBox"
606
+ class="d-flex-shrink-0 titleBox"
607
607
  data-id="boxComponent"
608
608
  data-selector-id="box"
609
609
  data-test-id="boxComponent"
610
610
  >
611
611
  <div
612
- class="basis_auto shrink value"
612
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
613
613
  data-id="boxComponent"
614
614
  data-selector-id="box"
615
615
  data-test-id="boxComponent"
@@ -618,7 +618,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
618
618
  </div>
619
619
  </div>
620
620
  <div
621
- class="noShrink secondaryField secondaryValue"
621
+ class="d-flex-shrink-0 secondaryField secondaryValue"
622
622
  data-id="boxComponent"
623
623
  data-selector-id="box"
624
624
  data-test-id="boxComponent"
@@ -635,7 +635,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
635
635
  exports[`ListItemWithCheckBox rendering the defult props 1`] = `
636
636
  <DocumentFragment>
637
637
  <li
638
- class="flex row alignItems_center list medium default withBorder"
638
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
639
639
  data-a11y-inset-focus="true"
640
640
  data-id="List_ListItemWithCheckBox"
641
641
  data-selector-id="listItemWithCheckBox"
@@ -644,7 +644,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
644
644
  tabindex="0"
645
645
  >
646
646
  <div
647
- class="noShrink contentWrapper"
647
+ class="d-flex-shrink-0 contentWrapper"
648
648
  data-id="boxComponent"
649
649
  data-selector-id="box"
650
650
  data-test-id="boxComponent"
@@ -655,7 +655,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
655
655
  data-test-id="List_checkBox"
656
656
  >
657
657
  <div
658
- class="noShrink alignSelf_start lhsBoxInner"
658
+ class="d-flex-shrink-0 d-self-start lhsBoxInner"
659
659
  data-id="boxComponent"
660
660
  data-selector-id="box"
661
661
  data-test-id="boxComponent"
@@ -663,7 +663,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
663
663
  <div
664
664
  aria-checked="false"
665
665
  aria-hidden="true"
666
- class="inlineFlex row alignItems_center container pointer primary"
666
+ class="d-inline-flex d-flex-row d-items-center container pointer primary"
667
667
  data-id="checkBox"
668
668
  data-selector-id="container"
669
669
  data-test-id="checkBox"
@@ -671,7 +671,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
671
671
  tabindex="-1"
672
672
  >
673
673
  <div
674
- class="noShrink boxContainer medium filled"
674
+ class="d-flex-shrink-0 boxContainer medium filled"
675
675
  data-id="boxComponent"
676
676
  data-selector-id="box"
677
677
  data-test-id="boxComponent"
@@ -702,19 +702,19 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
702
702
  </div>
703
703
  </div>
704
704
  <div
705
- 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"
706
706
  data-id="boxComponent"
707
707
  data-selector-id="box"
708
708
  data-test-id="boxComponent"
709
709
  >
710
710
  <div
711
- class="noShrink titleBox"
711
+ class="d-flex-shrink-0 titleBox"
712
712
  data-id="boxComponent"
713
713
  data-selector-id="box"
714
714
  data-test-id="boxComponent"
715
715
  >
716
716
  <div
717
- class="basis_auto shrink value"
717
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
718
718
  data-id="boxComponent"
719
719
  data-selector-id="box"
720
720
  data-test-id="boxComponent"