Merge branch 'main' into 8071-datagrid-error-tooltip

app/views/components/emptymessage/example-widgets.html

@@ -3,6 +3,7 @@
       <h2 class="fieldset-title">Example Widgets</h2>
   </div>
 </div>
+
 <div class="row">
   <div class="four columns">
 
@@ -719,6 +720,54 @@ <h2 class="fieldset-title">Paragraph Text (Typography - Line Height)</h2>
   </div>
 </div>
 
+<div class="row">
+  <div class="one-third column">
+      <h2 class="fieldset-title">Example Notification</h2>
+  </div>
+</div>
+<div class="row">
+  <div class="four columns">
+    <div class="card is-empty">
+      <div class="card-header">
+        <h2 class="widget-title">Message and Events</h2>
+        <button class="btn-actions" type="button" id="btn-1">
+          <span class="audible">Actions</span>
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use href="#icon-vertical-ellipsis"></use>
+          </svg>
+        </button>
+        <ul class="popupmenu">
+          <li><a href="#" id="action-1">Action 1</a></li>
+          <li><a href="#" id="action-2">Action 2</a></li>
+          <li><a href="#" id="action-3">Action 3</a></li>
+        </ul>
+      </div>
+      <div class="card-content">
+        <div class="notification-container"></div>
+        <div class="listview" id="task-listview"
+          data-options="{'source': '{{basepath}}api/inventory-tasks', 'template': 'task-tmpl', 'selectable': 'false'}">
+        </div>
+        <div class="card-empty-icon">
+          <svg class="icon-empty-state is-slate" focusable="false" aria-hidden="true" role="presentation">
+            <use href="#icon-empty-new-project-new"></use>
+          </svg>
+        </div>
+        <div class="card-empty-title">
+          Add a new project
+        </div>
+        <div class="card-empty-info">
+          Description of empty message that explains why and possibly contains a hyperlink.
+        </div>
+        <div class="card-empty-actions">
+          <button type="button" class="btn-primary">
+            <span>Action</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script>
   var setIcons = (isClassic) => {
     $('.icon-empty-state use').each(function( index ) {
@@ -740,3 +789,13 @@ <h2 class="fieldset-title">Paragraph Text (Typography - Line Height)</h2>
   });
   setIcons(document.querySelector('html').getAttribute('class').indexOf('theme-classic') > -1);
 </script>
+
+<script>
+  $('.notification-container').notification({
+    type: 'error',
+    message: 'Web API not available. No list available.',
+    parent: '.notification-container',
+    linkText: ''
+  });
+
+</script>

app/views/components/notification/example-widget.html

@@ -16,7 +16,7 @@ <h2 class="widget-title">Message and Events</h2>
         </ul>
       </div>
       <div class="card-content">
-        <div class="notification-cointainer"></div>
+        <div class="notification-container"></div>
         <div class="listview" id="task-listview"
           data-options="{'source': '{{basepath}}api/inventory-tasks', 'template': 'task-tmpl', 'selectable': 'false'}">
         </div>
@@ -45,30 +45,30 @@ <h2 class="widget-title">Message and Events</h2>
 </script>
 
 <script>
-  $('.notification-cointainer').notification({
+  $('.notification-container').notification({
     type: 'error',
     message: 'ION API Error, please contact admin',
-    parent: '.notification-cointainer',
+    parent: '.notification-container',
     linkText: ''
   });
 
 </script>
 
 <script>
-    $('.notification-cointainer').notification({
+    $('.notification-container').notification({
       type: 'alert',
       message: 'Session Timeout, Reconnecting in 2 seconds before it resumes',
-      parent: '.notification-cointainer',
+      parent: '.notification-container',
       linkText: ''
     });
 
   </script>
 
 <script>
-    $('.notification-cointainer').notification({
+    $('.notification-container').notification({
       type: 'success',
       message: 'Records successfully updated!',
-      parent: '.notification-cointainer',
+      parent: '.notification-container',
       linkText: ''
     });
 

docs/CHANGELOG.md

@@ -1,5 +1,13 @@
 # What's New with Enterprise
 
+## v4.90.0
+
+## v4.90.0 Features
+
+## v4.90.0 Fixes
+
+- `[Modal]` Adjusted modal title spacing to avoid icon from cropping. ([#8031](https://github.com/infor-design/enterprise/issues/8031))
+
 ## v4.89.0
 
 ## v4.89.0 Features
@@ -23,10 +31,14 @@
 - `[Datagrid]` Fix on new row not showing error tooltip on first cell. ([#8071](https://github.com/infor-design/enterprise/issues/8071))
 - `[Datepicker]` Adjusted sizing of monthview popup to better accommodate smaller dimensions. ([#7974](https://github.com/infor-design/enterprise/issues/7974))
 - `[Datepicker]` Fixed datepicker prematurely closing after selecting a date when having a time format. ([#7916](https://github.com/infor-design/enterprise/issues/7916))
+- `[Dropdown]` Fixed a bug where the text and dropdown icon were overlapping on smaller viewports. ([#8000](https://github.com/infor-design/enterprise/issues/8000))
+- `[EmptyMessage]` Fixed empty message card content to center position. ([#7883](https://github.com/infor-design/enterprise/issues/7883))
 - `[General]` Adjusted the reset for spans. ([#1513](https://github.com/infor-design/enterprise/issues/7854))
 - `[Module Nav]` Fixed a bug where the settings was behind the main module nav element. ([#8063](https://github.com/infor-design/enterprise/issues/8063))
 - `[Module Nav]` Fixed a bug where the accordion in the page container inherited module nav accordion styles. ([#8040](https://github.com/infor-design/enterprise/issues/7884))
 - `[Pie/Donut]` Fixed the displayed legend when selecting a different one. ([#7845](https://github.com/infor-design/enterprise/issues/7845))
+- `[Pie/Donut]` Fixed a bug in clicking legends causing to change whole list to the last clicked legend name. ([#8139](https://github.com/infor-design/enterprise/issues/8139))
+- `[Pie/Donut]` Fixed a bug in where legends can be clicked if selectable settings set to false. ([#8140](https://github.com/infor-design/enterprise/issues/8140))
 - `[Popupmenu]` Fixed shared menu not closing and opening correctly. ([NG#1552](https://github.com/infor-design/enterprise-ng/issues/1552))
 - `[ProcessIndicator]` Adjusted icon sizing to remove gaps between separators. ([#7982](https://github.com/infor-design/enterprise/issues/7982))
 - `[Radios]` Adjusted styling of checked disabled radio button. ([#8082](https://github.com/infor-design/enterprise/issues/8082))
@@ -38,6 +50,7 @@
 - `[Tabs]` Adjusted placement of icons in tab list spillover. ([#7970](https://github.com/infor-design/enterprise/issues/7970))
 - `[Tabs]` Fixed the focus state of radio button not fully shown in tabs. ([#7955](https://github.com/infor-design/enterprise/issues/7955))
 - `[Targeted-Achievement]` Fixed waring color not displaying properly. ([#7891](https://github.com/infor-design/enterprise/issues/7891))
+- `[Treemap]` Adjusted label styling in RTL. ([#6891](https://github.com/infor-design/enterprise/issues/6891))
 - `[Validation]` Fixed the position of exclamation points of validation in non english localization. ([#5119](https://github.com/infor-design/enterprise/issues/5119))
 - `[Weekview]` Added overnight event view when end time goes to next day. ([#7840](https://github.com/infor-design/enterprise/issues/7840))
 - `[Weekview]` Fixed an issue with the week change when clicking the `Today` button. ([#7792](https://github.com/infor-design/enterprise/issues/7792))

scripts/build/create-svg-html.js

@@ -90,14 +90,14 @@ const convertSvgMarkup = (id, contents) => {
   changed = changed.replace(' style="color: #28282A; fill: transparent"', '');
   changed = changed.replace(' style="color: transparent; fill: #28282A;"', '');
   changed = changed.replace(' color="transparent" fill="#28282a" stroke="none"', '');
-  changed = changed.replaceAll('#000', 'currentColor');
+  changed = changed.replace(/#000/g, 'currentColor');
 
   if (changed.indexOf('stroke=') === -1) {
-    changed = changed.replaceAll('fill-rule="evenodd"', 'fill="currentColor" fill-rule="evenodd"');
+    changed = changed.replace(/fill-rule="evenodd"/g, 'fill="currentColor" fill-rule="evenodd"');
   }
 
   if (changed.indexOf('stroke=') === -1) {
-    changed = changed.replaceAll('<path d="', '<path fill="currentColor" d="');
+    changed = changed.replace(/<path d="/g, '<path fill="currentColor" d="');
   }
   return changed;
 };

src/components/cards/_cards-new.scss

@@ -98,9 +98,15 @@
   &.is-empty {
     .widget-content,
     .card-content {
+      -ms-transform: translateY(-50%);
+      transform: translateY(-50%);
       // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
       @extend .flex-center;
     }
+
+    .card-header + .card-content {
+      padding-top: 48px;
+    }
   }
 
   .card-content,

src/components/cards/_cards.scss

@@ -265,8 +265,17 @@ $card-header-section: '.card-header-section', '.widget-header-section';
     }
 
     .card-content {
+      margin: 0;
+      position: absolute;
+      top: 50%;
       padding-top: 12px;
 
+      .notification-container {
+        position: relative;
+        width: inherit;
+        top: -3px;
+      }
+
       .card-empty-info {
         .font-size-px-14 {
           margin: 0 auto;
@@ -278,6 +287,10 @@ $card-header-section: '.card-header-section', '.widget-header-section';
         }
       }
     }
+
+    .card-header + .card-content {
+      padding-top: 33px;
+    }
   }
 
   // Expandable card headers set auto-height automatically

src/components/charts/charts.js

@@ -344,6 +344,7 @@ charts.addLegend = function (series, chartType, settings, container) {
   let currentWidth;
   let totalWidth = 0;
   let maxLength;
+  this.hasLegendPopup = false;
 
   let currentTotalWidthPercent;
   for (i = 0; i < series.length; i++) {
@@ -501,6 +502,8 @@ charts.addLegend = function (series, chartType, settings, container) {
       </button>
       `);
 
+      this.hasLegendPopup = true;
+
       const popupList = $('<ul class="popupmenu"></ul>');
 
       for (let j = 0; j < series.length; j++) {
@@ -561,6 +564,10 @@ charts.addLegend = function (series, chartType, settings, container) {
  * @param  {object} container The dom container.
  */
 charts.handleElementClick = function (idx, line, series, settings, container) {
+  if (!settings.selectable) {
+    return;
+  }
+
   const api = $(settings?.svg?.node()).closest('.chart-container').data('chart');
   const noTrigger = api?.initialSelectCall;
   const elem = series[idx];
@@ -607,7 +614,7 @@ charts.handleElementClick = function (idx, line, series, settings, container) {
     charts.selectElement(d3.select(elem.selectionObj.nodes()[idx]), elem.selectionInverse, elem.data, undefined, settings.dataset, noTrigger); // eslint-disable-line
   }
 
-  if (isTwoColumn) {
+  if (isTwoColumn && this.hasLegendPopup) {
     const chartType = settings.type === 'donut' ? 'pie' : settings.type;
     const hexColor = charts.chartColor(idx, chartType || (series.length === 1 ? 'bar-single' : 'bar'), elem);
     const colorName = charts.chartColorName(idx, chartType || (series.length === 1 ? 'bar-single' : 'bar'), elem);

src/components/dropdown/_dropdown.scss

@@ -108,6 +108,10 @@ div.multiselect {
       color: $input-placeholder-color;
       content: attr(data-placeholder-text);
     }
+
+    @media (max-width: $breakpoint-phone) {
+      display: inline;
+    }
   }
 
   > .listoption-icon {

src/components/modal/_modal.scss

@@ -415,7 +415,7 @@ body.modal-engaged {
     &.has-status {
       .icon {
         left: -6px;
-        margin-left: 5px;
+        margin-left: 8px;
         margin-right: 4px;
         top: 9px;
       }

src/components/notification/notification.js

@@ -81,7 +81,7 @@ Notification.prototype = {
       $(this.notificationEl).css({ 'max-width': `${$(parentEl).width()}px` });
       $(parentEl).closest('.modal-body-wrapper').prepend(this.notificationEl);
     } else {
-      parentEl.parentNode.insertBefore(this.notificationEl, parentEl.nextSibling);
+      parentEl.append(this.notificationEl);
     }
 
     $(this.notificationEl).animateOpen();

src/components/treemap/_treemap.scss

@@ -68,3 +68,15 @@
     line-height: 1em;
   }
 }
+
+html[dir='rtl'] {
+  .chart-treemap {
+    .chart-treemap-text {
+      right: 8px;
+    }
+
+    .chart-treemap-percent {
+      right: 8px;
+    }
+  }
+}