fix: enhance line-height handling on #button and #input reset

dnbexperience · May 6, 2019 · 6d5f0b0 · 6d5f0b0
1 parent ad9475b
commit 6d5f0b0
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 18 deletions.
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
@@ -563,10 +563,12 @@ exports[`Button scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-size: var(--button-font-size);
-  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
+  .dnb-button,
+  .dnb-core-style .dnb-button {
+    font-size: var(--button-font-size);
+    line-height: var(--button-height); }
   .dnb-button__icon {
     line-height: 1em; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -39,8 +39,11 @@
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
 
-  font-size: var(--button-font-size);
-  line-height: var(--button-height);
+  &,
+  .dnb-core-style & {
+    font-size: var(--button-font-size);
+    line-height: var(--button-height);
+  }
   text-decoration: none;
 
   &__icon {

diff --git a/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/...s/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -282,10 +282,12 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-size: var(--button-font-size);
-  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
+  .dnb-button,
+  .dnb-core-style .dnb-button {
+    font-size: var(--button-font-size);
+    line-height: var(--button-height); }
   .dnb-button__icon {
     line-height: 1em; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
@@ -629,8 +631,7 @@ a.dnb-button:active, a.dnb-button:focus {
   align-items: flex-start;
   vertical-align: middle;
   width: auto;
-  font-size: var(--input-font-size);
-  font-weight: var(--font-weight-default); }
+  font-size: var(--input-font-size); }
   .dnb-input__shell {
     position: relative;
     display: flex;
@@ -653,7 +654,7 @@ a.dnb-button:active, a.dnb-button:focus {
     padding: var(--input-padding);
     text-align: left;
     color: inherit;
-    font-size: var(--input-font-size);
+    font-size: inherit;
     line-height: 1em;
     background-color: transparent;
     transform: translateY(var(--input-border-width)); }

diff --git a/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap b/packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap
@@ -663,10 +663,12 @@ exports[`Input scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-size: var(--button-font-size);
-  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
+  .dnb-button,
+  .dnb-core-style .dnb-button {
+    font-size: var(--button-font-size);
+    line-height: var(--button-height); }
   .dnb-button__icon {
     line-height: 1em; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
@@ -1010,8 +1012,7 @@ a.dnb-button:active, a.dnb-button:focus {
   align-items: flex-start;
   vertical-align: middle;
   width: auto;
-  font-size: var(--input-font-size);
-  font-weight: var(--font-weight-default); }
+  font-size: var(--input-font-size); }
   .dnb-input__shell {
     position: relative;
     display: flex;
@@ -1034,7 +1035,7 @@ a.dnb-button:active, a.dnb-button:focus {
     padding: var(--input-padding);
     text-align: left;
     color: inherit;
-    font-size: var(--input-font-size);
+    font-size: inherit;
     line-height: 1em;
     background-color: transparent;
     transform: translateY(var(--input-border-width)); }

diff --git a/packages/dnb-ui-lib/src/components/input/style/_input.scss b/packages/dnb-ui-lib/src/components/input/style/_input.scss
@@ -28,7 +28,6 @@
   width: auto;
 
   font-size: var(--input-font-size);
-  font-weight: var(--font-weight-default);
 
   &__shell {
     position: relative;
@@ -67,7 +66,7 @@
     text-align: left;
 
     color: inherit;
-    font-size: var(--input-font-size);
+    font-size: inherit;
     line-height: 1em; // because when ::selected is kikking in
     background-color: transparent;
 

diff --git a/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -648,10 +648,12 @@ exports[`Modal scss have to match snapshot 1`] = `
   padding: 0;
   border: var(--button-border-width) solid transparent;
   border-radius: var(--button-border-radius);
-  font-size: var(--button-font-size);
-  line-height: var(--button-height);
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
+  .dnb-button,
+  .dnb-core-style .dnb-button {
+    font-size: var(--button-font-size);
+    line-height: var(--button-height); }
   .dnb-button__icon {
     line-height: 1em; }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {