@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
@@ -117,11 +117,4 @@ export default class Textarea extends React.Component {
117
117
 
118
118
  }
119
119
  Textarea.defaultProps = defaultProps;
120
- Textarea.propTypes = propTypes; // if (__DOCS__) {
121
- // Textarea.docs = {
122
- // componentGroup: 'Form Elements',
123
- // folderName: 'Style Guide',
124
- // external: true,
125
- // description: ' '
126
- // };
127
- // }
120
+ Textarea.propTypes = propTypes;
@@ -521,11 +521,4 @@ export default class Tooltip extends React.Component {
521
521
 
522
522
  }
523
523
  Tooltip.propTypes = propTypes;
524
- Tooltip.defaultProps = defaultProps; // if (__DOCS__) {
525
- // Tooltip.docs = {
526
- // componentGroup: 'Atom',
527
- // folderName: 'Style Guide',
528
- // description: ' ',
529
- // external: true
530
- // };
531
- // }
524
+ Tooltip.defaultProps = defaultProps;
@@ -70,8 +70,4 @@ export default class VelocityAnimation extends React.Component {
70
70
  }
71
71
  VelocityAnimation.defaultProps = defaultProps;
72
72
  VelocityAnimation.propTypes = propTypes;
73
- VelocityAnimation.contextType = LibraryContext; // if (__DOCS__) {
74
- // VelocityAnimation.docs = {
75
- // componentGroup: 'Animation'
76
- // };
77
- // }
73
+ VelocityAnimation.contextType = LibraryContext;
@@ -137,8 +137,4 @@ VelocityAnimationGroup.defaultProps = { ...defaultProps,
137
137
  component: React.Fragment
138
138
  };
139
139
  VelocityAnimationGroup.propTypes = propTypes;
140
- VelocityAnimationGroup.contextType = LibraryContext; // if (__DOCS__) {
141
- // VelocityAnimationGroup.docs = {
142
- // componentGroup: 'Animation'
143
- // };
144
- // }
140
+ VelocityAnimationGroup.contextType = LibraryContext;
@@ -53,9 +53,4 @@ export default class Button extends React.Component {
53
53
 
54
54
  }
55
55
  Button.defaultProps = defaultProps;
56
- Button.propTypes = propTypes; // if (__DOCS__) {
57
- // Button.docs = {
58
- // componentGroup: 'semantic',
59
- // folderName: 'DefaultComponents'
60
- // };
61
- // }
56
+ Button.propTypes = propTypes;
@@ -4,14 +4,14 @@ exports[`ArrowIcon Should be render isActive is true 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
6
  aria-hidden="true"
7
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon active"
7
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon active"
8
8
  data-id="undefined_downIcon"
9
9
  data-selector-id="container"
10
10
  data-test-id="undefined_downIcon"
11
11
  >
12
12
  <i
13
13
  aria-hidden="true"
14
- class="zd_font_icons basic icon-down"
14
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
15
15
  data-id="fontIcon"
16
16
  data-selector-id="fontIcon"
17
17
  data-test-id="fontIcon"
@@ -25,14 +25,14 @@ exports[`ArrowIcon Should be render isDisabled is true 1`] = `
25
25
  <DocumentFragment>
26
26
  <div
27
27
  aria-hidden="true"
28
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon disabled"
28
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon disabled"
29
29
  data-id="undefined_downIcon"
30
30
  data-selector-id="container"
31
31
  data-test-id="undefined_downIcon"
32
32
  >
33
33
  <i
34
34
  aria-hidden="true"
35
- class="zd_font_icons basic icon-down"
35
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
36
36
  data-id="fontIcon"
37
37
  data-selector-id="fontIcon"
38
38
  data-test-id="fontIcon"
@@ -46,14 +46,14 @@ exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
46
46
  <DocumentFragment>
47
47
  <div
48
48
  aria-hidden="true"
49
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon readonly"
49
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon readonly"
50
50
  data-id="undefined_downIcon"
51
51
  data-selector-id="container"
52
52
  data-test-id="undefined_downIcon"
53
53
  >
54
54
  <i
55
55
  aria-hidden="true"
56
- class="zd_font_icons basic icon-down"
56
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
57
57
  data-id="fontIcon"
58
58
  data-selector-id="fontIcon"
59
59
  data-test-id="fontIcon"
@@ -67,14 +67,14 @@ exports[`ArrowIcon Should be render isRotated is true 1`] = `
67
67
  <DocumentFragment>
68
68
  <div
69
69
  aria-hidden="true"
70
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon rotated"
70
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon rotated"
71
71
  data-id="undefined_downIcon"
72
72
  data-selector-id="container"
73
73
  data-test-id="undefined_downIcon"
74
74
  >
75
75
  <i
76
76
  aria-hidden="true"
77
- class="zd_font_icons basic icon-down"
77
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
78
78
  data-id="fontIcon"
79
79
  data-selector-id="fontIcon"
80
80
  data-test-id="fontIcon"
@@ -88,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
88
88
  <DocumentFragment>
89
89
  <div
90
90
  aria-hidden="true"
91
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
91
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
92
92
  data-a11y-focus="true"
93
93
  data-id="undefined_downIcon"
94
94
  data-selector-id="container"
@@ -96,7 +96,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
96
96
  >
97
97
  <i
98
98
  aria-hidden="true"
99
- class="zd_font_icons basic icon-down"
99
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
100
100
  data-id="fontIcon"
101
101
  data-selector-id="fontIcon"
102
102
  data-test-id="fontIcon"
@@ -110,14 +110,14 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
110
110
  <DocumentFragment>
111
111
  <div
112
112
  aria-hidden="true"
113
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon arrowIcon_containerClass"
113
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon arrowIcon_containerClass"
114
114
  data-id="undefined_downIcon"
115
115
  data-selector-id="container"
116
116
  data-test-id="undefined_downIcon"
117
117
  >
118
118
  <i
119
119
  aria-hidden="true"
120
- class="zd_font_icons basic icon-down arrowIcon_iconClass"
120
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle arrowIcon_iconClass"
121
121
  data-id="fontIcon"
122
122
  data-selector-id="fontIcon"
123
123
  data-test-id="fontIcon"
@@ -131,14 +131,14 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
131
131
  <DocumentFragment>
132
132
  <div
133
133
  aria-hidden="true"
134
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
134
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
135
135
  data-id="undefined_downIcon"
136
136
  data-selector-id="container"
137
137
  data-test-id="hereIsTestId"
138
138
  >
139
139
  <i
140
140
  aria-hidden="true"
141
- class="zd_font_icons basic icon-down"
141
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
142
142
  data-id="fontIcon"
143
143
  data-selector-id="fontIcon"
144
144
  data-test-id="fontIcon"
@@ -152,14 +152,14 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
152
152
  <DocumentFragment>
153
153
  <div
154
154
  aria-hidden="true"
155
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
155
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
156
156
  data-id="ArrowIcon-test-dataId_downIcon"
157
157
  data-selector-id="container"
158
158
  data-test-id="ArrowIcon-test-dataId_downIcon"
159
159
  >
160
160
  <i
161
161
  aria-hidden="true"
162
- class="zd_font_icons basic icon-down"
162
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
163
163
  data-id="fontIcon"
164
164
  data-selector-id="fontIcon"
165
165
  data-test-id="fontIcon"
@@ -181,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
181
181
  <DocumentFragment>
182
182
  <div
183
183
  aria-hidden="true"
184
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
184
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
185
185
  data-id="undefined_downIcon"
186
186
  data-selector-id="container"
187
187
  data-test-id="undefined_downIcon"
@@ -189,7 +189,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
189
189
  >
190
190
  <i
191
191
  aria-hidden="true"
192
- class="zd_font_icons basic icon-down"
192
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
193
193
  data-id="fontIcon"
194
194
  data-selector-id="fontIcon"
195
195
  data-test-id="fontIcon"
@@ -203,14 +203,14 @@ exports[`ArrowIcon rendering the defult props 1`] = `
203
203
  <DocumentFragment>
204
204
  <div
205
205
  aria-hidden="true"
206
- class="inlineFlex column alignItems_center justifyContent_center arrowIcon"
206
+ class="d-inline-flex d-flex-col d-items-center d-justify-center arrowIcon"
207
207
  data-id="undefined_downIcon"
208
208
  data-selector-id="container"
209
209
  data-test-id="undefined_downIcon"
210
210
  >
211
211
  <i
212
212
  aria-hidden="true"
213
- class="zd_font_icons basic icon-down"
213
+ class="zd_font_icons ff icon-down basic d-inline-block d-align-middle"
214
214
  data-id="fontIcon"
215
215
  data-selector-id="fontIcon"
216
216
  data-test-id="fontIcon"
@@ -3,7 +3,7 @@
3
3
  exports[`InputFieldLine Should be render hasEffect is false 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
6
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
7
7
  data-selector-id="container"
8
8
  data-title=""
9
9
  />
@@ -13,7 +13,7 @@ exports[`InputFieldLine Should be render hasEffect is false 1`] = `
13
13
  exports[`InputFieldLine Should be render hasPadding is true 1`] = `
14
14
  <DocumentFragment>
15
15
  <div
16
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
16
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
17
17
  data-selector-id="container"
18
18
  data-title=""
19
19
  />
@@ -23,7 +23,7 @@ exports[`InputFieldLine Should be render hasPadding is true 1`] = `
23
23
  exports[`InputFieldLine Should be render isActive is true 1`] = `
24
24
  <DocumentFragment>
25
25
  <div
26
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder active"
26
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder active"
27
27
  data-selector-id="container"
28
28
  data-title=""
29
29
  />
@@ -33,7 +33,7 @@ exports[`InputFieldLine Should be render isActive is true 1`] = `
33
33
  exports[`InputFieldLine Should be render isDisabled is true 1`] = `
34
34
  <DocumentFragment>
35
35
  <div
36
- class="flex row varClass customContainer border_bottom disabled borderColor_default hasBorder"
36
+ class="d-flex d-flex-row varClass customContainer border_bottom disabled borderColor_default hasBorder"
37
37
  data-selector-id="container"
38
38
  data-title=""
39
39
  />
@@ -43,7 +43,7 @@ exports[`InputFieldLine Should be render isDisabled is true 1`] = `
43
43
  exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
44
44
  <DocumentFragment>
45
45
  <div
46
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
46
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
47
47
  data-selector-id="container"
48
48
  data-title=""
49
49
  />
@@ -53,7 +53,7 @@ exports[`InputFieldLine Should be render isReadOnly is true 1`] = `
53
53
  exports[`InputFieldLine Should be render with title 1`] = `
54
54
  <DocumentFragment>
55
55
  <div
56
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
56
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
57
57
  data-selector-id="container"
58
58
  data-title="InputFieldLine Test Title"
59
59
  />
@@ -63,7 +63,7 @@ exports[`InputFieldLine Should be render with title 1`] = `
63
63
  exports[`InputFieldLine Should render border - all 1`] = `
64
64
  <DocumentFragment>
65
65
  <div
66
- class="flex row varClass customContainer border_all effect borderColor_default hasBorder"
66
+ class="d-flex d-flex-row varClass customContainer border_all effect borderColor_default hasBorder"
67
67
  data-selector-id="container"
68
68
  data-title=""
69
69
  />
@@ -73,7 +73,7 @@ exports[`InputFieldLine Should render border - all 1`] = `
73
73
  exports[`InputFieldLine Should render border - bottom 1`] = `
74
74
  <DocumentFragment>
75
75
  <div
76
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
76
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
77
77
  data-selector-id="container"
78
78
  data-title=""
79
79
  />
@@ -83,7 +83,7 @@ exports[`InputFieldLine Should render border - bottom 1`] = `
83
83
  exports[`InputFieldLine Should render border - none 1`] = `
84
84
  <DocumentFragment>
85
85
  <div
86
- class="flex row varClass customContainer effect"
86
+ class="d-flex d-flex-row varClass customContainer effect"
87
87
  data-selector-id="container"
88
88
  data-title=""
89
89
  />
@@ -93,7 +93,7 @@ exports[`InputFieldLine Should render border - none 1`] = `
93
93
  exports[`InputFieldLine Should render borderColor - dark 1`] = `
94
94
  <DocumentFragment>
95
95
  <div
96
- class="flex row varClass customContainer border_bottom effect borderColor_dark hasBorder"
96
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_dark hasBorder"
97
97
  data-selector-id="container"
98
98
  data-title=""
99
99
  />
@@ -103,7 +103,7 @@ exports[`InputFieldLine Should render borderColor - dark 1`] = `
103
103
  exports[`InputFieldLine Should render borderColor - default 1`] = `
104
104
  <DocumentFragment>
105
105
  <div
106
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
106
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
107
107
  data-selector-id="container"
108
108
  data-title=""
109
109
  />
@@ -113,7 +113,7 @@ exports[`InputFieldLine Should render borderColor - default 1`] = `
113
113
  exports[`InputFieldLine Should render borderColor - error 1`] = `
114
114
  <DocumentFragment>
115
115
  <div
116
- class="flex row varClass customContainer border_bottom effect borderColor_error hasBorder"
116
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_error hasBorder"
117
117
  data-selector-id="container"
118
118
  data-title=""
119
119
  />
@@ -123,7 +123,7 @@ exports[`InputFieldLine Should render borderColor - error 1`] = `
123
123
  exports[`InputFieldLine Should render borderColor - transparent 1`] = `
124
124
  <DocumentFragment>
125
125
  <div
126
- class="flex row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
126
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_transparent hasBorder"
127
127
  data-selector-id="container"
128
128
  data-title=""
129
129
  />
@@ -133,7 +133,7 @@ exports[`InputFieldLine Should render borderColor - transparent 1`] = `
133
133
  exports[`InputFieldLine Should render customClass 1`] = `
134
134
  <DocumentFragment>
135
135
  <div
136
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
136
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder inputFieldLine-custom-class"
137
137
  data-selector-id="container"
138
138
  data-title=""
139
139
  />
@@ -143,7 +143,7 @@ exports[`InputFieldLine Should render customClass 1`] = `
143
143
  exports[`InputFieldLine Should render customProps 1`] = `
144
144
  <DocumentFragment>
145
145
  <div
146
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
146
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
147
147
  data-selector-id="container"
148
148
  data-test="inputFieldLine-test"
149
149
  data-title=""
@@ -154,7 +154,7 @@ exports[`InputFieldLine Should render customProps 1`] = `
154
154
  exports[`InputFieldLine Should render dataId 1`] = `
155
155
  <DocumentFragment>
156
156
  <div
157
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
157
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
158
158
  data-id="inputFieldLine-test-id"
159
159
  data-selector-id="container"
160
160
  data-test-id="inputFieldLine-test-id"
@@ -166,7 +166,7 @@ exports[`InputFieldLine Should render dataId 1`] = `
166
166
  exports[`InputFieldLine Should render size - medium 1`] = `
167
167
  <DocumentFragment>
168
168
  <div
169
- class="flex row scroll_vertical varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
169
+ class="d-flex d-flex-row d-overflow-y-auto d-overflow-x-hidden varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder"
170
170
  data-selector-id="container"
171
171
  data-title=""
172
172
  />
@@ -176,7 +176,7 @@ exports[`InputFieldLine Should render size - medium 1`] = `
176
176
  exports[`InputFieldLine Should render size - xmedium 1`] = `
177
177
  <DocumentFragment>
178
178
  <div
179
- class="flex row scroll_vertical varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
179
+ class="d-flex d-flex-row d-overflow-y-auto d-overflow-x-hidden varClass customContainer xmedium padding_xmedium border_bottom effect borderColor_default hasBorder"
180
180
  data-selector-id="container"
181
181
  data-title=""
182
182
  />
@@ -186,7 +186,7 @@ exports[`InputFieldLine Should render size - xmedium 1`] = `
186
186
  exports[`InputFieldLine rendering the defult props 1`] = `
187
187
  <DocumentFragment>
188
188
  <div
189
- class="flex row varClass customContainer border_bottom effect borderColor_default hasBorder"
189
+ class="d-flex d-flex-row varClass customContainer border_bottom effect borderColor_default hasBorder"
190
190
  data-selector-id="container"
191
191
  data-title=""
192
192
  />