Merge pull request #8388 from infor-design/misc-bugs

Misc - Add more fixes for beta
infor-design · Jan 25, 2024 · 1cd4ff2 · 1cd4ff2
2 parents 498a640 + 22dec2a
commit 1cd4ff2
Show file tree

Hide file tree

Showing 10 changed files with 58 additions and 43 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -28,6 +28,7 @@
 - `[Datagrid]` Fixed contextual toolbar auto hide when performing action. ([#8352](https://github.com/infor-design/enterprise/issues/8352))
 - `[Dropdown]` Fixed handling for null, undefined objects passed to updateItemIcon method. ([#8353](https://github.com/infor-design/enterprise/issues/8353))
 - `[Datagrid]` Fixed Hyperlink Formatter `cssClass` string resolution. ([#8340](https://github.com/infor-design/enterprise/issues/8340))
+- `[Datagrid]` Fixed position of icons in trigger fields in datagrid editors. ([#8379](https://github.com/infor-design/enterprise/issues/8379))
 - `[Dropdown]` Fixed handling for null, undefined objects passed to updateItemIcon method. ([#8353](https://github.com/infor-design/enterprise/issues/8353))
 - `[Datagrid]` Fixed contextual toolbar auto hide when performing action. ([#8352](https://github.com/infor-design/enterprise/issues/8352))
 - `[Fieldset]` Changed padding in reset for better compatibility. ([#1756](https://github.com/infor-design/enterprise-wc/issues/1756))
@@ -52,9 +53,11 @@
 - `[Tabs]` Adjusted icon alignment and color for searchfield in tabs. ([#8272](https://github.com/infor-design/enterprise/issues/8272))
 - `[Tabs]` Fixed tabs add tab button focus. ([#8275](https://github.com/infor-design/enterprise/issues/8275))
 - `[Tabs]` Added setting to disable error icon in validation. ([#8254](https://github.com/infor-design/enterprise/issues/8254))
+- `[Tabs]` Fixed UI issues on counts. ([#8385](https://github.com/infor-design/enterprise/issues/8385))
 - `[Tabs Header]` Fixed focus border not visible in classic contrast alabaster. ([#8265](https://github.com/infor-design/enterprise/issues/8265))
 - `[Tabs Module]` Fixed more button not visible in alabaster. ([#8271](https://github.com/infor-design/enterprise/issues/8271))
 - `[Tabs Vertical]` Fixed focus state outline when having scrollable. ([#8269](https://github.com/infor-design/enterprise/issues/8269))
+- `[Widgets]` Removed small invisible border on borderless widget. ([#8380](https://github.com/infor-design/enterprise/issues/8380))
 
 ## v4.91.0
 

diff --git a/src/components/button/_button-new.scss b/src/components/button/_button-new.scss
@@ -152,7 +152,7 @@
 .btn {
   border-radius: 8px;
 
-  &:hover:not([disabled]):not(.btn-primary) {
+  &:hover:not([disabled]):not(.btn-primary):not(.trigger) {
     &:not(:disabled) {
       background-color: $button-color-tertiary-hover-background-new;
       color: $button-color-tertiary-hover-font-new;
@@ -398,7 +398,7 @@ html {
       }
     }
   }
-  
+
   .field-short,
   .form-layout-compact .field {
     .searchfield-wrapper.has-close-icon-button.has-text {

diff --git a/src/components/cards/_cards.scss b/src/components/cards/_cards.scss
@@ -120,7 +120,7 @@ $card-header-section: '.card-header-section', '.widget-header-section';
 
   &.border-less {
     background: none;
-    border-color: transparent;
+    border: none;
     box-shadow: none;
   }
 

diff --git a/src/components/datagrid/_datagrid-new.scss b/src/components/datagrid/_datagrid-new.scss
@@ -188,7 +188,7 @@
       }
 
       .datepicker + .btn-icon.trigger {
-        margin-top: 9px;
+        margin-top: 8px;
       }
     }
   }
@@ -254,6 +254,7 @@
                 .datepicker + .trigger {
                   margin-left: 11px;
                   margin-top: -0.2px;
+                  background-color: transparent;
                 }
 
                 .trigger {
@@ -279,7 +280,8 @@
             .datepicker {
               + .trigger {
                 > .icon {
-                  top: -3px;
+                  top: -1px;
+                  left: -1px;
                 }
               }
             }
@@ -377,15 +379,15 @@
 
       .dropdown-trigger:not(.colorpicker-container) {
         + .icon {
-          top: 3px !important;
+          top: 1px !important;
           left: 4px !important;
         }
       }
     }
 
     .datagrid-trigger-cell {
       .icon.icon-calendar {
-        left: 5px;
+        left: 4px;
         top: 0;
       }
     }
@@ -413,7 +415,11 @@
 
         + .trigger.btn-icon {
           margin-left: 14px;
-          margin-top: 0.5px;
+          margin-top: 3px;
+
+          &:hover {
+            background-color: transparent;
+          }
         }
       }
 
@@ -777,13 +783,13 @@
   }
 
   tbody tr td.is-editing .dropdown {
-    padding: 6px 22px 0 5px;
+    padding: 4px 22px 0 3px !important;
   }
 
   tbody tr td.is-editing .dropdown-wrapper .dropdown + .icon {
     height: 16px;
-    right: 4px;
-    top: 6px !important;
+    right: 1px;
+    top: 5px !important;
     width: 16px;
   }
 
@@ -848,8 +854,8 @@
 }
 
 .datagrid-dropdown-list.extra-small-rowheight .trigger .icon {
-  left: 3.5px !important;
-  top: 8.5px;
+  left: 4px !important;
+  top: 8px;
 }
 
 .datagrid-dropdown-list.small-rowheight .trigger .icon {
@@ -871,6 +877,7 @@
       td.is-editing {
         .datepicker + .btn-icon.trigger {
           margin-top: 1px;
+          background-color: transparent;
         }
       }
     }

diff --git a/src/components/datagrid/_datagrid.scss b/src/components/datagrid/_datagrid.scss
@@ -1199,7 +1199,7 @@ $datagrid-small-row-height: 25px;
 
           .dropdown-trigger {
             margin-left: -1px;
-            margin-top: 5px;
+            margin-top: 2px;
 
             + .icon {
               top: 0;
@@ -1249,10 +1249,14 @@ $datagrid-small-row-height: 25px;
             }
 
             input.datepicker {
-              margin-top: -6px;
+              margin-top: -5px;
             }
           }
 
+          .btn-icon.trigger:hover:not(:disabled) {
+            background-color: transparent;
+          }
+
           &:not(.datagrid-trigger-cell) .datepicker {
             padding: 0 5px 0 15px;
           }
@@ -1277,7 +1281,7 @@ $datagrid-small-row-height: 25px;
             margin-left: -1px;
 
             &.datepicker {
-              margin-left: 1px;
+              margin-left: 0;
             }
 
             &.lookup {
@@ -1339,13 +1343,13 @@ $datagrid-small-row-height: 25px;
 
           .dropdown {
             height: inherit;
-            padding: 8px 23px 0 14px;
+            padding: 0 22px 0 0 !important;
           }
 
           div.dropdown + .icon,
           div.multiselect + .icon {
             left: auto;
-            top: 4px;
+            top: 1px;
           }
 
           &.datagrid-trigger-cell .icon.icon-close {
@@ -1454,7 +1458,7 @@ $datagrid-small-row-height: 25px;
         }
 
         &.icon-calendar {
-          top: -2px;
+          top: 0;
         }
 
         &.icon-close {
@@ -1640,8 +1644,8 @@ $datagrid-small-row-height: 25px;
 
             &.icon-calendar {
               height: 15px;
-              left: 1px;
-              top: -2px;
+              left: 0;
+              top: -1px;
             }
 
             &.icon-fileupload {
@@ -1677,8 +1681,8 @@ $datagrid-small-row-height: 25px;
             margin-top: 1px;
 
             + .icon {
-              left: -5px;
-              top: 0;
+              left: -3px;
+              top: -1px;
             }
           }
 
@@ -1761,10 +1765,10 @@ $datagrid-small-row-height: 25px;
           .dropdown {
             height: inherit;
             margin: 0;
-            padding: 5px 27px 0 9px;
+            padding: 0 24px 0 0 !important;
 
             + .icon {
-              right: 2px;
+              right: -3px;
               top: 6px;
             }
           }
@@ -1986,7 +1990,7 @@ $datagrid-small-row-height: 25px;
     }
 
     .is-editing .datagrid-cell-wrapper {
-      padding: 2px 5px 0 !important;
+      padding: 2px 4px 0 !important;
     }
 
     .datagrid-cell-wrapper {
@@ -2536,7 +2540,7 @@ $datagrid-small-row-height: 25px;
           }
 
           .icon {
-            top: 4px;
+            top: 3px;
             right: -8px;
           }
         }
@@ -2732,8 +2736,6 @@ $datagrid-small-row-height: 25px;
       transform: scale(1);
 
       &.datagrid-trigger-cell .datagrid-cell-wrapper {
-        padding-top: 2px;
-
         span.trigger {
           overflow: hidden;
           text-overflow: ellipsis;
@@ -2854,7 +2856,7 @@ $datagrid-small-row-height: 25px;
 
           + .icon-calendar + .icon-error {
             left: 98%;
-            margin-top: 2px;
+            margin-top: 1px;
           }
 
           + .icon-clock + .icon-error {
@@ -4428,7 +4430,7 @@ td .btn-actions {
 
   .dropdown-trigger {
     + .icon:not(.icon-calendar) {
-      top: -1px;
+      top: -2px;
       left: -1px;
     }
   }
@@ -4954,7 +4956,7 @@ td .btn-actions {
 
     .trigger .icon {
       left: -1px;
-      margin-top: 4px;
+      margin-top: 3px;
     }
 
     &.dropdown-list .trigger .icon {
@@ -4965,10 +4967,10 @@ td .btn-actions {
   .icon {
     color: $ids-color-font-base;
     left: 0 !important;
-    margin-top: 8px;
+    margin-top: 7px;
 
     &.search {
-      margin-top: 8px !important;
+      margin-top: 7px !important;
     }
   }
 }

diff --git a/src/components/dropdown/_dropdown-new.scss b/src/components/dropdown/_dropdown-new.scss
@@ -63,8 +63,8 @@ div.multiselect {
 .dropdown-list {
   &.small-rowheight {
     &.datagrid-dropdown-list .trigger .icon {
-      top: 8.5px;
-      margin-left: -0.5px;
+    top: 7px;
+    margin-left: 2px;
     }
   }
 

diff --git a/src/components/tabs/_tabs-horizontal-new.scss b/src/components/tabs/_tabs-horizontal-new.scss
@@ -30,7 +30,7 @@ $horizontal-tabs-height: 40px;
     .tab:not(.is-disabled) {
       &:hover {
         color: $tab-hover-color;
-        border-bottom: 2px solid $tab-hover-color;
+        border-bottom: 4px solid $tab-hover-color;
         background-color: $tab-background-hover-color-new;
       }
     }

diff --git a/src/components/tabs/_tabs-new.scss b/src/components/tabs/_tabs-new.scss
@@ -13,22 +13,22 @@
   }
 }
 
-.tab-container.horizontal {
+.tab-container.horizontal:not(.has-counts) {
   > .tab-list-container {
-    margin-top: 5px;
-    height: 34px;
+    margin-top: 6px;
+    height: 36px;
 
     .tab {
       a {
         padding: 7px 11px 5px;
       }
 
       &:not(.is-selected):not(.is-disabled):hover {
-        border-bottom: 2px solid $tab-hover-color;
+        border-bottom: 4px solid $tab-hover-color;
       }
 
       &:not(.is-disabled).is-selected {
-        border-bottom: 2px solid $tab-selected-color;
+        border-bottom: 4px solid $tab-selected-color;
       }
 
     }

diff --git a/src/components/tabs/tabs.js b/src/components/tabs/tabs.js
@@ -3831,6 +3831,7 @@ Tabs.prototype = {
     const isMac = $('html.is-mac').length > 0;
     const isAlternate = parentContainer.hasClass('alternate');
     const isTabContainerHeader = parentContainer.hasClass('header-tabs');
+    const isCounts = parentContainer.hasClass('has-counts');
     const isAddTabButton = target.is('.add-tab-button');
     const tabListScrollHeight = scrollingTablist.prop('scrollHeight');
     const tabListClientHeight = scrollingTablist.prop('clientHeight');
@@ -3841,7 +3842,7 @@ Tabs.prototype = {
       let tablistScrollLeft;
 
       // Adjust from the top
-      targetRectObj.top -= parentRect.top - 2;
+      targetRectObj.top -= parentRect.top - (isCounts ? 10 : 3);
       if (self.isVerticalTabs()) {
         targetRectObj.top += parentElement[0].scrollTop;
       }

diff --git a/src/themes/theme-new-light.scss b/src/themes/theme-new-light.scss
@@ -218,6 +218,8 @@ $header-button-disabled-color: rgba(0, 0, 0, 0.3);
 $button-color-tertiary-initial-font: $ids-color-palette-slate-60;
 $button-color-tertiary-actionsheet-hover-font: $button-color-tertiary-hover-font-new;
 $button-disabled-background-color: transparent;
+$button-color-tertiary-hover-font-new: $ids-color-palette-azure-60;
+$button-color-tertiary-hover-font: $ids-color-palette-azure-60;
 $button-color-secondary-initial-background: transparent;
 
 // Badges