@enact/limestone 1.3.0 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (200) hide show
  1. package/.github/workflows/ci-branch.yml +21 -0
  2. package/.github/workflows/ci-pull-request.yml +16 -0
  3. package/.github/workflows/ci-reusable.yml +73 -0
  4. package/ActionGuide/ActionGuide.d.ts +5 -4
  5. package/ActionGuide/ActionGuide.module.css +1 -1
  6. package/Alert/Alert.d.ts +13 -2
  7. package/Alert/Alert.js +39 -5
  8. package/Alert/Alert.module.css +48 -1
  9. package/Alert/tests/Alert-specs.js +91 -0
  10. package/BodyText/BodyText.d.ts +5 -4
  11. package/BodyText/BodyText.module.css +7 -7
  12. package/Button/Button.d.ts +17 -12
  13. package/Button/Button.js +1 -1
  14. package/Button/Button.module.css +195 -268
  15. package/Button/tests/Button-specs.js +26 -0
  16. package/CHANGELOG.md +254 -0
  17. package/Card/Card.d.ts +40 -12
  18. package/Card/Card.js +164 -28
  19. package/Card/Card.module.css +277 -58
  20. package/Card/tests/Card-specs.js +67 -3
  21. package/Checkbox/Checkbox.d.ts +8 -7
  22. package/Checkbox/Checkbox.js +3 -1
  23. package/Checkbox/Checkbox.module.css +213 -120
  24. package/Checkbox/tests/Checkbox-specs.js +1 -1
  25. package/CheckboxItem/CheckboxItem.d.ts +22 -7
  26. package/CheckboxItem/CheckboxItem.js +71 -4
  27. package/Chips/Chip.js +72 -13
  28. package/Chips/Chip.module.css +3 -3
  29. package/Chips/Chips.js +37 -17
  30. package/Chips/Chips.module.css +1 -1
  31. package/Chips/tests/Chip-specs.js +43 -13
  32. package/Chips/tests/Chips-specs.js +31 -21
  33. package/ColorPicker/ColorPicker.js +27 -25
  34. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +4 -5
  35. package/ContextualPopupDecorator/ContextualPopup.module.css +34 -34
  36. package/ContextualPopupDecorator/ContextualPopupDecorator.js +567 -549
  37. package/DatePicker/DatePicker.d.ts +4 -5
  38. package/DayPicker/DayPicker.d.ts +8 -7
  39. package/DayPicker/DaySelectorDecorator.js +12 -7
  40. package/Dropdown/Dropdown.d.ts +11 -13
  41. package/Dropdown/Dropdown.module.css +13 -9
  42. package/Dropdown/DropdownList.js +80 -54
  43. package/FixedPopupPanels/FixedPopupPanels.d.ts +4 -2
  44. package/FixedPopupPanels/FixedPopupPanels.module.css +18 -18
  45. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +23 -23
  46. package/FlexiblePopupPanels/useNavButtonFocus.js +7 -10
  47. package/FormCheckboxItem/FormCheckboxItem.d.ts +5 -4
  48. package/Heading/Heading.d.ts +9 -8
  49. package/Heading/Heading.js +2 -2
  50. package/Heading/Heading.module.css +5 -5
  51. package/Icon/Icon.d.ts +15 -4
  52. package/Icon/Icon.js +49 -2
  53. package/Icon/Icon.module.css +1 -1
  54. package/Icon/IconList.js +27 -1
  55. package/IconItem/IconItem.d.ts +13 -12
  56. package/IconItem/IconItem.js +15 -0
  57. package/IconItem/IconItem.module.css +107 -1
  58. package/IconItem/tests/IconItem-specs.js +30 -1
  59. package/Image/Image.d.ts +5 -4
  60. package/Image/Image.js +6 -4
  61. package/ImageItem/ImageItem.d.ts +11 -10
  62. package/ImageItem/ImageItem.js +37 -31
  63. package/ImageItem/ImageItem.module.css +30 -30
  64. package/ImageItem/tests/ImageItem-specs.js +3 -10
  65. package/Input/Input.js +21 -3
  66. package/Input/Input.module.css +37 -8
  67. package/Input/InputField.js +79 -24
  68. package/Input/InputField.module.css +273 -41
  69. package/Input/InputFieldDecoratorIcon.js +1 -0
  70. package/Input/InputFieldSpotlightDecorator.js +257 -228
  71. package/Input/index.d.ts +120 -111
  72. package/Input/tests/Input-specs.js +26 -0
  73. package/Input/tests/InputField-specs.js +170 -3
  74. package/Input/tests/InputPopup-specs.js +1 -1
  75. package/Item/Item.d.ts +16 -9
  76. package/Item/Item.js +20 -2
  77. package/Item/Item.module.css +1 -1
  78. package/KeyGuide/KeyGuide.d.ts +8 -7
  79. package/KeyGuide/KeyGuide.js +29 -27
  80. package/KeyGuide/KeyGuide.module.css +25 -1
  81. package/Marquee/Marquee.d.ts +2 -4
  82. package/MediaOverlay/MediaOverlay.d.ts +12 -11
  83. package/MediaOverlay/MediaOverlay.js +43 -21
  84. package/MediaOverlay/MediaOverlay.module.css +114 -15
  85. package/MediaOverlay/tests/MediaOverlay-specs.js +29 -0
  86. package/MediaPlayer/MediaControls.js +195 -13
  87. package/MediaPlayer/MediaControls.module.css +3 -2
  88. package/MediaPlayer/MediaSlider.module.css +7 -20
  89. package/MediaPlayer/index.d.ts +59 -7
  90. package/MediaPlayer/tests/util-specs.js +4 -1
  91. package/PageViews/PageViews.js +232 -82
  92. package/PageViews/PageViews.module.css +3 -0
  93. package/PageViews/PageViewsRouter.js +100 -42
  94. package/PageViews/tests/PageViews-specs.js +171 -0
  95. package/Panels/Header.js +54 -34
  96. package/Panels/Header.module.css +83 -31
  97. package/Panels/Panel.module.css +1 -1
  98. package/Panels/index.d.ts +7 -8
  99. package/Picker/Picker.d.ts +4 -5
  100. package/Picker/Picker.module.css +2 -2
  101. package/Popup/Popup.js +245 -242
  102. package/Popup/Popup.module.css +24 -24
  103. package/PopupTabLayout/PopupTabLayout.d.ts +5 -7
  104. package/PopupTabLayout/PopupTabLayout.js +26 -18
  105. package/PopupTabLayout/PopupTabLayout.module.css +53 -16
  106. package/PopupTabLayout/PopupTabLayoutStateContext.js +8 -0
  107. package/ProgressBar/ProgressBar.d.ts +5 -4
  108. package/ProgressBar/ProgressBarTooltip.module.css +12 -12
  109. package/ProgressButton/ProgressButton.d.ts +4 -5
  110. package/QuickGuidePanels/QuickGuidePanels.module.css +2 -2
  111. package/RadioItem/RadioItem.d.ts +18 -5
  112. package/RadioItem/RadioItem.js +69 -2
  113. package/RadioItem/RadioItem.module.css +36 -36
  114. package/RangePicker/RangePicker.module.css +2 -2
  115. package/Scroller/EditableWrapper.js +28 -18
  116. package/Scroller/Scroller.d.ts +20 -16
  117. package/Scroller/Scroller.js +20 -13
  118. package/Scroller/Scroller.module.css +4 -4
  119. package/Scroller/useThemeScroller.js +3 -3
  120. package/Slider/Slider.d.ts +20 -14
  121. package/Slider/Slider.js +71 -14
  122. package/Slider/Slider.module.css +464 -91
  123. package/Slider/SliderBehaviorDecorator.js +16 -14
  124. package/Slider/tests/Slider-specs.js +53 -1
  125. package/Slider/utils.js +23 -7
  126. package/Spinner/Spinner.d.ts +5 -4
  127. package/Spinner/Spinner.js +10 -8
  128. package/Spinner/Spinner.module.css +9 -9
  129. package/Steps/Steps.d.ts +5 -4
  130. package/Steps/Steps.js +9 -5
  131. package/Switch/Switch.d.ts +8 -7
  132. package/Switch/Switch.module.css +100 -13
  133. package/SwitchItem/SwitchItem.d.ts +9 -6
  134. package/TabLayout/RefocusDecorator.js +26 -18
  135. package/TabLayout/TabGroup.js +3 -2
  136. package/TabLayout/TabGroup.module.css +2 -2
  137. package/TabLayout/TabLayout.d.ts +6 -0
  138. package/TabLayout/TabLayout.js +11 -1
  139. package/TabLayout/TabLayout.module.css +18 -0
  140. package/TabLayout/tests/TabGroup-specs.js +1 -1
  141. package/TabLayout/tests/TabLayout-specs.js +52 -0
  142. package/ThemeDecorator/AccessibilityDecorator.js +12 -11
  143. package/ThemeDecorator/I18nFontDecorator.js +6 -4
  144. package/ThemeDecorator/ThemeDecorator.d.ts +16 -10
  145. package/ThemeDecorator/ThemeDecorator.js +24 -9
  146. package/ThemeDecorator/fontGenerator.js +1 -1
  147. package/ThemeDecorator/screenTypes.json +1 -0
  148. package/TimePicker/TimePicker.module.css +1 -1
  149. package/TimePicker/TimePickerBase.js +5 -3
  150. package/TooltipDecorator/Tooltip.module.css +1 -2
  151. package/TooltipDecorator/TooltipDecorator.js +12 -7
  152. package/TooltipDecorator/tests/useTooltip-specs.js +5 -2
  153. package/TooltipDecorator/tests/util-specs.js +12 -0
  154. package/TooltipDecorator/useTooltip.js +1 -1
  155. package/TooltipDecorator/util.js +18 -11
  156. package/VideoPlayer/Feedback.js +3 -0
  157. package/VideoPlayer/Feedback.module.css +5 -9
  158. package/VideoPlayer/FeedbackIcons.js +1 -1
  159. package/VideoPlayer/FeedbackTooltip.module.css +55 -11
  160. package/VideoPlayer/VideoPlayer.d.ts +44 -18
  161. package/VideoPlayer/VideoPlayer.js +153 -47
  162. package/VideoPlayer/VideoPlayer.module.css +28 -11
  163. package/VirtualList/VirtualList.d.ts +9 -2
  164. package/VirtualList/VirtualList.js +51 -24
  165. package/VirtualList/tests/VirtualGridList-translate-specs.js +3 -0
  166. package/VirtualList/tests/VirtualList-specs.js +28 -1
  167. package/VirtualList/tests/VirtualList-translate-specs.js +4 -1
  168. package/VirtualList/useSpotlight.js +1 -1
  169. package/WizardPanels/WizardPanels.module.css +2 -2
  170. package/WizardPanels/index.d.ts +4 -2
  171. package/fonts/Limestone_Icons.ttf +0 -0
  172. package/internal/$L/$L.js +3 -3
  173. package/internal/AsyncRenderChildren/AsyncRenderChildren.js +9 -5
  174. package/internal/AsyncRenderChildren/tests/AsyncRenderChildren-specs.js +4 -1
  175. package/internal/DateComponentPicker/DateComponentPicker.module.css +2 -2
  176. package/internal/DateTime/DateTime.module.css +1 -0
  177. package/internal/DateTime/DateTimeDecorator.js +5 -4
  178. package/internal/Panels/PanelsRouter.js +48 -31
  179. package/internal/Panels/useAutoFocus.js +10 -6
  180. package/internal/Panels/useFocusOnTransition.js +4 -3
  181. package/internal/Picker/Picker.js +7 -5
  182. package/internal/Picker/Picker.module.css +2 -2
  183. package/internal/Picker/SpottablePicker.js +15 -13
  184. package/internal/SharedStateDecorator/SharedStateDecorator.js +78 -99
  185. package/internal/validators/validators.js +21 -2
  186. package/package.json +18 -15
  187. package/styles/colors-highcontrast.less +9 -1
  188. package/styles/colors.less +12 -7
  189. package/styles/motion-mixins.less +66 -0
  190. package/styles/motions.less +78 -0
  191. package/styles/variables.less +176 -150
  192. package/useScroll/HoverToScroll.js +23 -17
  193. package/useScroll/Scrollbar.js +14 -10
  194. package/useScroll/ScrollbarPlaceholder.js +3 -5
  195. package/useScroll/ScrollbarTrack.js +7 -5
  196. package/useScroll/ScrollbarTrack.module.css +8 -8
  197. package/useScroll/useEvent.js +14 -3
  198. package/useScroll/useScroll.js +12 -2
  199. package/useScroll/useScroll.module.css +6 -6
  200. package/.travis.yml +0 -40
package/styles/motions.less ADDED
@@ -0,0 +1,78 @@
1
+ @import "../styles/variables.less";
2
+
3
+ // Motion Tokens
4
+
5
+ /* ---------------------------------------
6
+ Animations
7
+ ------------------------------------------ */
8
+ :root {
9
+ /* Bounce
10
+ ------------------------------------------ */
11
+ --lime-bounce-motion: var(--lime-bounce-animation-name) var(--lime-bounce-motion-duration) var(--lime-bounce-motion-easing-function);
12
+ --lime-check-motion: var(--lime-check-animation-name) var(--lime-check-motion-duration) forwards;
13
+ }
14
+
15
+ /* ---------------------------------------
16
+ Animations properties
17
+ ------------------------------------------ */
18
+ :root {
19
+ /* ---------------------------------------
20
+ Durations
21
+ ------------------------------------------ */
22
+ --lime-motion-default-duration: 200ms;
23
+ --lime-motion-medium1-duration: 250ms;
24
+ --lime-motion-medium2-duration: 300ms;
25
+ --lime-motion-medium4-duration: 400ms;
26
+ --lime-motion-long2-duration: 500ms;
27
+ --lime-bounce-motion-duration: var(--lime-motion-medium2-duration);
28
+ --lime-check-motion-duration: var(--lime-motion-medium4-duration);
29
+ --lime-focus-in-motion-duration: var(--lime-motion-medium2-duration);
30
+ --lime-focus-out-motion-duration: var(--lime-motion-long2-duration);
31
+ --lime-press-motion-duration: var(--lime-motion-medium1-duration);
32
+ --lime-release-motion-duration: var(--lime-motion-medium2-duration);
33
+
34
+ /* ---------------------------------------
35
+ Easing functions
36
+ ------------------------------------------ */
37
+ --lime-default-motion-easing-function: ease-out;
38
+ --lime-EIO-motion-easing-function: cubic-bezier(0.2, 0.0, 0.05, 1.0);
39
+ --lime-EO-motion-easing-function: cubic-bezier(0.1, 0.6, 0.15, 1.0);
40
+ --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
41
+ --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
42
+ --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
43
+ --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
44
+ --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
45
+
46
+ /* ---------------------------------------
47
+ Keyframes names
48
+ ------------------------------------------ */
49
+ --lime-bounce-animation-name: bounce-motion;
50
+ --lime-check-animation-name: check-motion;
51
+
52
+ /* ---------------------------------------
53
+ Keyframes values
54
+ ------------------------------------------ */
55
+ --lime-bounce-motion-offset-default-value: 6px;
56
+ }
57
+
58
+ /* ---------------------------------------
59
+ Keyframes
60
+ ------------------------------------------ */
61
+
62
+ /* Bounce
63
+ ------------------------------------------ */
64
+ @keyframes bounce-motion {
65
+ @offset-value: var(--lime-bounce-motion-offset-value, --lime-bounce-motion-offset-default-value);
66
+
67
+ 0% {transform: translateX(0)}
68
+ 50% {transform: translateX(@offset-value)}
69
+ 80% {transform: translateX(~"calc(@{offset-value} / -2)")}
70
+ 100% {transform: translateX(0)}
71
+ }
72
+
73
+ /* Check
74
+ ------------------------------------------ */
75
+ @keyframes check-motion {
76
+ 0% {transform: translateX(0)}
77
+ 100% {transform: translateX(100%)}
78
+ }