Merge pull request #9648 from IamManchanda/hotfix/disabled-buttons

Bug Fix #9617 - Disables hover focus on button disabled

diff --git a/docs/pages/button.md b/docs/pages/button.md
index 6af5afed8371a2b3dd4af32e72d96bbde9c9b185..1b7318adf62ba0688c89342f669b38a8eee19a44 100644 (file)
--- a/docs/pages/button.md
+++ b/docs/pages/button.md
@@ -107,8 +107,12 @@ The `.disabled` class will give buttons a faded appearance. The class is a purel
 
 
 ```html_example
-<button type="button" class="button" disabled>Disabled</button>
 <a class="button disabled" href="#" aria-disabled>Disabled</a>
+<button type="button" class="button primary" disabled>Disabled</button>
+<button type="button" class="button secondary" disabled>Disabled</button>
+<button type="button" class="button success" disabled>Disabled</button>
+<button type="button" class="button alert" disabled>Disabled</button>
+<button type="button" class="button warning" disabled>Disabled</button>
 ```
 
 ---

diff --git a/scss/components/_button.scss b/scss/components/_button.scss
index 0d7945be17a68e7b9f0d904df4125424cc4626a5..032e71c6d7f9f517e94486a77b934be9bd41b87e 100644 (file)
--- a/scss/components/_button.scss
+++ b/scss/components/_button.scss
@@ -158,13 +158,22 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 }
 
 /// Adds disabled styles to a button by fading the element, reseting the cursor, and disabling pointer events.
-@mixin button-disabled($color: $primary-color) {
+/// @param [Color] $background [$primary-color] - Background color of the disabled button.
+/// @param [Color] $color [$button-color] - Text color of the disabled button. Set to `auto` to have the mixin automatically generate a color based on the background color.
+@mixin button-disabled(
+  $background: $primary-color,
+  $color: $button-color
+) {
+  @if $color == auto {
+    $color: color-pick-contrast($background, ($button-color, $button-color-alt));
+  }
+
   opacity: $button-opacity-disabled;
   cursor: not-allowed;
 
-  &:hover, &:focus {
-    background-color: $color;
-    color: $button-color;
+  &, &:hover, &:focus {
+    background-color: $background;
+    color: $color;
   }
 }
 
@@ -268,7 +277,7 @@ $button-transition: background-color 0.25s ease-out, color 0.25s ease-out !defau
 
       @each $name, $color in $button-palette {
         &.#{$name} {
-          @include button-disabled($color);
+          @include button-disabled($color, auto);
         }
       }
     }