Merge branch 'main' into 8904-fileuploadadv-beforefileupload

app/views/components/datagrid/example-fixed-header.html

@@ -1,4 +1,32 @@
 <div class="full-height full-width">
+  <div class="toolbar" role="toolbar">
+    <div class="title">
+      Compressors
+      <span class="datagrid-result-count">(N Results)</span>
+    </div>
+    <div class="buttonset">
+      <button type="button" class="btn" id="scroll">
+        <span>Scroll Down</span>
+      </button>
+    </div>
+
+    <div class="more">
+      <button class="btn-actions" type="button">
+        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+          <use href="#icon-more"></use>
+        </svg>
+        <span class="audible">More Actions</span>
+      </button>
+      <ul class="popupmenu">
+        <li class="heading">Row Height</li>
+        <li class="is-selectable"><a data-option="row-extra-small" href="#" data-translate="text">ExtraSmall</a></li>
+        <li class="is-selectable"><a data-option="row-small" href="#" data-translate="text">Small</a></li>
+        <li class="is-selectable"><a data-option="row-medium" href="#" data-translate="text">Medium</a></li>
+        <li class="is-selectable is-checked"><a data-option="row-large" href="#" data-translate="text">Large</a></li>
+      </ul>
+
+    </div>
+  </div>
   <div id="datagrid" class="datagrid">
   </div>
 </div>
@@ -24,14 +52,22 @@
       columns.push({ id: 'action', name: 'Action Item', field: 'action'});
 
       //Init and get the api for the grid
-      $('#datagrid').datagrid({
+      grid = $('#datagrid').datagrid({
         columns: columns,
         columnReorder: true,
         dataset: data,
         paging: true,
         pagesize: 100,
         toolbar: {title: 'Compressors', actions: true, rowHeight: true, results: true }
-      });
+      }).data('datagrid');
+    });
+
+    $('#scroll').on('click', () => {
+      if (grid) {
+        const s = grid.settings;
+        const lastRow = s.pagesize > s.dataset.length ? s.dataset.length - 1 : s.pagesize - 1;
+        grid.scrollRowIntoView(lastRow);
+      }
     });
  });
 </script>

docs/CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## v4.99.0 Features
 
+- `[Datagrid]` Added `scrollRowIntoView`. ([NG#1761](https://github.com/infor-design/enterprise-ng/issues/1761))
 - `[FileuploadAdvanced]` Added beforefileupload event in handleFileUpload method. ([#8904](https://github.com/infor-design/enterprise/issues/8904))
 - `[Listview]` Added compact layout in listview. ([#8959](https://github.com/infor-design/enterprise/issues/8959))
 - `[Module Tabs]` Updated tab colors. ([#8831](https://github.com/infor-design/enterprise/issues/8831))
@@ -17,11 +18,13 @@
 - `[Datagrid]` Updated styles so pager works on cards. ([NG#1756](https://github.com/infor-design/enterprise-ng/issues/1756))
 - `[Datagrid]` Fixed a bug where text is misaligned in action dropdown . ([#8957](https://github.com/infor-design/enterprise-ng/issues/8957))
 - `[Datagrid]` Fixed auto sizing on columns in tree grid. ([#8646](https://github.com/infor-design/enterprise/issues/8646))
+- `[Datagrid]` Fixed special characters being encoded in editor. ([#8963](https://github.com/infor-design/enterprise/issues/8963))
 - `[General]` Upgrade dependencies, this involved updating sass and test dependencies with a few css deprecations that were fixed. ([#8947](https://github.com/infor-design/enterprise-ng/issues/8947))
 - `[Locale]` Fixed translation issue of `small` into Spanish. ([#8962](https://github.com/infor-design/enterprise-wc/issues/8962)
 - `[Locale]` Fixed translation issue of `Available` into Thai and Italian. ([#8786](https://github.com/infor-design/enterprise-wc/issues/8786)
 - `[Message]` Updated docs in settings. ([#8839](https://github.com/infor-design/enterprise/issues/8839))
 - `[ModuleNav]` Fixed a bug where the tooltip was not showing when collapsed by default. ([NG#1678](https://github.com/infor-design/enterprise-ng/issues/1678))
+- `[Swaplist]` Improved the size of the swaplist's drop area when there is no existing items. ([#8956](https://github.com/infor-design/enterprise/issues/8956))
 - `[Toolbar]` Fixed uncaught error when destroying the toolbar. ([#8946](https://github.com/infor-design/enterprise/issues/8946))
 - `[Tabs]` Fixed a bug where focus state is undefined when using breadcrumbs startup. ([#8910](https://github.com/infor-design/enterprise/issues/8910))
 - `[Validation]` Add guards for new setting in case it is undefined. ([#8981](https://github.com/infor-design/enterprise/issues/8981))

docs/TESTING.md

@@ -44,10 +44,79 @@ npm run test
 For development purposes you may just want to run one test your focusing on.
 
 ```sh
-npm run test
+npm run test -- component_name
+```
+
+## Visual Testing with Percy and Playwright
+
+This project demonstrates how to perform visual testing using Percy and Playwright. Visual testing helps ensure that UI changes do not introduce unexpected visual regressions. The provided example captures visual snapshots of different UI states to verify consistent rendering.
+
+### Table of Contents
+
+- [Introduction](#introduction)
+- [Example Test](#example-test)
+- [Usage](#usage)
+- [Best Practices](#best-practices-for-visual-testing)
+
+### Introduction
+
+Visual testing is a crucial part of maintaining a consistent user interface. By comparing the appearance of web pages or components against known good baselines, visual testing tools like Percy can automatically detect unintended visual changes.
+
+### Example Test
+
+```javascript
+test.describe('snapshot tests', () => {
+  test('should match the visual snapshot in percy', async ({ page, browserName }) => {
+    if (browserName !== 'chromium') return;
+
+    // Function to handle the actions and snapshot for specific row option
+    const captureSnapshot = async (option, snapshotName) => {
+      await page.locator('#custom-id-actions').click();
+      await page.locator(`a[data-option="row-${option}"]`).click();
+
+      // Capture a Percy snapshot with the specified name
+      await percySnapshot(page, snapshotName);
+    };
+
+    // Capture snapshot for "extra-small" row height
+    await captureSnapshot('extra-small', 'datagrid-expandable-row-extra-small-padding');
+
+    // Capture snapshot for "small" row height
+    await captureSnapshot('small', 'datagrid-expandable-row-small-padding');
+
+    // Capture snapshot for "medium" row height
+    await captureSnapshot('medium', 'datagrid-expandable-row-medium-padding');
+
+    // Capture snapshot for "large" / "Normal" row height
+    await captureSnapshot('large', 'datagrid-expandable-row-large-padding');
+  });
+});
+```
+
+### Usage
+
+To run the visual tests locally, you can use the following command:
+
+Run all visual tests:
+
+```sh
+PERCY_TOKEN=your-percy-token npm run test:visual
 ```
 
-## Visual Regression testing
+Run specific tests:
+
+```sh
+PERCY_TOKEN=your-percy-token npm run test:visual -- component_name
+```
+
+For the visual tests to work, you need to set the `PERCY_TOKEN` environment variable to your Percy token. You can find your Percy token in your Percy project settings.
+
+### Best Practices for Visual Testing
+
+- Run Visual Tests in a Stable Environment: Ensure that tests are run in a consistent and stable environment to avoid flaky results.
+- Test Across Browsers: Consider capturing snapshots in multiple browsers to catch cross-browser inconsistencies.
+- Review Snapshots Regularly: Regularly review and approve or reject snapshot changes to keep the baseline up-to-date.
+- Use Percy's Review Workflow: Use Percy's review workflow to collaborate with your team and ensure that visual changes are intentional.
 
 ## Debugging Functional Tests
 
@@ -74,6 +143,10 @@ Each component should have a passing test with Axe. This tool will verify a few
 
  If your having an issue with one of these tests you can either debug and follow the above steps for debugging a test or you can install the [Axe Chrome Dev Tools Plugin](https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US). This tool should give you the same output as the test when you run the page on port 4000 instead of 3000 as the tests do.
 
+## Contributing
+
+ Contributions are welcome! If you have suggestions or improvements, please submit a pull request.
+
 ## Reusing Tests Across Repos
 
 Listing some common differences in reusing the tests.

package.json

@@ -64,6 +64,7 @@
     "test:start-server": "node app/server.js --test-port",
     "test": "PERCY_LOGLEVEL=silent npx playwright test --reporter=list",
     "test:build": "npm run build:demoapp && npm run build",
+    "test:visual": "PERCY_LOGLEVEL=silent npx percy exec -- npx playwright test --reporter=list",
     "test:coverage": "npx rimraf .nyc_output && npm run build:coverage && npm run test && npx nyc report && open coverage/index.html",
     "test:coverage:no-build": "npx rimraf .nyc_output && npm run test && npx nyc report && open coverage/index.html",
     "test:ci": "PERCY_LOGLEVEL=silent npx rimraf .nyc_output && npm run build:coverage && npm run test && npx nyc report",

src/components/datagrid/datagrid.js

@@ -10903,7 +10903,7 @@ Datagrid.prototype = {
     }
 
     if (this.editor.useValue) {
-      cellValue = this.fieldValue(rowData, col.field);
+      cellValue = this.fieldValue(rowData, col.field, false);
     }
     this.editor.val(cellValue);
 
@@ -12486,6 +12486,16 @@ Datagrid.prototype = {
     self.element.trigger('activecellchange', { node: this.activeCell.node, row: this.activeCell.row, cell: this.activeCell.cell, api: self });
   },
 
+  /**
+   * Scroll to row.
+   * @param {number} row The row index
+   */
+  scrollRowIntoView(row) {
+    if (row) {
+      this.setActiveCell(row, 0, true);
+    }
+  },
+
   /**
    * Sets focus to the next active cell, depending on a key.
    * @private

src/components/swaplist/_swaplist-new.scss

@@ -25,7 +25,7 @@
 
     .card-content .listview,
     .widget-content .listview {
-      li:first-child {
+      li:first-child:not(.over) {
         border-top-color: transparent;
       }
     }
@@ -58,3 +58,23 @@
     }
   }
 }
+
+html[dir='rtl'] {
+  .swaplist {
+    .card,
+    .widget {
+      &:nth-child(1) {
+        border-radius: 0 6px 0 0;
+      }
+    }
+
+    &.one-third {
+      .card,
+      .widget {
+        &:nth-child(3) {
+          border-radius: 6px 0 0;
+        }
+      }
+    }
+  }
+}

src/components/swaplist/_swaplist.scss

@@ -37,6 +37,21 @@
 
     .card-content {
       width: 100%;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+
+      .listview {
+        li {
+          border-radius: 0;
+
+          &:last-child {
+            &.over {
+              border: 1px dashed $swaplist-border-color !important;
+              border-bottom-color: inherit;
+            }
+          }
+        }
+      }
     }
 
     .card-header {
@@ -244,9 +259,10 @@
   .is-multiselect {
     background-color: $listview-bg-color;
     border-top: thin solid $swaplist-border-color-card;
+    height: 100%;
 
     ul {
-      min-height: 100%;
+      min-height: 40px;
       padding: 0 0 5px;
 
       &.is-not-droppable {
@@ -326,7 +342,8 @@
     }
 
     .over {
-      border: 1px dashed $swaplist-border-color;
+      border: 1px dashed $swaplist-border-color !important;
+      min-height: 40px;
     }
   }