@enact/limestone 1.10.1 → 1.10.2

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 (122) hide show
  1. package/.github/PULL_REQUEST_TEMPLATE.md +1 -0
  2. package/ActionGuide/ActionGuide.d.ts +1 -1
  3. package/ActionGuide/ActionGuide.module.css +3 -0
  4. package/Alert/Alert.d.ts +9 -0
  5. package/Alert/Alert.js +63 -21
  6. package/Alert/Alert.module.css +41 -9
  7. package/Alert/AlertImage.module.css +5 -1
  8. package/Alert/tests/Alert-specs.js +6 -2
  9. package/BodyText/BodyText.d.ts +1 -1
  10. package/BodyText/BodyText.js +14 -9
  11. package/BodyText/BodyText.module.css +1 -1
  12. package/Button/Button.d.ts +3 -3
  13. package/Button/Button.module.css +14 -28
  14. package/CHANGELOG.md +48 -1
  15. package/Card/Card.d.ts +81 -9
  16. package/Card/Card.js +321 -84
  17. package/Card/Card.module.css +171 -20
  18. package/Card/tests/Card-specs.js +100 -0
  19. package/Checkbox/Checkbox.d.ts +2 -2
  20. package/Checkbox/Checkbox.module.css +2 -9
  21. package/CheckboxItem/CheckboxItem.d.ts +8 -1
  22. package/CheckboxItem/CheckboxItem.js +39 -12
  23. package/CheckboxItem/CheckboxItem.module.css +228 -4
  24. package/Chips/Chip.module.css +2 -2
  25. package/ContextualMenuDecorator/ContextualMenuDecorator.d.ts +2 -2
  26. package/ContextualPopupDecorator/ContextualPopup.module.css +1 -1
  27. package/ContextualPopupDecorator/ContextualPopupDecorator.js +2 -4
  28. package/ContextualPopupDecorator/tests/ContextualPopupDecorator-specs.js +39 -2
  29. package/Dropdown/Dropdown.d.ts +2 -2
  30. package/Dropdown/Dropdown.module.css +7 -7
  31. package/FixedPopupPanels/FixedPopupPanels.d.ts +2 -2
  32. package/FlexiblePopupPanels/FlexiblePopupPanels.module.css +15 -3
  33. package/FlexiblePopupPanels/index.d.ts +2 -2
  34. package/FormCheckboxItem/FormCheckboxItem.d.ts +1 -1
  35. package/FormCheckboxItem/FormCheckboxItem.js +1 -0
  36. package/FormCheckboxItem/FormCheckboxItem.module.css +1 -1
  37. package/Heading/Heading.d.ts +2 -2
  38. package/Icon/Icon.d.ts +22 -1
  39. package/Icon/Icon.js +21 -0
  40. package/Icon/IconList.js +43 -1
  41. package/IconItem/IconItem.d.ts +2 -2
  42. package/IconItem/IconItem.module.css +11 -14
  43. package/Image/Image.d.ts +1 -1
  44. package/Image/Image.module.css +1 -1
  45. package/ImageItem/ImageItem.d.ts +2 -2
  46. package/ImageItem/ImageItem.js +3 -16
  47. package/ImageItem/ImageItem.module.css +105 -97
  48. package/ImageItem/tests/ImageItem-specs.js +6 -5
  49. package/Input/Input.module.css +8 -7
  50. package/Input/InputField.module.css +4 -4
  51. package/Input/index.d.ts +1 -1
  52. package/Input/tests/Input-specs.js +2 -2
  53. package/Input/tests/InputField-specs.js +1 -1
  54. package/Item/Item.d.ts +2 -2
  55. package/Item/Item.module.css +27 -15
  56. package/KeyGuide/KeyGuide.d.ts +2 -2
  57. package/MediaOverlay/MediaOverlay.d.ts +2 -2
  58. package/MediaOverlay/MediaOverlay.module.css +2 -5
  59. package/MediaPlayer/MediaSlider.module.css +1 -0
  60. package/MediaPlayer/Times.module.css +1 -1
  61. package/MediaPlayer/index.d.ts +2 -2
  62. package/PageViews/PageViews.module.css +2 -1
  63. package/Panels/Header.module.css +40 -28
  64. package/Panels/Panel.module.css +1 -1
  65. package/Panels/index.d.ts +1 -1
  66. package/Picker/Picker.d.ts +1 -1
  67. package/Popup/Popup.module.css +4 -1
  68. package/PopupTabLayout/PopupTabLayout.d.ts +6 -6
  69. package/PopupTabLayout/PopupTabLayout.module.css +6 -6
  70. package/ProgressBar/ProgressBar.d.ts +1 -1
  71. package/ProgressBar/ProgressBar.module.css +12 -12
  72. package/ProgressBar/ProgressBarTooltip.module.css +7 -7
  73. package/ProgressButton/ProgressButton.d.ts +2 -2
  74. package/QuickGuidePanels/QuickGuidePanels.module.css +1 -1
  75. package/RadioItem/RadioItem.d.ts +1 -1
  76. package/RadioItem/RadioItem.module.css +18 -20
  77. package/Scroller/Scroller.d.ts +12 -0
  78. package/Scroller/Scroller.js +15 -0
  79. package/Scroller/tests/Scroller-specs.js +29 -0
  80. package/Scroller/useThemeScroller.js +22 -2
  81. package/Slider/Slider.d.ts +1 -1
  82. package/Slider/Slider.module.css +539 -300
  83. package/Spinner/Spinner.d.ts +1 -1
  84. package/Spinner/Spinner.module.css +2 -2
  85. package/Steps/Steps.d.ts +1 -1
  86. package/Steps/Steps.js +12 -6
  87. package/Steps/Steps.module.css +16 -2
  88. package/Switch/Switch.module.css +2 -5
  89. package/SwitchItem/SwitchItem.d.ts +1 -1
  90. package/TabLayout/RefocusDecorator.js +1 -1
  91. package/TabLayout/TabGroup.module.css +12 -6
  92. package/TabLayout/TabLayout.js +4 -0
  93. package/ThemeDecorator/ThemeDecorator.d.ts +1 -1
  94. package/ThemeDecorator/ThemeDecorator.module.css +22 -1
  95. package/TooltipDecorator/Tooltip.js +68 -7
  96. package/TooltipDecorator/Tooltip.module.css +40 -23
  97. package/TooltipDecorator/TooltipDecorator.d.ts +52 -0
  98. package/TooltipDecorator/TooltipDecorator.js +42 -0
  99. package/TooltipDecorator/TooltipLabel.js +67 -14
  100. package/TooltipDecorator/tests/TooltipDecorator-specs.js +46 -0
  101. package/TooltipDecorator/useTooltip.js +14 -2
  102. package/VideoPlayer/MediaTitle.module.css +1 -1
  103. package/VirtualList/VirtualList.d.ts +24 -0
  104. package/VirtualList/VirtualList.js +30 -0
  105. package/VirtualList/tests/stickTo-specs.js +115 -0
  106. package/VirtualList/tests/useEvent-specs.js +39 -0
  107. package/VirtualList/useEvent.js +45 -10
  108. package/VirtualList/useThemeVirtualList.js +20 -2
  109. package/WizardPanels/WizardPanels.module.css +1 -1
  110. package/fonts/Limestone_Icons.ttf +0 -0
  111. package/internal/DateComponentPicker/DateComponentPicker.module.css +3 -3
  112. package/internal/Picker/Picker.js +8 -10
  113. package/internal/Picker/Picker.module.css +74 -141
  114. package/package.json +11 -14
  115. package/styles/color-mixins.less +4 -60
  116. package/styles/colors-game.less +5 -5
  117. package/styles/colors.less +9 -10
  118. package/styles/mixins.less +0 -46
  119. package/styles/motion-mixins.less +16 -7
  120. package/styles/motions.less +2 -2
  121. package/styles/variables.less +71 -46
  122. package/useScroll/useScroll.js +3 -1
@@ -3,7 +3,7 @@
3
3
  }
4
4
  .formCheckboxItem:global(.largeText) {
5
5
  font-size: var(--primitive-font-size-60);
6
- line-height: 1.4em;
6
+ line-height: 1.34em;
7
7
  }
8
8
  :global(.enact-locale-km) .formCheckboxItem:global(.largeText) {
9
9
  line-height: 1.5em;
@@ -1,7 +1,7 @@
1
1
  // Type definitions for limestone/Heading
2
2
 
3
- import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "limestone/Marquee";
4
- import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
3
+ import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "@enact/limestone/Marquee";
4
+ import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
5
5
  import * as React from "react";
6
6
 
7
7
  type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
package/Icon/Icon.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  // Type definitions for limestone/Icon
2
2
 
3
- import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
3
+ import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
4
4
  import { IconProps as ui_Icon_IconProps } from "@enact/ui/Icon";
5
5
  import * as React from "react";
6
6
 
@@ -366,6 +366,27 @@ filexls
366
366
  subtitleru
367
367
  f1
368
368
  mypageru
369
+ smartmode
370
+ databackup
371
+ deleteviewinginfo
372
+ lgmembers
373
+ manage
374
+ pay
375
+ paymentmethod
376
+ productregistration
377
+ purchased
378
+ rate
379
+ report
380
+ security
381
+ subscriptions
382
+ terminatemyaccount
383
+ update
384
+ usagecare
385
+ voucher
386
+ filter
387
+ ezsetting
388
+ fitness
389
+ auracast2
369
390
  };
370
391
  ```
371
392
  */
package/Icon/Icon.js CHANGED
@@ -513,6 +513,27 @@ var IconBase = exports.IconBase = (0, _kind["default"])({
513
513
  * subtitleru
514
514
  * f1
515
515
  * mypageru
516
+ * smartmode
517
+ * databackup
518
+ * deleteviewinginfo
519
+ * lgmembers
520
+ * manage
521
+ * pay
522
+ * paymentmethod
523
+ * productregistration
524
+ * purchased
525
+ * rate
526
+ * report
527
+ * security
528
+ * subscriptions
529
+ * terminatemyaccount
530
+ * update
531
+ * usagecare
532
+ * voucher
533
+ * filter
534
+ * ezsetting
535
+ * fitness
536
+ * auracast2
516
537
  };
517
538
  * ```
518
539
  *
package/Icon/IconList.js CHANGED
@@ -633,5 +633,47 @@ var _default = exports["default"] = {
633
633
  // subtitleru
634
634
  f1: 0x0F01F8,
635
635
  // f1
636
- mypageru: 0x0F01F7 // mypageru
636
+ mypageru: 0x0F01F7,
637
+ // mypageru
638
+ smartmode: 0x0F01FA,
639
+ // smartmode
640
+ databackup: 0x0F01FB,
641
+ // data_backup
642
+ deleteviewinginfo: 0x0F01FC,
643
+ // delete_viewing_info
644
+ lgmembers: 0x0F01FD,
645
+ // LG_Members
646
+ manage: 0x0F01FE,
647
+ // manage
648
+ pay: 0x0F01FF,
649
+ // pay
650
+ paymentmethod: 0x0F0200,
651
+ // payment_method
652
+ productregistration: 0x0F0201,
653
+ // product_registration
654
+ purchased: 0x0F0202,
655
+ // purchased
656
+ rate: 0x0F0203,
657
+ // rate
658
+ report: 0x0F0204,
659
+ // report
660
+ security: 0x0F0205,
661
+ // security
662
+ subscriptions: 0x0F0206,
663
+ // subscriptions
664
+ terminatemyaccount: 0x0F0207,
665
+ // terminate_my_account
666
+ update: 0x0F0208,
667
+ // update
668
+ usagecare: 0x0F0209,
669
+ // usage_care
670
+ voucher: 0x0F020A,
671
+ // voucher
672
+ filter: 0x0F020B,
673
+ // filter
674
+ ezsetting: 0x0F020C,
675
+ // ez_setting
676
+ fitness: 0x0F020D,
677
+ // Fitness
678
+ auracast2: 0x0F020E // Auracast
637
679
  };
@@ -1,8 +1,8 @@
1
1
  // Type definitions for limestone/IconItem
2
2
 
3
- import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
3
+ import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "@enact/limestone/Marquee";
4
4
  import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
5
- import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
5
+ import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
6
6
  import * as React from "react";
7
7
 
8
8
  type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
@@ -34,8 +34,8 @@ Animations properties
34
34
  --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
35
35
  --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
36
36
  --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
37
- --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
38
- --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
37
+ --lime-press-motion-easing-function: var(--lime-EO-motion-easing-function);
38
+ --lime-release-motion-easing-function: var(--lime-EIO-motion-easing-function);
39
39
  /* ---------------------------------------
40
40
  Keyframes names
41
41
  ------------------------------------------ */
@@ -76,9 +76,6 @@ Keyframes
76
76
  }
77
77
  }
78
78
  /* ---------------------------------------
79
- Motion Variables
80
- ------------------------------------------ */
81
- /* ---------------------------------------
82
79
  Motion Mixins
83
80
  ------------------------------------------ */
84
81
  .iconItem {
@@ -139,7 +136,7 @@ Motion Mixins
139
136
  }
140
137
  :global(.spotlight-input-key) .iconItem:global(.spottable):focus,
141
138
  :global(.spotlight-input-mouse) .iconItem:global(.spottable):focus {
142
- transform: scale(1.1);
139
+ transform: scale(1.2);
143
140
  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
144
141
  }
145
142
  :global(.spotlight-input-key) .iconItem:global(.spottable):focus.labelOnFocus .label,
@@ -153,7 +150,7 @@ Motion Mixins
153
150
  visibility: visible;
154
151
  }
155
152
  :global(.spotlight-input-touch) .iconItem:global(.spottable):active {
156
- transform: scale(1.1);
153
+ transform: scale(1.2);
157
154
  transition: transform var(--lime-focus-in-motion-duration) var(--lime-focus-in-motion-easing-function);
158
155
  }
159
156
  :global(.spotlight-input-touch) .iconItem:global(.spottable):active.labelOnFocus .label,
@@ -167,21 +164,21 @@ Motion Mixins
167
164
  :global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus.pressed,
168
165
  :global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:active,
169
166
  :global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:active {
170
- transform: scale(1.05);
167
+ transform: scale(1.1);
171
168
  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
172
169
  }
173
- :global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:not(:pressed),
174
- :global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:not(:pressed) {
175
- transform: scale(1.1);
170
+ :global(.spotlight-input-key) .iconItem:not([disabled]):global(.spottable):focus:not(.pressed),
171
+ :global(.spotlight-input-mouse) .iconItem:not([disabled]):global(.spottable):focus:not(.pressed) {
172
+ transform: scale(1.2);
176
173
  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
177
174
  }
178
175
  :global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active.pressed,
179
176
  :global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:active {
180
- transform: scale(1.05);
177
+ transform: scale(1.1);
181
178
  transition: transform var(--lime-press-motion-duration) var(--lime-press-motion-easing-function);
182
179
  }
183
- :global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:not(:pressed) {
184
- transform: scale(1.1);
180
+ :global(.spotlight-input-touch) .iconItem:not([disabled]):global(.spottable):active:not(.pressed) {
181
+ transform: scale(1.2);
185
182
  transition: transform var(--lime-release-motion-duration) var(--lime-release-motion-easing-function);
186
183
  }
187
184
  :global(.noAnimation) .iconItem {
package/Image/Image.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  // Type definitions for limestone/Image
2
2
 
3
- import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
3
+ import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
4
4
  import { ImageProps as ui_Image_ImageProps } from "@enact/ui/Image";
5
5
  import * as React from "react";
6
6
 
@@ -1,5 +1,5 @@
1
1
  .image {
2
- margin: 0 1rem;
3
2
  width: 15rem;
4
3
  height: 10rem;
4
+ margin: 0 1rem;
5
5
  }
@@ -1,8 +1,8 @@
1
1
  // Type definitions for limestone/ImageItem
2
2
 
3
- import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "limestone/Marquee";
3
+ import { MarqueeControllerProps as limestone_Marquee_MarqueeControllerProps } from "@enact/limestone/Marquee";
4
4
  import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
5
- import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
5
+ import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
6
6
  import { ImageItemProps as ui_ImageItem_ImageItemProps } from "@enact/ui/ImageItem";
7
7
  import * as React from "react";
8
8
 
@@ -12,7 +12,6 @@ var _Layout = require("@enact/ui/Layout");
12
12
  var _propTypes2 = _interopRequireDefault(require("prop-types"));
13
13
  var _compose = _interopRequireDefault(require("ramda/src/compose"));
14
14
  var _$L = _interopRequireDefault(require("../internal/$L"));
15
- var _Checkbox = require("../Checkbox");
16
15
  var _Icon = _interopRequireDefault(require("../Icon"));
17
16
  var _Image = _interopRequireDefault(require("../Image"));
18
17
  var _AsyncRenderChildren = _interopRequireDefault(require("../internal/AsyncRenderChildren"));
@@ -44,8 +43,6 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
44
43
  * @exports ImageItemBase
45
44
  * @exports ImageItemDecorator
46
45
  */
47
- var Checkbox = (0, _Skinnable["default"])(_Checkbox.CheckboxBase);
48
- Checkbox.displayName = 'Checkbox';
49
46
  var defaultPlaceholder = 'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC' + '9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHN0cm9rZT0iIzU1NSIgZmlsbD0iI2FhYSIg' + 'ZmlsbC1vcGFjaXR5PSIwLjIiIHN0cm9rZS1vcGFjaXR5PSIwLjgiIHN0cm9rZS13aWR0aD0iNiIgLz48L3N2Zz' + '4NCg==';
50
47
 
51
48
  /**
@@ -294,22 +291,14 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
294
291
  },
295
292
  selectionComponent: function selectionComponent(_ref4) {
296
293
  var css = _ref4.css,
297
- orientation = _ref4.orientation,
298
- selected = _ref4.selected,
299
294
  SelectionComponent = _ref4.selectionComponent;
300
295
  if (SelectionComponent) {
301
296
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SelectionComponent, {});
302
- } else if (orientation === 'vertical') {
297
+ } else {
303
298
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon["default"], {
304
299
  className: css.selectionIcon,
305
300
  children: "checkmark"
306
301
  });
307
- } else {
308
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(Checkbox, {
309
- className: css.selectionIcon,
310
- selected: selected,
311
- size: "tiny"
312
- });
313
302
  }
314
303
  }
315
304
  },
@@ -320,7 +309,6 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
320
309
  SelectionComponent = _ref5.selectionComponent,
321
310
  showSelection = _ref5.showSelection,
322
311
  rest = _objectWithoutProperties(_ref5, _excluded);
323
- var isSlotBefore = orientation === 'horizontal' && showSelection;
324
312
  delete rest.centered;
325
313
  delete rest.imageIconComponent;
326
314
  delete rest.imageIconSrc;
@@ -332,12 +320,11 @@ var ImageItemBase = exports.ImageItemBase = (0, _kind["default"])({
332
320
  disabled: disabled,
333
321
  orientation: orientation,
334
322
  imageComponent: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image["default"], {
335
- children: orientation === 'vertical' && showSelection ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
323
+ children: showSelection ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
336
324
  className: css.selectionContainer,
337
325
  children: SelectionComponent
338
326
  }) : null
339
- }),
340
- slotBefore: isSlotBefore && SelectionComponent
327
+ })
341
328
  }));
342
329
  }
343
330
  });