Merge pull request #63 from infor-design/soho-7942-patch

Merging Fix on SOHO-7942 onto 4.6.1
infor-design · May 17, 2018 · 75a68d5 · 75a68d5
2 parents 09bec7f + af1d0a6
commit 75a68d5
Show file tree

Hide file tree

Showing 8 changed files with 281 additions and 12 deletions.
diff --git a/components/button/_button.scss b/components/button/_button.scss
@@ -414,7 +414,6 @@ a.btn-menu {
 
 .btn-tertiary,
 .btn-menu {
-  padding: 0 10px;
 
   // Dark Ui on Light UI
   &.inverse {
@@ -436,6 +435,18 @@ a.btn-menu {
   }
 }
 
+.btn-tertiary {
+  padding: 0 10px;
+}
+
+.btn-menu {
+  padding: 0 10px;
+
+  &.btn-primary,
+  &.btn-secondary {
+    padding-right: 20px;
+  }
+}
 
 // Icon Buttons
 // Also see ./_icons.scss
@@ -713,6 +724,14 @@ html[dir='rtl'] {
       }
     }
   }
+
+  .btn-menu {
+    &.btn-primary,
+    &.btn-secondary {
+      padding-left: 20px;
+      padding-right: 10px;
+    }
+  }
 }
 
 //Do not allow upper case in french

diff --git a/components/button/button.js b/components/button/button.js
@@ -94,10 +94,14 @@ Button.prototype = {
       }
     }
 
-    if (!this.element.parent().is('.field') && this.element.hasClass('btn-actions') && !this.element.data('tooltip')) {
-      this.element.attr('title', Locale.translate('More')).tooltip({
-        content: Locale.translate('More')
-      });
+    // Standalone action buttons need a "More Actions" tooltip.
+    // This is handled internally on most components that implement an action button.
+    if (this.element.hasClass('btn-actions') && (!this.element.parents('.field').length && !this.element.parents('.toolbar').length)) {
+      if (!this.element.data('tooltip')) {
+        this.element.attr('title', Locale.translate('More')).tooltip({
+          content: Locale.translate('More')
+        });
+      }
     }
 
     this.element.hideFocus();

diff --git a/components/popupmenu/_popupmenu.scss b/components/popupmenu/_popupmenu.scss
@@ -258,6 +258,7 @@
     color: $popupmenu-color;
     display: block;
     line-height: 32px;
+    min-height: 34px;
     padding: 0 30px 0 10px;
     position: relative;
     text-decoration: none;

diff --git a/components/popupmenu/test-empty-items.html b/components/popupmenu/test-empty-items.html
@@ -0,0 +1,46 @@
+<div class="row">
+  <div class="six columns">
+    <h2>Popupmenu Test: Empty Items</h2>
+  </div>
+</div>
+
+<div class="row top-padding">
+  <div class="six columns">
+
+    <div class="field">
+      <button type="button" id="single-check" class="btn-primary btn-menu">
+        <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+          <use xlink:href="#icon-settings"></use>
+        </svg>
+        <span>This Has Empty Items</span>
+      </button>
+      <ul class="popupmenu is-selectable">
+        <li class="is-checked">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-delete"></use>
+          </svg>
+          <a href="#"></a>
+        </li>
+        <li>
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-settings"></use>
+          </svg>
+          <a href="#"></a>
+        </li>
+        <li>
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-mail"></use>
+          </svg>
+          <a href="#"></a>
+        </li>
+        <li>
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-print"></use>
+          </svg>
+          <a href="#"></a>
+        </li>
+      </ul>
+    </div>
+
+  </div>
+</div>
diff --git a/components/toolbar/test-tooltips-populating-more-actions.html b/components/toolbar/test-tooltips-populating-more-actions.html
@@ -0,0 +1,192 @@
+<div class="row">
+  <div class="six columns">
+    <h2>Toolbar Test: Tooltips Populating the More Actions Menu</h2>
+    <p>Related JIRA Ticket:
+      <a class="hyperlink" href="http://jira.infor.com/browse/SOHO-7942" target="_blank">SOHO-7942</a>
+    </p>
+    <p></p>
+  </div>
+</div>
+
+<div class="row">
+  <div class="twelve columns">
+
+    <div id="ajax-toolbar" class="toolbar" data-init="false">
+      <div class="title">Ajax-ified Toolbar</div>
+      <div class="buttonset">
+
+        <button id="print-button" class="btn" title="Print">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-print"></use>
+          </svg>
+          <span></span>
+        </button>
+
+        <button id="settings-button" class="btn-menu" title="Settings">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-settings"></use>
+          </svg>
+          <span></span>
+        </button>
+        <ul class="popupmenu is-selectable">
+          <li class="is-selectable is-checked"><a href="#">Setting #1</a></li>
+          <li class="is-selectable"><a href="#">Setting #2</a></li>
+          <li class="is-selectable"><a href="#">Setting #3</a></li>
+        </ul>
+
+        <button id="save-button" class="btn" title="Save">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-save"></use>
+          </svg>
+          <span></span>
+        </button>
+
+        <button id="email-button" class="btn" title="Send via Email">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-mail"></use>
+          </svg>
+          <span></span>
+        </button>
+
+        <button id="refresh-button" class="btn" title="Refresh">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-refresh"></use>
+          </svg>
+          <span></span>
+        </button>
+
+      </div>
+      <div class="more">
+
+        <button id="predefined-more" class="btn-actions page-changer" type="button" title="More...">
+          <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+            <use xlink:href="#icon-more"></use>
+          </svg>
+          <span class="audible">More Actions</span>
+        </button>
+        <ul id="predefined-more-menu" class="popupmenu" data-init="false" >
+          <li><a href="#">Pre-defined Option #1</a></li>
+        </ul>
+
+      </div>
+    </div>
+
+  </div>
+</div>
+<div class="row top-padding">
+  <div class="twelve columns">
+    <button id="change-ajax" type="button" class="btn-secondary">
+      <svg class="icon" focusable="false" aria-hidden="true" role="presentation">
+        <use xlink:href="#icon-settings"></use>
+      </svg>
+      <span>Change Ajax Call</span>
+    </button>
+
+    <button id="destroy" type="button" class="btn-secondary">
+      <span>Destroy Toolbar Instance</span>
+    </button>
+
+    <button id="reinvoke" type="button" class="btn-secondary" disabled>
+      <span>Re-invoke Toolbar Instance</span>
+    </button>
+  </div>
+</div>
+
+<script>
+  var TOP_LEVEL_POPUPMENU_CONTENT = '' +
+    '<li><a href="#">AJAX Option #1</a></li>' +
+    '<li><a href="#">AJAX Option #2</a></li>' +
+    '<li class="submenu">' +
+      '<a href="#">AJAX Option #3</a>' +
+      '<ul class="popupmenu"></ul>' +
+    '</li>' +
+    '<li><a href="#">AJAX Option #4</a></li>';
+
+  var SUB_LEVEL_POPUPMENU_CONTENT = '' +
+    '<li><a href="#">AJAX Sub-option #1</a></li>' +
+    '<li><a href="#">AJAX Sub-option #2</a></li>' +
+    '<li><a href="#">AJAX Sub-option #3</a></li>' +
+    '<li><a href="#">AJAX Sub-option #4</a></li>';
+
+  var ALTERNATE_TOP_LEVEL_POPUPMENU_CONTENT = '' +
+    '<li><a href="#">Different AJAX Option #1</a></li>' +
+    '<li><a href="#">Different AJAX Option #2</a></li>' +
+    '<li><a href="#">Different AJAX Option #3</a></li>' +
+    '<li><a href="#">Different AJAX Option #4</a></li>';
+
+  // Populate the menu with some fake content for the sake of testing the AJAX call.
+  function popupmenuBeforeOpen(response, options) {
+    if (options.contextElement) {
+      return response( $(SUB_LEVEL_POPUPMENU_CONTENT) );
+    }
+    return response( $(TOP_LEVEL_POPUPMENU_CONTENT) );
+  }
+
+  // Populate the menu with some fake content for the sake of testing the AJAX call.
+  function popupmenuBeforeOpenTwo(response, options) {
+    console.log('Using different Popupmenu Content...');
+    return response( $(ALTERNATE_TOP_LEVEL_POPUPMENU_CONTENT) );
+  }
+
+  // Manually invoke the Toolbar.
+  // (more akin to how the Angular components will deal with the jQuery components)
+  var toolbarElem = $('#ajax-toolbar');
+  var toolbarAPI = toolbarElem.data('toolbar');
+  var moreElem = $('#predefined-more');
+  var moreAPI = moreElem.data('popupmenu');
+
+  var btnChangeAjax = $('#change-ajax');
+  var btnDestroy = $('#destroy');
+  var btnReinvoke = $('#reinvoke');
+
+  // Settings
+  var TOOLBAR_SETTINGS = {
+    maxVisibleButtons: 4,
+    moreMenuSettings: {
+      beforeOpen: popupmenuBeforeOpen
+    }
+  };
+
+  function invokeToolbar() {
+    btnChangeAjax.enable();
+    btnDestroy.enable();
+    btnReinvoke.disable();
+
+    if (toolbarAPI) {
+      toolbarAPI.updated(TOOLBAR_SETTINGS);
+    } else {
+      toolbarElem.toolbar(TOOLBAR_SETTINGS);
+      toolbarAPI = toolbarElem.data('toolbar');
+    }
+  }
+
+  // invoke the toolbar once on page load
+  invokeToolbar();
+
+  // Destroys the toolbar instance.
+  btnDestroy.on('click', function() {
+    $(this).disable();
+    btnChangeAjax.disable();
+    btnReinvoke.enable();
+    toolbarAPI.destroy();
+  });
+
+  // Reinvokes the toolbar instance.
+  btnReinvoke.on('click', function() {
+    invokeToolbar();
+  });
+
+  // Swaps out the More Menu's ajax call for a different one.
+  btnChangeAjax.on('click', function () {
+    $(this).disable();
+
+    if (toolbarAPI) {
+      toolbarAPI.updated({
+        maxVisibleButtons: 4,
+        moreMenuSettings: {
+          beforeOpen: popupmenuBeforeOpenTwo
+        }
+      });
+    }
+  });
+</script>
diff --git a/components/toolbar/toolbar.js b/components/toolbar/toolbar.js
@@ -171,6 +171,11 @@ Toolbar.prototype = {
       if (!buttonControl) {
         $(this).button();
       }
+
+      const tooltipControl = $(this).data('tooltip');
+      if (!tooltipControl && $(this).attr('title')) {
+        $(this).tooltip();
+      }
     });
 
     // Invoke searchfields
@@ -519,15 +524,17 @@ Toolbar.prototype = {
     const tooltipText = tooltip && typeof tooltip.content === 'string' ? tooltip.content : undefined;
     let popupLiText;
 
-    if (span.length) {
+    if (title !== '' && title !== undefined) {
+      popupLiText = title;
+    } else if (tooltipText) {
+      popupLiText = tooltipText;
+    } else if (span.length) {
       popupLiText = span.text();
-    } else if (title !== '' && title !== undefined) {
-      popupLiText = item.attr('title');
     } else {
-      popupLiText = stringUtils.stripHTML(tooltipText || item.text());
+      popupLiText = item.text();
     }
 
-    return popupLiText;
+    return stringUtils.stripHTML(popupLiText);
   },
 
   /**

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@infor/sohoxi",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "shortName": "sohoxi",
   "description": "Hook & Loop - SoHo XI Controls",
   "author": "Hook & Loop",

diff --git a/publish/package.json b/publish/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infor/sohoxi",
-  "version": "4.6.0",
+  "version": "4.6.1",
   "shortName": "sohoxi",
   "description": "Hook & Loop - SoHo XI Controls",
   "author": "Hook & Loop",