From 8adc849d7472af3aaf64b7d4176345983efcdd31 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Mon, 17 Feb 2020 03:19:35 -0800
Subject: [PATCH] fix(button): update icon only ghost button colors (#5313)

* fix(button): update icon only ghost button colors

* fix(ghost-button): update disabled state behavior

* fix(button): remove background when disabled
---
 .../src/components/button/_button.scss        | 25 +++++++++++++++++++
 .../src/components/Button/Button-story.js     |  1 +
 2 files changed, 26 insertions(+)

diff --git a/packages/components/src/components/button/_button.scss b/packages/components/src/components/button/_button.scss
index b13a0867d8f3..ffa7957e0d9d 100644
--- a/packages/components/src/components/button/_button.scss
+++ b/packages/components/src/components/button/_button.scss
@@ -206,6 +206,31 @@
     }
   }
 
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
+    .#{$prefix}--btn__icon
+    path,
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
+    fill: $icon-01;
+  }
+
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
+    .#{$prefix}--btn__icon
+    path,
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
+    .#{$prefix}--btn__icon {
+    fill: $disabled-02;
+  }
+
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] {
+    cursor: not-allowed;
+  }
+
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
+    .#{$prefix}--assistive-text,
+  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]::before {
+    display: none;
+  }
+
   .#{$prefix}--btn--icon-only.#{$prefix}--btn--tertiary {
     padding-left: rem(15px);
     padding-right: rem(15px);
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 8260f1bf0896..bc35f1b3d6da 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -71,6 +71,7 @@ const props = {
           'Primary button (primary)': 'primary',
           'Secondary button (secondary)': 'secondary',
           'Tertiary button (tertiary)': 'tertiary',
+          'Ghost button (ghost)': 'ghost',
         },
         'primary'
       ),