From 29c3cdaeb69adfa97dabcc2f1d1a91fae5ccd224 Mon Sep 17 00:00:00 2001
From: Michael Lange <dingoeatingfuzz@gmail.com>
Date: Wed, 29 Jan 2020 10:50:14 -0800
Subject: [PATCH] Disabled button styles

---
 ui/app/styles/core/buttons.scss          | 29 +++++++++++++++++++
 ui/stories/components/buttons.stories.js | 36 +++++++++++++++++++++++-
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/ui/app/styles/core/buttons.scss b/ui/app/styles/core/buttons.scss
index 1ba83b729..1fc5c7a53 100644
--- a/ui/app/styles/core/buttons.scss
+++ b/ui/app/styles/core/buttons.scss
@@ -43,6 +43,17 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
     box-shadow: none;
   }
 
+  &.is-disabled {
+    opacity: 0.7;
+    box-shadow: none;
+    cursor: not-allowed;
+    border-color: transparent;
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+
   @each $name, $pair in $colors {
     $color: nth($pair, 1);
     $color-invert: nth($pair, 2);
@@ -116,6 +127,24 @@ $button-box-shadow-standard: 0 2px 0 0 rgba($grey, 0.2);
           box-shadow: none;
         }
       }
+
+      // The is-disabled styles MUST trump other modifier specificites
+      &.is-disabled {
+        background-color: $color;
+        border-color: darken($color, 5%);
+        box-shadow: none;
+
+        &:hover,
+        &:active,
+        &:focus,
+        &.is-hovered,
+        &.is-active,
+        &.is-focused {
+          background-color: $color;
+          border-color: darken($color, 5%);
+          box-shadow: none;
+        }
+      }
     }
   }
 
diff --git a/ui/stories/components/buttons.stories.js b/ui/stories/components/buttons.stories.js
index 166214572..9c139e5b8 100644
--- a/ui/stories/components/buttons.stories.js
+++ b/ui/stories/components/buttons.stories.js
@@ -75,7 +75,7 @@ export let Sizes = () => {
 export let Disabled = () => {
   return {
     template: hbs`
-      <h5 class="title is-5">Buttons</h5>
+      <h5 class="title is-5">Anchor elements as buttons</h5>
       <div class="block">
         <a class="button is-disabled">Button</a>
         <a class="button is-white is-disabled">White</a>
@@ -91,6 +91,40 @@ export let Disabled = () => {
         <a class="button is-warning is-disabled">Warning</a>
         <a class="button is-danger is-disabled">Danger</a>
       </div>
+
+      <h5 class="title is-5">Button elements with <code>disabled</code> attribute</h5>
+      <div class="block">
+        <button class="button is-disabled" disabled>Button</button>
+        <button class="button is-white is-disabled" disabled>White</button>
+        <button class="button is-light is-disabled" disabled>Light</button>
+        <button class="button is-dark is-disabled" disabled>Dark</button>
+        <button class="button is-black is-disabled" disabled>Black</button>
+        <button class="button is-link is-disabled" disabled>Link</button>
+      </div>
+      <div class="block">
+        <button class="button is-primary is-disabled" disabled>Primary</button>
+        <button class="button is-info is-disabled" disabled>Info</button>
+        <button class="button is-success is-disabled" disabled>Success</button>
+        <button class="button is-warning is-disabled" disabled>Warning</button>
+        <button class="button is-danger is-disabled" disabled>Danger</button>
+      </div>
+
+      <h5 class="title is-5">Button elements with <code>aria-disabled="true"</code></h5>
+      <div class="block">
+        <button class="button is-disabled" aria-disabled="true">Button</button>
+        <button class="button is-white is-disabled" aria-disabled="true">White</button>
+        <button class="button is-light is-disabled" aria-disabled="true">Light</button>
+        <button class="button is-dark is-disabled" aria-disabled="true">Dark</button>
+        <button class="button is-black is-disabled" aria-disabled="true">Black</button>
+        <button class="button is-link is-disabled" aria-disabled="true">Link</button>
+      </div>
+      <div class="block">
+        <button class="button is-primary is-disabled" aria-disabled="true">Primary</button>
+        <button class="button is-info is-disabled" aria-disabled="true">Info</button>
+        <button class="button is-success is-disabled" aria-disabled="true">Success</button>
+        <button class="button is-warning is-disabled" aria-disabled="true">Warning</button>
+        <button class="button is-danger is-disabled" aria-disabled="true">Danger</button>
+      </div>
       `,
   };
 };