Merge branch 'main' into 8212-cards-title-widget-alignment

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,13 @@ 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';
+  }
+  if (iconSet === 'empty' && theme === 'new') {
+    metaPath = 'node_modules/ids-identity/dist/theme-new/icons/old/empty/metadata.json';
+  }
   const meta = JSON.parse(fs.readFileSync(metaPath, 'utf-8').toString());
 
   if (iconSet === 'empty') {

app/views/components/datagrid/example-grouped-headers.html

@@ -38,10 +38,10 @@
         columns: columns,
         // Numeric Column Span Groups (3 + 1 + 2 + 3 === 9)
         columnGroups: [
-          { colspan: 3, id: 'group1', name: 'Column Group One', align: 'center' },
-          { colspan: 1, id: 'group2', name: 'Column Group Two' },
-          { colspan: 2, id: 'group3', name: 'Column Group Three', align: 'right' },
-          { colspan: 3, id: 'group4', name: 'Column Group Four', align: 'left' }
+          { colspan: 3, id: 'group1', name: 'Column Group One', align: 'center', tooltip: 'test', headerTooltip: 'test' },
+          { colspan: 1, id: 'group2', name: 'Column Group Two', tooltip: 'test' },
+          { colspan: 2, id: 'group3', name: 'Column Group Three', align: 'right', tooltip: 'test' },
+          { colspan: 3, id: 'group4', name: 'Column Group Four', align: 'left', tooltip: 'test' }
         ],
         dataset: data,
         columnReorder: true,

app/views/components/header/example-hamburger-back.html

@@ -0,0 +1,27 @@
+<header class="header is-personalizable">
+  <div class="flex-toolbar">
+    <div class="toolbar-section">
+      {{> includes/header-appmenu-back}}
+    </div>
+    <div class="toolbar-section title">
+      <h1>Page Title</h1>
+    </div>
+
+    <div class="toolbar-section search">
+      <label for="header-searchfield" class="audible">Search</label>
+      <input id="header-searchfield" class="searchfield" name="header-searchfield" data-options="{'collapsible': true, 'clearable': true}" />
+    </div>
+
+    {{> includes/header-actionbutton}}
+
+  </div>
+</header>
+
+<script>
+  $("#back-button").on('click', () => {
+    $('body').toast({
+      title: 'Go back',
+      message: 'The back button was clicked.'
+    });
+  });
+</script>

app/views/components/icons/example-logos.html

@@ -29,6 +29,8 @@
     width: 70px;
   }
 </style>
+
+
 <div class="row">
   <div class="twelve columns">
     <h2 class="fieldset-title">Icons - Logos</h2>

app/views/components/personalize/example-form-landmark.html

@@ -14,7 +14,7 @@ <h1>Level Two Detail View</h1>
   <section id="maincontent" class="page-container scrollable-flex" role="main">
     <section class="scrollable-flex-header is-personalizable">
       <div class="content personalize-header">
-        <div class="row no-bottom-margin bottom-padding">
+        <div class="row no-bottom-margin bottom-padding top-padding">
           <div class="one-fifth column one-half-mobile">
             <label class="personalize-text">Item</label>
             <p class="name-xl personalize-text">2000 LGE Incorporated</p>

app/views/components/personalize/example-form-landmark2-horizontal.html

@@ -14,7 +14,7 @@ <h1>Level Two Detail View</h1>
   <section id="maincontent" class="page-container scrollable-flex" role="main">
     <section class="scrollable-flex-header">
       <div class="content is-personalizable full-width" style="padding: 0;">
-        <div class="row no-bottom-margin bottom-padding personalize-header">
+        <div class="row no-bottom-margin bottom-padding personalize-header top-padding">
           <div class="one-fifth column one-half-mobile">
             <label class="personalize-text">Item</label>
             <p class="name-xl personalize-text">2000 LGE Incorporated</p>

app/views/components/personalize/example-form-landmark2.html

@@ -14,7 +14,7 @@ <h1>Level Two Detail View</h1>
   <section id="maincontent" class="page-container scrollable-flex" role="main">
     <section class="scrollable-flex-header">
       <div class="content is-personalizable full-width" style="padding: 0;">
-        <div class="row no-bottom-margin bottom-padding personalize-header">
+        <div class="row no-bottom-margin bottom-padding personalize-header top-padding">
           <div class="one-fifth column one-half-mobile">
             <label class="personalize-text">Item</label>
             <p class="name-xl personalize-text">2000 LGE Incorporated</p>

app/views/components/personalize/example-form.html

@@ -14,7 +14,7 @@ <h1>Level Two Detail View</h1>
   <section id="maincontent" class="page-container scrollable-flex is-personalizable" role="main">
     <section class="scrollable-flex-header personalize-header">
       <div class="content">
-        <div class="row no-bottom-margin bottom-padding">
+        <div class="row no-bottom-margin bottom-padding top-padding">
           <div class="one-fifth column one-half-mobile">
             <label class="personalize-text">Item</label>
             <p class="name-xl personalize-text">2000 LGE Incorporated</p>

app/views/components/personalize/example-form2.html

@@ -12,10 +12,10 @@ <h1>Level Two Detail View</h1>
     </div>
   </header>
 
-  <section id="maincontent" class="is-personalizable" role="main">
+  <section id="maincontent" class="is-personalizable page-container" role="main">
     <section class="personalize-header">
       <div class="content">
-        <div class="row no-bottom-margin small-bottom-padding">
+        <div class="row no-bottom-margin small-bottom-padding top-padding">
           <div class="one-third column">
             <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn"/>
             <br />

app/views/components/personalize/test-classes-short.html

@@ -14,7 +14,7 @@ <h1>Custom Personalization Sections</h1>
 
   <div id="maincontent" class="page-container scrollable is-personalizable" role="main">
     <div class="personalize-header form-layout-compact personalize-horizontal-bottom-border">
-      <div class="row l-center">
+      <div class="row l-center top-padding">
         <div class="one-fifth column one-half-mobile">
           <span class="object-count personalize-text">
             <span>Active <br/> Opportunities</span>

app/views/components/personalize/test-form-short.html

@@ -12,10 +12,10 @@ <h1>Level Two Detail View</h1>
     </div>
   </header>
 
-  <section id="maincontent" class="is-personalizable" role="main">
+  <section id="maincontent" class="is-personalizable page-container" role="main">
     <section class="personalize-header form-layout-compact">
       <div class="content">
-        <div class="row no-bottom-margin bottom-padding">
+        <div class="row no-bottom-margin bottom-padding top-padding">
           <div class="one-fifth column one-half-mobile">
             <label class="personalize-text">Item</label>
             <p class="name-xl personalize-text">2000 LGE Incorporated</p>

app/views/components/personalize/test-form2-short.html

@@ -15,7 +15,7 @@ <h1>Level Two Detail View</h1>
   <section id="maincontent" class="is-personalizable" role="main">
     <section class="personalize-header form-layout-compact">
       <div class="content">
-        <div class="row no-bottom-margin small-bottom-padding">
+        <div class="row no-bottom-margin small-bottom-padding top-padding">
           <div class="one-third column">
             <img class="image-round" src="{{basepath}}/images/10.jpg" alt="Photo of Evyn"/>
             <br />

app/views/includes/header-appmenu-back.html

@@ -0,0 +1,12 @@
+<button id="header-hamburger" class="btn-icon application-menu-trigger personalize-actionable" type="button" id="hamburger-button">
+  <span class="audible" data-translate="text">AppMenuTriggerTextAlt</span>
+  <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+    <use href="#icon-menu"></use>
+  </svg>
+</button>
+<button class="btn-icon personalize-actionable" type="button" id="back-button">
+  <span class="audible">Drill Down</span>
+  <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+    <use href="#icon-arrow-left"></use>
+  </svg>
+</button>

docs/CHANGELOG.md

@@ -4,9 +4,16 @@
 
 ## v4.92.0 Features
 
+- `[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 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))
+- `[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))
 - `[Locale]` Changed all `zh` locales time format as suggested by native speakers. ([#8313](https://github.com/infor-design/enterprise/issues/8313))
 - `[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))
 - `[Process Indicator]` Adjusted alignment of icon in compact process indicator. ([#8241](https://github.com/infor-design/enterprise/issues/8241))
@@ -54,6 +61,12 @@
 - `[Searchfield]` Fixed styling issues in RTL. ([#6982](https://github.com/infor-design/enterprise/issues/6982))
 - `[Searchfield]` Fixed searchfield stylings in RTL and in mobile viewport. ([#8103](https://github.com/infor-design/enterprise/issues/8103))
 
+## v4.89.1 (Preview)
+
+## v4.89.1 (Preview) Fixes
+
+- `[Personalization]` Fixed incorrect values in the `Soho.theme.personalizationColors` api. ([#8151](https://github.com/infor-design/enterprise/issues/8151))
+
 ## v4.90.0
 
 ## v4.90.0 Features
@@ -84,6 +97,16 @@
 - `[Fileupload]` Added condition to not allow for input clearing for readonly and disabled. ([#8024](https://github.com/infor-design/enterprise/issues/8024))
 - `[Locale]` Added new locales from the translation team. ([#8196](https://github.com/infor-design/enterprise/issues/8196))
 - `[Modal]` Adjusted modal title spacing to avoid icon from cropping. ([#8031](https://github.com/infor-design/enterprise/issues/8031))
+- `[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 (Preview)
+
+## v4.89.0 (Preview) Features
+
+- `[Icons]` Added new icon designs. ([#8129](https://github.com/infor-design/enterprise/issues/8129))
+- `[Tabs]` Changed all azure components like header and header tabs to be alabaster by default. ([#7861](https://github.com/infor-design/enterprise/issues/7861))
+- `[Timepicker]` Remove `disabled` prop in trigger button on enable call. ([NG#1567](https://github.com/infor-design/enterprise-ng/issues/1567))
 - `[Modal]` Fixed the searchfield size when settings has title in toolbar. ([#8025](https://github.com/infor-design/enterprise/issues/8025))
 - `[Page-Patterns]` Fixed background on hovered selected tab. ([#8088](https://github.com/infor-design/enterprise/issues/8088))
 - `[ProcessIndicator]` Fixed icon alignment in RTL. ([#8168](https://github.com/infor-design/enterprise/issues/8168))