[refactor] improve auto suggest list structure

Author: zombieFox

src/css/auto-suggest.css

@@ -4,7 +4,7 @@
   font-size: 1em;
 }
 
-.auto-suggest-list {
+.auto-suggest {
   background-color: rgb(var(--theme-gray-02));
   margin-top: 0.5em;
   padding: 1em;
@@ -15,67 +15,57 @@
   max-height: 40vh;
   border-radius: var(--theme-radius);
   overflow-y: auto;
-  z-index: var(--z-index-auto-suggest-list);
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  z-index: var(--z-index-auto-suggest);
   box-shadow: var(--layout-shadow-large);
 }
 
-.auto-suggest-list-item {
-  flex-basis: 33.3333333333%;
-}
-
-.auto-suggest-list-item:not(:last-child) {
-  margin-bottom: 0;
+.auto-suggest-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
 }
 
-.auto-suggest-link {
+.auto-suggest-item {
+  background-color: transparent;
   padding: 0.5em;
+  margin: 0;
   border: 0;
   border-radius: var(--theme-radius);
   width: 100%;
   height: 100%;
+  min-height: 6em;
   display: flex;
+  position: relative;
+  white-space: inherit;
   flex-direction: column;
-  justify-content: flex-start;
+  justify-content: center;
   align-items: center;
   transition: background-color var(--layout-timing-extra-fast), color var(--layout-timing-extra-fast), border-color var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast);
 }
 
-.auto-suggest-link:link,
-.auto-suggest-link:visited {
-  color: rgb(var(--theme-gray-16));
-  text-decoration: none;
+.auto-suggest-item:after {
+  content: none;
 }
 
-.auto-suggest-link:hover {
-  background-color: rgb(var(--theme-gray-03));
-  color: rgb(var(--form-input-text-hover));
-  outline: none;
-  text-decoration: none;
-  box-shadow: var(--form-ring-hover);
+.auto-suggest-item:link,
+.auto-suggest-item:visited {
+  background-color: transparent;
 }
 
-.auto-suggest-link:focus {
-  background-color: rgb(var(--theme-gray-01));
-  color: rgb(var(--form-input-text-focus-active));
-  outline: none;
-  text-decoration: none;
-  box-shadow: var(--form-ring-accent);
+.auto-suggest-item:hover {
+  box-shadow: var(--form-ring-hover);
 }
 
-.auto-suggest-link:active {
-  color: rgb(var(--theme-style-text));
+.auto-suggest-item:focus {
+  box-shadow: var(--form-ring-accent);
 }
 
 .auto-suggest-icon {
   font-size: 2em;
 }
 
 .auto-suggest-icon-text {
-  color: rgb(var(--theme-gray-08));
-  margin-top: 0.5em;
+  margin-top: 1em;
   font-size: 0.6em;
   text-align: center;
+  line-height: 1.6;
 }

src/css/variables.css

@@ -191,7 +191,7 @@
   --z-index-shade:                                      5000;
   --z-index-modal:                                      6000;
   --z-index-menu:                                       7000;
-  --z-index-auto-suggest-list:                          8000;
+  --z-index-auto-suggest:                               8000;
   --z-index-dropdown:                                   9000;
   --z-index-edge:                                       10000;
   /* breakpoint */

src/js/auto-suggest.js

@@ -177,59 +177,62 @@ var autoSuggest = (function() {
         fontawesomeIcon: function() {
           suggestItems.forEach(function(arrayItem) {
             var li = helper.node("li|class:auto-suggest-list-item");
-            var anchor = helper.node("a|href:#,tabindex:1,class:auto-suggest-link");
+            var button = helper.node("button|tabindex:1,class:auto-suggest-item");
             var icon = helper.node("span|class:auto-suggest-icon fa-" + arrayItem.name);
             if (arrayItem.styles.includes("solid")) {
               helper.addClass(icon, "fas");
             } else if (arrayItem.styles.includes("brands")) {
               helper.addClass(icon, "fab");
             };
-            anchor.addEventListener("click", function() {
+            button.addEventListener("click", function() {
               link.render.autoSuggestIconAction(arrayItem);
             }, false);
             var text = helper.node("span:" + arrayItem.label + "|class:auto-suggest-icon-text");
-            anchor.appendChild(icon);
-            anchor.appendChild(text);
-            li.appendChild(anchor);
+            button.appendChild(icon);
+            button.appendChild(text);
+            li.appendChild(button);
             list.appendChild(li);
           });
         }
       };
       action[_currentInputOptions.type]();
     };
-    var _renderAutoSuggestList = function() {
-      var autoSuggestWrapper = helper.e(".auto-suggest-wrapper");
+    var _renderAutoSuggest = function() {
+      var autoSuggestInput = helper.e(".auto-suggest-input");
+      var autoSuggest = helper.e(".auto-suggest");
       var autoSuggestList = helper.e(".auto-suggest-list");
-      if (autoSuggestList) {
+      if (autoSuggest) {
         while (autoSuggestList.lastChild) {
           autoSuggestList.removeChild(autoSuggestList.lastChild);
         };
       } else {
-        var style = {
-          left: autoSuggestWrapper.getBoundingClientRect().left,
-          top: autoSuggestWrapper.getBoundingClientRect().bottom + window.scrollY,
-          width: autoSuggestWrapper.getBoundingClientRect().width
+        var box = {
+          left: autoSuggestInput.getBoundingClientRect().left,
+          top: autoSuggestInput.getBoundingClientRect().bottom + window.scrollY,
+          width: autoSuggestInput.getBoundingClientRect().width
         };
+        var autoSuggest = helper.node("div|class:auto-suggest list-unstyled");
         var autoSuggestList = helper.node("ul|class:auto-suggest-list list-unstyled");
-        body.appendChild(autoSuggestList);
-        autoSuggestList.setAttribute("style", "width: " + style.width + "px; top: " + style.top + "px; left: " + style.left + "px;");
+        autoSuggest.appendChild(autoSuggestList);
+        body.appendChild(autoSuggest);
+        autoSuggest.setAttribute("style", "width: " + box.width + "px; top: " + box.top + "px; left: " + box.left + "px;");
         documentEvent.add();
       };
       _populateList(autoSuggestList);
     };
     if (suggestItems.length > 0) {
       _autoSuggestActive = true;
-      _renderAutoSuggestList();
+      _renderAutoSuggest();
     } else {
       render.close();
     };
   };
 
   render.close = function() {
     mod.close();
-    var autoSuggestList = helper.e(".auto-suggest-list");
-    if (autoSuggestList) {
-      autoSuggestList.remove();
+    var autoSuggest = helper.e(".auto-suggest");
+    if (autoSuggest) {
+      autoSuggest.remove();
       documentEvent.remove();
       _currentInputOptions = {};
       _autoSuggestActive = false;

src/js/link.js

@@ -698,7 +698,7 @@ var link = (function() {
       var displayIconLableIcon = helper.node("span|class:label-icon");
       var displayIconFormIndent = helper.node("div|class:form-indent");
       var displayIconInputWrap = helper.node("div|class:input-wrap");
-      var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-wrapper");
+      var displayIconFormGroup = helper.node("div|class:form-group form-group-block mb-0 auto-suggest-input");
       var displayIconInput = helper.node("input|type:text,class:form-group-item-grow link-form-input-icon auto-suggest-input,id:link-form-input-icon,placeholder:Search for Brands or Icons,tabindex:1,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false,disabled");
       var displayIconFormGroupText = helper.node("div|class:form-group-text link-form-text-icon disabled,tabindex:-1");
       var displayIconFormGroupClear = helper.node("button|class:link-form-icon-clear button mb-0,type:button,tabindex:1,disabled");