Merge pull request #8146 from infor-design/8129-new-icons

8129 - new icons (dev preview)

app/data/icons.js

@@ -11,6 +11,10 @@ const __dirname = path.dirname(__filename);
  * http://localhost:4000/api/icons?theme=classic
  * or
  * http://localhost:4000/api/icons?theme=new
+ * or
+ * http://localhost:4000/api/icons?theme=new-default
+ * or
+ * http://localhost:4000/api/icons?theme=new-old
  * @param  {object} req Node request
  * @param  {object} res Node reponse
  */

app/package.json

@@ -111,7 +111,7 @@
     "form-data": "^4.0.0",
     "handlebars": "^4.7.7",
     "handlebars-wax": "^6.1.0",
-    "ids-identity": "4.15.5",
+    "ids-identity": "4.16.0",
     "jquery": "^3.7.0",
     "mmm": "^0.2.2",
     "node-sass": "^9.0.0",

app/src/js/middleware/option-handler-themes.js

@@ -77,8 +77,17 @@ export default function (app) {
       res.opts.theme.mode = req.query.mode.toString().toLowerCase();
     }
     logger('info', `Setting theme to "theme-${res.opts.theme.name}-${res.opts.theme.mode || req.query.variant}"`);
-    const svgHtmlPartial = fs.readFileSync(`${iconsPath}/theme-${res.opts.theme.name}-svg.html`).toString();
-    const svgEmptyHtmlPartial = fs.readFileSync(`${iconsEmptyPath}/theme-${res.opts.theme.name}-svg-empty.html`).toString();
+
+    let svgHtmlPartial = '';
+    let svgEmptyHtmlPartial = '';
+
+    if (res.opts.theme.name === 'new') {
+      svgHtmlPartial = fs.readFileSync(`${iconsPath}/theme-new-default-svg.html`).toString();
+      svgEmptyHtmlPartial = fs.readFileSync(`${iconsEmptyPath}/theme-new-svg-empty.html`).toString();
+    } else {
+      svgHtmlPartial = fs.readFileSync(`${iconsPath}/theme-classic-svg.html`).toString();
+      svgEmptyHtmlPartial = fs.readFileSync(`${iconsEmptyPath}/theme-classic-svg-empty.html`).toString();
+    }
 
     // Set icons to the partials
     app.locals.partials = {

app/src/js/routes/custom-icons.js

@@ -41,7 +41,10 @@ export default (url, theme) => {
   const fileName = path.basename(url, '.html');
   const iconSet = fileName.includes('example-empty-states') ? 'empty' : 'standard';
 
-  const metaPath = `node_modules/ids-identity/dist/theme-${theme}/icons/${iconSet}/metadata.json`;
+  let metaPath = `node_modules/ids-identity/dist/theme-${theme}/icons/${iconSet}/metadata.json`;
+  if (iconSet === 'standard' && theme === 'new') {
+    metaPath = 'node_modules/ids-identity/dist/theme-new/icons/default/metadata.json';
+  }
   const meta = JSON.parse(fs.readFileSync(metaPath, 'utf-8').toString());
 
   if (iconSet === 'empty') {

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,12 @@
 # What's New with Enterprise
 
+## v4.89.0 (Preview)
+
+## v4.89.0 (Preview) Features
+
+- `[Datagrid]` Added ability for expandable and summary rows to be updated after cell update. ([#8058](https://github.com/infor-design/enterprise/issues/8058))
+- `[Tabs]` Changed all azure components like header and header tabs to be alabaster by default. ([#7861](https://github.com/infor-design/enterprise/issues/7861))
+
 ## v4.89.0
 
 ## v4.89.0 Features
@@ -23,6 +30,7 @@
 - `[Datagrid]` Additional check for select row when datagrid has grouping and filter. ([NG#1549](https://github.com/infor-design/enterprise-ng/issues/1549))
 - `[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))
+- `[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))

package.json

@@ -71,7 +71,7 @@
   ],
   "dependencies": {
     "d3": "^7.8.5",
-    "ids-identity": "4.15.5",
+    "ids-identity": "^4.16.0",
     "jquery": "^3.7.1",
     "promise-polyfill": "^8.3.0"
   },

scripts/build/create-svg-html.js

@@ -11,8 +11,6 @@ import slash from 'slash';
 
 import logger from '../logger.js';
 
-import IdsMetadata from '../helpers/ids-metadata.js';
-
 const ROOT_DIR = slash(process.cwd());
 const NL = process.platform === 'win32' ? '\r\n' : '\n';
 let IS_VERBOSE = false;
@@ -27,19 +25,37 @@ const PATHS = {
  * @returns {obj[]} Theme path objects
  */
 function getIconSetPaths() {
-  const themes = new IdsMetadata().getThemes();
-  let iconSets = themes.map(theme => ({
-    src: `${PATHS.idsIdentity}/dist/theme-${theme.name}/icons/standard/svg/*.svg`,
-    dest: `${PATHS.iconComponent}/theme-${theme.name}-svg.html`,
-    class: 'svg-icons'
-  }));
+  let iconSets = [
+    {
+      src: `${PATHS.idsIdentity}/dist/theme-new/icons/default/svg/*.svg`,
+      dest: `${PATHS.iconComponent}/theme-new-default-svg.html`,
+      class: 'svg-icons'
+    },
+    {
+      src: `${PATHS.idsIdentity}/dist/theme-new/icons/old/svg/*.svg`,
+      dest: `${PATHS.iconComponent}/theme-new-old-svg.html`,
+      class: 'svg-icons'
+    },
+    {
+      src: `${PATHS.idsIdentity}/dist/theme-classic/icons/standard/svg/*.svg`,
+      dest: `${PATHS.iconComponent}/theme-classic-svg.html`,
+      class: 'svg-icons'
+    }
+  ];
 
   // Addition for classic "empty" icons
-  const emptyIconSets = themes.map(theme => ({
-    src: `${PATHS.idsIdentity}/dist/theme-${theme.name}/icons/empty/svg/*.svg`,
-    dest: `${ROOT_DIR}/src/components/emptymessage/theme-${theme.name}-svg-empty.html`,
-    class: 'svg-icons-empty'
-  }));
+  const emptyIconSets = [
+    {
+      src: `${PATHS.idsIdentity}/dist/theme-new/icons/old/empty/svg/*.svg`,
+      dest: `${ROOT_DIR}/src/components/emptymessage/theme-new-svg-empty.html`,
+      class: 'svg-icons-empty'
+    },
+    {
+      src: `${PATHS.idsIdentity}/dist/theme-classic/icons/empty/svg/*.svg`,
+      dest: `${ROOT_DIR}/src/components/emptymessage/theme-classic-svg-empty.html`,
+      class: 'svg-icons-empty'
+    }
+  ];
 
   iconSets = iconSets.concat(emptyIconSets);
 

src/components/button/_button.scss

@@ -756,7 +756,7 @@ a.btn-close {
 
   &.btn-primary,
   &.btn-secondary {
-    padding: 0 16px;
+    padding: 0 12px 0 16px;
   }
 }
 

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/datagrid/_datagrid.scss

@@ -4064,7 +4064,7 @@ $datagrid-small-row-height: 25px;
 // Sorting
 .sort-indicator {
   display: inline-block;
-  margin: 3px 3px 0;
+  margin: 4px 3px 0;
   vertical-align: top;
 
   .icon {
@@ -4082,7 +4082,7 @@ $datagrid-small-row-height: 25px;
 
   span {
     display: block;
-    height: 10px;
+    height: 8px;
   }
 }