fix: only style the icon only button when it is not disabled

dnbexperience · Jan 22, 2019 · 7f06de4 · 7f06de4
1 parent 249c908
commit 7f06de4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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 {