add fix for dark theme, hover issue on disabled button

infor-design · Jan 25, 2024 · 89d4928 · 89d4928
1 parent 88e55b6
commit 89d4928
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 3 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -302,10 +302,20 @@ button {
 
     svg.icon {
       opacity: 0.5;
+
+      linearGradient#paint-linear-disabled stop {
+        &:first-child {
+          stop-color: $button-tertiary-disabled-icon-color-gen-ai-key-one;
+        }
+
+        &:last-child {
+          stop-color: $button-tertiary-disabled-icon-color-gen-ai-key-two;
+        }
+      }
     }
   }
 
-  &:not([disabled]):hover {
+  &:hover {
     svg.icon {
       linearGradient#paint-linear stop {
         &:first-child {
@@ -321,6 +331,24 @@ button {
 
   svg.icon {
     margin-top: 0;
+
+    linearGradient#paint-linear stop {
+      &:first-child {
+        stop-color: $button-tertiary-gradient-color-one;
+      }
+
+      &:last-child {
+        stop-color: $button-tertiary-gradient-color-two;
+      }
+    }
+  }
+
+  &.loading {
+    background: $button-gen-ai-active-bg-color;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: flex;
   }
 
   .dot-flashing-container .dot {

diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -246,11 +246,18 @@ Button.prototype = {
     this.renderAttributes();
     this.createNotificationBadge();
 
+    // console.log('this ->', this.element.prop('disabled'));
+    console.log({
+      elem: this.element,
+      disabled: this.element.prop('disabled')
+    })
+    const isDisabled =this.element.prop('disabled');
+
     this.tertiaryGenerativeIcon = `
       <svg width="18" height="18" viewBox="0 0 18 18" fill="none" class="icon tertiary">
-        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2H4.5V6.25C4.5 6.80228 4.05228 7.25 3.5 7.25H2V8.75H3.5C4.05228 8.75 4.5 9.19772 4.5 9.75V14H6V9.75C6 9.19772 6.44772 8.75 7 8.75H8.5V7.25H7C6.44772 7.25 6 6.80228 6 6.25V2ZM15 3H13.5V4.25C13.5 4.80228 13.0523 5.25 12.5 5.25H11.5V6.75H12.5C13.0523 6.75 13.5 7.19772 13.5 7.75V9H15V7.75C15 7.19772 15.4477 6.75 16 6.75H17V5.25H16C15.4477 5.25 15 4.80228 15 4.25V3ZM10.5 11H12V11.75C12 12.3023 12.4477 12.75 13 12.75H13.5V14.25H13C12.4477 14.25 12 14.6977 12 15.25V16H10.5V15.25C10.5 14.6977 10.0523 14.25 9.5 14.25H9V12.75H9.5C10.0523 12.75 10.5 12.3023 10.5 11.75V11Z" fill="url(#paint-linear)"></path>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M6 2H4.5V6.25C4.5 6.80228 4.05228 7.25 3.5 7.25H2V8.75H3.5C4.05228 8.75 4.5 9.19772 4.5 9.75V14H6V9.75C6 9.19772 6.44772 8.75 7 8.75H8.5V7.25H7C6.44772 7.25 6 6.80228 6 6.25V2ZM15 3H13.5V4.25C13.5 4.80228 13.0523 5.25 12.5 5.25H11.5V6.75H12.5C13.0523 6.75 13.5 7.19772 13.5 7.75V9H15V7.75C15 7.19772 15.4477 6.75 16 6.75H17V5.25H16C15.4477 5.25 15 4.80228 15 4.25V3ZM10.5 11H12V11.75C12 12.3023 12.4477 12.75 13 12.75H13.5V14.25H13C12.4477 14.25 12 14.6977 12 15.25V16H10.5V15.25C10.5 14.6977 10.0523 14.25 9.5 14.25H9V12.75H9.5C10.0523 12.75 10.5 12.3023 10.5 11.75V11Z" fill="${isDisabled ? 'url(#paint-linear-disabled)' : 'url(#paint-linear)' }"></path>
         <defs>
-          <linearGradient id="paint-linear" x1="14.6681" y1="-32.5625" x2="31.7256" y2="-26.8896" gradientUnits="userSpaceOnUse">
+          <linearGradient id="${isDisabled ? 'paint-linear-disabled' : 'paint-linear'}" x1="14.6681" y1="-32.5625" x2="31.7256" y2="-26.8896" gradientUnits="userSpaceOnUse">
           <stop offset="0.117757" stop-color="#254A92"></stop>
           <stop offset="0.927091" stop-color="#10B7A6"></stop>
           </linearGradient>
@@ -633,6 +640,8 @@ Button.prototype = {
     // Replace the content of the button with the loading indicator
     $svg.replaceWith(loader);
 
+    $elem.addClass('loading');
+
     // Disable user interactions with the button during the loading process
     $elem.css('pointer-events', 'none');
 
@@ -644,6 +653,8 @@ Button.prototype = {
         $elem.find('.dot-flashing-container').replaceWith(generativeIcon);
       }
 
+      $elem.removeClass('loading');
+
       // Enable user interactions with the button after the loading process is complete
       $elem.css('pointer-events', '');
     }, delay);

diff --git a/src/core/_config.scss b/src/core/_config.scss
@@ -326,6 +326,8 @@ $button-primary-dot-flashing-bg-color-key-one: $ids-color-palette-white;
 $button-primary-dot-flashing-bg-color-key-two: rgba(255, 255, 255, 0.4);
 $button-tertiary-dot-flashing-bg-color-key-one: #0B9789;
 $button-tertiary-dot-flashing-bg-color-key-two: #1A3362;
+$button-tertiary-disabled-icon-color-gen-ai-key-one: #254A92;
+$button-tertiary-disabled-icon-color-gen-ai-key-two: #10B7A6;
 
 // Buttons
 $input-color-border-space: $header-bg-color;

diff --git a/src/themes/theme-new-dark.scss b/src/themes/theme-new-dark.scss
@@ -106,6 +106,15 @@ $button-color-gen-ai: $ids-color-palette-white;
 $button-tertiary-color-gen-ai: linear-gradient(107deg, #10B6A6 17.32%, #10B7A6 95.32%);
 $button-tertiary-hover-color-gen-ai: linear-gradient(107deg, #10B7A6 17.32%, #0B9789 95.32%);
 $button-tertiary-disabled-color-gen-ai: linear-gradient(107deg, rgba(187, 187, 191, 0.50) 17.32%, rgba(187, 187, 191, 0.50) 95.32%);
+$button-gen-ai-active-bg-color: linear-gradient(107deg, #0B9789 5.97%, #1A3362 102.35%);
+$button-tertiary-gradient-color-one: #10B6A6;
+$button-tertiary-gradient-color-two: #10B6A6;
+$button-tertiary-gradient-hover-color-one: #10B7A6;
+$button-tertiary-gradient-hover-color-two: #0B9789;
+$button-tertiary-gradient-active-color-one: #0B9789;
+$button-tertiary-gradient-active-color-two: #1A3362;
+$button-tertiary-disabled-icon-color-gen-ai-key-one: #BBBBBF;
+$button-tertiary-disabled-icon-color-gen-ai-key-two: $button-tertiary-disabled-icon-color-gen-ai-key-one;
 
 // Buttons
 $button-color-secondary-focus-background: $ids-color-palette-slate-10;