From 7f06de400c02d997fc994af29790b5298792f274 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Tue, 22 Jan 2019 13:38:36 +0100
Subject: [PATCH] fix: only style the icon only button when it is not disabled

---
 .../src/components/button/Example.js          | 19 +++++++++++++++----
 .../__snapshots__/Button.test.js.snap         |  4 ++--
 .../style/themes/dnb-button-theme-ui.scss     |  4 ++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/dnb-ui-lib/src/components/button/Example.js b/packages/dnb-ui-lib/src/components/button/Example.js
index f9322a9c3d9..cbc142867e7 100644
--- a/packages/dnb-ui-lib/src/components/button/Example.js
+++ b/packages/dnb-ui-lib/src/components/button/Example.js
@@ -91,11 +91,22 @@ class Example extends PureComponent {
           />
         </div>
         <div className="example-box">
-          <Button title="Button with Icon only" icon={question} />
-          <p className="example-caption">Button with Icon only</p>
-        </div>
-        <div className="example-box">
+          <Button
+            title="Disabled Icon only Button"
+            icon="calendar"
+            disabled
+          />
           <Button title="Button with Icon only" icon="calendar" />
+          <Button
+            title="Medium Button with Icon only"
+            icon="calendar"
+            icon_size="medium"
+            size="medium"
+          />
+          <Button
+            title="Button with custom, Secondary Icon only"
+            icon={question}
+          />
           <p className="example-caption">Button with Icon only</p>
         </div>
         <div className="example-box">
diff --git a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
index fd0e06fddab..e3e952d21be 100644
--- a/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap
@@ -277,7 +277,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
 * Button mixins
 *
 */
-.dnb-button--secondary:not(.dnb-button--has-text) .dnb-button__icon {
+.dnb-button--secondary:not([disabled]):not(.dnb-button--has-text) .dnb-button__icon {
   color: var(--color-emerald-green); }
 
 .dnb-button--primary {
@@ -342,7 +342,7 @@ exports[`Button scss have to match default theme snapshot 1`] = `
   .dnb-button--tertiary.dnb-button--has-text {
     padding-left: 0.5em;
     padding-right: 0.5em; }
-    .dnb-button--tertiary.dnb-button--has-text .dnb-button__icon {
+    .dnb-button--tertiary.dnb-button--has-text:not([disabled]) .dnb-button__icon {
       margin: 0 0.5em; }
     .dnb-button--tertiary.dnb-button--has-text.dnb-button--icon-position-left .dnb-button__icon {
       margin-left: 0; }
diff --git a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
index 9d103adb937..b653f61c1b9 100644
--- a/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/themes/dnb-button-theme-ui.scss
@@ -7,7 +7,7 @@
 @import '../_button-mixins.scss';
 
 .dnb-button {
-  &--secondary:not(.dnb-button--has-text) &__icon {
+  &--secondary:not([disabled]):not(.dnb-button--has-text) &__icon {
     color: var(--color-emerald-green);
   }
 }
@@ -53,7 +53,7 @@
   &.dnb-button--has-text {
     padding-left: 0.5em;
     padding-right: 0.5em;
-    .dnb-button__icon {
+    &:not([disabled]) .dnb-button__icon {
       margin: 0 0.5em;
     }
     &.dnb-button--icon-position-left .dnb-button__icon {