fix: html element spacing correction

dnbexperience · Apr 15, 2019 · be5bc3b · be5bc3b
1 parent 6fccb3c
commit be5bc3b
Show file tree

Hide file tree

Showing 15 changed files with 287 additions and 213 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
@@ -661,21 +661,28 @@ exports[`Button scss have to match snapshot 1`] = `
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
-a.dnb-button {
+a.dnb-button[type='button'] {
   -webkit-appearance: none; }
-  a.dnb-button .dnb-button__icon {
-    transform: translateY(0); }
-  a.dnb-button .dnb-button__text {
-    transform: translateY(1px); }
-  a.dnb-button:hover {
-    border-radius: var(--button-border-radius); }
-  a.dnb-button--size-small, a.dnb-button--size-small:hover {
-    border-radius: var(--button-border-radius--small); }
-  a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
-    border-radius: var(--button-border-radius--medium); }
-  a.dnb-button--size-large, a.dnb-button--size-large:hover {
-    border-radius: var(--button-border-radius--large); }
-  a.dnb-button:active, a.dnb-button:focus {
-    border-radius: var(--button-border-radius); }
+
+a.dnb-button .dnb-button__icon {
+  transform: translateY(0); }
+
+a.dnb-button .dnb-button__text {
+  transform: translateY(1px); }
+
+a.dnb-button:hover {
+  border-radius: var(--button-border-radius); }
+
+a.dnb-button--size-small, a.dnb-button--size-small:hover {
+  border-radius: var(--button-border-radius--small); }
+
+a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
+  border-radius: var(--button-border-radius--medium); }
+
+a.dnb-button--size-large, a.dnb-button--size-large:hover {
+  border-radius: var(--button-border-radius--large); }
+
+a.dnb-button:active, a.dnb-button:focus {
+  border-radius: var(--button-border-radius); }
 "
 `;
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -211,7 +211,9 @@
 
 // make sure we style an Anchor like a button
 a.dnb-button {
-  -webkit-appearance: none; // because we have "appearance: button" in reset.scss
+  &[type='button'] {
+    -webkit-appearance: none; // because we have "appearance: button" in reset.scss
+  }
 
   // some correction
   .dnb-button__icon {

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap b/packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap
@@ -265,8 +265,7 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = `
       border-color: transparent; }
     .dnb-dropdown__option--selected {
       color: var(--dropdown-option-color--selected);
-      background-color: var(--dropdown-option-background-color--selected);
-      display: flex; }
+      background-color: var(--dropdown-option-background-color--selected); }
       .dnb-dropdown__option--selected .dnb-dropdown__option__inner {
         color: inherit;
         background-color: inherit; }
@@ -282,9 +281,8 @@ exports[`Dropdown scss have to match default theme snapshot 1`] = `
         content: '';
         position: absolute;
         z-index: 1;
+        top: calc(50% - 0.5rem);
         right: 1rem;
-        align-self: center;
-        justify-content: flex-end;
         width: 1rem;
         height: 1rem;
         background-size: cover;

diff --git a/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss b/packages/dnb-ui-lib/src/components/dropdown/style/themes/dnb-dropdown-theme-ui.scss
@@ -95,16 +95,13 @@
         }
       }
 
-      display: flex;
       &::after {
         content: '';
         position: absolute;
         z-index: 1;
+        top: calc(50% - 0.5rem);
         right: 1rem;
 
-        align-self: center;
-        justify-content: flex-end;
-
         width: 1rem;
         height: 1rem;
 

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
@@ -378,22 +378,29 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
-a.dnb-button {
+a.dnb-button[type='button'] {
   -webkit-appearance: none; }
-  a.dnb-button .dnb-button__icon {
-    transform: translateY(0); }
-  a.dnb-button .dnb-button__text {
-    transform: translateY(1px); }
-  a.dnb-button:hover {
-    border-radius: var(--button-border-radius); }
-  a.dnb-button--size-small, a.dnb-button--size-small:hover {
-    border-radius: var(--button-border-radius--small); }
-  a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
-    border-radius: var(--button-border-radius--medium); }
-  a.dnb-button--size-large, a.dnb-button--size-large:hover {
-    border-radius: var(--button-border-radius--large); }
-  a.dnb-button:active, a.dnb-button:focus {
-    border-radius: var(--button-border-radius); }
+
+a.dnb-button .dnb-button__icon {
+  transform: translateY(0); }
+
+a.dnb-button .dnb-button__text {
+  transform: translateY(1px); }
+
+a.dnb-button:hover {
+  border-radius: var(--button-border-radius); }
+
+a.dnb-button--size-small, a.dnb-button--size-small:hover {
+  border-radius: var(--button-border-radius--small); }
+
+a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
+  border-radius: var(--button-border-radius--medium); }
+
+a.dnb-button--size-large, a.dnb-button--size-large:hover {
+  border-radius: var(--button-border-radius--large); }
+
+a.dnb-button:active, a.dnb-button:focus {
+  border-radius: var(--button-border-radius); }
 
 /*
 * DNB FormLabel

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
@@ -703,22 +703,29 @@ exports[`Input scss have to match snapshot 1`] = `
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
-a.dnb-button {
+a.dnb-button[type='button'] {
   -webkit-appearance: none; }
-  a.dnb-button .dnb-button__icon {
-    transform: translateY(0); }
-  a.dnb-button .dnb-button__text {
-    transform: translateY(1px); }
-  a.dnb-button:hover {
-    border-radius: var(--button-border-radius); }
-  a.dnb-button--size-small, a.dnb-button--size-small:hover {
-    border-radius: var(--button-border-radius--small); }
-  a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
-    border-radius: var(--button-border-radius--medium); }
-  a.dnb-button--size-large, a.dnb-button--size-large:hover {
-    border-radius: var(--button-border-radius--large); }
-  a.dnb-button:active, a.dnb-button:focus {
-    border-radius: var(--button-border-radius); }
+
+a.dnb-button .dnb-button__icon {
+  transform: translateY(0); }
+
+a.dnb-button .dnb-button__text {
+  transform: translateY(1px); }
+
+a.dnb-button:hover {
+  border-radius: var(--button-border-radius); }
+
+a.dnb-button--size-small, a.dnb-button--size-small:hover {
+  border-radius: var(--button-border-radius--small); }
+
+a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
+  border-radius: var(--button-border-radius--medium); }
+
+a.dnb-button--size-large, a.dnb-button--size-large:hover {
+  border-radius: var(--button-border-radius--large); }
+
+a.dnb-button:active, a.dnb-button:focus {
+  border-radius: var(--button-border-radius); }
 
 /*
 * DNB FormLabel

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
@@ -754,22 +754,29 @@ exports[`Modal scss have to match snapshot 1`] = `
   button.dnb-button::-moz-focus-inner .dnb-button {
     border: none; }
 
-a.dnb-button {
+a.dnb-button[type='button'] {
   -webkit-appearance: none; }
-  a.dnb-button .dnb-button__icon {
-    transform: translateY(0); }
-  a.dnb-button .dnb-button__text {
-    transform: translateY(1px); }
-  a.dnb-button:hover {
-    border-radius: var(--button-border-radius); }
-  a.dnb-button--size-small, a.dnb-button--size-small:hover {
-    border-radius: var(--button-border-radius--small); }
-  a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
-    border-radius: var(--button-border-radius--medium); }
-  a.dnb-button--size-large, a.dnb-button--size-large:hover {
-    border-radius: var(--button-border-radius--large); }
-  a.dnb-button:active, a.dnb-button:focus {
-    border-radius: var(--button-border-radius); }
+
+a.dnb-button .dnb-button__icon {
+  transform: translateY(0); }
+
+a.dnb-button .dnb-button__text {
+  transform: translateY(1px); }
+
+a.dnb-button:hover {
+  border-radius: var(--button-border-radius); }
+
+a.dnb-button--size-small, a.dnb-button--size-small:hover {
+  border-radius: var(--button-border-radius--small); }
+
+a.dnb-button--size-medium, a.dnb-button--size-medium:hover {
+  border-radius: var(--button-border-radius--medium); }
+
+a.dnb-button--size-large, a.dnb-button--size-large:hover {
+  border-radius: var(--button-border-radius--large); }
+
+a.dnb-button:active, a.dnb-button:focus {
+  border-radius: var(--button-border-radius); }
 
 .dnb-modal {
   font-family: var(--font-family-default);

diff --git a/packages/dnb-ui-lib/src/style/core/reset.scss b/packages/dnb-ui-lib/src/style/core/reset.scss
@@ -123,14 +123,6 @@
   /* Text-level semantics
    */
 
-  /**
-   * Remove the gray background on active links in IE 10.
-   */
-
-  a {
-    background-color: transparent;
-  }
-
   /**
    * Add the correct text decoration in Edge, IE, Opera, and Safari.
    */

diff --git a/...ading-screenshot-have-to-match-the-additional-heading-examples-1-dfc56.snap.png b/...ading-screenshot-have-to-match-the-additional-heading-examples-1-dfc56.snap.png
diff --git a/packages/dnb-ui-lib/src/style/elements/typography.scss b/packages/dnb-ui-lib/src/style/elements/typography.scss
@@ -32,6 +32,9 @@
   & > small {
     font-size: var(--font-size-x-default); // 20px
   }
+  & > small {
+    line-height: 1.875rem; // 30px
+  }
 }
 @mixin h3Style() {
   font-family: var(--font-family-demi);
@@ -43,16 +46,28 @@
   & > small {
     font-size: var(--font-size-default); // 16px
   }
+  & > small {
+    line-height: 1.75rem; // 28px
+  }
 }
 @mixin h4Style() {
   font-size: var(--font-size-default); // 16px
+  & > small {
+    line-height: 1.375rem; // 22px
+  }
 }
 @mixin h5Style() {
   font-size: var(--font-size-small); // 14px
+  & > small {
+    line-height: 1.25rem; // 20px
+  }
 }
 @mixin h6Style() {
   font-size: var(--font-size-small); // 14px
   font-weight: var(--font-weight-book);
+  & > small {
+    line-height: 1.25rem; // 20px
+  }
 }
 @mixin paragraphStyle() {
   // if we not reset margin, the browser is using: margin-block-end: 1rem;
@@ -129,63 +144,35 @@
     line-height: 1em; // for vertical alignment, we have to have no line-height
   }
   .dnb-spacing {
-    h1,
-    .dnb-core-style h1 {
+    .dnb-h1,
+    .dnb-core-style .dnb-h1 {
       @include h1Spacing();
     }
-    h2,
-    .dnb-core-style h2 {
+    .dnb-h2,
+    .dnb-core-style .dnb-h2 {
       @include h2Spacing();
     }
-    h3,
-    h4,
-    h5,
-    h6,
-    .dnb-core-style h3,
-    .dnb-core-style h4,
-    .dnb-core-style h5,
-    .dnb-core-style h6 {
+    .dnb-h3,
+    .dnb-h4,
+    .dnb-h5,
+    .dnb-h6,
+    .dnb-core-style .dnb-h3,
+    .dnb-core-style .dnb-h4,
+    .dnb-core-style .dnb-h5,
+    .dnb-core-style .dnb-h6 {
       @include headingSpacing();
     }
-    p,
-    .dnb-core-style p {
+    .dnb-p,
+    .dnb-core-style .dnb-p {
       @include defaultSpacing();
     }
   }
 }
 
-.dnb-h1,
-.dnb-h2,
-.dnb-h3,
-.dnb-lead,
-.dnb-h4,
-.dnb-h5,
-.dnb-h6,
-// make exception on headings wtich are inside of dnb-core-style
-.dnb-core-style h1,
-.dnb-core-style h2,
-.dnb-core-style h3,
-.dnb-core-style h4,
-.dnb-core-style h5,
-.dnb-core-style h6 {
-  @include headingsStyle();
-}
-
 .dnb-small {
   font-size: var(--font-size-small); // 14px
 }
 
-// do not set this for h1, like ".dnb-h1 > .dnb-small"
-.dnb-p > small,
-.dnb-p > .dnb-small,
-.dnb-h2 > .dnb-small,
-.dnb-h3 > .dnb-small,
-.dnb-h4 > .dnb-small,
-.dnb-h5 > .dnb-small,
-.dnb-h6 > .dnb-small {
-  line-height: 1em; // for vertical alignment, we have to have no line-height
-}
-
 .dnb-h1 {
   @include h1Style();
 }
@@ -211,6 +198,34 @@
   @include h6Style();
 }
 
+.dnb-h1,
+.dnb-h2,
+.dnb-h3,
+.dnb-lead,
+.dnb-h4,
+.dnb-h5,
+.dnb-h6,
+// make exception on headings wtich are inside of dnb-core-style
+.dnb-core-style .dnb-h1,
+.dnb-core-style .dnb-h2,
+.dnb-core-style .dnb-h3,
+.dnb-core-style .dnb-h4,
+.dnb-core-style .dnb-h5,
+.dnb-core-style .dnb-h6 {
+  @include headingsStyle();
+}
+
+// do not set this for h1, like ".dnb-h1 > .dnb-small"
+.dnb-p > small,
+.dnb-p > .dnb-small,
+.dnb-h2 > .dnb-small,
+.dnb-h3 > .dnb-small,
+.dnb-h4 > .dnb-small,
+.dnb-h5 > .dnb-small,
+.dnb-h6 > .dnb-small {
+  line-height: 1em; // for vertical alignment, we have to have no line-height
+}
+
 .dnb-p {
   @include paragraphStyle();
   b,