@enact/limestone 1.10.0 → 1.10.2

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -3,6 +3,7 @@
 * [ ] I have read and understand the [contribution guide](https://enactjs.com/docs/developer-guide/contributing/)
 * [ ] A [CHANGELOG entry](https://enactjs.com/docs/developer-guide/contributing/changelogs/) is included
 * [ ] At least one test case is included for this feature or bug fix
+* [ ] I have run automated testing and it is passed
 * [ ] Documentation was added or is not needed
 * [ ] This is an API breaking change
 

package/ActionGuide/ActionGuide.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for limestone/ActionGuide
 
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/ActionGuide/ActionGuide.module.css

@@ -11,6 +11,9 @@
   min-width: 1.75rem;
   width: 1.75rem;
 }
+.actionGuide .button.hasIcon.large {
+  padding: 0;
+}
 .actionGuide .label {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
@@ -22,6 +25,10 @@
   font-family: "Limestone";
   font-size: var(--primitive-font-size-48);
 }
+.actionGuide:global(.largeText) .label {
+  font-size: var(--primitive-font-size-60);
+  line-height: 1.45833rem;
+}
 .actionGuide:global(.neutral) .icon .icon {
   color: var(--semantic-color-on-background-actionguide);
 }

package/Alert/Alert.d.ts

@@ -102,6 +102,15 @@ corresponding internal elements and states of this component.
     | "center"
     | "top left"
     | "top right";
+  /**
+   * Size of the Alert when  `type="overlay"` .
+   * *  `small`  - narrow width
+   * *  `medium`  - medium width
+   * *  `large`  - wide width, supports title
+   *
+   * When omitted, defaults to  `medium`  when there are exactly 2 buttons, otherwise  `small` .
+   */
+  size?: "small" | "medium" | "large";
   /**
    * The primary text displayed.
    *

package/Alert/Alert.js

@@ -24,7 +24,7 @@ var _Popup = _interopRequireDefault(require("../Popup"));
 var _AlertImage = _interopRequireDefault(require("./AlertImage"));
 var _AlertModule = _interopRequireDefault(require("./Alert.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["buttonDirection", "buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "title", "type", "style"];
+var _excluded = ["buttonDirection", "buttons", "contentComponent", "children", "css", "id", "image", "overlayPosition", "size", "title", "type", "style"];
 /**
  * Limestone styled modal Alert components.
  *
@@ -160,6 +160,19 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
      * @public
      */
     overlayPosition: _propTypes["default"].oneOf(['bottom left', 'bottom right', 'center', 'top left', 'top right']),
+    /**
+     * Size of the Alert when `type="overlay"`.
+     *
+     * * `small` - narrow width
+     * * `medium` - medium width
+     * * `large` - wide width, supports title
+     *
+     * When omitted, defaults to `medium` when there are exactly 2 buttons, otherwise `small`.
+     *
+     * @type {('small'|'medium'|'large')}
+     * @public
+     */
+    size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
     /**
      * The primary text displayed.
      *
@@ -217,34 +230,51 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
       }
     },
     className: function className(_ref3) {
-      var image = _ref3.image,
+      var buttons = _ref3.buttons,
+        buttonDirection = _ref3.buttonDirection,
+        image = _ref3.image,
+        size = _ref3.size,
         type = _ref3.type,
         styler = _ref3.styler;
+      var buttonCount = _react.Children.toArray(buttons).filter(Boolean).length;
+      var resolvedSize = size || (buttonDirection !== 'vertical' && buttonCount === 2 ? 'medium' : 'small');
+      var resolvedButtonDirection = buttonDirection;
+      if (buttonDirection === 'auto') {
+        var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 4;
+        resolvedButtonDirection = useHorizontal ? 'horizontal' : 'vertical';
+      }
       return styler.append({
         noImage: !image
-      }, type);
+      }, resolvedSize, type, resolvedButtonDirection);
+    },
+    size: function size(_ref4) {
+      var buttons = _ref4.buttons,
+        buttonDirection = _ref4.buttonDirection,
+        _size = _ref4.size;
+      return _size || (buttonDirection !== 'vertical' && _react.Children.toArray(buttons).filter(Boolean).length === 2 ? 'medium' : 'small');
     }
   },
-  render: function render(_ref4) {
-    var buttonDirection = _ref4.buttonDirection,
-      buttons = _ref4.buttons,
-      contentComponent = _ref4.contentComponent,
-      children = _ref4.children,
-      css = _ref4.css,
-      id = _ref4.id,
-      image = _ref4.image,
-      overlayPosition = _ref4.overlayPosition,
-      title = _ref4.title,
-      type = _ref4.type,
-      style = _ref4.style,
-      rest = _objectWithoutProperties(_ref4, _excluded);
+  render: function render(_ref5) {
+    var buttonDirection = _ref5.buttonDirection,
+      buttons = _ref5.buttons,
+      contentComponent = _ref5.contentComponent,
+      children = _ref5.children,
+      css = _ref5.css,
+      id = _ref5.id,
+      image = _ref5.image,
+      overlayPosition = _ref5.overlayPosition,
+      size = _ref5.size,
+      title = _ref5.title,
+      type = _ref5.type,
+      style = _ref5.style,
+      rest = _objectWithoutProperties(_ref5, _excluded);
     var fullscreen = type === 'fullscreen';
     var position = type === 'overlay' ? overlayPosition : type;
-    var showTitle = fullscreen && title;
     var buttonCount = _react.Children.toArray(buttons).filter(Boolean).length;
+    var showTitle = (fullscreen || size === 'large') && title;
     var resolvedButtonDirection = buttonDirection;
     if (buttonDirection === 'auto') {
-      var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 3;
+      var useHorizontal = type === 'overlay' && buttonCount === 2 || type === 'fullscreen' && buttonCount < 4;
       resolvedButtonDirection = useHorizontal ? 'horizontal' : 'vertical';
     }
     var overlayHorizontalButtons = type === 'overlay' && resolvedButtonDirection === 'horizontal';
@@ -256,6 +286,9 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
       });
     }
     var ariaLabelledBy = (showTitle ? "".concat(id, "_title ") : '') + "".concat(id, "_content ").concat(id, "_buttons");
+    var resolvedImage = (image === null || image === void 0 ? void 0 : image.props.type) === "thumbnail" ? /*#__PURE__*/(0, _react.cloneElement)(image, {
+      iconSize: !fullscreen && size === 'large' ? 'large' : 'small'
+    }) : null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       "aria-owns": id,
       className: css.alertWrapper,
@@ -269,11 +302,20 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Layout["default"], {
           align: "center center",
           orientation: "vertical",
-          children: [image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+          children: [showTitle && !fullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            shrink: true,
+            align: "stretch",
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], {
+              size: "title",
+              className: css.title,
+              id: "".concat(id, "_title"),
+              children: title
+            })
+          }) : null, resolvedImage || image ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
             shrink: true,
             className: css.alertImage,
-            children: image
-          }) : null, showTitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
+            children: resolvedImage || image
+          }) : null, showTitle && fullscreen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
             shrink: true,
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Heading["default"], {
               size: "title",

package/Alert/Alert.module.css

@@ -1,9 +1,22 @@
 .alertWrapper {
   display: inline;
 }
+.alert .title {
+  font-family: "Limestone Title", "Limestone";
+}
 .alert.noImage {
   /* Needed to prevent global class being added in the DOM */
 }
+.alert.horizontal .button {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.alert.vertical .buttonCell:first-child .button {
+  margin-top: 0;
+}
+.alert.vertical .buttonCell:last-child .button {
+  margin-bottom: 0;
+}
 .alert.fullscreen .alertImage {
   margin-bottom: var(--primitive-spacing-60);
 }
@@ -28,30 +41,30 @@
   font-size: var(--primitive-font-size-108);
 }
 .alert.fullscreen .buttonContainer {
-  margin-top: var(--primitive-spacing-96);
+  margin-top: var(--primitive-spacing-120);
 }
 .alert.overlay {
   overflow: hidden;
 }
 .alert.overlay .alertImage {
   margin-bottom: var(--primitive-spacing-36);
-  padding: 0 var(--primitive-spacing-84);
+  padding: 0 var(--primitive-spacing-90);
 }
 .alert.overlay .buttonContainer {
   box-sizing: border-box;
-  margin-top: var(--primitive-spacing-36);
-  padding: 0 var(--primitive-spacing-84);
+  margin-top: var(--primitive-spacing-72);
+  padding: 0 var(--primitive-spacing-90);
 }
 .alert.overlay .content {
   align-self: stretch;
   font-family: "Limestone";
-  line-height: 1.75rem;
+  line-height: 1.34em;
   font-weight: var(--primitive-font-weight-semibold);
   font-size: var(--primitive-font-size-60);
   text-align: initial;
   overflow-wrap: break-word;
   word-break: keep-all;
-  padding: 0 var(--primitive-spacing-84);
+  padding: 0 var(--primitive-spacing-90);
   margin: 0;
   max-width: var(--alert-overlay-content-max-width, 23.5rem);
 }
@@ -78,13 +91,24 @@
   overflow-wrap: normal;
   word-break: normal;
 }
+.alert.overlay:global(.largeText) .content {
+  font-size: var(--primitive-font-size-72);
+}
+.alert.overlay.large .title {
+  margin: 0 0 var(--primitive-spacing-36) 0;
+  padding: 0 var(--primitive-spacing-90);
+  font-size: var(--primitive-font-size-90);
+}
+:global(.enact-locale-non-latin) .alert.overlay.large .title {
+  font-size: var(--primitive-font-size-108);
+}
 .popup.overlay {
   box-sizing: border-box;
   --alert-overlay-horizontal-button-count: 1;
-  --alert-overlay-horizontal-button-width: NaNrem + (2 * var(--primitive-spacing-36)));
+  --alert-overlay-horizontal-button-width: calc(840px + (2 * var(--primitive-spacing-36)));
   --alert-overlay-horizontal-buttons-total-width: calc(var(--alert-overlay-horizontal-button-width) * var(--alert-overlay-horizontal-button-count));
   --alert-overlay-width: max(1128px, var(--alert-overlay-horizontal-buttons-total-width));
-  --alert-overlay-content-horizontal-padding: var(--primitive-spacing-84);
+  --alert-overlay-content-horizontal-padding: var(--primitive-spacing-90);
   --alert-overlay-content-max-width: calc(var(--alert-overlay-width) - (2 * var(--alert-overlay-content-horizontal-padding)));
   width: var(--alert-overlay-width);
   min-width: 23.5rem;
@@ -93,9 +117,17 @@
   margin-right: auto;
 }
 .popup.overlay .body {
-  padding: var(--primitive-spacing-84) 0;
+  padding: var(--primitive-spacing-90) 0;
   max-height: 42.25rem;
 }
+.popup.overlay.medium {
+  --alert-overlay-width: max(1656px, var(--alert-overlay-horizontal-buttons-total-width));
+  min-width: 34.5rem;
+}
+.popup.overlay.large {
+  --alert-overlay-width: max(2184px, var(--alert-overlay-horizontal-buttons-total-width));
+  min-width: 45.5rem;
+}
 .popup:global(.neutral) {
   background-color: var(--semantic-color-background-full-default);
 }

package/Alert/AlertImage.module.css

@@ -1,7 +1,11 @@
 .alertImage {
   margin: 0;
 }
-.alertImage.thumbnail {
+.alertImage.thumbnail.large {
+  width: 41.75rem;
+  height: 17.8125rem;
+}
+.alertImage.thumbnail.small {
   width: 20rem;
   height: 11.25rem;
 }

package/Alert/tests/Alert-specs.js

@@ -102,7 +102,7 @@ describe('Alert', function () {
     var expectedClass = 'thumbnail';
     expect(image).toHaveClass(expectedClass);
   });
-  test('should align buttons horizontally by default in fullscreen when button count is less than 3', function () {
+  test('should align buttons horizontally by default in fullscreen when button count is less than 4', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
         open: true,
@@ -111,6 +111,8 @@ describe('Alert', function () {
             children: "yes"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
             children: "no"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "maybe"
           })]
         })
       })
@@ -119,7 +121,7 @@ describe('Alert', function () {
     var buttonsLayout = alert.querySelector('[id$="_buttons"]');
     expect(buttonsLayout).toHaveClass('horizontal');
   });
-  test('should align buttons vertically by default in fullscreen when button count is 3', function () {
+  test('should align buttons vertically by default in fullscreen when button count is 4', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(FloatingLayerController, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Alert.Alert, {
         open: true,
@@ -128,6 +130,8 @@ describe('Alert', function () {
             children: "yes"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
             children: "no"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
+            children: "maybe"
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button["default"], {
             children: "later"
           })]

package/BodyText/BodyText.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for limestone/BodyText
 
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { BodyTextProps as ui_BodyText_BodyTextProps } from "@enact/ui/BodyText";
 import * as React from "react";
 

package/BodyText/BodyText.js

@@ -101,20 +101,25 @@ var BodyTextBase = exports.BodyTextBase = (0, _kind["default"])({
     publicClassNames: 'bodyText'
   },
   computed: {
-    className: function className(_ref) {
-      var noWrap = _ref.noWrap,
-        size = _ref.size,
-        styler = _ref.styler;
+    children: function children(_ref) {
+      var _children = _ref.children,
+        noWrap = _ref.noWrap;
+      return noWrap ? _children === null || _children === void 0 ? void 0 : _children.replaceAll('\n', ' ') : _children;
+    },
+    className: function className(_ref2) {
+      var noWrap = _ref2.noWrap,
+        size = _ref2.size,
+        styler = _ref2.styler;
       return styler.append(size, {
         noWrap: noWrap
       });
     }
   },
-  render: function render(_ref2) {
-    var centered = _ref2.centered,
-      css = _ref2.css,
-      noWrap = _ref2.noWrap,
-      rest = _objectWithoutProperties(_ref2, _excluded);
+  render: function render(_ref3) {
+    var centered = _ref3.centered,
+      css = _ref3.css,
+      noWrap = _ref3.noWrap,
+      rest = _objectWithoutProperties(_ref3, _excluded);
     delete rest.size;
     if (noWrap) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(MarqueeBodyText, _objectSpread(_objectSpread({

package/BodyText/BodyText.module.css

@@ -3,7 +3,7 @@
   font-size: var(--primitive-font-size-60);
   font-style: normal;
   font-family: "Limestone";
-  line-height: 1.4em;
+  line-height: 1.34em;
   margin: 0 var(--primitive-spacing-36) var(--primitive-font-size-60) var(--primitive-spacing-36);
   padding: 0;
   white-space: normal;
@@ -93,3 +93,24 @@
 :global(.enact-locale-ja) .bodyText {
   line-break: strict;
 }
+.bodyText:global(.largeText) {
+  font-size: var(--primitive-font-size-72);
+}
+.bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-66);
+}
+:global(.enact-locale-km) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-si) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-th) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-vi) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}
+:global(.enact-locale-non-latin) .bodyText:global(.largeText).small {
+  font-size: var(--primitive-font-size-60);
+}

package/Button/Button.d.ts

@@ -1,10 +1,10 @@
 // Type definitions for limestone/Button
 
-import { TooltipDecoratorProps as limestone_TooltipDecorator_TooltipDecoratorProps } from "limestone/TooltipDecorator";
-import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "limestone/Marquee";
+import { TooltipDecoratorProps as limestone_TooltipDecorator_TooltipDecoratorProps } from "@enact/limestone/TooltipDecorator";
+import { MarqueeDecoratorProps as limestone_Marquee_MarqueeDecoratorProps } from "@enact/limestone/Marquee";
 import { ButtonDecoratorProps as ui_Button_ButtonDecoratorProps } from "@enact/ui/Button";
 import { SpottableProps as spotlight_Spottable_SpottableProps } from "@enact/spotlight/Spottable";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { ButtonBaseProps as ui_Button_ButtonBaseProps } from "@enact/ui/Button";
 import * as React from "react";