Add QA fixes for buttons

infor-design · May 9, 2024 · bebaf71 · bebaf71
1 parent 8403878
commit bebaf71
Show file tree

Hide file tree

Showing 18 changed files with 74 additions and 22 deletions.
diff --git a/app/views/components/cards/example-workspace-widgets.html b/app/views/components/cards/example-workspace-widgets.html
@@ -220,7 +220,7 @@ <h2 class="widget-title">Search on a widget</h2>
           <input class="searchfield" placeholder="Search My Widget" name="searchfield" id="gridfilter"
             data-options="{clearable: true}" />
         </div>
-        <div class="fake-content" style="height: calc(100% - 55px);overflow: auto;border-top: 1px solid transparent">
+        <div class="fake-content" style="height: calc(100% - 46px);overflow: auto;border-top: 1px solid transparent">
           <div class="fake-content" style="height: 1000px"></div>
         </div>
       </div>

diff --git a/app/views/components/timepicker/test-states.html b/app/views/components/timepicker/test-states.html
@@ -17,11 +17,9 @@ <h2>Timepicker Example: States</h2>
 <div class="row">
   <div class="one columns">
     <a class="hyperlink" id="btn-readonly">Readonly</a>
-  </div>
-  <div class="one columns">
-    <a class="hyperlink" id="btn-disable">Disable</a>
-  </div>
-  <div class="one columns">
+
+    <a class="hyperlink" id="btn-disable">Disable </a>
+
     <a class="hyperlink" id="btn-enable">Enable</a>
   </div>
 </div>

diff --git a/src/components/button/_button-new.scss b/src/components/button/_button-new.scss
@@ -229,20 +229,20 @@
   border-radius: 8px;
 
   &:hover:not(:disabled):not(.close):not(.btn-filter):not(.personalize-actionable):not(.destructive) {
-    background-color: $button-editor-color-hover-background-new;
-    color: $button-editor-color-tertiary-hover-font-new;
+    background-color: $button-editor-color-hover-background-new !important;
+    color: $button-editor-color-tertiary-hover-font-new !important;
 
     svg.icon {
-      color: $button-editor-color-tertiary-hover-font-new;
+      color: $button-editor-color-tertiary-hover-font-new !important;
     }
 
     &.is-active svg.icon {
-      color: $editor-btn-active-color;
+      color: $editor-btn-active-color !important;
     }
   }
 }
 
-.btn-icon.trigger:hover:not(:disabled){
+.btn-icon.trigger:hover:not(:disabled) {
   background-color: $button-color-tertiary-hover-background-new;
 }
 

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -185,6 +185,10 @@ button {
     box-shadow: $button-gen-ai-focus !important;
   }
 
+  .dot-flashing-container {
+    margin-inline-end: 0;
+  }
+
   &:hover {
     background: $button-gen-ai-hover-bg-color;
 

diff --git a/src/components/cards/_cards.scss b/src/components/cards/_cards.scss
@@ -581,8 +581,8 @@ $card-header-section: '.card-header-section', '.widget-header-section';
 .widget-content,
 .card-content {
   flex-direction: column;
-  height: 320px;
-  min-height: 320px;
+  height: 317px;
+  min-height: 317px;
   overflow: auto;
   width: 100%;
 

diff --git a/src/components/contextualactionpanel/_contextualactionpanel.scss b/src/components/contextualactionpanel/_contextualactionpanel.scss
@@ -81,7 +81,7 @@
       height: 34px;
       margin-inline-start: 5px;
       vertical-align: middle;
-      
+
       .go-back {
         svg {
           height: 14px;
@@ -242,6 +242,13 @@
     }
   }
 
+  .btn,
+  .btn-tertiary {
+    &:hover {
+      background-color: $contextual-panel-button-hover-bg-color !important;
+    }
+  }
+
   .modal-body {
     padding: 3rem 0;
 

diff --git a/src/components/datepicker/_datepicker.scss b/src/components/datepicker/_datepicker.scss
@@ -97,6 +97,21 @@
     + .trigger {
       color: $datepicker-readonly-icon-color;
       cursor: default;
+
+      &:hover {
+        color: $datepicker-readonly-icon-color !important;
+        cursor: default;
+        background-color: transparent !important;
+
+        &.icon,
+        &.btn-icon {
+          color: $datepicker-readonly-icon-color !important;
+        }
+      }
+
+      &.btn-icon:hover:not([disabled]) .icon {
+        color: $datepicker-readonly-icon-color !important;
+      }
     }
   }
 }

diff --git a/src/components/input/_input-new.scss b/src/components/input/_input-new.scss
@@ -37,7 +37,7 @@ span.required::after {
 .error-message {
   .icon {
     height: 18px;
-    margin-top: 4px;
+    margin-top: 0;
     margin-inline-end: 1px;
     width: 18px;
   }

diff --git a/src/components/masthead/_masthead-new.scss b/src/components/masthead/_masthead-new.scss
@@ -69,12 +69,20 @@ html[class*='theme-new-'] .masthead .flex-toolbar:not(.editor-toolbar):not(.form
   border-radius: 2px;
 
   &:not(:disabled):hover {
-    background-color: transparent;
+    background-color: transparent !important;
+  }
+
+  &.is-open {
+    background-color: transparent !important;
   }
 }
 
 .masthead .toolbar:not(.standalone) .searchfield-wrapper.toolbar-searchfield-wrapper:not(.has-categories):not(.is-open) {
   &:hover {
-    background-color: transparent;
+    background-color: transparent !important;
+  }
+
+  &.is-open {
+    background-color: transparent !important;
   }
 }
diff --git a/src/components/masthead/_masthead.scss b/src/components/masthead/_masthead.scss
@@ -191,6 +191,7 @@
       }
 
       &:hover:not([disabled]) {
+        background-color: transparent !important;
         color: $masthead-button-hover-color !important;
 
         .icon,
@@ -201,10 +202,11 @@
 
       &.is-open,
       &.is-open:hover {
-        color: $masthead-button-hover-color;
+        background-color: transparent;
+        color: $masthead-button-hover-color !important;
 
         .icon {
-          color: $masthead-button-hover-color;
+          color: $masthead-button-hover-color !important;
         }
       }
 

diff --git a/src/components/popupmenu/popupmenu.js b/src/components/popupmenu/popupmenu.js
@@ -110,7 +110,8 @@ PopupMenu.prototype = {
   addDefaultOffset(element, settings) {
     if (settings === undefined || Object.keys(settings).length === 0) {
       if (element.classList.contains('btn-menu') || element.classList.contains('btn-actions')) {
-        this.settings.offset = { x: 0, y: 8 };
+        const isInMasthead = element.closest('.masthead') !== null;
+        this.settings.offset = { x: 0, y: isInMasthead ? 0 : 8 };
       }
     }
   },

diff --git a/src/components/timepicker/_timepicker.scss b/src/components/timepicker/_timepicker.scss
@@ -71,6 +71,15 @@
     + .trigger {
       color: $timepicker-readonly-icon-color;
       cursor: default;
+
+      &.btn-icon:hover:not([disabled]) {
+        background-color: transparent !important;
+        color: $timepicker-readonly-icon-color;
+
+        .icon {
+          color: $timepicker-readonly-icon-color;
+        }
+      }
     }
   }
 }

diff --git a/src/core/_config.scss b/src/core/_config.scss
@@ -349,7 +349,7 @@ $button-color-tertiary-hover-background: $ids-color-palette-slate-30;
 $button-color-tertiary-disabled-background-new: transparent;
 $button-color-tertiary-hover-text-new: $ids-color-palette-graphite-100;
 $button-color-tertiary-hover-text: $ids-color-palette-graphite-100;
-$button-color-tertiary-hover-background-new: $ids-color-palette-azure-10;
+$button-color-tertiary-hover-background-new: $ids-color-palette-graphite-10;
 $hero-button-color-tertiary-hover-background-new: $button-color-tertiary-hover-background-new;
 $button-color-destructive-focus-border-new: $ids-color-palette-ruby-60;
 $button-color-primary-destructive-initial-background-new: $ids-color-palette-ruby-60;
@@ -869,6 +869,7 @@ $contextual-panel-color: $ids-color-palette-graphite-60;
 $contextual-panel-border-color: $ids-color-palette-graphite-30;
 $contextual-panel-searchfield-bg-color: $body-color-primary-background;
 $contextual-panel-searchfield-border-color: $ids-color-palette-graphite-30;
+$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-30;
 
 // BreadCrumb
 $breadcrumb-color: $ids-color-palette-graphite-60;

diff --git a/src/themes/theme-classic-contrast.scss b/src/themes/theme-classic-contrast.scss
@@ -522,6 +522,7 @@ $application-menu-trigger-icon-fill-color: $ids-color-palette-slate-30;
 $contextual-panel-bg: $ids-color-palette-graphite-30;
 $contextual-panel-border-color: $ids-color-palette-graphite-50;
 $contextual-panel-color: $ids-color-palette-white;
+$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-40;
 
 //BreadCrumb
 $breadcrumb-color: $ids-color-palette-graphite-80;

diff --git a/src/themes/theme-classic-dark.scss b/src/themes/theme-classic-dark.scss
@@ -553,6 +553,7 @@ $application-menu-trigger-icon-fill-color: $trigger-icon-fill-color;
 $contextual-panel-bg: $ids-color-palette-slate-60;
 $contextual-panel-border-color: $ids-color-palette-slate-50;
 $contextual-panel-color: $ids-color-palette-slate-20;
+$contextual-panel-button-hover-bg-color: $ids-color-palette-graphite-80;
 
 // BreadCrumb
 $breadcrumb-color: $ids-color-palette-slate-40;

diff --git a/src/themes/theme-new-contrast.scss b/src/themes/theme-new-contrast.scss
@@ -213,6 +213,7 @@ $button-color-secondary-initial-background: transparent;
 $button-disabled-background-color: transparent;
 $button-color-tertiary-hover-background-new: $ids-color-palette-slate-20;
 $button-color-tertiary-hover-text-new: $ids-color-palette-black;
+$button-color-tertiary-hover-text: $ids-color-palette-black;
 $hero-button-color-tertiary-hover-background-new: $ids-color-palette-azure-70;
 
 // Tertiary Buttons
@@ -607,6 +608,7 @@ $contextual-panel-color: $ids-color-palette-white;
 $contextual-panel-button-color: $ids-color-palette-slate-90;
 $contextual-panel-icon-color: $ids-color-palette-slate-90;
 $contextual-panel-hover-icon-color: $button-color-tertiary-hover-text;
+$contextual-panel-button-hover-bg-color: $ids-color-palette-slate-20;
 
 // BreadCrumb
 $breadcrumb-color: $ids-color-palette-slate-80;

diff --git a/src/themes/theme-new-dark.scss b/src/themes/theme-new-dark.scss
@@ -135,6 +135,7 @@ $button-color-secondary-initial-background: transparent;
 $button-color-tertiary-disabled-background-new: $ids-color-palette-slate-90;
 $button-color-tertiary-hover-background-new: $ids-color-palette-slate-80;
 $button-color-tertiary-hover-text-new: $ids-color-palette-white;
+$button-color-tertiary-hover-text: $ids-color-palette-white;
 $button-color-primary-destructive-initial-background-new: $ids-color-palette-ruby-60;
 $button-color-primary-destructive-hover-background-new: $ids-color-palette-ruby-70;
 $button-color-tertiary-destructive-initial-background-new: $ids-color-palette-ruby-40;
@@ -655,6 +656,7 @@ $module-nav-settings-menu-separator-color: $ids-color-palette-slate-90;
 $contextual-panel-bg: $ids-color-palette-slate-80;
 $contextual-panel-border-color: $ids-color-palette-slate-50;
 $contextual-panel-color: $ids-color-palette-slate-20;
+$contextual-panel-button-hover-bg-color: $ids-color-palette-slate-90;
 
 // BreadCrumb
 $breadcrumb-color: $ids-color-palette-slate-40;

diff --git a/src/themes/theme-new-light.scss b/src/themes/theme-new-light.scss
@@ -91,6 +91,7 @@ $contextual-panel-bg: $ids-color-palette-slate-10;
 $contextual-panel-color: $ids-color-palette-slate-60;
 $contextual-panel-border-color: $ids-color-palette-slate-30;
 $contextual-panel-searchfield-border-color: $ids-color-palette-slate-30;
+$contextual-panel-button-hover-bg-color: $ids-color-palette-slate-20;
 
 // Modal
 $modal-border-color: $ids-color-palette-slate-30;
@@ -233,7 +234,7 @@ $header-button-disabled-color: rgba(0, 0, 0, 0.3);
 $button-color-tertiary-initial-font: rgba(0, 0, 0, 0.9);
 $button-color-tertiary-actionsheet-hover-font: $button-color-tertiary-hover-text-new;
 $button-disabled-background-color: transparent;
-$button-color-tertiary-hover-text: $ids-color-palette-azure-60;
+$button-color-tertiary-hover-text: $ids-color-palette-slate-100;
 $button-color-secondary-initial-background: transparent;
 $button-color-secondary-initial-font-new: $ids-color-palette-azure-60;
 $header-button-focus-color: $ids-color-palette-slate-100;