@zohodesk/components 1.6.25 → 1.6.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (218) hide show
  1. package/CHANGELOG.md +2046 -0
  2. package/README.md +16 -2031
  3. package/assets/Appearance/dark/mode/Component_v1_DarkMode.module.css +5 -20
  4. package/assets/Appearance/light/mode/Component_v1_LightMode.module.css +5 -20
  5. package/assets/Appearance/pureDark/mode/Component_v1_PureDarkMode.module.css +5 -20
  6. package/es/Accordion/Accordion.js +1 -6
  7. package/es/Accordion/AccordionItem.js +1 -6
  8. package/es/Animation/Animation.js +1 -8
  9. package/es/AppContainer/AppContainer.js +1 -6
  10. package/es/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  11. package/es/Avatar/Avatar.js +1 -6
  12. package/es/AvatarTeam/AvatarTeam.js +1 -7
  13. package/es/Button/Button.js +1 -6
  14. package/es/Buttongroup/Buttongroup.js +1 -14
  15. package/es/Card/Card.js +1 -9
  16. package/es/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  17. package/es/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  18. package/es/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  19. package/es/CheckBox/CheckBox.js +1 -6
  20. package/es/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  21. package/es/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  22. package/es/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  23. package/es/DateTime/DateWidget.js +1 -11
  24. package/es/DateTime/DateWidget.module.css +3 -0
  25. package/es/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  26. package/es/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  27. package/es/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  28. package/es/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  29. package/es/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  30. package/es/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  31. package/es/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  32. package/es/DropDown/DropDownHeading.js +1 -6
  33. package/es/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  34. package/es/Heading/Heading.js +1 -6
  35. package/es/Label/Label.js +1 -6
  36. package/es/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  37. package/es/ListItem/ListContainer.js +1 -6
  38. package/es/ListItem/ListItem.js +1 -6
  39. package/es/ListItem/ListItemWithAvatar.js +1 -6
  40. package/es/ListItem/ListItemWithCheckBox.js +1 -6
  41. package/es/ListItem/ListItemWithIcon.js +1 -6
  42. package/es/ListItem/ListItemWithRadio.js +1 -6
  43. package/es/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  44. package/es/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  45. package/es/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  46. package/es/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  47. package/es/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  48. package/es/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  49. package/es/Modal/Modal.js +1 -8
  50. package/es/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  51. package/es/MultiSelect/AdvancedMultiSelect.js +1 -9
  52. package/es/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  53. package/es/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  54. package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  55. package/es/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  56. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  57. package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  58. package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  59. package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  60. package/es/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  61. package/es/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  62. package/es/RippleEffect/RippleEffect.js +1 -6
  63. package/es/Select/GroupSelect.js +1 -8
  64. package/es/Select/Select.js +1 -10
  65. package/es/Select/SelectWithAvatar.js +1 -9
  66. package/es/Select/SelectWithIcon.js +1 -7
  67. package/es/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  68. package/es/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  69. package/es/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  70. package/es/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  71. package/es/Switch/Switch.js +1 -6
  72. package/es/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  73. package/es/Tab/Tab.js +1 -6
  74. package/es/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  75. package/es/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  76. package/es/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  77. package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  78. package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  79. package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  80. package/es/Tag/Tag.js +1 -6
  81. package/es/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  82. package/es/TextBox/TextBox.js +1 -8
  83. package/es/TextBoxIcon/TextBoxIcon.js +1 -8
  84. package/es/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  85. package/es/Textarea/Textarea.js +1 -8
  86. package/es/Tooltip/Tooltip.js +1 -8
  87. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  88. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  89. package/es/semantic/Button/Button.js +1 -6
  90. package/es/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  91. package/es/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  92. package/es/v1/Button/Button.js +197 -113
  93. package/es/v1/Button/README.md +110 -44
  94. package/es/v1/Button/__tests__/Button.spec.js +139 -48
  95. package/es/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  96. package/es/v1/Button/constants/index.js +29 -23
  97. package/es/v1/Button/constants/presets.js +160 -0
  98. package/es/v1/Button/css/Button_v1.module.css +33 -16
  99. package/es/v1/Button/css/cssJSLogic.js +56 -29
  100. package/es/v1/Button/props/defaultProps.js +5 -6
  101. package/es/v1/Button/props/propTypes.js +26 -8
  102. package/es/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  103. package/es/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  104. package/es/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +357 -0
  105. package/es/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  106. package/es/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  107. package/es/v1/helpers/colorHelpers/colorHelper.js +120 -139
  108. package/es/v1/helpers/colorHelpers/constants/index.js +45 -4
  109. package/es/v1/helpers/colorHelpers/index.js +0 -1
  110. package/es/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  111. package/es/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  112. package/lib/Accordion/Accordion.js +1 -6
  113. package/lib/Accordion/AccordionItem.js +1 -6
  114. package/lib/Animation/Animation.js +1 -8
  115. package/lib/AppContainer/AppContainer.js +1 -6
  116. package/lib/AppContainer/__tests__/__snapshots__/AppContainer.spec.js.snap +16 -16
  117. package/lib/Avatar/Avatar.js +1 -6
  118. package/lib/AvatarTeam/AvatarTeam.js +1 -7
  119. package/lib/Button/Button.js +1 -7
  120. package/lib/Buttongroup/Buttongroup.js +1 -14
  121. package/lib/Card/Card.js +1 -8
  122. package/lib/Card/__tests__/__snapshots__/Card.spec.js.snap +17 -17
  123. package/lib/Card/__tests__/__snapshots__/CardContent.spec.js.snap +12 -12
  124. package/lib/Card/__tests__/__snapshots__/CardHeader.spec.js.snap +4 -4
  125. package/lib/CheckBox/CheckBox.js +1 -6
  126. package/lib/CheckBox/__tests__/__snapshots__/CheckBox.spec.js.snap +88 -88
  127. package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap +48 -48
  128. package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap +30 -30
  129. package/lib/DateTime/DateWidget.js +1 -11
  130. package/lib/DateTime/DateWidget.module.css +3 -0
  131. package/lib/DateTime/__tests__/__snapshots__/CalendarView.spec.js.snap +49 -49
  132. package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap +93 -93
  133. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupFooter.spec.js.snap +1 -1
  134. package/lib/DateTime/__tests__/__snapshots__/DateTimePopupHeader.spec.js.snap +8 -8
  135. package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap +7 -7
  136. package/lib/DateTime/__tests__/__snapshots__/DaysRow.spec.js.snap +1 -1
  137. package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap +28 -28
  138. package/lib/DropDown/DropDownHeading.js +1 -6
  139. package/lib/DropDown/__tests__/__snapshots__/DropDown.spec.js.snap +2 -2
  140. package/lib/Heading/Heading.js +1 -6
  141. package/lib/Label/Label.js +1 -6
  142. package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +4 -4
  143. package/lib/ListItem/ListContainer.js +1 -7
  144. package/lib/ListItem/ListItem.js +1 -6
  145. package/lib/ListItem/ListItemWithAvatar.js +1 -6
  146. package/lib/ListItem/ListItemWithCheckBox.js +1 -6
  147. package/lib/ListItem/ListItemWithIcon.js +1 -6
  148. package/lib/ListItem/ListItemWithRadio.js +1 -6
  149. package/lib/ListItem/__tests__/__snapshots__/ListContainer.spec.js.snap +2 -2
  150. package/lib/ListItem/__tests__/__snapshots__/ListItem.spec.js.snap +16 -16
  151. package/lib/ListItem/__tests__/__snapshots__/ListItemWithAvatar.spec.js.snap +41 -41
  152. package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap +62 -62
  153. package/lib/ListItem/__tests__/__snapshots__/ListItemWithIcon.spec.js.snap +41 -41
  154. package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap +62 -62
  155. package/lib/Modal/Modal.js +1 -8
  156. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1 -7
  157. package/lib/MultiSelect/AdvancedMultiSelect.js +1 -9
  158. package/lib/MultiSelect/MobileHeader/__tests__/__snapshots__/MobileHeader.spec.js.snap +3 -3
  159. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap +6 -6
  160. package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap +50 -50
  161. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap +35 -35
  162. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap +7 -7
  163. package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap +8 -8
  164. package/lib/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap +4 -4
  165. package/lib/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap +47 -47
  166. package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap +94 -94
  167. package/lib/ResponsiveDropBox/__tests__/__snapshots__/ResponsiveDropBox.spec.js.snap +1 -1
  168. package/lib/RippleEffect/RippleEffect.js +1 -6
  169. package/lib/Select/GroupSelect.js +1 -9
  170. package/lib/Select/Select.js +1 -11
  171. package/lib/Select/SelectWithAvatar.js +1 -9
  172. package/lib/Select/SelectWithIcon.js +1 -7
  173. package/lib/Select/__tests__/__snapshots__/GroupSelect.spec.js.snap +7 -7
  174. package/lib/Select/__tests__/__snapshots__/Select.spec.js.snap +831 -831
  175. package/lib/Select/__tests__/__snapshots__/SelectWithAvatar.spec.js.snap +2 -2
  176. package/lib/Select/__tests__/__snapshots__/SelectWithIcon.spec.js.snap +10 -10
  177. package/lib/Switch/Switch.js +1 -6
  178. package/lib/Switch/__tests__/__snapshots__/Switch.spec.js.snap +44 -44
  179. package/lib/Tab/Tab.js +1 -6
  180. package/lib/Tab/__tests__/__snapshots__/Tab.spec.js.snap +2 -2
  181. package/lib/Tab/__tests__/__snapshots__/TabContent.spec.js.snap +1 -1
  182. package/lib/Tab/__tests__/__snapshots__/TabContentWrapper.spec.js.snap +1 -1
  183. package/lib/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap +40 -40
  184. package/lib/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap +1 -1
  185. package/lib/Tab/__tests__/__snapshots__/Tabs.spec.js.snap +4 -4
  186. package/lib/Tag/Tag.js +1 -6
  187. package/lib/Tag/__tests__/__snapshots__/Tag.spec.js.snap +94 -94
  188. package/lib/TextBox/TextBox.js +1 -8
  189. package/lib/TextBoxIcon/TextBoxIcon.js +1 -8
  190. package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +167 -167
  191. package/lib/Textarea/Textarea.js +1 -8
  192. package/lib/Tooltip/Tooltip.js +1 -8
  193. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +1 -5
  194. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +1 -5
  195. package/lib/semantic/Button/Button.js +1 -6
  196. package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap +20 -20
  197. package/lib/shared/InputFieldLine/__tests__/__snapshots__/InputFieldLine.spec.js.snap +19 -19
  198. package/lib/v1/Button/Button.js +207 -123
  199. package/lib/v1/Button/README.md +110 -44
  200. package/lib/v1/Button/__tests__/Button.spec.js +195 -88
  201. package/lib/v1/Button/__tests__/__snapshots__/Button.spec.js.snap +1236 -340
  202. package/lib/v1/Button/constants/index.js +34 -31
  203. package/lib/v1/Button/constants/presets.js +179 -0
  204. package/lib/v1/Button/css/Button_v1.module.css +33 -16
  205. package/lib/v1/Button/css/cssJSLogic.js +45 -25
  206. package/lib/v1/Button/props/defaultProps.js +4 -5
  207. package/lib/v1/Button/props/propTypes.js +41 -7
  208. package/lib/v1/Label/__tests__/__snapshots__/Label.spec.js.snap +24 -24
  209. package/lib/v1/Switch/__tests__/__snapshots__/Switch.spec.js.snap +14 -14
  210. package/lib/v1/helpers/colorHelpers/__tests__/colorHelper.spec.js +363 -0
  211. package/lib/v1/helpers/colorHelpers/background/backgroundColor.module.css +38 -534
  212. package/lib/v1/helpers/colorHelpers/border/borderColor.module.css +28 -412
  213. package/lib/v1/helpers/colorHelpers/colorHelper.js +130 -153
  214. package/lib/v1/helpers/colorHelpers/constants/index.js +45 -4
  215. package/lib/v1/helpers/colorHelpers/index.js +2 -24
  216. package/lib/v1/helpers/colorHelpers/paletteUtilities.README.md +141 -336
  217. package/lib/v1/helpers/colorHelpers/text/textColor.module.css +79 -295
  218. package/package.json +16 -16
package/es/Tab/__tests__/__snapshots__/TabLayout.spec.js.snap CHANGED
@@ -3,44 +3,44 @@
3
3
  exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="flex fullSize row"
6
+ class="d-flex d-h-full d-w-full d-flex-row"
7
7
  data-id="containerComponent"
8
8
  data-selector-id="tabWrapper"
9
9
  data-test-id="containerComponent"
10
10
  >
11
11
  <div
12
- class="noShrink"
12
+ class="d-flex-shrink-0"
13
13
  data-id="boxComponent"
14
14
  data-selector-id="tabs"
15
15
  data-test-id="boxComponent"
16
16
  >
17
17
  <div
18
- class="flex fullSize column tab alpha alpha_border alpha_padding"
18
+ class="d-flex d-h-full d-w-full d-flex-col tab alpha alpha_border alpha_padding"
19
19
  data-id="containerComponent"
20
20
  data-selector-id="container"
21
21
  data-test-id="containerComponent"
22
22
  >
23
23
  <div
24
- class="flexible basis_zero noShrink"
24
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
25
25
  data-id="boxComponent"
26
26
  data-selector-id="box"
27
27
  data-test-id="boxComponent"
28
28
  >
29
29
  <div
30
- class="flex fullSize column"
30
+ class="d-flex d-h-full d-w-full d-flex-col"
31
31
  data-id="containerComponent"
32
32
  data-selector-id="container"
33
33
  data-test-id="containerComponent"
34
34
  >
35
35
  <div
36
- class="noShrink menu"
36
+ class="d-flex-shrink-0 menu"
37
37
  data-id="boxComponent"
38
38
  data-selector-id="tabs_moreIcon"
39
39
  data-test-id="boxComponent"
40
40
  >
41
41
  <button
42
42
  aria-label="MoreTabs"
43
- class="flex fullSize column alignItems_center justifyContent_center buttonReset"
43
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
44
44
  data-id="moreTabs"
45
45
  data-selector-id="container"
46
46
  data-test-id="moreTabs"
@@ -48,7 +48,7 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
48
48
  >
49
49
  <i
50
50
  aria-hidden="true"
51
- class="zd_font_icons rtl basic icon-menu"
51
+ class="zd_font_icons ff icon-menu basic d-inline-block d-align-middle rtl"
52
52
  data-id="fontIcon"
53
53
  data-selector-id="fontIcon"
54
54
  data-test-id="fontIcon"
@@ -61,14 +61,14 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
61
61
  </div>
62
62
  </div>
63
63
  <div
64
- class="flexible basis_zero noShrink"
64
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
65
65
  data-id="boxComponent"
66
66
  data-selector-id="tabContentWrapper"
67
67
  data-test-id="boxComponent"
68
68
  >
69
69
  <div
70
70
  aria-labelledby="page1"
71
- class="flex fullSize column container"
71
+ class="d-flex d-h-full d-w-full d-flex-col container"
72
72
  data-id="tabContent_TabContent"
73
73
  data-scroll="true"
74
74
  data-selector-id="tabContent"
@@ -88,44 +88,44 @@ exports[`TabWrapper rendering the align prop of - horizontal 1`] = `
88
88
  exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
89
89
  <DocumentFragment>
90
90
  <div
91
- class="flex fullSize rowReverse"
91
+ class="d-flex d-h-full d-w-full d-flex-row-reverse"
92
92
  data-id="containerComponent"
93
93
  data-selector-id="tabWrapper"
94
94
  data-test-id="containerComponent"
95
95
  >
96
96
  <div
97
- class="noShrink"
97
+ class="d-flex-shrink-0"
98
98
  data-id="boxComponent"
99
99
  data-selector-id="tabs"
100
100
  data-test-id="boxComponent"
101
101
  >
102
102
  <div
103
- class="flex fullSize column tab alpha alpha_border alpha_padding"
103
+ class="d-flex d-h-full d-w-full d-flex-col tab alpha alpha_border alpha_padding"
104
104
  data-id="containerComponent"
105
105
  data-selector-id="container"
106
106
  data-test-id="containerComponent"
107
107
  >
108
108
  <div
109
- class="flexible basis_zero noShrink"
109
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
110
110
  data-id="boxComponent"
111
111
  data-selector-id="box"
112
112
  data-test-id="boxComponent"
113
113
  >
114
114
  <div
115
- class="flex fullSize column"
115
+ class="d-flex d-h-full d-w-full d-flex-col"
116
116
  data-id="containerComponent"
117
117
  data-selector-id="container"
118
118
  data-test-id="containerComponent"
119
119
  >
120
120
  <div
121
- class="noShrink menu"
121
+ class="d-flex-shrink-0 menu"
122
122
  data-id="boxComponent"
123
123
  data-selector-id="tabs_moreIcon"
124
124
  data-test-id="boxComponent"
125
125
  >
126
126
  <button
127
127
  aria-label="MoreTabs"
128
- class="flex fullSize column alignItems_center justifyContent_center buttonReset"
128
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
129
129
  data-id="moreTabs"
130
130
  data-selector-id="container"
131
131
  data-test-id="moreTabs"
@@ -133,7 +133,7 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
133
133
  >
134
134
  <i
135
135
  aria-hidden="true"
136
- class="zd_font_icons rtl basic icon-menu"
136
+ class="zd_font_icons ff icon-menu basic d-inline-block d-align-middle rtl"
137
137
  data-id="fontIcon"
138
138
  data-selector-id="fontIcon"
139
139
  data-test-id="fontIcon"
@@ -146,14 +146,14 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
146
146
  </div>
147
147
  </div>
148
148
  <div
149
- class="flexible basis_zero noShrink"
149
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
150
150
  data-id="boxComponent"
151
151
  data-selector-id="tabContentWrapper"
152
152
  data-test-id="boxComponent"
153
153
  >
154
154
  <div
155
155
  aria-labelledby="page1"
156
- class="flex fullSize column container"
156
+ class="d-flex d-h-full d-w-full d-flex-col container"
157
157
  data-id="tabContent_TabContent"
158
158
  data-scroll="true"
159
159
  data-selector-id="tabContent"
@@ -173,44 +173,44 @@ exports[`TabWrapper rendering the align prop of - horizontal-reverse 1`] = `
173
173
  exports[`TabWrapper rendering the align prop of - vertical 1`] = `
174
174
  <DocumentFragment>
175
175
  <div
176
- class="flex fullSize column"
176
+ class="d-flex d-h-full d-w-full d-flex-col"
177
177
  data-id="containerComponent"
178
178
  data-selector-id="tabWrapper"
179
179
  data-test-id="containerComponent"
180
180
  >
181
181
  <div
182
- class="noShrink"
182
+ class="d-flex-shrink-0"
183
183
  data-id="boxComponent"
184
184
  data-selector-id="tabs"
185
185
  data-test-id="boxComponent"
186
186
  >
187
187
  <div
188
- class="flex fullSize row tab alpha alpha_border alpha_padding"
188
+ class="d-flex d-h-full d-w-full d-flex-row tab alpha alpha_border alpha_padding"
189
189
  data-id="containerComponent"
190
190
  data-selector-id="container"
191
191
  data-test-id="containerComponent"
192
192
  >
193
193
  <div
194
- class="flexible basis_zero noShrink"
194
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
195
195
  data-id="boxComponent"
196
196
  data-selector-id="box"
197
197
  data-test-id="boxComponent"
198
198
  >
199
199
  <div
200
- class="flex fullSize row"
200
+ class="d-flex d-h-full d-w-full d-flex-row"
201
201
  data-id="containerComponent"
202
202
  data-selector-id="container"
203
203
  data-test-id="containerComponent"
204
204
  >
205
205
  <div
206
- class="noShrink menu"
206
+ class="d-flex-shrink-0 menu"
207
207
  data-id="boxComponent"
208
208
  data-selector-id="tabs_moreIcon"
209
209
  data-test-id="boxComponent"
210
210
  >
211
211
  <button
212
212
  aria-label="MoreTabs"
213
- class="flex fullSize column alignItems_center justifyContent_center buttonReset"
213
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
214
214
  data-id="moreTabs"
215
215
  data-selector-id="container"
216
216
  data-test-id="moreTabs"
@@ -218,7 +218,7 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
218
218
  >
219
219
  <i
220
220
  aria-hidden="true"
221
- class="zd_font_icons rtl basic icon-menu"
221
+ class="zd_font_icons ff icon-menu basic d-inline-block d-align-middle rtl"
222
222
  data-id="fontIcon"
223
223
  data-selector-id="fontIcon"
224
224
  data-test-id="fontIcon"
@@ -231,14 +231,14 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
231
231
  </div>
232
232
  </div>
233
233
  <div
234
- class="flexible basis_zero noShrink"
234
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
235
235
  data-id="boxComponent"
236
236
  data-selector-id="tabContentWrapper"
237
237
  data-test-id="boxComponent"
238
238
  >
239
239
  <div
240
240
  aria-labelledby="page1"
241
- class="flex fullSize column container"
241
+ class="d-flex d-h-full d-w-full d-flex-col container"
242
242
  data-id="tabContent_TabContent"
243
243
  data-scroll="true"
244
244
  data-selector-id="tabContent"
@@ -258,44 +258,44 @@ exports[`TabWrapper rendering the align prop of - vertical 1`] = `
258
258
  exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
259
259
  <DocumentFragment>
260
260
  <div
261
- class="flex fullSize columnReverse"
261
+ class="d-flex d-h-full d-w-full d-flex-col-reverse"
262
262
  data-id="containerComponent"
263
263
  data-selector-id="tabWrapper"
264
264
  data-test-id="containerComponent"
265
265
  >
266
266
  <div
267
- class="noShrink"
267
+ class="d-flex-shrink-0"
268
268
  data-id="boxComponent"
269
269
  data-selector-id="tabs"
270
270
  data-test-id="boxComponent"
271
271
  >
272
272
  <div
273
- class="flex fullSize row tab alpha alpha_border alpha_padding"
273
+ class="d-flex d-h-full d-w-full d-flex-row tab alpha alpha_border alpha_padding"
274
274
  data-id="containerComponent"
275
275
  data-selector-id="container"
276
276
  data-test-id="containerComponent"
277
277
  >
278
278
  <div
279
- class="flexible basis_zero noShrink"
279
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
280
280
  data-id="boxComponent"
281
281
  data-selector-id="box"
282
282
  data-test-id="boxComponent"
283
283
  >
284
284
  <div
285
- class="flex fullSize row"
285
+ class="d-flex d-h-full d-w-full d-flex-row"
286
286
  data-id="containerComponent"
287
287
  data-selector-id="container"
288
288
  data-test-id="containerComponent"
289
289
  >
290
290
  <div
291
- class="noShrink menu"
291
+ class="d-flex-shrink-0 menu"
292
292
  data-id="boxComponent"
293
293
  data-selector-id="tabs_moreIcon"
294
294
  data-test-id="boxComponent"
295
295
  >
296
296
  <button
297
297
  aria-label="MoreTabs"
298
- class="flex fullSize column alignItems_center justifyContent_center buttonReset"
298
+ class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center buttonReset"
299
299
  data-id="moreTabs"
300
300
  data-selector-id="container"
301
301
  data-test-id="moreTabs"
@@ -303,7 +303,7 @@ exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
303
303
  >
304
304
  <i
305
305
  aria-hidden="true"
306
- class="zd_font_icons rtl basic icon-menu"
306
+ class="zd_font_icons ff icon-menu basic d-inline-block d-align-middle rtl"
307
307
  data-id="fontIcon"
308
308
  data-selector-id="fontIcon"
309
309
  data-test-id="fontIcon"
@@ -316,14 +316,14 @@ exports[`TabWrapper rendering the align prop of - vertical-reverse 1`] = `
316
316
  </div>
317
317
  </div>
318
318
  <div
319
- class="flexible basis_zero noShrink"
319
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
320
320
  data-id="boxComponent"
321
321
  data-selector-id="tabContentWrapper"
322
322
  data-test-id="boxComponent"
323
323
  >
324
324
  <div
325
325
  aria-labelledby="page1"
326
- class="flex fullSize column container"
326
+ class="d-flex d-h-full d-w-full d-flex-col container"
327
327
  data-id="tabContent_TabContent"
328
328
  data-scroll="true"
329
329
  data-selector-id="tabContent"
package/es/Tab/__tests__/__snapshots__/TabWrapper.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`TabWrapper rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="flex fullSize column"
6
+ class="d-flex d-h-full d-w-full d-flex-col"
7
7
  data-id="containerComponent"
8
8
  data-selector-id="tabWrapper"
9
9
  data-test-id="containerComponent"
package/es/Tab/__tests__/__snapshots__/Tabs.spec.js.snap CHANGED
@@ -3,25 +3,25 @@
3
3
  exports[`Tabs rendering the defult props 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="noShrink"
6
+ class="d-flex-shrink-0"
7
7
  data-id="boxComponent"
8
8
  data-selector-id="tabs"
9
9
  data-test-id="boxComponent"
10
10
  >
11
11
  <div
12
- class="flex fullSize column tab"
12
+ class="d-flex d-h-full d-w-full d-flex-col tab"
13
13
  data-id="containerComponent"
14
14
  data-selector-id="container"
15
15
  data-test-id="containerComponent"
16
16
  >
17
17
  <div
18
- class="flexible basis_zero noShrink"
18
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
19
19
  data-id="boxComponent"
20
20
  data-selector-id="box"
21
21
  data-test-id="boxComponent"
22
22
  >
23
23
  <div
24
- class="flex fullSize column"
24
+ class="d-flex d-h-full d-w-full d-flex-col"
25
25
  data-id="containerComponent"
26
26
  data-selector-id="container"
27
27
  data-test-id="containerComponent"
package/es/Tag/Tag.js CHANGED
@@ -157,9 +157,4 @@ export default class Tag extends PureComponent {
157
157
 
158
158
  }
159
159
  Tag.defaultProps = defaultProps;
160
- Tag.propTypes = propTypes; // if (__DOCS__) {
161
- // Tag.docs = {
162
- // componentGroup: 'Molecule',
163
- // folderName: 'Style Guide'
164
- // };
165
- // }
160
+ Tag.propTypes = propTypes;