From 1df2ef64d564e7181c891f9549f38bff2ea323e3 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@tujo.no>
Date: Tue, 5 Feb 2019 14:38:26 +0100
Subject: [PATCH] change the way we display the button in the portal. This is
 still WIP, and will be changes overtime to all components.

---
 .../src/pages/uilib/components/accordion.md   |  2 +-
 .../src/pages/uilib/components/button.md      | 33 ++++---------
 .../pages/uilib/components/button/Examples.js | 49 ++++++++-----------
 .../pages/uilib/components/button/demos.md    |  9 ----
 .../{description.md => first-tab-content.md}  |  6 +++
 .../pages/uilib/components/button/index.js    |  0
 .../{details.md => second-tab-content.md}     |  4 ++
 .../components/button/third-tab-content.md    |  9 ++++
 .../customisation/component-properties.md     |  1 -
 .../src/shared/inlineTags/Markup.js           | 21 ++++++++
 .../src/components/button/Button.js           |  2 +-
 .../__snapshots__/Button.test.js.snap         | 23 ++++++---
 .../src/components/button/style/_button.scss  | 19 +++----
 .../components/button/style/dnb-button.scss   | 12 +++++
 .../__snapshots__/Dropdown.test.js.snap       | 23 ++++++---
 .../__snapshots__/InputMasked.test.js.snap    | 23 ++++++---
 .../__snapshots__/Input.test.js.snap          | 23 ++++++---
 .../__snapshots__/Modal.test.js.snap          | 23 ++++++---
 18 files changed, 173 insertions(+), 109 deletions(-)
 delete mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/button/demos.md
 rename packages/dnb-design-system-portal/src/pages/uilib/components/button/{description.md => first-tab-content.md} (78%)
 delete mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/button/index.js
 rename packages/dnb-design-system-portal/src/pages/uilib/components/button/{details.md => second-tab-content.md} (98%)
 create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md
 create mode 100644 packages/dnb-design-system-portal/src/shared/inlineTags/Markup.js

diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md b/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md
index 6c61fad6695..958505e18cd 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/accordion.md
@@ -2,7 +2,7 @@
 title: 'Accordion'
 draft: false
 status: 'wip'
-# order: 1
+order: 1
 ---
 
 import Tabs from 'Tags/Tabs'
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md
index 6b6fe3280b4..730d1e9e1e4 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button.md
@@ -1,40 +1,25 @@
 ---
 title: 'Button'
 draft: false
-status: null
-order: 1
+order: 2
 ---
 
 import Tabs from 'Tags/Tabs'
-import ComponentBox from 'Tags/ComponentBox'
-import Description from 'Pages/uilib/components/button/description'
-import Details from 'Pages/uilib/components/button/details'
-import Demos from 'Pages/uilib/components/button/Examples'
+
+import FirstTabContent from 'Pages/uilib/components/button/first-tab-content'
+import SecondTabContent from 'Pages/uilib/components/button/second-tab-content'
+import ThirdTabContent from 'Pages/uilib/components/button/third-tab-content'
 
 # Button
 
 <Tabs>
   <Tabs.Content>
-    <Description />
-    <h2>Demos</h2>
-    <Demos />
+    <FirstTabContent />
   </Tabs.Content>
   <Tabs.Content>
-    <Details />
-    <ComponentBox caption="Test">
-    {`
-      <Button
-        text="Secondary button with text only 2"
-        variant="secondary"
-        title="This is a button title"
-      />
-    `}
-    </ComponentBox>
+    <SecondTabContent />
   </Tabs.Content>
-  <Tabs.Content title="Markup">
-    <h2>H2</h2>
+  <Tabs.Content>
+    <ThirdTabContent  />
   </Tabs.Content>
 </Tabs>
-
-<!-- import ButtonPage from 'Src/uilib/components/demos/Button' -->
-<!-- <ButtonPage /> -->
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
index 9ed88a30379..d8f165e47b3 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button/Examples.js
@@ -4,7 +4,7 @@
  */
 
 import React, { PureComponent, Fragment } from 'react'
-import styled from '@emotion/styled'
+import ComponentBox from '../../../../shared/inlineTags/ComponentBox'
 import Button from 'dnb-ui-lib/src/components/button'
 import { bell_medium as Bell, question } from 'dnb-ui-lib/src/icons'
 
@@ -13,25 +13,26 @@ class Example extends PureComponent {
     alert('You clicked a button with a click function attached to it')
   }
   render() {
+    console.log('Example')
     return (
       <Fragment>
-        <div className="example-box">
-          <Button
-            text="Primary button with text only"
-            title="This is a button title"
-            on_click={this.clickHandler}
-            attributes={{
-              'data-fake:on_click': 'clickme()'
-            }}
-          />
-        </div>
-        <div className="example-box">
-          <Button
-            text="Secondary button with text only"
-            variant="secondary"
-            title="This is a button title"
-          />
-        </div>
+        <ComponentBox>
+          {`
+<Button
+  text="Primary button with text only"
+  title="This is a button title"
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox>
+          {`
+<Button
+  text="Secondary button with text only"
+  variant="secondary"
+  title="This is a button title"
+/>
+          `}
+        </ComponentBox>
         <div className="example-box">
           <Button
             text="Disabled primary button"
@@ -132,14 +133,4 @@ class Example extends PureComponent {
   }
 }
 
-const Wrapper = styled.div`
-  display: block;
-  width: 100%;
-`
-
-// export { Example }
-export default () => (
-  <Wrapper>
-    <Example />
-  </Wrapper>
-)
+export default Example
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/demos.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/demos.md
deleted file mode 100644
index 5ddbe42b69c..00000000000
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button/demos.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-draft: true
----
-
-import Examples from 'Pages/uilib/components/button/Examples'
-
-# Demos
-
-<Examples />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/description.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/first-tab-content.md
similarity index 78%
rename from packages/dnb-design-system-portal/src/pages/uilib/components/button/description.md
rename to packages/dnb-design-system-portal/src/pages/uilib/components/button/first-tab-content.md
index 8aec0005fa7..aa2f867c11c 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button/description.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button/first-tab-content.md
@@ -2,6 +2,12 @@
 draft: true
 ---
 
+import Examples from 'Pages/uilib/components/button/Examples'
+
 ## Description
 
 The button component should be used as the call-to-action in a form, or as a user interaction mechanism. Generally speaking, a button should not be used when a link would do the trick. Exceptions are made at times when it is used as a navigation element in the `action-nav` element.
+
+## Demos
+
+<Examples />
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/index.js b/packages/dnb-design-system-portal/src/pages/uilib/components/button/index.js
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/details.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/second-tab-content.md
similarity index 98%
rename from packages/dnb-design-system-portal/src/pages/uilib/components/button/details.md
rename to packages/dnb-design-system-portal/src/pages/uilib/components/button/second-tab-content.md
index 090490b2aa3..ff36a08a0ba 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/components/button/details.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button/second-tab-content.md
@@ -2,6 +2,8 @@
 draft: true
 ---
 
+## Properties
+
 | Properties      | Description                                                                                                                            |
 | --------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
 | `type`          | _(optional)_ `button`, `reset` or `submit` for the `type` HTML attribute (default to `button`) .                                       |
@@ -17,6 +19,8 @@ draft: true
 | `attributes`    | _(optional)_ insert any other attributes. For example `disabled` or any other custom attributes.                                       |
 | `href`          | _(optional)_ if you want the button to behave as a link. Use with caution! A link should normally visually be a link and not a button. |
 
+## Events
+
 | Events     | Description                                   |
 | ---------- | --------------------------------------------- |
 | `on_click` | _(optional)_ will be called on a click event. |
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md b/packages/dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md
new file mode 100644
index 00000000000..a8412cc4bbc
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/pages/uilib/components/button/third-tab-content.md
@@ -0,0 +1,9 @@
+---
+draft: true
+---
+
+## Events
+
+| Events     | Description                                   |
+| ---------- | --------------------------------------------- |
+| `on_click` | _(optional)_ will be called on a click event. |
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/component-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/component-properties.md
index 9cbea135d5c..f01ce8c46c5 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/component-properties.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/customisation/component-properties.md
@@ -6,7 +6,6 @@ order: 6
 
 import 'dnb-ui-lib/src/web-components'
 import ComponentBox from 'Tags/ComponentBox'
-import PropertiesExample from 'Pages/uilib/usage/customisation/examples/properties-example'
 
 # Component Properties
 
diff --git a/packages/dnb-design-system-portal/src/shared/inlineTags/Markup.js b/packages/dnb-design-system-portal/src/shared/inlineTags/Markup.js
new file mode 100644
index 00000000000..71a68300a91
--- /dev/null
+++ b/packages/dnb-design-system-portal/src/shared/inlineTags/Markup.js
@@ -0,0 +1,21 @@
+/**
+ * Inline Tag
+ *
+ */
+
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import Code from '../parts/uilib/Code'
+
+export default class Markup extends PureComponent {
+  static propTypes = {
+    children: PropTypes.oneOfType([PropTypes.func, PropTypes.node])
+  }
+  static defaultProps = {
+    children: null
+  }
+  render() {
+    const { children } = this.props
+    return <Code source={children} />
+  }
+}
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
index c6055e953de..29407682135 100644
--- a/packages/dnb-ui-lib/src/components/button/Button.js
+++ b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -194,7 +194,7 @@ export default class Button extends PureComponent {
       ...this.renderProps,
       className: classes,
       type,
-      title: title || text,
+      title,
       id,
       disabled,
       onMouseOut: this.onMouseOutHandler, // for resetting the button to the default state
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 b0abb81688b..99fcaf65cdc 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
@@ -607,6 +607,14 @@ exports[`Button scss have to match snapshot 1`] = `
   .dnb-button ::after {
     text-decoration: inherit;
     vertical-align: inherit; }
+  .dnb-button button {
+    overflow: visible;
+    text-transform: none; }
+  .dnb-button button,
+  .dnb-button [type='button'],
+  .dnb-button [type='reset'],
+  .dnb-button [type='submit'] {
+    -webkit-appearance: button; }
 
 /*
 * Button component
@@ -632,13 +640,11 @@ exports[`Button scss have to match snapshot 1`] = `
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
+  cursor: pointer;
+  white-space: nowrap;
   display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
   width: var(--button-width);
   height: var(--button-height);
   padding: 0;
@@ -649,13 +655,16 @@ exports[`Button scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0; }
+    line-height: 0;
+    /* -1px because of the border width */ }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button__icon {
+        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
   .dnb-button__text {
-    color: inherit;
-    transform: translateY(var(--button-border-width)); }
+    color: inherit; }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
index f8c8f0d6e20..9b32d3c7c08 100644
--- a/packages/dnb-ui-lib/src/components/button/style/_button.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -24,14 +24,13 @@
 }
 
 .dnb-button {
-  display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
-  align-items: center;
-  justify-content: center;
+  cursor: pointer;
   white-space: nowrap;
 
-  cursor: pointer;
+  // we use flex, even if they dont has effect in safari and webkit
+  display: inline-flex;
+  align-items: center; //centering icons
+  justify-content: center; //centering icons
 
   width: var(--button-width);
   height: var(--button-height);
@@ -50,12 +49,14 @@
       width: var(--button-icon-size);
       height: var(--button-icon-size);
     }
+
+    /* -1px because of the border width */
+    @supports not (-ms-ime-align: auto) {
+      transform: translateY(calc(1px - 1px - var(--button-border-width)));
+    }
   }
   &__text {
     color: inherit;
-
-    // +1px because of the border width
-    transform: translateY(var(--button-border-width));
   }
 
   // size small
diff --git a/packages/dnb-ui-lib/src/components/button/style/dnb-button.scss b/packages/dnb-ui-lib/src/components/button/style/dnb-button.scss
index 60f57020a97..43ed0899075 100644
--- a/packages/dnb-ui-lib/src/components/button/style/dnb-button.scss
+++ b/packages/dnb-ui-lib/src/components/button/style/dnb-button.scss
@@ -10,6 +10,18 @@
 
 .dnb-button {
   @include componentReset();
+
+  button {
+    overflow: visible;
+    text-transform: none;
+  }
+
+  button,
+  [type='button'],
+  [type='reset'],
+  [type='submit'] {
+    -webkit-appearance: button;
+  }
 }
 
 @import './_button.scss';
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
index 39da98f884d..fca160f3f8e 100644
--- 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
@@ -377,6 +377,14 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   .dnb-button ::after {
     text-decoration: inherit;
     vertical-align: inherit; }
+  .dnb-button button {
+    overflow: visible;
+    text-transform: none; }
+  .dnb-button button,
+  .dnb-button [type='button'],
+  .dnb-button [type='reset'],
+  .dnb-button [type='submit'] {
+    -webkit-appearance: button; }
 
 /*
 * Button component
@@ -402,13 +410,11 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
+  cursor: pointer;
+  white-space: nowrap;
   display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
   width: var(--button-width);
   height: var(--button-height);
   padding: 0;
@@ -419,13 +425,16 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0; }
+    line-height: 0;
+    /* -1px because of the border width */ }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button__icon {
+        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
   .dnb-button__text {
-    color: inherit;
-    transform: translateY(var(--button-border-width)); }
+    color: inherit; }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
diff --git a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
index 227217fb53b..282152f9dc4 100644
--- a/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap
@@ -234,6 +234,14 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   .dnb-button ::after {
     text-decoration: inherit;
     vertical-align: inherit; }
+  .dnb-button button {
+    overflow: visible;
+    text-transform: none; }
+  .dnb-button button,
+  .dnb-button [type='button'],
+  .dnb-button [type='reset'],
+  .dnb-button [type='submit'] {
+    -webkit-appearance: button; }
 
 /*
 * Button component
@@ -259,13 +267,11 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
+  cursor: pointer;
+  white-space: nowrap;
   display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
   width: var(--button-width);
   height: var(--button-height);
   padding: 0;
@@ -276,13 +282,16 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0; }
+    line-height: 0;
+    /* -1px because of the border width */ }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button__icon {
+        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
   .dnb-button__text {
-    color: inherit;
-    transform: translateY(var(--button-border-width)); }
+    color: inherit; }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
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
index bd682100805..d534e35448e 100644
--- 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
@@ -419,6 +419,14 @@ exports[`Input scss have to match snapshot 1`] = `
   .dnb-button ::after {
     text-decoration: inherit;
     vertical-align: inherit; }
+  .dnb-button button {
+    overflow: visible;
+    text-transform: none; }
+  .dnb-button button,
+  .dnb-button [type='button'],
+  .dnb-button [type='reset'],
+  .dnb-button [type='submit'] {
+    -webkit-appearance: button; }
 
 /*
 * Button component
@@ -444,13 +452,11 @@ exports[`Input scss have to match snapshot 1`] = `
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
+  cursor: pointer;
+  white-space: nowrap;
   display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
   width: var(--button-width);
   height: var(--button-height);
   padding: 0;
@@ -461,13 +467,16 @@ exports[`Input scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0; }
+    line-height: 0;
+    /* -1px because of the border width */ }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button__icon {
+        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
   .dnb-button__text {
-    color: inherit;
-    transform: translateY(var(--button-border-width)); }
+    color: inherit; }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);
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
index 10ad70dbca3..8dc26e02ee3 100644
--- 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
@@ -609,6 +609,14 @@ exports[`Modal scss have to match snapshot 1`] = `
   .dnb-button ::after {
     text-decoration: inherit;
     vertical-align: inherit; }
+  .dnb-button button {
+    overflow: visible;
+    text-transform: none; }
+  .dnb-button button,
+  .dnb-button [type='button'],
+  .dnb-button [type='reset'],
+  .dnb-button [type='submit'] {
+    -webkit-appearance: button; }
 
 /*
 * Button component
@@ -634,13 +642,11 @@ exports[`Modal scss have to match snapshot 1`] = `
   --button-border-radius--large: calc(var(--button-height--large) / 2); }
 
 .dnb-button {
+  cursor: pointer;
+  white-space: nowrap;
   display: inline-flex;
-  vertical-align: middle;
-  align-content: center;
   align-items: center;
   justify-content: center;
-  white-space: nowrap;
-  cursor: pointer;
   width: var(--button-width);
   height: var(--button-height);
   padding: 0;
@@ -651,13 +657,16 @@ exports[`Modal scss have to match snapshot 1`] = `
   text-decoration: none;
   /* Firefox includes a hidden border which messes up button dimensions */ }
   .dnb-button__icon {
-    line-height: 0; }
+    line-height: 0;
+    /* -1px because of the border width */ }
     .dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
       width: var(--button-icon-size);
       height: var(--button-icon-size); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button__icon {
+        transform: translateY(calc(1px - 1px - var(--button-border-width))); } }
   .dnb-button__text {
-    color: inherit;
-    transform: translateY(var(--button-border-width)); }
+    color: inherit; }
   .dnb-button--size-small {
     width: var(--button-width--small);
     height: var(--button-height--small);