fix: make sure #icon gets always a default size

dnbexperience · Jan 25, 2019 · 6cabcbd · 6cabcbd
1 parent 658d5cd
commit 6cabcbd
Show file tree

Hide file tree

Showing 15 changed files with 152 additions and 115 deletions.
diff --git a/packages/dnb-ui-lib/src/components/button/Button.js b/packages/dnb-ui-lib/src/components/button/Button.js
@@ -6,7 +6,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import Icon from '../icon-primary/IconPrimary'
+import IconPrimary from '../icon-primary/IconPrimary'
 import {
   registerElement,
   validateDOMAttributes,
@@ -63,7 +63,7 @@ export const defaultProps = {
   title: null,
   icon: null,
   icon_position: 'right',
-  icon_size: null,
+  icon_size: 'default',
   href: null,
   id: null,
   class: null,
@@ -232,7 +232,7 @@ class Content extends PureComponent {
     title: null,
     content: null,
     icon: null,
-    icon_size: null,
+    icon_size: 'default',
     isIconOnly: null
   }
   render() {
@@ -262,7 +262,7 @@ class Content extends PureComponent {
     if (icon) {
       const alt = title || text
       ret.push(
-        <Icon
+        <IconPrimary
           key="button-icon"
           className="dnb-button__icon"
           icon={icon}

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
@@ -77,7 +77,7 @@ exports[`Button component have to match default button snapshot 1`] = `
         <span
           aria-hidden="true"
           aria-label="This is a button title"
-          className="dnb-icon dnb-button__icon"
+          className="dnb-icon dnb-icon--default dnb-button__icon"
           role="img"
         >
           <question>
@@ -178,7 +178,7 @@ exports[`Button component have to match href="..." snapshot 1`] = `
         <span
           aria-hidden="true"
           aria-label="This is a button title"
-          className="dnb-icon dnb-button__icon"
+          className="dnb-icon dnb-icon--default dnb-button__icon"
           role="img"
         >
           <question>
@@ -553,24 +553,26 @@ exports[`Button scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -717,7 +719,7 @@ exports[`Button scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {

diff --git a/packages/dnb-ui-lib/src/components/button/style/_button.scss b/packages/dnb-ui-lib/src/components/button/style/_button.scss
@@ -169,7 +169,7 @@
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0;
+    line-height: inherit;
 
     @include hover(true) {
       box-shadow: none;

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
@@ -325,24 +325,26 @@ exports[`Dropdown scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -489,7 +491,7 @@ exports[`Dropdown scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {

diff --git a/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap b/...ges/dnb-ui-lib/src/components/form-status/__tests__/__snapshots__/FormStatus.test.js.snap
@@ -35,7 +35,7 @@ exports[`FormStatus component have to match snapshot 1`] = `
     >
       <span
         aria-label="exclamation"
-        className="dnb-icon"
+        className="dnb-icon dnb-icon--default"
         role="img"
       >
         <exclamation>

diff --git a/packages/dnb-ui-lib/src/components/icon/Icon.js b/packages/dnb-ui-lib/src/components/icon/Icon.js
@@ -216,6 +216,10 @@ export default class Icon extends PureComponent {
     // define all the svg parameters
     const svgParams = prepareSvgParams()
 
+    if (!sizeAsString) {
+      sizeAsString = 'default'
+    }
+
     return {
       svgParams,
       sizeAsInt,

diff --git a/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap b/packages/dnb-ui-lib/src/components/icon/__tests__/__snapshots__/Icon.test.js.snap
@@ -19,7 +19,7 @@ exports[`Icon component have to match snapshot 1`] = `
     aria-hidden="true"
     aria-label="alt"
     attributes="attributes"
-    className="dnb-icon dnb-icon--modifier class className"
+    className="dnb-icon dnb-icon--modifier dnb-icon--default class className"
     height="height"
     role="img"
     title="title"
@@ -191,24 +191,26 @@ exports[`Icon scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }

diff --git a/packages/dnb-ui-lib/src/components/icon/description.md b/packages/dnb-ui-lib/src/components/icon/description.md
@@ -4,6 +4,19 @@ The main icon component is basically a wrapper for what ever icon you place with
 
 There is also the [Primary Icon](/uilib/components/icon-primary/) which comes with all the [Primary Icons](/icons/primary) included.
 
+### Icon Sizes
+
+_Exists in the [Icon Library](/icons)_
+
+- **default** `1rem` (16px)
+- **medium** `1.5rem` (24px)
+
+_Additional Sizes_
+
+- **small** `0.75rem` (12px)
+- **large** `2rem` (32px)
+- **custom-size** will not be responsive. Width and Height is set as `pixels`
+
 ### More details
 
 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`.
diff --git a/packages/dnb-ui-lib/src/components/icon/style/_icon.scss b/packages/dnb-ui-lib/src/components/icon/style/_icon.scss
@@ -17,21 +17,24 @@
     stroke: currentColor;
   }
 
+  width: 1em;
+  height: 1em;
+
   &--small {
-    width: 0.8em;
-    height: 0.8em;
+    width: 0.75rem;
+    height: 0.75rem;
   }
   &--default {
-    width: 1em;
-    height: 1em;
+    width: 1rem;
+    height: 1rem;
   }
   &--medium {
-    width: 1.5em;
-    height: 1.5em;
+    width: 1.5rem;
+    height: 1.5rem;
   }
   &--large {
-    width: 2em;
-    height: 2em;
+    width: 2rem;
+    height: 2rem;
   }
   &--custom-size {
     width: auto; // only to feed the svg

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
@@ -181,24 +181,26 @@ exports[`InputMasked scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -345,7 +347,7 @@ exports[`InputMasked scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {

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
@@ -366,24 +366,26 @@ exports[`Input scss have to match snapshot 1`] = `
   display: inline;
   vertical-align: baseline;
   font-size: inherit;
-  line-height: 0; }
+  line-height: 0;
+  width: 1em;
+  height: 1em; }
   .dnb-icon svg:not([fill]),
   .dnb-icon svg [fill] {
     fill: currentColor; }
   .dnb-icon svg [stroke] {
     stroke: currentColor; }
   .dnb-icon--small {
-    width: 0.8em;
-    height: 0.8em; }
+    width: 0.75rem;
+    height: 0.75rem; }
   .dnb-icon--default {
-    width: 1em;
-    height: 1em; }
+    width: 1rem;
+    height: 1rem; }
   .dnb-icon--medium {
-    width: 1.5em;
-    height: 1.5em; }
+    width: 1.5rem;
+    height: 1.5rem; }
   .dnb-icon--large {
-    width: 2em;
-    height: 2em; }
+    width: 2rem;
+    height: 2rem; }
   .dnb-icon--custom-size {
     width: auto;
     height: auto; }
@@ -530,7 +532,7 @@ exports[`Input scss have to match snapshot 1`] = `
     color: inherit;
     font: inherit;
     text-align: inherit;
-    line-height: 0; }
+    line-height: inherit; }
     .no-touch .dnb-button--reset:hover[disabled] {
       cursor: not-allowed; }
     .no-touch .dnb-button--reset:hover:not([disabled]) {