From 04ae1e92d0b1c7bec5d785d4b5b9e39de060be60 Mon Sep 17 00:00:00 2001
From: Jan Hassel <jan.hassel@ibm.com>
Date: Mon, 23 Mar 2020 21:16:55 +0100
Subject: [PATCH] fix(button): prevent hover on disabled buttons in g90/g100
 theme (#5678)

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 packages/components/docs/sass.md              | 22 +++++--------------
 .../src/components/button/_mixins.scss        | 18 +++++----------
 2 files changed, 12 insertions(+), 28 deletions(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index 8e757ecf3b95..39ad795ba729 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -6247,7 +6247,6 @@ $ui-04: if(
 - **Type**: `{undefined}`
 - **Used by**:
   - [carbon--theme [mixin]](#carbon--theme-mixin)
-  - [button-theme [mixin]](#button-theme-mixin)
   - [date-picker [mixin]](#date-picker-mixin)
   - [dropdown [mixin]](#dropdown-mixin)
   - [file-uploader [mixin]](#file-uploader-mixin)
@@ -7637,7 +7636,6 @@ $disabled-02: if(
   - [carbon--theme [mixin]](#carbon--theme-mixin)
   - [button [mixin]](#button-mixin)
   - [button-base [mixin]](#button-base-mixin)
-  - [button-theme [mixin]](#button-theme-mixin)
   - [checkbox [mixin]](#checkbox-mixin)
   - [combo-box [mixin]](#combo-box-mixin)
   - [content-switcher [mixin]](#content-switcher-mixin)
@@ -13179,11 +13177,16 @@ Button base styles
   margin: 0;
 
   &:disabled,
-  &.#{$prefix}--btn--disabled {
+  &:hover:disabled,
+  &:focus:disabled,
+  &.#{$prefix}--btn--disabled,
+  &.#{$prefix}--btn--disabled:hover,
+  &.#{$prefix}--btn--disabled:focus {
     cursor: not-allowed;
     color: $disabled-03;
     background: $disabled-02;
     border-color: $disabled-02;
+    box-shadow: none;
   }
 
   .#{$prefix}--btn__icon {
@@ -13231,17 +13234,6 @@ Button variant styles
         ($button-border-width + $button-outline-width) $ui-02;
   }
 
-  &:disabled:hover,
-  &:disabled:focus,
-  &:hover.#{$prefix}--btn--disabled,
-  &:focus.#{$prefix}--btn--disabled {
-    color: $ui-04;
-    background-color: $disabled-02;
-    border-color: $disabled-02;
-    text-decoration: none;
-    box-shadow: none;
-  }
-
   &:active {
     background-color: $active-color;
   }
@@ -13260,8 +13252,6 @@ Button variant styles
   - [focus [variable]](#focus-variable)
   - [ui-02 [variable]](#ui-02-variable)
   - [prefix [variable]](#prefix-variable)
-  - [ui-04 [variable]](#ui-04-variable)
-  - [disabled-02 [variable]](#disabled-02-variable)
 - **Used by**:
   - [button [mixin]](#button-mixin)
 
diff --git a/packages/components/src/components/button/_mixins.scss b/packages/components/src/components/button/_mixins.scss
index f6badb662162..8b347bcc7f7d 100644
--- a/packages/components/src/components/button/_mixins.scss
+++ b/packages/components/src/components/button/_mixins.scss
@@ -33,11 +33,16 @@
   margin: 0;
 
   &:disabled,
-  &.#{$prefix}--btn--disabled {
+  &:hover:disabled,
+  &:focus:disabled,
+  &.#{$prefix}--btn--disabled,
+  &.#{$prefix}--btn--disabled:hover,
+  &.#{$prefix}--btn--disabled:focus {
     cursor: not-allowed;
     color: $disabled-03;
     background: $disabled-02;
     border-color: $disabled-02;
+    box-shadow: none;
   }
 
   .#{$prefix}--btn__icon {
@@ -77,17 +82,6 @@
     inset 0 0 0 ($button-border-width + $button-outline-width) $ui-02;
   }
 
-  &:disabled:hover,
-  &:disabled:focus,
-  &:hover.#{$prefix}--btn--disabled,
-  &:focus.#{$prefix}--btn--disabled {
-    color: $ui-04;
-    background-color: $disabled-02;
-    border-color: $disabled-02;
-    text-decoration: none;
-    box-shadow: none;
-  }
-
   &:active {
     background-color: $active-color;
   }