@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/MultiSelect/__tests__/__snapshots__/MultiSelectHeader.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`MultiSelectHeader rendering the basic value 1`] = `
4
4
  <DocumentFragment>
5
5
  <li
6
- class="flex row alignItems_center list medium default withBorder selectAll"
6
+ class="d-flex d-flex-row d-items-center list medium default withBorder selectAll"
7
7
  data-a11y-inset-focus="true"
8
8
  data-id="MultiSelectHeader_selectAll"
9
9
  data-selector-id="listItemWithIcon"
@@ -12,7 +12,7 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
12
12
  tabindex="0"
13
13
  >
14
14
  <div
15
- class="noShrink contentWrapper"
15
+ class="d-flex-shrink-0 contentWrapper"
16
16
  data-id="boxComponent"
17
17
  data-selector-id="box"
18
18
  data-test-id="boxComponent"
@@ -24,14 +24,14 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
24
24
  data-test-id="MultiSelectHeader_selectAll_Icon"
25
25
  >
26
26
  <div
27
- class="noShrink alignSelf_start iconWrapper"
27
+ class="d-flex-shrink-0 d-self-start iconWrapper"
28
28
  data-id="boxComponent"
29
29
  data-selector-id="box"
30
30
  data-test-id="boxComponent"
31
31
  >
32
32
  <i
33
33
  aria-hidden="true"
34
- class="zd_font_icons basic icon-androidd"
34
+ class="zd_font_icons ff icon-androidd basic d-inline-block d-align-middle"
35
35
  data-id="fontIcon"
36
36
  data-selector-id="fontIcon"
37
37
  data-test-id="fontIcon"
@@ -40,19 +40,19 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
40
40
  </div>
41
41
  </div>
42
42
  <div
43
- class="flexible basis_zero noShrink leftBox selfAlign_center"
43
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
44
44
  data-id="boxComponent"
45
45
  data-selector-id="box"
46
46
  data-test-id="boxComponent"
47
47
  >
48
48
  <div
49
- class="noShrink titleBox"
49
+ class="d-flex-shrink-0 titleBox"
50
50
  data-id="boxComponent"
51
51
  data-selector-id="box"
52
52
  data-test-id="boxComponent"
53
53
  >
54
54
  <div
55
- class="basis_auto shrink value"
55
+ class="d-basis-auto d-min-w-0 d-flex-shrink value"
56
56
  data-id="MultiSelectHeader_selectAll_Text"
57
57
  data-selector-id="box"
58
58
  data-test-id="MultiSelectHeader_selectAll_Text"
package/es/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap CHANGED
@@ -9,13 +9,13 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
9
9
  data-test-id="multiSelectWithAvatar"
10
10
  >
11
11
  <div
12
- class="flex fullSize row wrap alignItems_center container medium borderColor_default hasBorder"
12
+ class="d-flex d-h-full d-w-full d-flex-row d-flex-wrap d-items-center container medium borderColor_default hasBorder"
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_auto shrink wrapper"
18
+ class="d-min-h-0 d-flex-grow d-basis-auto d-min-w-0 d-flex-shrink wrapper"
19
19
  data-id="boxComponent"
20
20
  data-selector-id="box"
21
21
  data-test-id="boxComponent"
@@ -24,11 +24,11 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
24
24
  class="custmSpan custmSpanMedium"
25
25
  />
26
26
  <div
27
- class="flex row varClass customContainer effect container custmInputWrapper"
27
+ class="d-flex d-flex-row varClass customContainer effect container custmInputWrapper"
28
28
  data-selector-id="textBoxIcon"
29
29
  >
30
30
  <div
31
- class="flexible basis_zero noShrink"
31
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0"
32
32
  data-id="boxComponent"
33
33
  data-selector-id="box"
34
34
  data-test-id="boxComponent"
@@ -48,25 +48,25 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
48
48
  />
49
49
  </div>
50
50
  <div
51
- class="noShrink iconContainer"
51
+ class="d-flex-shrink-0 iconContainer"
52
52
  data-id="boxComponent"
53
53
  data-selector-id="box"
54
54
  data-test-id="boxComponent"
55
55
  >
56
56
  <div
57
- class="flex fullSize row"
57
+ class="d-flex d-h-full d-w-full d-flex-row"
58
58
  data-id="containerComponent"
59
59
  data-selector-id="container"
60
60
  data-test-id="containerComponent"
61
61
  >
62
62
  <div
63
- class="noShrink icon"
63
+ class="d-flex-shrink-0 icon"
64
64
  data-id="boxComponent"
65
65
  data-selector-id="box"
66
66
  data-test-id="boxComponent"
67
67
  >
68
68
  <div
69
- class="inlineFlex row alignItems_center rightPlaceholder"
69
+ class="d-inline-flex d-flex-row d-items-center rightPlaceholder"
70
70
  data-id="containerComponent"
71
71
  data-selector-id="container"
72
72
  data-test-id="containerComponent"
package/es/MultiSelect/__tests__/__snapshots__/SelectedOptions.spec.js.snap CHANGED
@@ -3,7 +3,7 @@
3
3
  exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="noShrink tag medium"
6
+ class="d-flex-shrink-0 tag medium"
7
7
  data-id="selectedOptions"
8
8
  data-selector-id="box"
9
9
  data-test-id="selectedOptions"
@@ -18,7 +18,7 @@ exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
18
18
  exports[`SelectedOptions rendering the basic select options 1`] = `
19
19
  <DocumentFragment>
20
20
  <div
21
- class="noShrink tag medium"
21
+ class="d-flex-shrink-0 tag medium"
22
22
  data-id="selectedOptions"
23
23
  data-selector-id="box"
24
24
  data-test-id="selectedOptions"
@@ -42,7 +42,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
42
42
  </div>
43
43
  </div>
44
44
  <div
45
- class="noShrink tag medium"
45
+ class="d-flex-shrink-0 tag medium"
46
46
  data-id="selectedOptions"
47
47
  data-selector-id="box"
48
48
  data-test-id="selectedOptions"
@@ -66,7 +66,7 @@ exports[`SelectedOptions rendering the basic select options 1`] = `
66
66
  </div>
67
67
  </div>
68
68
  <div
69
- class="noShrink tag medium"
69
+ class="d-flex-shrink-0 tag medium"
70
70
  data-id="selectedOptions"
71
71
  data-selector-id="box"
72
72
  data-test-id="selectedOptions"
package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap CHANGED
@@ -3,14 +3,14 @@
3
3
  exports[`Suggestions Should render with renderBeforeChildren 1`] = `
4
4
  <DocumentFragment>
5
5
  <div
6
- class="flex column"
6
+ class="d-flex d-flex-col"
7
7
  data-id="containerComponent"
8
8
  data-selector-id="container"
9
9
  data-test-id="containerComponent"
10
10
  tabindex="0"
11
11
  >
12
12
  <div
13
- class="noShrink"
13
+ class="d-flex-shrink-0"
14
14
  data-id="undefined"
15
15
  data-selector-id="box"
16
16
  data-test-id="undefined"
@@ -18,7 +18,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
18
18
  <li
19
19
  aria-label="Suggestions Option 1"
20
20
  aria-selected="false"
21
- class="flex row alignItems_center list medium default withBorder"
21
+ class="d-flex d-flex-row d-items-center list medium default withBorder"
22
22
  data-a11y-inset-focus="true"
23
23
  data-a11y-list-active="false"
24
24
  data-id="Suggestions Option 1"
@@ -29,19 +29,19 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
29
29
  tabindex="0"
30
30
  >
31
31
  <div
32
- class="flexible basis_zero noShrink leftBox"
32
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
33
33
  data-id="boxComponent"
34
34
  data-selector-id="box"
35
35
  data-test-id="boxComponent"
36
36
  >
37
37
  <div
38
- class="noShrink titleBox"
38
+ class="d-flex-shrink-0 titleBox"
39
39
  data-id="boxComponent"
40
40
  data-selector-id="box"
41
41
  data-test-id="boxComponent"
42
42
  >
43
43
  <div
44
- class="basis_auto noShrink beforeChild"
44
+ class="d-basis-auto d-flex-shrink-0 beforeChild"
45
45
  data-id="boxComponent"
46
46
  data-selector-id="box"
47
47
  data-test-id="boxComponent"
@@ -51,7 +51,7 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
51
51
  </span>
52
52
  </div>
53
53
  <div
54
- class="basis_auto shrink selfAlign_center value"
54
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
55
55
  data-id="boxComponent"
56
56
  data-selector-id="box"
57
57
  data-test-id="boxComponent"
@@ -69,14 +69,14 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
69
69
  exports[`Suggestions rendering the defult props 1`] = `
70
70
  <DocumentFragment>
71
71
  <div
72
- class="flex column"
72
+ class="d-flex d-flex-col"
73
73
  data-id="containerComponent"
74
74
  data-selector-id="container"
75
75
  data-test-id="containerComponent"
76
76
  tabindex="0"
77
77
  >
78
78
  <div
79
- class="noShrink"
79
+ class="d-flex-shrink-0"
80
80
  data-id="undefined"
81
81
  data-selector-id="box"
82
82
  data-test-id="undefined"
@@ -88,14 +88,14 @@ exports[`Suggestions rendering the defult props 1`] = `
88
88
  exports[`Suggestions rendering with limit props 1`] = `
89
89
  <DocumentFragment>
90
90
  <div
91
- class="flex column"
91
+ class="d-flex d-flex-col"
92
92
  data-id="containerComponent"
93
93
  data-selector-id="container"
94
94
  data-test-id="containerComponent"
95
95
  tabindex="0"
96
96
  >
97
97
  <div
98
- class="noShrink"
98
+ class="d-flex-shrink-0"
99
99
  data-id="undefined"
100
100
  data-selector-id="box"
101
101
  data-test-id="undefined"
@@ -103,7 +103,7 @@ exports[`Suggestions rendering with limit props 1`] = `
103
103
  <li
104
104
  aria-label="text2"
105
105
  aria-selected="true"
106
- class="flex row alignItems_center list medium default activedefault activewithBorder"
106
+ class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
107
107
  data-a11y-inset-focus="true"
108
108
  data-a11y-list-active="false"
109
109
  data-id="text2"
@@ -116,19 +116,19 @@ exports[`Suggestions rendering with limit props 1`] = `
116
116
  tabindex="0"
117
117
  >
118
118
  <div
119
- class="flexible basis_zero noShrink leftBox"
119
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
120
120
  data-id="boxComponent"
121
121
  data-selector-id="box"
122
122
  data-test-id="boxComponent"
123
123
  >
124
124
  <div
125
- class="noShrink titleBox"
125
+ class="d-flex-shrink-0 titleBox"
126
126
  data-id="boxComponent"
127
127
  data-selector-id="box"
128
128
  data-test-id="boxComponent"
129
129
  >
130
130
  <div
131
- class="basis_auto shrink selfAlign_center value"
131
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
132
132
  data-id="boxComponent"
133
133
  data-selector-id="box"
134
134
  data-test-id="boxComponent"
@@ -141,7 +141,7 @@ exports[`Suggestions rendering with limit props 1`] = `
141
141
  <li
142
142
  aria-label="text3"
143
143
  aria-selected="true"
144
- class="flex row alignItems_center list medium default activedefault activewithBorder"
144
+ class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
145
145
  data-a11y-inset-focus="true"
146
146
  data-a11y-list-active="false"
147
147
  data-id="text3"
@@ -154,19 +154,19 @@ exports[`Suggestions rendering with limit props 1`] = `
154
154
  tabindex="0"
155
155
  >
156
156
  <div
157
- class="flexible basis_zero noShrink leftBox"
157
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
158
158
  data-id="boxComponent"
159
159
  data-selector-id="box"
160
160
  data-test-id="boxComponent"
161
161
  >
162
162
  <div
163
- class="noShrink titleBox"
163
+ class="d-flex-shrink-0 titleBox"
164
164
  data-id="boxComponent"
165
165
  data-selector-id="box"
166
166
  data-test-id="boxComponent"
167
167
  >
168
168
  <div
169
- class="basis_auto shrink selfAlign_center value"
169
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
170
170
  data-id="boxComponent"
171
171
  data-selector-id="box"
172
172
  data-test-id="boxComponent"
@@ -179,7 +179,7 @@ exports[`Suggestions rendering with limit props 1`] = `
179
179
  <li
180
180
  aria-label="text4"
181
181
  aria-selected="true"
182
- class="flex row alignItems_center list medium default activedefault activewithBorder"
182
+ class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
183
183
  data-a11y-inset-focus="true"
184
184
  data-a11y-list-active="false"
185
185
  data-id="text4"
@@ -191,19 +191,19 @@ exports[`Suggestions rendering with limit props 1`] = `
191
191
  tabindex="0"
192
192
  >
193
193
  <div
194
- class="flexible basis_zero noShrink leftBox"
194
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
195
195
  data-id="boxComponent"
196
196
  data-selector-id="box"
197
197
  data-test-id="boxComponent"
198
198
  >
199
199
  <div
200
- class="noShrink titleBox"
200
+ class="d-flex-shrink-0 titleBox"
201
201
  data-id="boxComponent"
202
202
  data-selector-id="box"
203
203
  data-test-id="boxComponent"
204
204
  >
205
205
  <div
206
- class="basis_auto shrink selfAlign_center value"
206
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
207
207
  data-id="boxComponent"
208
208
  data-selector-id="box"
209
209
  data-test-id="boxComponent"
@@ -216,7 +216,7 @@ exports[`Suggestions rendering with limit props 1`] = `
216
216
  <li
217
217
  aria-label="text5"
218
218
  aria-selected="false"
219
- class="flex row alignItems_center list medium default disable withBorder"
219
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
220
220
  data-a11y-inset-focus="true"
221
221
  data-a11y-list-active="false"
222
222
  data-id="text5"
@@ -226,19 +226,19 @@ exports[`Suggestions rendering with limit props 1`] = `
226
226
  role="option"
227
227
  >
228
228
  <div
229
- class="flexible basis_zero noShrink leftBox"
229
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
230
230
  data-id="boxComponent"
231
231
  data-selector-id="box"
232
232
  data-test-id="boxComponent"
233
233
  >
234
234
  <div
235
- class="noShrink titleBox"
235
+ class="d-flex-shrink-0 titleBox"
236
236
  data-id="boxComponent"
237
237
  data-selector-id="box"
238
238
  data-test-id="boxComponent"
239
239
  >
240
240
  <div
241
- class="basis_auto shrink selfAlign_center value"
241
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
242
242
  data-id="boxComponent"
243
243
  data-selector-id="box"
244
244
  data-test-id="boxComponent"
@@ -251,7 +251,7 @@ exports[`Suggestions rendering with limit props 1`] = `
251
251
  <li
252
252
  aria-label="text6"
253
253
  aria-selected="false"
254
- class="flex row alignItems_center list medium default disable withBorder"
254
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
255
255
  data-a11y-inset-focus="true"
256
256
  data-a11y-list-active="false"
257
257
  data-id="text6"
@@ -261,19 +261,19 @@ exports[`Suggestions rendering with limit props 1`] = `
261
261
  role="option"
262
262
  >
263
263
  <div
264
- class="flexible basis_zero noShrink leftBox"
264
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
265
265
  data-id="boxComponent"
266
266
  data-selector-id="box"
267
267
  data-test-id="boxComponent"
268
268
  >
269
269
  <div
270
- class="noShrink titleBox"
270
+ class="d-flex-shrink-0 titleBox"
271
271
  data-id="boxComponent"
272
272
  data-selector-id="box"
273
273
  data-test-id="boxComponent"
274
274
  >
275
275
  <div
276
- class="basis_auto shrink selfAlign_center value"
276
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
277
277
  data-id="boxComponent"
278
278
  data-selector-id="box"
279
279
  data-test-id="boxComponent"
@@ -286,7 +286,7 @@ exports[`Suggestions rendering with limit props 1`] = `
286
286
  <li
287
287
  aria-label="text7"
288
288
  aria-selected="false"
289
- class="flex row alignItems_center list medium default disable withBorder"
289
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
290
290
  data-a11y-inset-focus="true"
291
291
  data-a11y-list-active="false"
292
292
  data-id="text7"
@@ -296,19 +296,19 @@ exports[`Suggestions rendering with limit props 1`] = `
296
296
  role="option"
297
297
  >
298
298
  <div
299
- class="flexible basis_zero noShrink leftBox"
299
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
300
300
  data-id="boxComponent"
301
301
  data-selector-id="box"
302
302
  data-test-id="boxComponent"
303
303
  >
304
304
  <div
305
- class="noShrink titleBox"
305
+ class="d-flex-shrink-0 titleBox"
306
306
  data-id="boxComponent"
307
307
  data-selector-id="box"
308
308
  data-test-id="boxComponent"
309
309
  >
310
310
  <div
311
- class="basis_auto shrink selfAlign_center value"
311
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
312
312
  data-id="boxComponent"
313
313
  data-selector-id="box"
314
314
  data-test-id="boxComponent"
@@ -321,7 +321,7 @@ exports[`Suggestions rendering with limit props 1`] = `
321
321
  <li
322
322
  aria-label="text8"
323
323
  aria-selected="false"
324
- class="flex row alignItems_center list medium default disable withBorder"
324
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
325
325
  data-a11y-inset-focus="true"
326
326
  data-a11y-list-active="false"
327
327
  data-id="text8"
@@ -331,19 +331,19 @@ exports[`Suggestions rendering with limit props 1`] = `
331
331
  role="option"
332
332
  >
333
333
  <div
334
- class="flexible basis_zero noShrink leftBox"
334
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
335
335
  data-id="boxComponent"
336
336
  data-selector-id="box"
337
337
  data-test-id="boxComponent"
338
338
  >
339
339
  <div
340
- class="noShrink titleBox"
340
+ class="d-flex-shrink-0 titleBox"
341
341
  data-id="boxComponent"
342
342
  data-selector-id="box"
343
343
  data-test-id="boxComponent"
344
344
  >
345
345
  <div
346
- class="basis_auto shrink selfAlign_center value"
346
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
347
347
  data-id="boxComponent"
348
348
  data-selector-id="box"
349
349
  data-test-id="boxComponent"
@@ -356,7 +356,7 @@ exports[`Suggestions rendering with limit props 1`] = `
356
356
  <li
357
357
  aria-label="text9"
358
358
  aria-selected="false"
359
- class="flex row alignItems_center list medium default disable withBorder"
359
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
360
360
  data-a11y-inset-focus="true"
361
361
  data-a11y-list-active="false"
362
362
  data-id="text9"
@@ -366,19 +366,19 @@ exports[`Suggestions rendering with limit props 1`] = `
366
366
  role="option"
367
367
  >
368
368
  <div
369
- class="flexible basis_zero noShrink leftBox"
369
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
370
370
  data-id="boxComponent"
371
371
  data-selector-id="box"
372
372
  data-test-id="boxComponent"
373
373
  >
374
374
  <div
375
- class="noShrink titleBox"
375
+ class="d-flex-shrink-0 titleBox"
376
376
  data-id="boxComponent"
377
377
  data-selector-id="box"
378
378
  data-test-id="boxComponent"
379
379
  >
380
380
  <div
381
- class="basis_auto shrink selfAlign_center value"
381
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
382
382
  data-id="boxComponent"
383
383
  data-selector-id="box"
384
384
  data-test-id="boxComponent"
@@ -391,7 +391,7 @@ exports[`Suggestions rendering with limit props 1`] = `
391
391
  <li
392
392
  aria-label="text10"
393
393
  aria-selected="false"
394
- class="flex row alignItems_center list medium default disable withBorder"
394
+ class="d-flex d-flex-row d-items-center list medium default disable withBorder"
395
395
  data-a11y-inset-focus="true"
396
396
  data-a11y-list-active="false"
397
397
  data-id="text10"
@@ -401,19 +401,19 @@ exports[`Suggestions rendering with limit props 1`] = `
401
401
  role="option"
402
402
  >
403
403
  <div
404
- class="flexible basis_zero noShrink leftBox"
404
+ class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
405
405
  data-id="boxComponent"
406
406
  data-selector-id="box"
407
407
  data-test-id="boxComponent"
408
408
  >
409
409
  <div
410
- class="noShrink titleBox"
410
+ class="d-flex-shrink-0 titleBox"
411
411
  data-id="boxComponent"
412
412
  data-selector-id="box"
413
413
  data-test-id="boxComponent"
414
414
  >
415
415
  <div
416
- class="basis_auto shrink selfAlign_center value"
416
+ class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
417
417
  data-id="boxComponent"
418
418
  data-selector-id="box"
419
419
  data-test-id="boxComponent"