@zohodesk/components 1.6.20 → 1.6.22-exp-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/README.md +10 -0
  2. package/es/AppContainer/AppContainer.module.css +9 -3
  3. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +22 -22
  4. package/es/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +42 -42
  5. package/es/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +73 -97
  6. package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  7. package/es/Button/css/cssJSLogic.js +6 -6
  8. package/es/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +8 -8
  9. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  10. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  11. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  12. package/es/CheckBox/CheckBox.js +2 -2
  13. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +153 -250
  14. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +67 -76
  15. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +45 -45
  16. package/es/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +9 -9
  17. package/es/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +5 -5
  18. package/es/DateTime/CalendarView.js +2 -2
  19. package/es/DateTime/DateWidget.js +2 -2
  20. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  21. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +102 -102
  22. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  23. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +9 -9
  24. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +9 -9
  25. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  26. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +34 -34
  27. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +6 -6
  28. package/es/DropDown/DropDownItem.js +1 -1
  29. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  30. package/es/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap +1 -1
  31. package/es/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +1 -1
  32. package/es/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap +2 -2
  33. package/es/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap +1 -1
  34. package/es/Heading/__tests__/__snapshots__/Heading.spec.js.snap +7 -7
  35. package/es/Label/Label.js +1 -1
  36. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -48
  37. package/es/Layout/Box.js +1 -115
  38. package/es/Layout/Container.js +1 -132
  39. package/es/Layout/props/defaultProps.js +1 -16
  40. package/es/Layout/props/propTypes.js +1 -46
  41. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  42. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  43. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  44. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +69 -76
  45. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  46. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -69
  47. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +4 -4
  48. package/es/MultiSelect/MultiSelect.js +1 -1
  49. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +9 -10
  50. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +59 -62
  51. package/es/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +1 -1
  52. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +50 -59
  53. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  54. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11 -12
  55. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +7 -7
  56. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  57. package/es/Radio/Radio.js +1 -1
  58. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +117 -197
  59. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  60. package/es/Ribbon/Ribbon.js +3 -16
  61. package/es/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +21 -24
  62. package/es/Select/SelectWithAvatar.js +1 -1
  63. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +9 -9
  64. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +1015 -1015
  65. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +4 -4
  66. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +12 -12
  67. package/es/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +12 -12
  68. package/es/Switch/Switch.js +1 -1
  69. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +98 -110
  70. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  71. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  72. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  73. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  74. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  75. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  76. package/es/Tag/Tag.js +1 -2
  77. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +242 -334
  78. package/es/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +44 -44
  79. package/es/TextBoxIcon/TextBoxIcon.js +1 -1
  80. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +206 -206
  81. package/es/Textarea/Textarea.js +1 -1
  82. package/es/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +46 -46
  83. package/es/Tooltip/Tooltip.js +1 -1
  84. package/es/Typography/__tests__/__snapshots__/Typography.spec.js.snap +3 -3
  85. package/es/Typography/css/cssJSLogic.js +2 -2
  86. package/es/common/basic.module.css +9 -8
  87. package/es/css.js +0 -1
  88. package/es/deprecated/Switch/Switch.js +1 -1
  89. package/es/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap +1 -1
  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/__tests__/__snapshots__/Button.spec.js.snap +8 -8
  93. package/es/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +1 -1
  94. package/es/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +1 -1
  95. package/lib/AppContainer/AppContainer.module.css +9 -3
  96. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +22 -22
  97. package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +42 -42
  98. package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +73 -97
  99. package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +3 -3
  100. package/lib/Button/css/cssJSLogic.js +3 -3
  101. package/lib/Buttongroup/__tests__/__snapshots__/Buttongroup.spec.js.snap +8 -8
  102. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  103. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  104. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  105. package/lib/CheckBox/CheckBox.js +2 -2
  106. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +153 -250
  107. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +67 -76
  108. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +45 -45
  109. package/lib/ColorSelect/_shared/ColorIndicator/__tests__/__snapshots__/ColorIndicator.spec.js.snap +9 -9
  110. package/lib/ColorSelect/_shared/ColoredTag/__tests__/__snapshots__/ColoredTag.spec.js.snap +5 -5
  111. package/lib/DateTime/CalendarView.js +2 -2
  112. package/lib/DateTime/DateWidget.js +2 -2
  113. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  114. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +102 -102
  115. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  116. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +9 -9
  117. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +9 -9
  118. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  119. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +34 -34
  120. package/lib/DropBox/DropBoxElement/css/cssJSLogic.js +2 -2
  121. package/lib/DropDown/DropDownItem.js +1 -1
  122. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  123. package/lib/DropDown/__tests__/__snapshots__/DropDownHeading.spec.js.snap +1 -1
  124. package/lib/DropDown/__tests__/__snapshots__/DropDownItem.spec.js.snap +1 -1
  125. package/lib/DropDown/__tests__/__snapshots__/DropDownSearch.spec.js.snap +2 -2
  126. package/lib/DropDown/__tests__/__snapshots__/DropDownSeparator.spec.js.snap +1 -1
  127. package/lib/Heading/__tests__/__snapshots__/Heading.spec.js.snap +7 -7
  128. package/lib/Label/Label.js +1 -1
  129. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -48
  130. package/lib/Layout/Box.js +7 -120
  131. package/lib/Layout/Container.js +7 -137
  132. package/lib/Layout/props/defaultProps.js +14 -19
  133. package/lib/Layout/props/propTypes.js +13 -52
  134. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  135. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  136. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  137. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +69 -76
  138. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  139. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -69
  140. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +4 -4
  141. package/lib/MultiSelect/MultiSelect.js +1 -1
  142. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +9 -10
  143. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +59 -62
  144. package/lib/MultiSelect/__tests__/__snapshots__/EmptyState.spec.js.snap +1 -1
  145. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +50 -59
  146. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  147. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +11 -12
  148. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +7 -7
  149. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  150. package/lib/Radio/Radio.js +1 -1
  151. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +117 -197
  152. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  153. package/lib/Ribbon/Ribbon.js +2 -15
  154. package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +21 -24
  155. package/lib/Select/SelectWithAvatar.js +1 -1
  156. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +9 -9
  157. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +1015 -1015
  158. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +4 -4
  159. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +12 -12
  160. package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +12 -12
  161. package/lib/Switch/Switch.js +1 -1
  162. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +98 -110
  163. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  164. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  165. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  166. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  167. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  168. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  169. package/lib/Tag/Tag.js +1 -1
  170. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +242 -334
  171. package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +44 -44
  172. package/lib/TextBoxIcon/TextBoxIcon.js +1 -1
  173. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +206 -206
  174. package/lib/Textarea/Textarea.js +1 -1
  175. package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +46 -46
  176. package/lib/Tooltip/Tooltip.js +1 -1
  177. package/lib/Typography/__tests__/__snapshots__/Typography.spec.js.snap +3 -3
  178. package/lib/Typography/css/cssJSLogic.js +1 -1
  179. package/lib/common/basic.module.css +9 -8
  180. package/lib/css.js +0 -2
  181. package/lib/deprecated/Switch/Switch.js +1 -1
  182. package/lib/semantic/Button/__tests__/__snapshots__/Button.spec.js.snap +1 -1
  183. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  184. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  185. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +8 -8
  186. package/lib/v1/shared/Loader/__tests__/__snapshots__/Loader.spec.js.snap +1 -1
  187. package/lib/v1/shared/SuccessTick/__tests__/__snapshots__/SuccessTick.spec.js.snap +1 -1
  188. package/package.json +13 -14
  189. package/es/Layout/Layout.module.css +0 -336
  190. package/es/Layout/__tests__/Box.spec.js +0 -11
  191. package/es/Layout/__tests__/Container.spec.js +0 -11
  192. package/es/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  193. package/es/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  194. package/es/Layout/utils.js +0 -29
  195. package/lib/Layout/Layout.module.css +0 -336
  196. package/lib/Layout/__tests__/Box.spec.js +0 -18
  197. package/lib/Layout/__tests__/Container.spec.js +0 -18
  198. package/lib/Layout/__tests__/__snapshots__/Box.spec.js.snap +0 -16
  199. package/lib/Layout/__tests__/__snapshots__/Container.spec.js.snap +0 -16
  200. package/lib/Layout/utils.js +0 -59
package/lib/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="list medium default withBorder flex rowdir vCenter"
6
+ class="flex row alignItems_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="contentWrapper shrinkOff"
15
+ class="noShrink 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="lhsBoxInner shrinkOff selfStart"
26
+ class="noShrink alignSelf_start lhsBoxInner"
27
27
  data-id="boxComponent"
28
28
  data-selector-id="box"
29
29
  data-test-id="boxComponent"
@@ -31,8 +31,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
31
31
  <div
32
32
  aria-checked="false"
33
33
  aria-hidden="true"
34
- class="container pointer primary
35
- inflex rowdir vCenter"
34
+ class="inlineFlex row alignItems_center container pointer primary"
36
35
  data-id="checkBox"
37
36
  data-selector-id="container"
38
37
  data-test-id="checkBox"
@@ -40,7 +39,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
40
39
  tabindex="-1"
41
40
  >
42
41
  <div
43
- class="boxContainer medium filled shrinkOff"
42
+ class="noShrink boxContainer medium filled"
44
43
  data-id="boxComponent"
45
44
  data-selector-id="box"
46
45
  data-test-id="boxComponent"
@@ -49,7 +48,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
49
48
  type="hidden"
50
49
  />
51
50
  <label
52
- class="checkbox pointer medium "
51
+ class="checkbox pointer medium"
53
52
  >
54
53
  <svg
55
54
  viewBox="0 0 40 40"
@@ -71,19 +70,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
71
70
  </div>
72
71
  </div>
73
72
  <div
74
- class="leftBox selfAlign_center grow basis shrinkOff"
73
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
75
74
  data-id="boxComponent"
76
75
  data-selector-id="box"
77
76
  data-test-id="boxComponent"
78
77
  >
79
78
  <div
80
- class="titleBox shrinkOff"
79
+ class="noShrink titleBox"
81
80
  data-id="boxComponent"
82
81
  data-selector-id="box"
83
82
  data-test-id="boxComponent"
84
83
  >
85
84
  <div
86
- class="value basisAuto shrinkOn"
85
+ class="basis_auto shrink value"
87
86
  data-id="boxComponent"
88
87
  data-selector-id="box"
89
88
  data-test-id="boxComponent"
@@ -91,7 +90,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
91
90
  List
92
91
  </div>
93
92
  <div
94
- class="customValueRightPlaceholderClass shrinkOff"
93
+ class="noShrink customValueRightPlaceholderClass"
95
94
  data-id="boxComponent"
96
95
  data-selector-id="box"
97
96
  data-test-id="boxComponent"
@@ -110,7 +109,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
110
109
  exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlaceholderNode 1`] = `
111
110
  <DocumentFragment>
112
111
  <li
113
- class="list medium default withBorder flex rowdir vCenter"
112
+ class="flex row alignItems_center list medium default withBorder"
114
113
  data-a11y-inset-focus="true"
115
114
  data-id="List_ListItemWithCheckBox"
116
115
  data-selector-id="listItemWithCheckBox"
@@ -119,7 +118,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
119
118
  tabindex="0"
120
119
  >
121
120
  <div
122
- class="contentWrapper shrinkOff"
121
+ class="noShrink contentWrapper"
123
122
  data-id="boxComponent"
124
123
  data-selector-id="box"
125
124
  data-test-id="boxComponent"
@@ -130,7 +129,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
130
129
  data-test-id="List_checkBox"
131
130
  >
132
131
  <div
133
- class="lhsBoxInner shrinkOff selfStart"
132
+ class="noShrink alignSelf_start lhsBoxInner"
134
133
  data-id="boxComponent"
135
134
  data-selector-id="box"
136
135
  data-test-id="boxComponent"
@@ -138,8 +137,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
138
137
  <div
139
138
  aria-checked="false"
140
139
  aria-hidden="true"
141
- class="container pointer primary
142
- inflex rowdir vCenter"
140
+ class="inlineFlex row alignItems_center container pointer primary"
143
141
  data-id="checkBox"
144
142
  data-selector-id="container"
145
143
  data-test-id="checkBox"
@@ -147,7 +145,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
147
145
  tabindex="-1"
148
146
  >
149
147
  <div
150
- class="boxContainer medium filled shrinkOff"
148
+ class="noShrink boxContainer medium filled"
151
149
  data-id="boxComponent"
152
150
  data-selector-id="box"
153
151
  data-test-id="boxComponent"
@@ -156,7 +154,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
156
154
  type="hidden"
157
155
  />
158
156
  <label
159
- class="checkbox pointer medium "
157
+ class="checkbox pointer medium"
160
158
  >
161
159
  <svg
162
160
  viewBox="0 0 40 40"
@@ -178,19 +176,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
178
176
  </div>
179
177
  </div>
180
178
  <div
181
- class="leftBox selfAlign_center grow basis shrinkOff"
179
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
182
180
  data-id="boxComponent"
183
181
  data-selector-id="box"
184
182
  data-test-id="boxComponent"
185
183
  >
186
184
  <div
187
- class="titleBox shrinkOff"
185
+ class="noShrink titleBox"
188
186
  data-id="boxComponent"
189
187
  data-selector-id="box"
190
188
  data-test-id="boxComponent"
191
189
  >
192
190
  <div
193
- class="value basisAuto shrinkOn"
191
+ class="basis_auto shrink value"
194
192
  data-id="boxComponent"
195
193
  data-selector-id="box"
196
194
  data-test-id="boxComponent"
@@ -198,7 +196,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
198
196
  List
199
197
  </div>
200
198
  <div
201
- class="shrinkOff"
199
+ class="noShrink"
202
200
  data-id="boxComponent"
203
201
  data-selector-id="box"
204
202
  data-test-id="boxComponent"
@@ -217,7 +215,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with renderValueRightPlacehol
217
215
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align center 1`] = `
218
216
  <DocumentFragment>
219
217
  <li
220
- class="list medium default withBorder flex rowdir vCenter"
218
+ class="flex row alignItems_center list medium default withBorder"
221
219
  data-a11y-inset-focus="true"
222
220
  data-id="List_ListItemWithCheckBox"
223
221
  data-selector-id="listItemWithCheckBox"
@@ -226,7 +224,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
226
224
  tabindex="0"
227
225
  >
228
226
  <div
229
- class="contentWrapper shrinkOff"
227
+ class="noShrink contentWrapper"
230
228
  data-id="boxComponent"
231
229
  data-selector-id="box"
232
230
  data-test-id="boxComponent"
@@ -237,7 +235,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
237
235
  data-test-id="List_checkBox"
238
236
  >
239
237
  <div
240
- class="shrinkOff selfCenter"
238
+ class="noShrink alignSelf_center"
241
239
  data-id="boxComponent"
242
240
  data-selector-id="box"
243
241
  data-test-id="boxComponent"
@@ -245,8 +243,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
245
243
  <div
246
244
  aria-checked="false"
247
245
  aria-hidden="true"
248
- class="container pointer primary
249
- inflex rowdir vCenter"
246
+ class="inlineFlex row alignItems_center container pointer primary"
250
247
  data-id="checkBox"
251
248
  data-selector-id="container"
252
249
  data-test-id="checkBox"
@@ -254,7 +251,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
254
251
  tabindex="-1"
255
252
  >
256
253
  <div
257
- class="boxContainer medium filled shrinkOff"
254
+ class="noShrink boxContainer medium filled"
258
255
  data-id="boxComponent"
259
256
  data-selector-id="box"
260
257
  data-test-id="boxComponent"
@@ -263,7 +260,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
263
260
  type="hidden"
264
261
  />
265
262
  <label
266
- class="checkbox pointer medium "
263
+ class="checkbox pointer medium"
267
264
  >
268
265
  <svg
269
266
  viewBox="0 0 40 40"
@@ -285,19 +282,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
285
282
  </div>
286
283
  </div>
287
284
  <div
288
- class="leftBox selfAlign_center grow basis shrinkOff"
285
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
289
286
  data-id="boxComponent"
290
287
  data-selector-id="box"
291
288
  data-test-id="boxComponent"
292
289
  >
293
290
  <div
294
- class="titleBox shrinkOff"
291
+ class="noShrink titleBox"
295
292
  data-id="boxComponent"
296
293
  data-selector-id="box"
297
294
  data-test-id="boxComponent"
298
295
  >
299
296
  <div
300
- class="value basisAuto shrinkOn"
297
+ class="basis_auto shrink value"
301
298
  data-id="boxComponent"
302
299
  data-selector-id="box"
303
300
  data-test-id="boxComponent"
@@ -306,7 +303,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
306
303
  </div>
307
304
  </div>
308
305
  <div
309
- class="secondaryField secondaryValue shrinkOff"
306
+ class="noShrink secondaryField secondaryValue"
310
307
  data-id="boxComponent"
311
308
  data-selector-id="box"
312
309
  data-test-id="boxComponent"
@@ -323,7 +320,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
323
320
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align end 1`] = `
324
321
  <DocumentFragment>
325
322
  <li
326
- class="list medium default withBorder flex rowdir vCenter"
323
+ class="flex row alignItems_center list medium default withBorder"
327
324
  data-a11y-inset-focus="true"
328
325
  data-id="List_ListItemWithCheckBox"
329
326
  data-selector-id="listItemWithCheckBox"
@@ -332,7 +329,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
332
329
  tabindex="0"
333
330
  >
334
331
  <div
335
- class="contentWrapper shrinkOff"
332
+ class="noShrink contentWrapper"
336
333
  data-id="boxComponent"
337
334
  data-selector-id="box"
338
335
  data-test-id="boxComponent"
@@ -343,7 +340,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
343
340
  data-test-id="List_checkBox"
344
341
  >
345
342
  <div
346
- class="lhsBoxInner shrinkOff selfEnd"
343
+ class="noShrink alignSelf_end lhsBoxInner"
347
344
  data-id="boxComponent"
348
345
  data-selector-id="box"
349
346
  data-test-id="boxComponent"
@@ -351,8 +348,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
351
348
  <div
352
349
  aria-checked="false"
353
350
  aria-hidden="true"
354
- class="container pointer primary
355
- inflex rowdir vCenter"
351
+ class="inlineFlex row alignItems_center container pointer primary"
356
352
  data-id="checkBox"
357
353
  data-selector-id="container"
358
354
  data-test-id="checkBox"
@@ -360,7 +356,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
360
356
  tabindex="-1"
361
357
  >
362
358
  <div
363
- class="boxContainer medium filled shrinkOff"
359
+ class="noShrink boxContainer medium filled"
364
360
  data-id="boxComponent"
365
361
  data-selector-id="box"
366
362
  data-test-id="boxComponent"
@@ -369,7 +365,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
369
365
  type="hidden"
370
366
  />
371
367
  <label
372
- class="checkbox pointer medium "
368
+ class="checkbox pointer medium"
373
369
  >
374
370
  <svg
375
371
  viewBox="0 0 40 40"
@@ -391,19 +387,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
391
387
  </div>
392
388
  </div>
393
389
  <div
394
- class="leftBox selfAlign_center grow basis shrinkOff"
390
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
395
391
  data-id="boxComponent"
396
392
  data-selector-id="box"
397
393
  data-test-id="boxComponent"
398
394
  >
399
395
  <div
400
- class="titleBox shrinkOff"
396
+ class="noShrink titleBox"
401
397
  data-id="boxComponent"
402
398
  data-selector-id="box"
403
399
  data-test-id="boxComponent"
404
400
  >
405
401
  <div
406
- class="value basisAuto shrinkOn"
402
+ class="basis_auto shrink value"
407
403
  data-id="boxComponent"
408
404
  data-selector-id="box"
409
405
  data-test-id="boxComponent"
@@ -412,7 +408,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
412
408
  </div>
413
409
  </div>
414
410
  <div
415
- class="secondaryField secondaryValue shrinkOff"
411
+ class="noShrink secondaryField secondaryValue"
416
412
  data-id="boxComponent"
417
413
  data-selector-id="box"
418
414
  data-test-id="boxComponent"
@@ -429,7 +425,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
429
425
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
430
426
  <DocumentFragment>
431
427
  <li
432
- class="list medium default withBorder flex rowdir vCenter"
428
+ class="flex row alignItems_center list medium default withBorder"
433
429
  data-a11y-inset-focus="true"
434
430
  data-id="List_ListItemWithCheckBox"
435
431
  data-selector-id="listItemWithCheckBox"
@@ -438,7 +434,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
438
434
  tabindex="0"
439
435
  >
440
436
  <div
441
- class="contentWrapper shrinkOff"
437
+ class="noShrink contentWrapper"
442
438
  data-id="boxComponent"
443
439
  data-selector-id="box"
444
440
  data-test-id="boxComponent"
@@ -449,7 +445,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
449
445
  data-test-id="List_checkBox"
450
446
  >
451
447
  <div
452
- class="lhsBoxInner shrinkOff selfStart"
448
+ class="noShrink alignSelf_start lhsBoxInner"
453
449
  data-id="boxComponent"
454
450
  data-selector-id="box"
455
451
  data-test-id="boxComponent"
@@ -457,8 +453,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
457
453
  <div
458
454
  aria-checked="false"
459
455
  aria-hidden="true"
460
- class="container pointer primary
461
- inflex rowdir vCenter"
456
+ class="inlineFlex row alignItems_center container pointer primary"
462
457
  data-id="checkBox"
463
458
  data-selector-id="container"
464
459
  data-test-id="checkBox"
@@ -466,7 +461,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
466
461
  tabindex="-1"
467
462
  >
468
463
  <div
469
- class="boxContainer medium filled shrinkOff"
464
+ class="noShrink boxContainer medium filled"
470
465
  data-id="boxComponent"
471
466
  data-selector-id="box"
472
467
  data-test-id="boxComponent"
@@ -475,7 +470,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
475
470
  type="hidden"
476
471
  />
477
472
  <label
478
- class="checkbox pointer medium "
473
+ class="checkbox pointer medium"
479
474
  >
480
475
  <svg
481
476
  viewBox="0 0 40 40"
@@ -497,19 +492,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
497
492
  </div>
498
493
  </div>
499
494
  <div
500
- class="leftBox selfAlign_center grow basis shrinkOff"
495
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
501
496
  data-id="boxComponent"
502
497
  data-selector-id="box"
503
498
  data-test-id="boxComponent"
504
499
  >
505
500
  <div
506
- class="titleBox shrinkOff"
501
+ class="noShrink titleBox"
507
502
  data-id="boxComponent"
508
503
  data-selector-id="box"
509
504
  data-test-id="boxComponent"
510
505
  >
511
506
  <div
512
- class="value basisAuto shrinkOn"
507
+ class="basis_auto shrink value"
513
508
  data-id="boxComponent"
514
509
  data-selector-id="box"
515
510
  data-test-id="boxComponent"
@@ -518,7 +513,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
518
513
  </div>
519
514
  </div>
520
515
  <div
521
- class="secondaryField secondaryValue shrinkOff"
516
+ class="noShrink secondaryField secondaryValue"
522
517
  data-id="boxComponent"
523
518
  data-selector-id="box"
524
519
  data-test-id="boxComponent"
@@ -535,7 +530,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue 1`] = `
535
530
  exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and LHS align start 1`] = `
536
531
  <DocumentFragment>
537
532
  <li
538
- class="list medium default withBorder flex rowdir vCenter"
533
+ class="flex row alignItems_center list medium default withBorder"
539
534
  data-a11y-inset-focus="true"
540
535
  data-id="List_ListItemWithCheckBox"
541
536
  data-selector-id="listItemWithCheckBox"
@@ -544,7 +539,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
544
539
  tabindex="0"
545
540
  >
546
541
  <div
547
- class="contentWrapper shrinkOff"
542
+ class="noShrink contentWrapper"
548
543
  data-id="boxComponent"
549
544
  data-selector-id="box"
550
545
  data-test-id="boxComponent"
@@ -555,7 +550,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
555
550
  data-test-id="List_checkBox"
556
551
  >
557
552
  <div
558
- class="lhsBoxInner shrinkOff selfStart"
553
+ class="noShrink alignSelf_start lhsBoxInner"
559
554
  data-id="boxComponent"
560
555
  data-selector-id="box"
561
556
  data-test-id="boxComponent"
@@ -563,8 +558,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
563
558
  <div
564
559
  aria-checked="false"
565
560
  aria-hidden="true"
566
- class="container pointer primary
567
- inflex rowdir vCenter"
561
+ class="inlineFlex row alignItems_center container pointer primary"
568
562
  data-id="checkBox"
569
563
  data-selector-id="container"
570
564
  data-test-id="checkBox"
@@ -572,7 +566,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
572
566
  tabindex="-1"
573
567
  >
574
568
  <div
575
- class="boxContainer medium filled shrinkOff"
569
+ class="noShrink boxContainer medium filled"
576
570
  data-id="boxComponent"
577
571
  data-selector-id="box"
578
572
  data-test-id="boxComponent"
@@ -581,7 +575,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
581
575
  type="hidden"
582
576
  />
583
577
  <label
584
- class="checkbox pointer medium "
578
+ class="checkbox pointer medium"
585
579
  >
586
580
  <svg
587
581
  viewBox="0 0 40 40"
@@ -603,19 +597,19 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
603
597
  </div>
604
598
  </div>
605
599
  <div
606
- class="leftBox selfAlign_center grow basis shrinkOff"
600
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
607
601
  data-id="boxComponent"
608
602
  data-selector-id="box"
609
603
  data-test-id="boxComponent"
610
604
  >
611
605
  <div
612
- class="titleBox shrinkOff"
606
+ class="noShrink titleBox"
613
607
  data-id="boxComponent"
614
608
  data-selector-id="box"
615
609
  data-test-id="boxComponent"
616
610
  >
617
611
  <div
618
- class="value basisAuto shrinkOn"
612
+ class="basis_auto shrink value"
619
613
  data-id="boxComponent"
620
614
  data-selector-id="box"
621
615
  data-test-id="boxComponent"
@@ -624,7 +618,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
624
618
  </div>
625
619
  </div>
626
620
  <div
627
- class="secondaryField secondaryValue shrinkOff"
621
+ class="noShrink secondaryField secondaryValue"
628
622
  data-id="boxComponent"
629
623
  data-selector-id="box"
630
624
  data-test-id="boxComponent"
@@ -641,7 +635,7 @@ exports[`ListItemWithCheckBox ListItemWithCheckBox with secondaryValue text and
641
635
  exports[`ListItemWithCheckBox rendering the defult props 1`] = `
642
636
  <DocumentFragment>
643
637
  <li
644
- class="list medium default withBorder flex rowdir vCenter"
638
+ class="flex row alignItems_center list medium default withBorder"
645
639
  data-a11y-inset-focus="true"
646
640
  data-id="List_ListItemWithCheckBox"
647
641
  data-selector-id="listItemWithCheckBox"
@@ -650,7 +644,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
650
644
  tabindex="0"
651
645
  >
652
646
  <div
653
- class="contentWrapper shrinkOff"
647
+ class="noShrink contentWrapper"
654
648
  data-id="boxComponent"
655
649
  data-selector-id="box"
656
650
  data-test-id="boxComponent"
@@ -661,7 +655,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
661
655
  data-test-id="List_checkBox"
662
656
  >
663
657
  <div
664
- class="lhsBoxInner shrinkOff selfStart"
658
+ class="noShrink alignSelf_start lhsBoxInner"
665
659
  data-id="boxComponent"
666
660
  data-selector-id="box"
667
661
  data-test-id="boxComponent"
@@ -669,8 +663,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
669
663
  <div
670
664
  aria-checked="false"
671
665
  aria-hidden="true"
672
- class="container pointer primary
673
- inflex rowdir vCenter"
666
+ class="inlineFlex row alignItems_center container pointer primary"
674
667
  data-id="checkBox"
675
668
  data-selector-id="container"
676
669
  data-test-id="checkBox"
@@ -678,7 +671,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
678
671
  tabindex="-1"
679
672
  >
680
673
  <div
681
- class="boxContainer medium filled shrinkOff"
674
+ class="noShrink boxContainer medium filled"
682
675
  data-id="boxComponent"
683
676
  data-selector-id="box"
684
677
  data-test-id="boxComponent"
@@ -687,7 +680,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
687
680
  type="hidden"
688
681
  />
689
682
  <label
690
- class="checkbox pointer medium "
683
+ class="checkbox pointer medium"
691
684
  >
692
685
  <svg
693
686
  viewBox="0 0 40 40"
@@ -709,19 +702,19 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
709
702
  </div>
710
703
  </div>
711
704
  <div
712
- class="leftBox selfAlign_center grow basis shrinkOff"
705
+ class="flexible basis_zero noShrink leftBox selfAlign_center"
713
706
  data-id="boxComponent"
714
707
  data-selector-id="box"
715
708
  data-test-id="boxComponent"
716
709
  >
717
710
  <div
718
- class="titleBox shrinkOff"
711
+ class="noShrink titleBox"
719
712
  data-id="boxComponent"
720
713
  data-selector-id="box"
721
714
  data-test-id="boxComponent"
722
715
  >
723
716
  <div
724
- class="value basisAuto shrinkOn"
717
+ class="basis_auto shrink value"
725
718
  data-id="boxComponent"
726
719
  data-selector-id="box"
727
720
  data-test-id="boxComponent"