From 22dec2ae27ad52d765a8a3801b27820c40004ab3 Mon Sep 17 00:00:00 2001 From: Tim McConechy Date: Thu, 25 Jan 2024 15:33:42 -0500 Subject: [PATCH] Add more fixes for beta --- docs/CHANGELOG.md | 3 ++ src/components/button/_button-new.scss | 4 +- src/components/cards/_cards.scss | 2 +- src/components/datagrid/_datagrid-new.scss | 27 +++++++----- src/components/datagrid/_datagrid.scss | 44 ++++++++++--------- src/components/dropdown/_dropdown-new.scss | 4 +- src/components/tabs/_tabs-horizontal-new.scss | 2 +- src/components/tabs/_tabs-new.scss | 10 ++--- src/components/tabs/tabs.js | 3 +- src/themes/theme-new-light.scss | 2 + 10 files changed, 58 insertions(+), 43 deletions(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 9831d48f5d..1d7395d734 100644 --- 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 index a1026ccbeb..7adccf93e5 100644 --- 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 index 43205100d8..4fc825e110 100644 --- 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 index 90d80ed36f..7978e7432a 100644 --- 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,7 +379,7 @@ .dropdown-trigger:not(.colorpicker-container) { + .icon { - top: 3px !important; + top: 1px !important; left: 4px !important; } } @@ -385,7 +387,7 @@ .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 index 9de303180f..fcd2ff8488 100644 --- 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 index d0f849cf06..8620170f5d 100644 --- 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 index 8a0f038e46..c18ada6372 100644 --- 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 index 328c9fc1f0..3ba4fa8de6 100755 --- a/src/components/tabs/_tabs-new.scss +++ b/src/components/tabs/_tabs-new.scss @@ -13,10 +13,10 @@ } } -.tab-container.horizontal { +.tab-container.horizontal:not(.has-counts) { > .tab-list-container { - margin-top: 5px; - height: 34px; + margin-top: 6px; + height: 36px; .tab { a { @@ -24,11 +24,11 @@ } &: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 index 7afadc68a5..4274f5a254 100644 --- 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 index 25be4f75bb..e902a2171e 100644 --- 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