fix: center icons in #button component

packages/dnb-ui-lib/jest.config.js

@@ -3,7 +3,7 @@ const config = {
   testURL: 'http://localhost',
   moduleFileExtensions: ['js', 'json', 'scss', 'css'],
   testRegex: '(/__tests__/\\.js|(\\.|/)(test|spec))\\.js?$',
-  modulePathIgnorePatterns: ['not_in_use', '/dist/'],
+  modulePathIgnorePatterns: ['not_in_use', '/dist/', 'screenshot'],
   transformIgnorePatterns: ['node_modules'],
   transform: {
     '^.+\\.(js|jsx)$': 'babel-jest',

packages/dnb-ui-lib/src/components/button/__tests__/Button.screenshot.test.js

@@ -0,0 +1,28 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we dont require any related files
+ */
+
+import {
+  setupPageScreenshot,
+  testPageScreenshot
+} from '../../../core/jest/jestSetup'
+
+describe('Button screenshot', () => {
+  setupPageScreenshot()
+  it('have to match the "dnb-button--primary" screenshot snapshot', async () => {
+    const screenshot = await testPageScreenshot({
+      url: '/uilib/components/button?fullscreen',
+      selector: '.example-box .dnb-button.dnb-button--primary:nth-child(1)'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+  it('have to match the "dnb-button--secondary" screenshot snapshot', async () => {
+    const screenshot = await testPageScreenshot({
+      url: '/uilib/components/button?fullscreen',
+      selector:
+        '.example-box .dnb-button.dnb-button--secondary:nth-child(1)'
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/Button.test.js.snap

@@ -674,9 +674,6 @@ exports[`Button scss have to match snapshot 1`] = `
     .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(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -721,8 +718,10 @@ exports[`Button scss have to match snapshot 1`] = `
     padding-right: 1.5rem;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
-    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button--has-text .dnb-button__icon {
+        transform: translateY(-1px); } }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5rem; }
   .dnb-button--has-text.dnb-button--icon-position-right {

packages/dnb-ui-lib/src/components/button/style/_button.scss

@@ -49,10 +49,6 @@
       width: var(--button-icon-size);
       height: var(--button-icon-size);
     }
-
-    @supports not (-ms-ime-align: auto) {
-      transform: translateY(-1px);
-    }
   }
   &__text {
     color: inherit;
@@ -120,8 +116,10 @@
     width: auto;
   }
   &--has-text &__icon {
-    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2);
+    @supports not (-ms-ime-align: auto) {
+      transform: translateY(-1px);
+    }
   }
   // &--has-text#{&}--size-large &__icon {
   //   margin: 0 var(--button-icon-size);

packages/dnb-ui-lib/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.js.snap

@@ -429,9 +429,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     .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(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -476,8 +473,10 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     padding-right: 1.5rem;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
-    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button--has-text .dnb-button__icon {
+        transform: translateY(-1px); } }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5rem; }
   .dnb-button--has-text.dnb-button--icon-position-right {

packages/dnb-ui-lib/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.js.snap

@@ -286,9 +286,6 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     .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(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -333,8 +330,10 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     padding-right: 1.5rem;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
-    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button--has-text .dnb-button__icon {
+        transform: translateY(-1px); } }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5rem; }
   .dnb-button--has-text.dnb-button--icon-position-right {

packages/dnb-ui-lib/src/components/input/__tests__/__snapshots__/Input.test.js.snap

@@ -475,9 +475,6 @@ exports[`Input scss have to match snapshot 1`] = `
     .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(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -522,8 +519,10 @@ exports[`Input scss have to match snapshot 1`] = `
     padding-right: 1.5rem;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
-    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button--has-text .dnb-button__icon {
+        transform: translateY(-1px); } }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5rem; }
   .dnb-button--has-text.dnb-button--icon-position-right {

packages/dnb-ui-lib/src/components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -661,9 +661,6 @@ exports[`Modal scss have to match snapshot 1`] = `
     .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(-1px); } }
   .dnb-button__text {
     color: inherit; }
   .dnb-button--size-small {
@@ -708,8 +705,10 @@ exports[`Modal scss have to match snapshot 1`] = `
     padding-right: 1.5rem;
     width: auto; }
   .dnb-button--has-text .dnb-button__icon {
-    margin: 0 0.5rem;
     margin: 0 calc(var(--button-icon-size) / 2); }
+    @supports not (-ms-ime-align: auto) {
+      .dnb-button--has-text .dnb-button__icon {
+        transform: translateY(-1px); } }
   .dnb-button--has-text.dnb-button--icon-position-left {
     padding-left: 0.5rem; }
   .dnb-button--has-text.dnb-button--icon-position-right {

packages/dnb-ui-lib/src/components/step-indicator/__tests__/StepIndicator.screenshot.test.js

@@ -11,10 +11,10 @@ import {
 describe('StepIndicator screenshot', () => {
   setupPageScreenshot()
   it('have to match the screenshot snapshot', async () => {
-    const element = await testPageScreenshot({
+    const screenshot = await testPageScreenshot({
       url: '/uilib/components/step-indicator?fullscreen',
       selector: '.dnb-step-indicator:nth-child(1)'
     })
-    expect(element).toMatchImageSnapshot()
+    expect(screenshot).toMatchImageSnapshot()
   })
 })