Skip to content

Commit 4682edd

Browse files
tujoworkertujoworker
committed
fix: center icons in #button component
1 parent 301bf1d commit 4682edd

11 files changed

Lines changed: 49 additions & 28 deletions

File tree

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const config = {
33
testURL: 'http://localhost',
44
moduleFileExtensions: ['js', 'json', 'scss', 'css'],
55
testRegex: '(/__tests__/\\.js|(\\.|/)(test|spec))\\.js?$',
6-
modulePathIgnorePatterns: ['not_in_use', '/dist/'],
6+
modulePathIgnorePatterns: ['not_in_use', '/dist/', 'screenshot'],
77
transformIgnorePatterns: ['node_modules'],
88
transform: {
99
'^.+\\.(js|jsx)$': 'babel-jest',

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Screenshot Test
3+
* This file will not run on "test:staged" because we dont require any related files
4+
*/
5+
6+
import {
7+
setupPageScreenshot,
8+
testPageScreenshot
9+
} from '../../../core/jest/jestSetup'
10+
11+
describe('Button screenshot', () => {
12+
setupPageScreenshot()
13+
it('have to match the "dnb-button--primary" screenshot snapshot', async () => {
14+
const screenshot = await testPageScreenshot({
15+
url: '/uilib/components/button?fullscreen',
16+
selector: '.example-box .dnb-button.dnb-button--primary:nth-child(1)'
17+
})
18+
expect(screenshot).toMatchImageSnapshot()
19+
})
20+
it('have to match the "dnb-button--secondary" screenshot snapshot', async () => {
21+
const screenshot = await testPageScreenshot({
22+
url: '/uilib/components/button?fullscreen',
23+
selector:
24+
'.example-box .dnb-button.dnb-button--secondary:nth-child(1)'
25+
})
26+
expect(screenshot).toMatchImageSnapshot()
27+
})
28+
})

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -674,9 +674,6 @@ exports[`Button scss have to match snapshot 1`] = `
674674
.dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
675675
width: var(--button-icon-size);
676676
height: var(--button-icon-size); }
677-
@supports not (-ms-ime-align: auto) {
678-
.dnb-button__icon {
679-
transform: translateY(-1px); } }
680677
.dnb-button__text {
681678
color: inherit; }
682679
.dnb-button--size-small {
@@ -721,8 +718,10 @@ exports[`Button scss have to match snapshot 1`] = `
721718
padding-right: 1.5rem;
722719
width: auto; }
723720
.dnb-button--has-text .dnb-button__icon {
724-
margin: 0 0.5rem;
725721
margin: 0 calc(var(--button-icon-size) / 2); }
722+
@supports not (-ms-ime-align: auto) {
723+
.dnb-button--has-text .dnb-button__icon {
724+
transform: translateY(-1px); } }
726725
.dnb-button--has-text.dnb-button--icon-position-left {
727726
padding-left: 0.5rem; }
728727
.dnb-button--has-text.dnb-button--icon-position-right {

‎packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/button-screenshot-test-js-button-screenshot-have-to-match-the-dnb-button-primary-screenshot-snapshot-1-fe381.snap.png‎

4.58 KB
Loading

‎packages/dnb-ui-lib/src/components/button/__tests__/__snapshots__/button-screenshot-test-js-button-screenshot-have-to-match-the-dnb-button-secondary-screenshot-snapshot-1-30d33.snap.png‎

5.61 KB
Loading

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

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,6 @@
4949
width: var(--button-icon-size);
5050
height: var(--button-icon-size);
5151
}
52-
53-
@supports not (-ms-ime-align: auto) {
54-
transform: translateY(-1px);
55-
}
5652
}
5753
&__text {
5854
color: inherit;
@@ -120,8 +116,10 @@
120116
width: auto;
121117
}
122118
&--has-text &__icon {
123-
margin: 0 0.5rem;
124119
margin: 0 calc(var(--button-icon-size) / 2);
120+
@supports not (-ms-ime-align: auto) {
121+
transform: translateY(-1px);
122+
}
125123
}
126124
// &--has-text#{&}--size-large &__icon {
127125
// margin: 0 var(--button-icon-size);

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -429,9 +429,6 @@ exports[`Dropdown scss have to match snapshot 1`] = `
429429
.dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
430430
width: var(--button-icon-size);
431431
height: var(--button-icon-size); }
432-
@supports not (-ms-ime-align: auto) {
433-
.dnb-button__icon {
434-
transform: translateY(-1px); } }
435432
.dnb-button__text {
436433
color: inherit; }
437434
.dnb-button--size-small {
@@ -476,8 +473,10 @@ exports[`Dropdown scss have to match snapshot 1`] = `
476473
padding-right: 1.5rem;
477474
width: auto; }
478475
.dnb-button--has-text .dnb-button__icon {
479-
margin: 0 0.5rem;
480476
margin: 0 calc(var(--button-icon-size) / 2); }
477+
@supports not (-ms-ime-align: auto) {
478+
.dnb-button--has-text .dnb-button__icon {
479+
transform: translateY(-1px); } }
481480
.dnb-button--has-text.dnb-button--icon-position-left {
482481
padding-left: 0.5rem; }
483482
.dnb-button--has-text.dnb-button--icon-position-right {

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -286,9 +286,6 @@ exports[`InputMasked scss have to match snapshot 1`] = `
286286
.dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
287287
width: var(--button-icon-size);
288288
height: var(--button-icon-size); }
289-
@supports not (-ms-ime-align: auto) {
290-
.dnb-button__icon {
291-
transform: translateY(-1px); } }
292289
.dnb-button__text {
293290
color: inherit; }
294291
.dnb-button--size-small {
@@ -333,8 +330,10 @@ exports[`InputMasked scss have to match snapshot 1`] = `
333330
padding-right: 1.5rem;
334331
width: auto; }
335332
.dnb-button--has-text .dnb-button__icon {
336-
margin: 0 0.5rem;
337333
margin: 0 calc(var(--button-icon-size) / 2); }
334+
@supports not (-ms-ime-align: auto) {
335+
.dnb-button--has-text .dnb-button__icon {
336+
transform: translateY(-1px); } }
338337
.dnb-button--has-text.dnb-button--icon-position-left {
339338
padding-left: 0.5rem; }
340339
.dnb-button--has-text.dnb-button--icon-position-right {

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -475,9 +475,6 @@ exports[`Input scss have to match snapshot 1`] = `
475475
.dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
476476
width: var(--button-icon-size);
477477
height: var(--button-icon-size); }
478-
@supports not (-ms-ime-align: auto) {
479-
.dnb-button__icon {
480-
transform: translateY(-1px); } }
481478
.dnb-button__text {
482479
color: inherit; }
483480
.dnb-button--size-small {
@@ -522,8 +519,10 @@ exports[`Input scss have to match snapshot 1`] = `
522519
padding-right: 1.5rem;
523520
width: auto; }
524521
.dnb-button--has-text .dnb-button__icon {
525-
margin: 0 0.5rem;
526522
margin: 0 calc(var(--button-icon-size) / 2); }
523+
@supports not (-ms-ime-align: auto) {
524+
.dnb-button--has-text .dnb-button__icon {
525+
transform: translateY(-1px); } }
527526
.dnb-button--has-text.dnb-button--icon-position-left {
528527
padding-left: 0.5rem; }
529528
.dnb-button--has-text.dnb-button--icon-position-right {

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -661,9 +661,6 @@ exports[`Modal scss have to match snapshot 1`] = `
661661
.dnb-button__icon:not(.dnb-icon) svg:not([width]):not([height]) {
662662
width: var(--button-icon-size);
663663
height: var(--button-icon-size); }
664-
@supports not (-ms-ime-align: auto) {
665-
.dnb-button__icon {
666-
transform: translateY(-1px); } }
667664
.dnb-button__text {
668665
color: inherit; }
669666
.dnb-button--size-small {
@@ -708,8 +705,10 @@ exports[`Modal scss have to match snapshot 1`] = `
708705
padding-right: 1.5rem;
709706
width: auto; }
710707
.dnb-button--has-text .dnb-button__icon {
711-
margin: 0 0.5rem;
712708
margin: 0 calc(var(--button-icon-size) / 2); }
709+
@supports not (-ms-ime-align: auto) {
710+
.dnb-button--has-text .dnb-button__icon {
711+
transform: translateY(-1px); } }
713712
.dnb-button--has-text.dnb-button--icon-position-left {
714713
padding-left: 0.5rem; }
715714
.dnb-button--has-text.dnb-button--icon-position-right {

0 commit comments

Comments
 (0)