Skip to content

Commit 6cabcbd

Browse files
tujoworkertujoworker
committed
fix: make sure #icon gets always a default size
1 parent 658d5cd commit 6cabcbd

15 files changed

Lines changed: 152 additions & 115 deletions

File tree

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
import React, { PureComponent } from 'react'
77
import PropTypes from 'prop-types'
88
import classnames from 'classnames'
9-
import Icon from '../icon-primary/IconPrimary'
9+
import IconPrimary from '../icon-primary/IconPrimary'
1010
import {
1111
registerElement,
1212
validateDOMAttributes,
@@ -63,7 +63,7 @@ export const defaultProps = {
6363
title: null,
6464
icon: null,
6565
icon_position: 'right',
66-
icon_size: null,
66+
icon_size: 'default',
6767
href: null,
6868
id: null,
6969
class: null,
@@ -232,7 +232,7 @@ class Content extends PureComponent {
232232
title: null,
233233
content: null,
234234
icon: null,
235-
icon_size: null,
235+
icon_size: 'default',
236236
isIconOnly: null
237237
}
238238
render() {
@@ -262,7 +262,7 @@ class Content extends PureComponent {
262262
if (icon) {
263263
const alt = title || text
264264
ret.push(
265-
<Icon
265+
<IconPrimary
266266
key="button-icon"
267267
className="dnb-button__icon"
268268
icon={icon}

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ exports[`Button component have to match default button snapshot 1`] = `
7777
<span
7878
aria-hidden="true"
7979
aria-label="This is a button title"
80-
className="dnb-icon dnb-button__icon"
80+
className="dnb-icon dnb-icon--default dnb-button__icon"
8181
role="img"
8282
>
8383
<question>
@@ -178,7 +178,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
178178
<span
179179
aria-hidden="true"
180180
aria-label="This is a button title"
181-
className="dnb-icon dnb-button__icon"
181+
className="dnb-icon dnb-icon--default dnb-button__icon"
182182
role="img"
183183
>
184184
<question>
@@ -553,24 +553,26 @@ exports[`Button scss have to match snapshot 1`] = `
553553
display: inline;
554554
vertical-align: baseline;
555555
font-size: inherit;
556-
line-height: 0; }
556+
line-height: 0;
557+
width: 1em;
558+
height: 1em; }
557559
.dnb-icon svg:not([fill]),
558560
.dnb-icon svg [fill] {
559561
fill: currentColor; }
560562
.dnb-icon svg [stroke] {
561563
stroke: currentColor; }
562564
.dnb-icon--small {
563-
width: 0.8em;
564-
height: 0.8em; }
565+
width: 0.75rem;
566+
height: 0.75rem; }
565567
.dnb-icon--default {
566-
width: 1em;
567-
height: 1em; }
568+
width: 1rem;
569+
height: 1rem; }
568570
.dnb-icon--medium {
569-
width: 1.5em;
570-
height: 1.5em; }
571+
width: 1.5rem;
572+
height: 1.5rem; }
571573
.dnb-icon--large {
572-
width: 2em;
573-
height: 2em; }
574+
width: 2rem;
575+
height: 2rem; }
574576
.dnb-icon--custom-size {
575577
width: auto;
576578
height: auto; }
@@ -717,7 +719,7 @@ exports[`Button scss have to match snapshot 1`] = `
717719
color: inherit;
718720
font: inherit;
719721
text-align: inherit;
720-
line-height: 0; }
722+
line-height: inherit; }
721723
.no-touch .dnb-button--reset:hover[disabled] {
722724
cursor: not-allowed; }
723725
.no-touch .dnb-button--reset:hover:not([disabled]) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@
169169
color: inherit;
170170
font: inherit;
171171
text-align: inherit;
172-
line-height: 0;
172+
line-height: inherit;
173173

174174
@include hover(true) {
175175
box-shadow: none;

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -325,24 +325,26 @@ exports[`Dropdown scss have to match snapshot 1`] = `
325325
display: inline;
326326
vertical-align: baseline;
327327
font-size: inherit;
328-
line-height: 0; }
328+
line-height: 0;
329+
width: 1em;
330+
height: 1em; }
329331
.dnb-icon svg:not([fill]),
330332
.dnb-icon svg [fill] {
331333
fill: currentColor; }
332334
.dnb-icon svg [stroke] {
333335
stroke: currentColor; }
334336
.dnb-icon--small {
335-
width: 0.8em;
336-
height: 0.8em; }
337+
width: 0.75rem;
338+
height: 0.75rem; }
337339
.dnb-icon--default {
338-
width: 1em;
339-
height: 1em; }
340+
width: 1rem;
341+
height: 1rem; }
340342
.dnb-icon--medium {
341-
width: 1.5em;
342-
height: 1.5em; }
343+
width: 1.5rem;
344+
height: 1.5rem; }
343345
.dnb-icon--large {
344-
width: 2em;
345-
height: 2em; }
346+
width: 2rem;
347+
height: 2rem; }
346348
.dnb-icon--custom-size {
347349
width: auto;
348350
height: auto; }
@@ -489,7 +491,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
489491
color: inherit;
490492
font: inherit;
491493
text-align: inherit;
492-
line-height: 0; }
494+
line-height: inherit; }
493495
.no-touch .dnb-button--reset:hover[disabled] {
494496
cursor: not-allowed; }
495497
.no-touch .dnb-button--reset:hover:not([disabled]) {

‎packages/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
3535
>
3636
<span
3737
aria-label="exclamation"
38-
className="dnb-icon"
38+
className="dnb-icon dnb-icon--default"
3939
role="img"
4040
>
4141
<exclamation>

‎packages/dnb-ui-lib/src/components/icon/Icon.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,10 @@ export default class Icon extends PureComponent {
216216
// define all the svg parameters
217217
const svgParams = prepareSvgParams()
218218

219+
if (!sizeAsString) {
220+
sizeAsString = 'default'
221+
}
222+
219223
return {
220224
svgParams,
221225
sizeAsInt,

‎packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ exports[`Icon component have to match snapshot 1`] = `
1919
aria-hidden="true"
2020
aria-label="alt"
2121
attributes="attributes"
22-
className="dnb-icon dnb-icon--modifier class className"
22+
className="dnb-icon dnb-icon--modifier dnb-icon--default class className"
2323
height="height"
2424
role="img"
2525
title="title"
@@ -191,24 +191,26 @@ exports[`Icon scss have to match snapshot 1`] = `
191191
display: inline;
192192
vertical-align: baseline;
193193
font-size: inherit;
194-
line-height: 0; }
194+
line-height: 0;
195+
width: 1em;
196+
height: 1em; }
195197
.dnb-icon svg:not([fill]),
196198
.dnb-icon svg [fill] {
197199
fill: currentColor; }
198200
.dnb-icon svg [stroke] {
199201
stroke: currentColor; }
200202
.dnb-icon--small {
201-
width: 0.8em;
202-
height: 0.8em; }
203+
width: 0.75rem;
204+
height: 0.75rem; }
203205
.dnb-icon--default {
204-
width: 1em;
205-
height: 1em; }
206+
width: 1rem;
207+
height: 1rem; }
206208
.dnb-icon--medium {
207-
width: 1.5em;
208-
height: 1.5em; }
209+
width: 1.5rem;
210+
height: 1.5rem; }
209211
.dnb-icon--large {
210-
width: 2em;
211-
height: 2em; }
212+
width: 2rem;
213+
height: 2rem; }
212214
.dnb-icon--custom-size {
213215
width: auto;
214216
height: auto; }

‎packages/dnb-ui-lib/src/components/icon/description.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,19 @@ The main icon component is basically a wrapper for what ever icon you place with
44

55
There is also the [Primary Icon](/uilib/components/icon-primary/) which comes with all the [Primary Icons](/icons/primary) included.
66

7+
### Icon Sizes
8+
9+
_Exists in the [Icon Library](/icons)_
10+
11+
- **default** `1rem` (16px)
12+
- **medium** `1.5rem` (24px)
13+
14+
_Additional Sizes_
15+
16+
- **small** `0.75rem` (12px)
17+
- **large** `2rem` (32px)
18+
- **custom-size** will not be responsive. Width and Height is set as `pixels`
19+
720
### More details
821

922
To make it clear that all the "most common" icons are loaded at once, we have an additional icon component, named `IconPrimary` or `dnb-icon-primary`.

‎packages/dnb-ui-lib/src/components/icon/style/_icon.scss‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,21 +17,24 @@
1717
stroke: currentColor;
1818
}
1919

20+
width: 1em;
21+
height: 1em;
22+
2023
&--small {
21-
width: 0.8em;
22-
height: 0.8em;
24+
width: 0.75rem;
25+
height: 0.75rem;
2326
}
2427
&--default {
25-
width: 1em;
26-
height: 1em;
28+
width: 1rem;
29+
height: 1rem;
2730
}
2831
&--medium {
29-
width: 1.5em;
30-
height: 1.5em;
32+
width: 1.5rem;
33+
height: 1.5rem;
3134
}
3235
&--large {
33-
width: 2em;
34-
height: 2em;
36+
width: 2rem;
37+
height: 2rem;
3538
}
3639
&--custom-size {
3740
width: auto; // only to feed the svg

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -181,24 +181,26 @@ exports[`InputMasked scss have to match snapshot 1`] = `
181181
display: inline;
182182
vertical-align: baseline;
183183
font-size: inherit;
184-
line-height: 0; }
184+
line-height: 0;
185+
width: 1em;
186+
height: 1em; }
185187
.dnb-icon svg:not([fill]),
186188
.dnb-icon svg [fill] {
187189
fill: currentColor; }
188190
.dnb-icon svg [stroke] {
189191
stroke: currentColor; }
190192
.dnb-icon--small {
191-
width: 0.8em;
192-
height: 0.8em; }
193+
width: 0.75rem;
194+
height: 0.75rem; }
193195
.dnb-icon--default {
194-
width: 1em;
195-
height: 1em; }
196+
width: 1rem;
197+
height: 1rem; }
196198
.dnb-icon--medium {
197-
width: 1.5em;
198-
height: 1.5em; }
199+
width: 1.5rem;
200+
height: 1.5rem; }
199201
.dnb-icon--large {
200-
width: 2em;
201-
height: 2em; }
202+
width: 2rem;
203+
height: 2rem; }
202204
.dnb-icon--custom-size {
203205
width: auto;
204206
height: auto; }
@@ -345,7 +347,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
345347
color: inherit;
346348
font: inherit;
347349
text-align: inherit;
348-
line-height: 0; }
350+
line-height: inherit; }
349351
.no-touch .dnb-button--reset:hover[disabled] {
350352
cursor: not-allowed; }
351353
.no-touch .dnb-button--reset:hover:not([disabled]) {

0 commit comments

Comments
 (0)