@enact/limestone 1.3.0 → 1.9.4

package/ImageItem/tests/ImageItem-specs.js

@@ -169,20 +169,13 @@ describe('ImageItem', function () {
     var actual = _react.screen.getAllByRole('img')[0].children.item(0);
     expect(actual).toHaveClass(expected);
   });
-  test('should have `checkbox` role when `showSelection` is true', function () {
-    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {
-      showSelection: true
-    }));
-    var actual = _react.screen.getByRole('checkbox');
-    expect(actual).toBeInTheDocument();
-  });
-  test('should be `checked` when `showSelection` and `selected` props are true', function () {
+  test('should have "Selected" in `aria-label` when `showSelection` and `selected` is true', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {
       selected: true,
       showSelection: true
     }));
-    var actual = _react.screen.getByRole('checkbox');
-    expect(actual).toBeChecked();
+    var actual = _react.screen.getByLabelText('Selected');
+    expect(actual).toBeInTheDocument();
   });
   test('should support `wideImage` prop', function () {
     (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageItem.ImageItemBase, {

package/Input/Input.js

@@ -337,7 +337,9 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
       return (0, _util.mapAndFilterChildren)(_buttons, function (button, index) {
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
           shrink: true,
-          children: button
+          children: /*#__PURE__*/(0, _react.cloneElement)(button, {
+            css: _InputModule["default"]
+          })
         }, "button".concat(index));
       }) || null;
     },
@@ -357,9 +359,14 @@ var InputPopupBase = exports.InputPopupBase = (0, _kind["default"])({
     },
     popupClassName: function popupClassName(_ref6) {
       var popupType = _ref6.popupType,
+        subtitle = _ref6.subtitle,
+        title = _ref6.title,
         type = _ref6.type,
         styler = _ref6.styler;
-      return styler.join('inputPopup', popupType, type);
+      return styler.join('inputPopup', popupType, type, {
+        noTitle: !title,
+        noSubtitle: !subtitle
+      });
     },
     inputAreaClassName: function inputAreaClassName(_ref7) {
       var buttons = _ref7.buttons,

package/Input/Input.module.css

@@ -93,23 +93,27 @@
   font-size: var(--primitive-font-size-90);
 }
 .inputPopup.fullscreen .back {
-  top: 2.25rem;
-  left: 2.75rem;
+  top: var(--primitive-spacing-108);
+  left: var(--primitive-spacing-132);
   right: initial;
 }
 :global(.enact-locale-right-to-left) .inputPopup.fullscreen .back {
   left: initial;
-  right: 2.75rem;
+  right: var(--primitive-spacing-132);
 }
 .inputPopup.fullscreen .inputBody {
-  padding: 2.25rem 5.25rem 0 5.25rem;
+  padding: calc(var(--primitive-spacing-156) - var(--primitive-spacing-48)) NaNrem - var(--primitive-spacing-72)) 0 NaNrem - var(--primitive-spacing-72));
 }
 :global(.enact-orientation-portrait) .inputPopup.fullscreen .inputBody {
-  padding: 1rem 1.25rem 0 1.25rem;
+  padding: calc(var(--primitive-spacing-96) - var(--primitive-spacing-48)) calc(var(--primitive-spacing-132) - var(--primitive-spacing-72)) 0 calc(var(--primitive-spacing-132) - var(--primitive-spacing-72));
 }
 .inputPopup.fullscreen .titles {
   height: 4.75rem;
 }
+:global(.enact-orientation-portrait) .inputPopup.fullscreen .titles {
+  margin-inline: var(--primitive-spacing-132);
+  width: initial;
+}
 .inputPopup.fullscreen .title {
   font-size: var(--primitive-font-size-108);
 }
@@ -117,7 +121,7 @@
   font-size: var(--primitive-font-size-108);
 }
 .inputPopup.fullscreen .separated {
-  gap: 1.25rem;
+  gap: var(--primitive-spacing-60);
 }
 .inputPopup.fullscreen .numberCell {
   width: 3.75rem;
@@ -188,6 +192,9 @@
 .inputPopup.overlay .body {
   padding: var(--primitive-spacing-84) var(--primitive-spacing-60);
 }
+.inputPopup.overlay:is(.noTitle, .noSubtitle) .titles {
+  height: 2.5rem;
+}
 .inputPopup.overlay .title {
   margin: 0 var(--primitive-spacing-144) 0 var(--primitive-spacing-144);
   font-size: var(--primitive-font-size-90);
@@ -196,11 +203,14 @@
   font-size: var(--primitive-font-size-90);
 }
 .inputPopup.overlay .inputArea {
-  margin: var(--primitive-spacing-60) 0 0 0;
+  margin: var(--primitive-spacing-60) 0 var(--primitive-spacing-24);
   display: flex;
   flex-direction: column;
   align-items: center;
 }
+:has(.number, .passwordnumber, .withButtons) .inputPopup.overlay .inputArea {
+  margin-bottom: 0;
+}
 .inputPopup.overlay .inputArea .textField {
   width: 21.5rem;
 }
@@ -226,7 +236,7 @@
   font-size: var(--primitive-font-size-40);
 }
 .inputPopup.overlay .keypad {
-  margin: var(--primitive-spacing-132) 4.125rem 1.25rem 4.125rem;
+  margin: var(--primitive-spacing-132) 4.125rem var(--primitive-spacing-60) 4.125rem;
   width: 13rem;
   justify-content: flex-end;
   column-gap: var(--primitive-spacing-60);
@@ -238,6 +248,7 @@
   height: 4rem;
 }
 .inputPopup.overlay .buttonArea {
+  align-items: center;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -320,6 +331,9 @@
 .inputPopup:global(.neutral).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+.inputPopup:global(.neutral).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.enact-a11y-high-contrast) .inputPopup:global(.neutral):global(.highContrast) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -394,6 +408,9 @@
 :global(.enact-a11y-high-contrast) .inputPopup:global(.neutral):global(.highContrast).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+:global(.enact-a11y-high-contrast) .inputPopup:global(.neutral):global(.highContrast).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .inputPopup:global(.light) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -468,6 +485,9 @@
 .inputPopup:global(.light).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+.inputPopup:global(.light).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .inputPopup:global(.game) {
   --semantic-color-surface-default: #2d224c;
   --semantic-color-surface-default-focused: #6d2fa1;
@@ -545,6 +565,9 @@
 .inputPopup:global(.game).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+.inputPopup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.green) .inputPopup:global(.game) {
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
@@ -621,6 +644,9 @@
 :global(.green) .inputPopup:global(.game).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+:global(.green) .inputPopup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.orange) .inputPopup:global(.game) {
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
@@ -697,3 +723,6 @@
 :global(.orange) .inputPopup:global(.game).overlay .back .icon {
   color: var(--semantic-color-on-background-popup-main);
 }
+:global(.orange) .inputPopup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}

package/Input/InputField.js

@@ -266,10 +266,14 @@ var InputFieldBase = exports.InputFieldBase = (0, _kind["default"])({
       return (0, _util3.calcAriaLabel)(title, type, value);
     },
     className: function className(_ref3) {
-      var invalid = _ref3.invalid,
+      var iconAfter = _ref3.iconAfter,
+        iconBefore = _ref3.iconBefore,
+        invalid = _ref3.invalid,
         size = _ref3.size,
         styler = _ref3.styler;
       return styler.append({
+        hasIconAfter: iconAfter,
+        hasIconBefore: iconBefore,
         invalid: invalid
       }, size);
     },

package/Input/InputField.module.css

@@ -12,6 +12,7 @@
   text-overflow: ellipsis;
   flex-grow: 1;
   text-indent: 0.2em;
+  max-width: 100%;
 }
 :global(.enact-locale-non-latin) .input {
   font-family: "Limestone";
@@ -19,7 +20,7 @@
 :global(.enact-locale-non-latin) .input {
   font-family: "Limestone";
   font-weight: var(--primitive-font-weight-light);
-  font-size: 1.125rem;
+  font-size: var(--primitive-font-size-54);
   font-style: normal;
 }
 :global(.enact-locale-km) .input {
@@ -85,7 +86,6 @@
   vertical-align: middle;
   align-items: center;
   height: 3.5rem;
-  width: 32.5rem;
 }
 .inputField .iconBefore {
   margin-left: 0;
@@ -143,6 +143,14 @@
 }
 .inputField.large {
   padding: 0 var(--primitive-spacing-30);
+  width: 32.5rem;
+}
+.inputField.large.hasIconBefore .input,
+.inputField.large.hasIconAfter .input {
+  max-width: 28.875rem;
+}
+.inputField.large.hasIconBefore.inputField.large.hasIconAfter .input {
+  max-width: 26.5rem;
 }
 .inputField.small {
   height: 2.75rem;
@@ -157,6 +165,13 @@
   line-height: 2.75rem;
   height: 2.75rem;
 }
+.inputField.small.hasIconBefore .input,
+.inputField.small.hasIconAfter .input {
+  max-width: 20.625rem;
+}
+.inputField.small.hasIconBefore.inputField.small.hasIconAfter .input {
+  max-width: 18.25rem;
+}
 .inputField.multiline {
   display: block;
   padding: 0.5rem 0.75rem;