@enact/limestone 1.3.0 → 1.9.3

package/.github/workflows/ci-branch.yml

@@ -0,0 +1,21 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - develop
+      - master
+  pull_request:
+    types: [opened, synchronize, reopened]
+  workflow_dispatch:
+
+concurrency:
+  group: ci-branch-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  branch:
+    uses: ./.github/workflows/ci-reusable.yml
+    with:
+      checkout-ref: ${{ github.event.pull_request.head.sha || github.sha }}
+    secrets: inherit

package/.github/workflows/ci-pull-request.yml

@@ -0,0 +1,16 @@
+name: CI
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+concurrency:
+  group: ci-pr-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
+
+jobs:
+  pull-request:
+    uses: ./.github/workflows/ci-reusable.yml
+    with:
+      checkout-ref: ''
+    secrets: inherit

package/.github/workflows/ci-reusable.yml

@@ -0,0 +1,73 @@
+name: CI Pipeline
+
+on:
+  workflow_call:
+    inputs:
+      checkout-ref:
+        description: 'Git ref to checkout (empty for default merge commit)'
+        type: string
+        required: false
+        default: ''
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: ['lts/*', 'node']
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ inputs.checkout-ref || github.ref }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y build-essential libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
+
+      - name: Clone and setup Enact CLI
+        run: |
+          git clone --branch=7.2.1 --depth 1 https://github.com/enactjs/cli ../cli
+          pushd ../cli
+          npm install
+          npm link
+          popd
+
+      - name: Clone and setup Enact framework
+        run: |
+          git clone --branch=release/5.4.x.develop --depth 1 https://github.com/enactjs/enact ../enact
+          pushd ../enact
+          npm install
+          npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock install
+          npm run lerna exec -- --ignore enact-sampler --concurrency 1 -- npm --no-package-lock link
+          npm run interlink
+          popd
+
+      - name: Install project dependencies
+        run: |
+          rm -fr node_modules/@enact
+          npm install
+          enact link
+
+      - name: Run tests with coverage
+        run: npm test -- --runInBand --coverage
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v5
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+          fail_ci_if_error: false
+
+      - name: Run ESLint
+        run: npm run lint -- -- --report-unused-disable-directives --max-warnings 0 .
+
+      - name: Validate documentation
+        run: npm run validate-docs

package/ActionGuide/ActionGuide.d.ts

@@ -47,14 +47,15 @@ export class ActionGuideBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ActionGuideBaseProps>
 > {}
 
-export interface ActionGuideDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface ActionGuideDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function ActionGuideDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ActionGuideDecoratorProps>;
 
-export interface ActionGuideProps
-  extends Merge<ActionGuideBaseProps, ActionGuideDecoratorProps> {}
+export interface ActionGuideProps extends Merge<
+  ActionGuideBaseProps,
+  ActionGuideDecoratorProps
+> {}
 /**
  * An Action Guide component, ready to use in Limestone applications.
  * 

package/ActionGuide/ActionGuide.module.css

@@ -6,7 +6,7 @@
   padding: var(--primitive-spacing-12) 0 var(--primitive-spacing-36) 0;
 }
 .actionGuide .button {
-  margin: 0 0 -0.25rem 0;
+  margin: 0 0 calc( var(--primitive-spacing-12) * -1) 0;
   height: 1.75rem;
   min-width: 1.75rem;
   width: 1.75rem;

package/Alert/Alert.d.ts

@@ -119,8 +119,10 @@ export class AlertBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, AlertBaseProps>
 > {}
 
-export interface AlertProps
-  extends Merge<AlertBaseProps, ui_Slottable_SlottableProps> {}
+export interface AlertProps extends Merge<
+  AlertBaseProps,
+  ui_Slottable_SlottableProps
+> {}
 /**
  * A modal Alert component, ready to use in Limestone applications.
  * 

package/Alert/Alert.js

@@ -17,6 +17,7 @@ var _IdProvider = _interopRequireDefault(require("@enact/ui/internal/IdProvider"
 var _Layout = _interopRequireWildcard(require("@enact/ui/Layout"));
 var _Slottable = _interopRequireDefault(require("@enact/ui/Slottable"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = require("react");
 var _BodyText = _interopRequireDefault(require("../BodyText"));
 var _Heading = _interopRequireDefault(require("../Heading"));
 var _Popup = _interopRequireDefault(require("../Popup"));
@@ -187,7 +188,9 @@ var AlertBase = exports.AlertBase = (0, _kind["default"])({
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Layout.Cell, {
           className: css.buttonCell,
           shrink: true,
-          children: button
+          children: /*#__PURE__*/(0, _react.cloneElement)(button, {
+            css: css
+          })
         }, "button".concat(index));
       }) || null;
     },

package/Alert/Alert.module.css

@@ -101,6 +101,12 @@
 :global(.noAnimation) .popup:global(.neutral).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) .popup:global(.neutral).overlay {
+  outline-style: solid;
+}
+.popup:global(.neutral).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -117,6 +123,12 @@
 :global(.noAnimation) :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) :global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).overlay {
+  outline-style: solid;
+}
+:global(.enact-a11y-high-contrast) .popup:global(.neutral):global(.highContrast).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .popup:global(.light) {
   background-color: var(--semantic-color-background-full-default);
 }
@@ -133,6 +145,12 @@
 :global(.noAnimation) .popup:global(.light).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) .popup:global(.light).overlay {
+  outline-style: solid;
+}
+.popup:global(.light).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 .popup:global(.game) {
   --semantic-color-surface-default: #2d224c;
   --semantic-color-surface-default-focused: #6d2fa1;
@@ -152,6 +170,12 @@
 :global(.noAnimation) .popup:global(.game).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) .popup:global(.game).overlay {
+  outline-style: solid;
+}
+.popup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.green) .popup:global(.game) {
   --semantic-color-surface-default: #1F2C24;
   --semantic-color-surface-default-focused: #3ea07d;
@@ -170,6 +194,12 @@
 :global(.noAnimation) :global(.green) .popup:global(.game).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) :global(.green) .popup:global(.game).overlay {
+  outline-style: solid;
+}
+:global(.green) .popup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}
 :global(.orange) .popup:global(.game) {
   --semantic-color-surface-default: #422923;
   --semantic-color-surface-default-focused: #b85f23;
@@ -188,3 +218,9 @@
 :global(.noAnimation) :global(.orange) .popup:global(.game).overlay {
   box-shadow: none;
 }
+:has(:global(.highContrast)) :global(.orange) .popup:global(.game).overlay {
+  outline-style: solid;
+}
+:global(.orange) .popup:global(.game).overlay .button .bg {
+  background-color: var(--semantic-color-surface-popup-default);
+}

package/BodyText/BodyText.d.ts

@@ -45,14 +45,15 @@ export class BodyTextBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, BodyTextBaseProps>
 > {}
 
-export interface BodyTextDecoratorProps
-  extends limestone_Skinnable_SkinnableProps {}
+export interface BodyTextDecoratorProps extends limestone_Skinnable_SkinnableProps {}
 export function BodyTextDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & BodyTextDecoratorProps>;
 
-export interface BodyTextProps
-  extends Merge<BodyTextBaseProps, BodyTextDecoratorProps> {}
+export interface BodyTextProps extends Merge<
+  BodyTextBaseProps,
+  BodyTextDecoratorProps
+> {}
 /**
  * A simple text block component, ready to use in Limestone applications.
  * 

package/BodyText/BodyText.module.css

@@ -4,7 +4,7 @@
   font-style: normal;
   font-family: "Limestone";
   line-height: 1.4em;
-  margin: 0 0.75rem var(--primitive-font-size-60) 0.75rem;
+  margin: 0 var(--primitive-spacing-36) var(--primitive-font-size-60) var(--primitive-spacing-36);
   padding: 0;
   white-space: normal;
 }
@@ -14,7 +14,7 @@
 :global(.enact-locale-non-latin) .bodyText {
   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) .bodyText {
@@ -65,19 +65,19 @@
   line-height: 1.7em;
 }
 :global(.enact-locale-km) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-si) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-th) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-vi) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
 }
 :global(.enact-locale-non-latin) .bodyText.small {
-  font-size: 1rem;
+  font-size: var(--primitive-font-size-48);
   line-height: 1.375rem;
 }
 :global(.enact-locale-right-to-left) .bodyText {

package/Button/Button.d.ts

@@ -53,6 +53,10 @@ corresponding internal elements and states of this component.
  * *  `small`  - Applied to a  `size='small'`  button
  */
   css?: object;
+  /**
+   * Set the visual effect applied to the button when focused.
+   */
+  focusEffect?: "expand" | "static";
   /**
    * Specifies on which side ( `'before'`  or  `'after'` ) of the text the icon appears.
    */
@@ -89,26 +93,27 @@ export class ButtonBase extends React.Component<
   Merge<React.HTMLProps<HTMLElement>, ButtonBaseProps>
 > {}
 
-export interface ButtonDecoratorProps
-  extends Merge<
+export interface ButtonDecoratorProps extends Merge<
+  Merge<
     Merge<
       Merge<
-        Merge<
-          limestone_TooltipDecorator_TooltipDecoratorProps,
-          limestone_Marquee_MarqueeDecoratorProps
-        >,
-        ui_Button_ButtonDecoratorProps
+        limestone_TooltipDecorator_TooltipDecoratorProps,
+        limestone_Marquee_MarqueeDecoratorProps
       >,
-      spotlight_Spottable_SpottableProps
+      ui_Button_ButtonDecoratorProps
     >,
-    limestone_Skinnable_SkinnableProps
-  > {}
+    spotlight_Spottable_SpottableProps
+  >,
+  limestone_Skinnable_SkinnableProps
+> {}
 export function ButtonDecorator<P>(
   Component: React.ComponentType<P> | string,
 ): React.ComponentType<P & ButtonDecoratorProps>;
 
-export interface ButtonProps
-  extends Merge<ButtonBaseProps, ButtonDecoratorProps> {}
+export interface ButtonProps extends Merge<
+  ButtonBaseProps,
+  ButtonDecoratorProps
+> {}
 /**
  * A button component, ready to use in Limestone applications.
  * 

package/Button/Button.js

@@ -148,7 +148,7 @@ var ButtonBase = exports.ButtonBase = (0, _kind["default"])({
      *
      * @type {('expand'|'static')}
      * @default 'expand'
-     * @private
+     * @public
      */
     focusEffect: _propTypes2["default"].oneOf(['expand', 'static']),
     /**