Merge branch 'main' into 8269-tabs-vertical-focus

infor-design · Jan 22, 2024 · c6968ea · c6968ea
2 parents 056e012 + 73b7601
commit c6968ea
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 21 deletions.
diff --git a/app/views/components/datagrid/test-contextual-toolbar-hide.html b/app/views/components/datagrid/test-contextual-toolbar-hide.html
@@ -4,7 +4,8 @@
     <div class="contextual-toolbar toolbar is-hidden">
       <div class="title">Contextual Toolbar</div>
       <div class="buttonset">
-        <button class="btn-primary" id="actionButton">Perform Action</button>
+        <button class="btn-primary" id="performAction">Perform Action</button>
+        <button class="btn-primary" id="hideAction">Hide Action</button>
       </div>
     </div>
     <div id="datagrid">
@@ -41,8 +42,17 @@
 
     });
 
-    $('#actionButton').on('click', () => {
-      console.log('test action button');
+    $('#performAction').on('click', () => {
+      var datagridAPI = $('#datagrid').data('datagrid');
+      console.log('test perform action button');
+    });
+
+    $('#hideAction').on('click', () => {
+      var datagridAPI = $('#datagrid').data('datagrid');
+
+      // Hides the Contextual Toolbar
+      datagridAPI.hideContextualToolbar();
+      console.log('test hide action button');
     });
   });
 </script>
diff --git a/app/views/components/datagrid/test-disable-tooltip-column.html b/app/views/components/datagrid/test-disable-tooltip-column.html
@@ -0,0 +1,128 @@
+<div class="row">
+  <div class="twelve columns">
+    <button class="btn-secondary" type="button" id="open-modal">Open Modal</button><br><br>
+
+    <div id="modal-content" style="display: none;">
+      <div id="datagrid">
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  $('body').one('initialized', function () {
+    let grid;
+    const modals = {
+      'open-modal': {
+        'title': 'Open Modal',
+        'content': $('#modal-content')
+      }
+    },
+    columns = [
+      {
+        id: 'Order',
+        name: 'P.O',
+        field: 'productionOrder',
+        formatter: Soho.Formatters.Readonly,
+        align: 'left',
+      },
+      {
+        id: 'order',
+        name: 'Order',
+        field: 'orderStatus',
+        formatter: Soho.Formatters.Readonly,
+        align: 'left',
+      },
+      {
+        id: 'ItemCode',
+        name: 'Code',
+        field: 'itemCode',
+        formatter: Soho.Formatters.Readonly,
+        sortable: false,
+        align: 'left',
+      },
+      {
+        id: 'plannedDeliveryDate',
+        name: 'Del Date',
+        field: 'plannedDeliveryDate',
+        formatter: Soho.Formatters.Date,
+        dateFormat: 'MM/dd/yyyy',
+        sortable: false,
+        align: 'left',
+        disableTooltip: true,
+      }
+    ],
+    data = [
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+        {
+          productionOrder: 'PO12345',
+          orderStatus: 'Active',
+          itemCode: 'BQR12345',
+          plannedDeliveryDate: new Date(),
+        },
+      ];
+
+    grid = $('#datagrid').datagrid({
+      columns: columns,
+      dataset: data,
+      editable: true,
+      filterable: false,
+      redrawOnResize: false,
+      rowHeight: 'small',
+      selectable: 'mixed',
+      showDirty: true,
+      cellNavigation: true,
+      actionableMode: true,
+      enableTooltips: true,
+      toolbar: {
+        title: data.length + ' ' + 'Machine Issues'
+      },
+    }).data('datagrid');
+
+    setModal = function (opt) {
+      opt = $.extend({
+        autoFocus: true,
+        showCloseBtn: true,
+        buttons: [{
+          text: 'Cancel',
+          id: 'modal-button-1',
+          click: function(e, modal) {
+            modal.close();
+          }
+        }, {
+          text: 'Save',
+          id: 'modal-button-2',
+          click: function(e, modal) {
+            modal.close();
+          },
+          validate: false,
+          isDefault: true
+        }],
+        maxWidth: 1000
+      }, opt);
+
+      $('body').modal(opt);
+    };
+
+    $('#open-modal').on('click', function () {
+      setModal(modals[this.id]);
+    });
+  });
+</script>
diff --git a/app/views/components/lookup/test-paging-server-side-keyword-search.html b/app/views/components/lookup/test-paging-server-side-keyword-search.html
@@ -33,7 +33,7 @@
       paging: true,
       pagesize: 10,
       pagesizes: [5, 10, 25, 50],
-      selectable: 'single',
+      selectable: 'multiple',
       toolbar: {
         results: true,
         keywordFilter: true,

diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -4,20 +4,24 @@
 
 ## v4.92.0 Features
 
+- `[Datagrid]` Added option to disable tooltip in columns. ([#8252](https://github.com/infor-design/enterprise/issues/8252))
 - `[Header]` Added an example configuration with both a hamburger and a back button. ([#8327](https://github.com/infor-design/enterprise/issues/8327))
 - `[Icons]` Added new icons which are more substantial in look. ([#8129](https://github.com/infor-design/enterprise/issues/8129))
 
 ## v4.92.0 Fixes
 
+- `[Cards]` Fixed widget header alignment with the parent. ([#8351](https://github.com/infor-design/enterprise/issues/8351))
 - `[Cards]` Fixed title alignment for bordered and borderless. ([#8212](https://github.com/infor-design/enterprise/issues/8212))
 - `[Contextual Action Panel]` Fixed alignments of searchfield icons in RTL. ([#8208](https://github.com/infor-design/enterprise/issues/8208))
 - `[Datagrid]` Replaced the toolbar with a flex toolbar for the editable example. ([#8093](https://github.com/infor-design/enterprise/issues/8093))
 - `[Datagrid]` Fixed Hyperlink Formatter cssClass string resolution. ([#8340](https://github.com/infor-design/enterprise/issues/8340))
+- `[Datagrid]` Fixed contextual toolbar auto hide when performing action. ([#8352](https://github.com/infor-design/enterprise/issues/8352))
 - `[Header]` Fixed bottom border styles in dark mode. ([#8152](https://github.com/infor-design/enterprise/issues/8152))
 - `[Header/Personalization]` The default color is now alabaster (white) instead of azure. ([#7861](https://github.com/infor-design/enterprise/issues/7861))
 - `[Link]` Changed selected border color for link card. ([#8225](https://github.com/infor-design/enterprise/issues/8225))
 - `[Fieldset]` Changed padding in reset for better compatibility. ([#1756](https://github.com/infor-design/enterprise-wc/issues/1756))
 - `[Locale]` Changed all `zh` locales time format as suggested by native speakers. ([#8313](https://github.com/infor-design/enterprise/issues/8313))
+- `[Lookup]` Fixed clear button in keyword search not updating search results on click. ([#8258](https://github.com/infor-design/enterprise/issues/8258))
 - `[Modal]` Fixed a bug where the modal would shift up when toggling a switch inside of it. ([#8018](https://github.com/infor-design/enterprise/issues/8018))
 - `[Modal]` Fixed a bug where textarea field is bigger than other fields on screen widths less that 400px. ([#8125](https://github.com/infor-design/enterprise/issues/8125))
 - `[Process Indicator]` Adjusted alignment of icon in compact process indicator. ([#8241](https://github.com/infor-design/enterprise/issues/8241))

diff --git a/src/components/cards/_cards-new.scss b/src/components/cards/_cards-new.scss
@@ -293,7 +293,7 @@
     padding-left: 16px;
     padding-right: 8px;
     padding-top: 0;
-    width: 360px;
+    width: inherit;
   }
 
   > button.btn-actions:not(.has-toolbar) {

diff --git a/src/components/datagrid/_datagrid.scss b/src/components/datagrid/_datagrid.scss
@@ -5825,10 +5825,6 @@ html[dir='rtl'] {
           top: 7px;
           width: 21px;
         }
-
-        &:hover .icon {
-          color: $datagrid-header-color;
-        }
       }
     }
 

diff --git a/src/components/datagrid/datagrid.js b/src/components/datagrid/datagrid.js
@@ -5062,7 +5062,8 @@ Datagrid.prototype = {
       }
 
       containerHtml[container] += `<td role="gridcell" ${ariaReadonly} aria-colindex="${j + 1}"` +
-        ` ${ariaDescribedby
+        ` ${col.disableTooltip ? 'disabletooltip ' : ''}` +
+        `${ariaDescribedby
         }${ariaChecked
         }${isSelected ? ' aria-selected="true"' : ''
         }${cssClass ? ` class="${cssClass}"` : ''
@@ -5765,9 +5766,10 @@ Datagrid.prototype = {
         const isHeaderIcon = DOM.hasClass(elem, 'datagrid-header-icon');
         const isPopup = isHeaderFilter ?
           elem.parentNode.querySelectorAll('.popupmenu.is-open').length > 0 : false;
-        const tooltip = $(elem).data('gridtooltip') || self.cacheTooltip(elem);
         const containerEl = isHeaderColumn ? elem.parentNode : isHeaderIcon ? elem.parentNode : elem;
         const width = self.getOuterWidth(containerEl);
+
+        const tooltip = $(elem).data('gridtooltip') || self.cacheTooltip(elem);
         if (tooltip && (tooltip.forced || (tooltip.textwidth > (width - 35))) && !isPopup) {
           self.showTooltip(tooltip);
         }
@@ -7447,14 +7449,6 @@ Datagrid.prototype = {
       }
     });
 
-    if (this.contextualToolbar.length > 0) {
-      this.contextualToolbar.find('.buttonset').children().on('click', () => {
-        this.contextualToolbar.one('animateclosedcomplete.datagrid', () => {
-          this.contextualToolbar.css('display', 'none');
-        }).animateClosed();
-      });
-    }
-
     if (this.stretchColumn !== 'last') {
       $(window).on('orientationchange.datagrid', () => {
         this.rerender();
@@ -8028,16 +8022,25 @@ Datagrid.prototype = {
 
     if (this.settings.toolbar && this.settings.toolbar.keywordFilter) {
       const thisSearch = toolbar.find('.searchfield');
-      const xIcon = thisSearch.parent().find('.close.icon');
+      const clearButton = thisSearch.next();
 
+      let typingTimer;
       thisSearch.off('keypress.datagrid').on('keypress.datagrid', (e) => {
         if (e.keyCode === 13 || e.type === 'change') {
+          clearTimeout(typingTimer);
           e.preventDefault();
           self.keywordSearch(thisSearch.val());
         }
+
+        if (self.settings.filterWhenTyping) {
+          clearTimeout(typingTimer);
+          typingTimer = setTimeout(() => {
+            self.keywordSearch(thisSearch.val());
+          }, 400);
+        }
       });
 
-      xIcon.off('click.datagrid').on('click.datagrid', () => {
+      clearButton.off('click.datagrid').on('click.datagrid', () => {
         self.keywordSearch(thisSearch.val());
       });
     }
@@ -8056,6 +8059,18 @@ Datagrid.prototype = {
     this.element.addClass('has-toolbar');
   },
 
+  /**
+   * Hides the contextual toolbar.
+   * @returns {void}
+   */
+  hideContextualToolbar() {
+    if (this.contextualToolbar?.length > 0) {
+      this.contextualToolbar.one('animateclosedcomplete.datagrid', () => {
+        this.contextualToolbar.css('display', 'none');
+      }).animateClosed();
+    }
+  },
+
   /**
    * Get or Set the Row Height.
    * @param {string} height The row height to use, can be 'extra small', 'small, 'normal' or 'large'
@@ -13005,6 +13020,10 @@ Datagrid.prototype = {
    * @returns {object} tooltip object.
    */
   cacheTooltip(elem, tooltip) {
+    if ($(elem).attr('disabletooltip') !== undefined) {
+      return tooltip;
+    }
+
     if (typeof tooltip === 'undefined') {
       const contentTooltip = elem.querySelector('.is-editor.content-tooltip');
       const aTitle = elem.querySelector('a[title]');

diff --git a/src/themes/theme-classic-light.scss b/src/themes/theme-classic-light.scss
@@ -28,6 +28,9 @@ $button-disabled-background-color: transparent;
 $button-icon-disabled-color: $ids-color-palette-slate-30;
 $button-color-secondary-initial-background: $ids-color-palette-graphite-30;
 
+// Datagrid
+$datagrid-sort-icon-sorted-color: $ids-color-palette-slate-40;
+
 //================================================== //
 // Core Components